/********************************************************************
					home.js
*********************************************************************
MODIFIED: 		2011-12-02
DOCUMENTATION: 	bryce.fisher@inbox.com
AUTHOR: 			unknown
DESCRIPTION: 
	Handles homepage specific jQuery functionality. Use January through 
	November

NOTE: 
	For Christmas homepage version change the home page template 
	(/simpleCMS/templates/index.tpl.php) to use home.holiday.js instead.
********************************************************************/

jQuery(document).ready(function($) {
	//Currently this code runs the slider on the homepage then displays an overlay on the last hero image
	
	var images = $('#showcase_images > img'); //this variable grabs the main "hero" images on the homepage
	var i = 0; //current hero image number
	var c = images.length; //how many hero images?
	
	
	/*******************************************
	*showImage()
	*
	*I *think* that this causes the hero images to fade in. It shows all images once, no looping, then calls the overlay image function
	*NB: This works, not sure why or how
	*
	*@param: none
	*@return: null
	********************************************/
	function showImage() {
		var shown = images.filter('.shown'); //get current hero image
		shown.fadeOut(2000).removeClass('shown'); //how fast fadeOut happens in miliseconds
		var img = images.eq(i); //get next image
		img.fadeIn(2000).addClass('shown'); //how fast the next image fades in
		img.addClass('shown'); //prep for next transition
		i++; //go to next image
		
		//This if statement cause each image to be shown only once, then causes overlay image to appear on last hero image.
		if (i<c) { 
			setTimeout(showImage, 3000); //time between hero image transitions
		} else {
			startAnimation(); //make overlay appear
		}
	}
	
	
	/*******************************************
	*startAnimation()
	*
	*description: causes overlay images to appear on top of the hero image at specific times and places.
	*NB: this works, but I don't really know how or why
	*
	*@param: none
	*@return: none
	**********************************************/
	function startAnimation() {
		var anim = $('#showcase_animation img'); //select the images to display on top of the hero image
		
		//I don't totally understand what this jQuery means (anim.eq(n) == which transition we're on??), but 
		//the css controls where the overlay images appear relative to the hero image. 
		anim.eq(0).css('top', 112);
		anim.eq(0).css('left', 49);
		anim.eq(1).css('top', 205);
		anim.eq(1).css('left', 111);
		anim.eq(2).css('top', 241); //Only this one actually does anything
		anim.eq(2).css('left', 545); //Only this one actually does anything
		
		//Not sure why this is here, but doesn't cause problems, but I don't think it does anything
		//GUESS: This *APPEARS* to be timed to run after the ****FIRST**** transition of hero-image 
		setTimeout(function() {
			var img = anim.eq(0);
			// img.css('opacity', 0);
			// 			img.show();
			// 			img.css('left', parseInt(img.css('left')) - 30);
			// 			img.animate({
			// 				left: '+=30',
			// 				opacity: 1
			// 			}, 1500);
		}, 1000);
		
		//Not sure why this is here, but doesn't cause problems, but I don't think it does anything
		//GUESS: This *APPEARS* to be timed to run after the ****SECOND***** transition of hero-image 
		setTimeout(function() {
			var img = anim.eq(1);
			// img.css('opacity', 0);
			// img.show();
			// img.css('left', parseInt(img.css('left')) + 30);
			// img.animate({
			// 	left: '-=30',
			// 	opacity: 1
			// }, 1500);
		}, 2200);
		
		//////////////////////////////////////////////////////////////////////
		//This code IS definitely executed after the ******THIRD***** transition
		setTimeout(function() {
			var img = anim.eq(2); //GUESS: pick the third overlay image?
			img.show(); //display the overlay image
		}, 2600); //When the overlay image appears 
		//////////////////////////////////////////////////////////////////////
	}
	
	//Run the main hero-transition function
	showImage();
});