image_fader = function(image_holder, thumbnail_holder, default_holder){
  
  var image_holder = $(image_holder);
  var thumbnail_holder = $(thumbnail_holder);
  var default_holder = $(default_holder);
  var closer = image_holder.next()
  var images = image_holder.children('li')
  
  // Close button click action
  closer.click(function(e){
    // Hide images and fade out the image holder, and the close button.
    images.hide()
    image_holder.fadeOut()
    closer.fadeOut()
    thumbnail_holder.find('li.current').removeClass('current');
    setTimeout(function(){
      default_holder.animate({height: '401px'}); // Back to small
    }, 0)
    image_holder.find('.shown-screenshot').removeClass('shown-screenshot').fadeOut() // Remove the class
  })
  
  default_holder.css({height: '401px'});  
  
  // Fade out the images themselves
  images.fadeTo(0, 0);
  
  thumbnail_holder.find('li a').click(function(e){ 
    // Stop doing what you're doing!
    e.preventDefault() 
    
    // Make it the right height.
    default_holder.animate({height: '451px'});
    
    // Show the holder and the close button
    image_holder.show()
    closer.show()
    
    // We need this to find out what we're showing
    var id = $(this).attr('rel'); 
    var oldfull = image_holder.children('.shown-screenshot');
    oldfull.removeClass('shown-screenshot');
    
    // Find the full screenshot for this thumbnail.
    var full = $('#'+id+'_full');
    if(full.attr('id') == oldfull.attr('id')){
      return false
    }
    
    thumbnail_holder.find('li.current').removeClass('current');
    $(this).parent().addClass("current");
    
    time = 500;
    
    // Fade and show at the same time! setTimeout makes for synchronicity.
    setTimeout(function(){
      full.addClass('shown-screenshot').show().fadeTo(0, 0).fadeTo(time, 1).addClass('shown-screenshot');
    }, 0)
    // If there's an old one, show that at the same time.
    oldfull.fadeTo(500, 0);

  });

  // Get ready! Hide hidden stuff!
  closer.hide();
  image_holder.hide();
  
  return this;
}

$(document).ready(function(){
  fade = image_fader('#screenshots', '#thumbs', '#default_container')
})
