/********************************************************************************
 * EmbeddedSlideshow.js
 * 
 * Shawn Driscoll
 * June 22, 2010
 * 
 * Creates an embedded slideshow using jQuery for the action.
 *******************************************************************************/

/********************************************************************************
 * variable arSlides should be defined in the calling code
 * as an array of image paths
 *******************************************************************************/

/********************************************************************************
 * Variables
 *******************************************************************************/
bImageUp = false;
bLastImage = "";
nCurrent = 0;
nPreloadIndex = 0;
nStageHeight = 480;		/* defined in css and html layout */
nStageWidth = 569;		/* defined in css and html layout */
nimageDelay = 1500;
nimageFade = 500;


/********************************************************************************
 * runShow
 * Entry point for show once preloading is complete. Pauses the show with the
 * current slide up for the duration specified by nimageDelay.
 *******************************************************************************/
function runShow() {
	////
	// either the show is running already or not
	if(bImageUp) {
		// continue show
		window.setTimeout("hideLast()",nimageDelay);
	}
	else {
		// start show
		bImageUp = true;
		showNext();
	}
}

/********************************************************************************
 * hideLast
 * Hides the last image. Calls showNext when complete.
 *******************************************************************************/
function hideLast() {

	// hide image
	$('.slideshow-stage').animate({
		opacity: 0
	}, nimageFade, 'swing', function() {
		nCurrent++;
		if(nCurrent > arSlides.length-1) {
			nCurrent = 0;
		}
		showNext();
	});
	
}

/********************************************************************************
 * showNext
 * Displays the next image in the slideshow. Calls runShow when complete.
 *******************************************************************************/
function showNext() {
	
	//bImageUp = true;
	var nHeight = $('#slide'+nCurrent).outerHeight();
	var nWidth = $('#slide'+nCurrent).outerWidth();
	var nOffset = 0;
	var nOffsetW = 0;
	
	// figure out if the images to be displayed is taller than the 
	// stage
	if(nHeight > nStageHeight) {
		nOffset = -1 * (nHeight - nStageHeight)*1/3;
	}
	if(nWidth > nStageWidth) {
		nOffsetW = -1 * (nWidth - nStageWidth)/2;
	}
	
	var stageCss = {
		backgroundPosition: nOffsetW + 'px ' + nOffset + 'px',
		opacity: 0,
		backgroundImage: 'url(' + arSlides[nCurrent] + ')'
	};

	// option to have images crossfade
	var wrapCss = {
			backgroundPosition: nOffsetW + 'px ' + nOffset + 'px',
			backgroundImage: 'url(' + arSlides[nCurrent] + ')'
	};

	// apply css to stage
	$('.slideshow-stage').css(stageCss);
	// animate stage
	$('.slideshow-stage').animate({
		opacity: 1
	},nimageFade, 'swing', function() {
		// option to have images crossfade
		$('.slideshow-stage-wrap').css(wrapCss);
		runShow();
	});
	
}

function beginPreload() {
	
	var nImages = arSlides.length;
	var i = 0;
	var szId = "";
	
	for(i=0; i<nImages; i++) {
		szId = "slide"+i;
		$('<img src="' + arSlides[i] + '" id="' + szId + '" />').appendTo('.slideshow-preload');	
	}
	
	if(nImages > 3) {
		$('#slide2').load(function() {
			runShow();
		});
	}
	else {
		$('#slide0').load(function() {
			runShow();
		});
	}
	
}


/********************************************************************************
 * recursivePreload
 * Recursivly calls itself preloading images one at a time. Once enough
 * have been loaded the show is started.
 *******************************************************************************/
function recursivePreload() {

	if(nPreloadIndex < nTotalSlides) {
		var szId = "slide"+nPreloadIndex;
		$('<img src="' + arSlides[nPreloadIndex] + '" id="' + szId + '" />').appendTo('.slideshow-preload');

		// increment preload index
		nPreloadIndex++;

		//
		// start slideshow if enough images have preloaded otherwise just continue
		// preloading
		if(nTotalSlides > 4 && nPreloadIndex == 3) {
			// onload repeat!
			$('#'+szId).load(function() {
				runShow();
				recursivePreload();
			});

		}
		else if(nTotalSlides <= 4 && nPreloadIndex == 1) {
			// onload repeat!
			$('#'+szId).load(function() {
				runShow();
				recursivePreload();
			});

		}
		else {
			// onload repeat!
			$('#'+szId).load(function() {
				recursivePreload();
			});

		}

	}


}