/* 
  $(document).ready(function() {
    $('#project-screenshots').panAndFade({ panPercent: 0.5 });
  });
*/

(function($) {
  $.fn.panAndFade = function(opts) {
    var container  = this,
        thumbnails = container.find('li a'),
        panTimeoutId,
        options    = $.extend({
          panSleep:    1750, // in ms
          bottomSleep: 1500, // in ms
          panSpeed:    30,   // pixels per second
          crossfade:   2000  // duration in ms
        }, (opts || {}));
    
    // Load fullsize images for each thumbnail link
    $.each(thumbnails, function() {
      var imgDiv = $('<img src="' + $(this).attr('href') + '" />');
      
      imgDiv.data('thumbnail', $(this).parent());
      $(this).data('fullsize', imgDiv);
      
      container.find('.screenshot').prepend(imgDiv);
    });
    
    startPanning();
    
    // When you click a thumbnail...
    thumbnails.click(function() {
      clearTimeout(panTimeoutId);

      var current = container.find('.screenshot img:last').stop();
      current.before($(this).data('fullsize'));
      
      fadeBetween();
      return false;
    });
  
    return container;
    
    function fadeBetween() {
      var elem = container.find('.screenshot img:last');
      elem.fadeOut(options.crossfade, function() { 
        elem.css({ top: 0 });
        elem.parent().prepend(elem);
        elem.show();
        startPanning();
      });
    }
    
    function startPanning() {
      $('.thumbnail.active').removeClass('active');
      
      var elem = container.find('.screenshot img:last');
      elem.data('thumbnail').addClass('active');
      
      panTimeoutId = setTimeout(function() {
        var stopPosition = elem.height() - 400,
            panDuration  = Math.round(stopPosition / options.panSpeed) * 1000;

        elem.animate({ top: -stopPosition }, panDuration, "linear", function() {
          setTimeout(fadeBetween, options.bottomSleep);
        });
      }, options.panSleep);
    }
  };
})(jQuery);