//////////////////////////////////////////////////////////////////////
// JQuery Multiple Slide Show - Created November 26th, 2008 //
/* Automatically dissolves between images.  Allows users to jump around
   to different images by clicking on thumbnails of the images.  If the
   user clicks on a thumbnail the automatic rotation of images stops. 
   Includes "Previous" and "Next" functionality.  Allows for captions
   to be displayed as images are selected.  Can support multiple slide
   shows on the same page. 

   REQUIRED ELEMENTS:
   - jQuery
   
   - An element wrapped around the main images.  The images should be 
     absolutely positioned so that they will appear stacked.
   
   - An element wrapped around the thumbnail images wrapped in anchor
     tags.  
	 
   - The anchor tag on each thumbnail must point to the full sized 
     image for the thumbnail.  You must use the same path to the full 
	 sized image that is used to show the full size image shown above.

   OPTIONAL ELEMENTS:	 
   - Anchor tag around a previous button. 
   
   - Anchor tag around a next button.
   
   - Element containing the caption for the main image.
   
   - A class to highlight active thumbnails.
   
   The slideshow can be called like this: */
   

   
/* To create a second slide show just create a second variable (eg: slideShow2)
   and assign a new SlideShow object to it.  You'll need to have set up separate
   wrapper elements and buttons so that they don't cross reference each other.  */
	
function SlideShow(va,de,sl,th,ca,pr,ne,ac,fa,cu) {	
	var varName = va; //The name of the variable for this particular instance of the SlideShow object
	var delay=de; //milleseconds of delay before going to next slide (3000 = 3 seconds)
	var captionID = ca; //the ID of the element where the caption should go
	var slideID = sl; //the ID of the element wrapped around the main images
	var thumbsID = th; //the ID of the element wrapped around the thumb images
	var prevID = pr; //the ID of the "previous" link
	var nextID = ne; //the ID of the "next" link
	var activeClass = ac; //class name to assign to an active thumbnail
	var fadeSpeed = fa; //speed for a fade - milleseconds or JQuery default values
	var cutOrFade = cu; //Use "cut" to cut in captions, "fade" to fade in captions, anything else for no caption
	
	var timeKeeper;
	var timer = function() {autoFlip();} // this is used so that the setTimeout references the correct SlideShow object.
		
	// loader function
	$(document).ready(function() {
		// start the auto-rotation	
		timeKeeper = setTimeout(timer,delay);
		// assign function to all thumbnails to display the selected thumbnail.	
		$("#"+thumbsID+" a").click(function(){
			clearTimeout(timeKeeper);
			var slideImgs = $("#"+slideID+" img");
			for(var i=0;i<slideImgs.length;i++){
				$("#"+slideID+" img:first").hide().appendTo("#"+slideID);
				if($("#"+slideID+" img:last").attr('src')==$(this).attr('href')) {
					$("#"+slideID+" img:last").fadeIn(fadeSpeed);	
					highlightThumb();				
					break;
				}
			}
			return false;
		});	
		// assign the previous and next functions	
		$("#"+prevID).click(function(){eval(varName).flipPrev(); return false;});	
		$("#"+nextID).click(function(){eval(varName).flipNext(); return false;});
		// make the first last to get the slideshow ready
		$("#"+slideID+" img:first").appendTo("#"+slideID);
		// highlight the first thumbnail
		highlightThumb();
	});
	
	// timer function for auto-rotation of images
	function autoFlip() {
		flipNext();
		timeKeeper = setTimeout(timer,delay);
	}
	
	// function to go to next image in list of images
	function flipNext() {
		clearTimeout(timeKeeper);
		$("#"+slideID+" img:first").hide().appendTo("#"+slideID).fadeIn(fadeSpeed);
		highlightThumb();
	}
	this.flipNext = flipNext;
	
	// function to go to previous image in list of images
	function flipPrev() {
		clearTimeout(timeKeeper);
		$("#"+slideID+" img:last").prev().show();
		$("#"+slideID+" img:last").fadeOut(fadeSpeed,function(){
				$("#"+slideID+" img:last").prependTo("#"+slideID);
				highlightThumb();
			}
		);
	}
	this.flipPrev = flipPrev;
	
	// function to load caption with a fade
	function fadeCaption() {
		$("#"+captionID).fadeOut(fadeSpeed,function(){
				$("#"+captionID).html("").html($("#"+thumbsID+" a."+activeClass).attr("caption")).fadeIn(fadeSpeed);
			});
	}
	
	// function to load caption with a cut
	function cutCaption() {
		$("#"+captionID).html("").html($("#"+thumbsID+" a."+activeClass).attr("caption"));
	}
	
	// function to assing the active class to thumbnails, then calls the caption loading function
	function highlightThumb() {
		$("#"+thumbsID+" a").removeClass(activeClass).filter(function (index) {return $("#"+slideID+" img:last").attr("src") == $(this).attr("href")}).addClass(activeClass);
		if(cutOrFade=="fade"){fadeCaption();}else if(cutOrFade=="cut"){cutCaption();}		
	}
}