/**
 * Convert a block-level element to a "panning gallery". Lots of chained
 * callbacks mean that we can pause before each animation, after each animation,
 * and have a faded transition.
 *
 * @author Adrian Hardy / Fuzzee.co.uk
 */
jQuery.fn.galleryPan = function(images) {
   $(this).empty();
   var currentImage = images.shift();
   var newTag = '<img src="'+currentImage+'"/>';
   $(newTag).appendTo($(this)) // attach the new img to the DOM
            .css({opacity:0})  // make it invisible
            .load(function(){  // onload :
               $(this).animate({opacity:1},1000,'linear',function(){                         // make visible and then
                     var img = $(this);
                     setTimeout(function(){                                                  // pause for 1 sec, after which
                        img.animate({top:"-70%",left:"-50%"},15000, 'linear', function(){    // animate across the page
                           setTimeout(function(){                                            // pause, after which
                              img.animate({opacity:0}, 1000,'linear',function(){             // fade out
                                 images.push(currentImage);
                                 img.parent().galleryPan(images);
                              });
                           },1000);                                                          // (post animate pause)
                        });
                     },2000);                                                                // (pre animate pause)
                  });
            });
};