(function(){
  
  module("image", orient);
  
  function orient(viewer){
    var img = viewer.find("img").hide(),
        image_r = (img.width() / img.height()),
        view_r  = (viewer.width() / viewer.height()),
        o   = ["100%", "auto"];
    
    img.show();
    o = (image_r >= view_r) ? o : o.reverse()
    img.css({width:o[0], height:o[1]});
    
  }
  
})();

(function(){
  module("dock", init, next_image);
  
  var dock,
      dock_table,
      thumbnails,
      viewer,
      title,
      timer,
      is_timer_running,
      frame,
      thumbnail_selected,
      slide_show_speed,
      images = {},
      image_position =0,
      thumbnail_disabled = false;
  
  //////////////////////////////////////////////////////////////////////////////
  function init(){
    var width;
    
    stop_timer();
    
    dock       = $("#dock");
    dock_table = $("table.images");
    viewer     = $("#viewer");
    thumbnails = dock_table.find("td");
    frame      = $("#frame");
    title      = $("#title");
    
    slide_show_speed = $("#viewer").attr("speed") * 1000;
    
    thumbnails.click(function(){
      if(!thumbnail_disabled){stop_timer(); show(this);}
    })    
    
    resize();
    is_timer_running = true;
    next_image();
    
    setTimeout(dock_size, 200);
  }
  
  //////////////////////////////////////////////////////////////////////////////
  function dock_size(){
    var total_width = 0,
        img,
        t;

    thumbnails.each(function(){total_width += $(this).find("img").width()});

    thumbnails.each(function(){
      t = $(this);
      img = t.find("img");
      
      t.css({width: (100 * (img.width()/total_width))+"%"})  
    });
    
    // IE requires the size to be explicitly set
    dock_table.css({width:total_width});    
    resize();
  }
  
  //////////////////////////////////////////////////////////////////////////////
  function show(e){
    var id = e.id.replace(/image_/,"");
    
    if(thumbnail_selected){ thumbnail_selected.fadeTo(200, 1)}
    thumbnail_selected = $(e);
    thumbnail_selected.fadeTo(200, 0.5);
    if(images[id] == null){
      $.get("/images/"+id, null, function(d){
        images[id] = d;
        draw_image(d);
      })
    } else {
      draw_image(images[id])
    }
    
  }
  
  //////////////////////////////////////////////////////////////////////////////
  function draw_image(html){
    viewer.fadeOut(200, 
      function(){
        viewer.html(html).fadeIn(200);        
        viewer.find("img").load(function(){image.orient(viewer)})
        position(true);
      });
    if(is_timer_running){start_timer()}
  }
  
  //////////////////////////////////////////////////////////////////////////////
  function position(animate){
    if(thumbnail_selected == null) return false;
    
    var left  = thumbnail_selected.offset().left,
        right = thumbnail_selected.offset().left + thumbnail_selected.width(),
        p = parseInt(dock_table.css("left")),
        w = $(window).width(),
        d;
      
    p = (isNaN(p)) ? 0 : p;         
    if(left < -1){ d = left;}
    if(right > w){ d = right - w}
    if(d){ 
      if(animate){
        dock_table.stop(true).animate({left:p-d}, 200)
      } else {
        dock_table.stop(true).css({left:p-d})
      }
    }
    image.orient(viewer);  
  }
  
  //////////////////////////////////////////////////////////////////////////////
  function resize(){ 
    var h = $(window).height(),
        w = $(window).width();
    
    dock_table.width() > dock.width() ? enable_scroll() : disable_scroll();
      
    dock_table.css({left:0})
    frame.height(h);
    viewer.height(frame.height()-dock_table.height()-title.height());
    viewer.width(w);
    position(false);
  }
  
  //////////////////////////////////////////////////////////////////////////////
  function enable_scroll(){
    var w = $(window).width(),
        x = ((dock_table.width()+16)-w);

    $(".drag_parent").css({
        width:(dock_table.width()+x)+"px", 
        left:-1*(x), background:"#F00"});
        
    $(".show_drag").fadeIn(500)

    dock_table.addClass("draggable").
        draggable("enable").
        draggable({ 
          start:function(){thumbnail_disabled = true}, 
          stop:function(){setTimeout(function(){thumbnail_disabled = false}, 10)},
          axis: 'x', containment: "parent" })
  }
  
  //////////////////////////////////////////////////////////////////////////////
  function disable_scroll(){
    $(".show_drag").fadeOut(500);
    $(".drag_parent").css({width:"100%", left:"0px", background:"#FFF"})

    dock_table.removeClass("draggable").draggable("disable");
    dock_table.css({left:0});
  }
  
  //////////////////////////////////////////////////////////////////////////////
  function start_timer(){    
    is_timer_running = true;
    timer = setTimeout(function(){
      if(is_timer_running){next_image()}}, 
      slide_show_speed);
  }
  
  //////////////////////////////////////////////////////////////////////////////
  function next_image(){
    if(image_position > thumbnails.length-1){ image_position = 0}
    show(thumbnails[image_position]); image_position++;
  }
  
  //////////////////////////////////////////////////////////////////////////////
  function stop_timer(){
    clearTimeout(timer);
    is_timer_running = false;
  }
  
  $(document).ready(init);
  $(window).resize(resize);
  
})();