/**
	Javascript function for ATS site
	2010 - Incite Marketing
	
	Author: Ivan Soto
	ivan@incitemarketing.ca
	
*/

$(document).ready(function(){
	
	// setup first.
	 transitionTime			= 4500; // How long an image stays in before going to the next one.
	 selected 				= 1; // first one needs to be selected
	 numImages  			= 3; // Number of images we are going to be using.
	 firstImage 			= $('.bg-image'); // first image
	 imgStr 				= [];
	
	 
	// the tag to be used to add images	
	imgStr.push('<div class="bg-image" id="image');
	imgStr.push('">.</div>');
	
	// Doing the loop baby!
	//for(i = 2; i <= numImages; i++){
	//	$(firstImage).after(imgStr[0] + i + imgStr[1]);
	//}
	
	panes = $('.middle_image');
	//console.log(panes.length);
	// let's hide all the but the first
	for(i = 1; i <= panes.length; i++){
		$('.middle_image:eq('+i+')').hide();
		
	} 
	
	interval = setInterval('rotatePanes()', transitionTime);	
	
});	


function rotatePanes(){
	prevSelected = selected;
	
	for(i=1;i<= numImages; i++) {
		$('#image' + i).css( 'zIndex', 0 );
	}

	selected++;
	if (selected>numImages)
		selected = 1;

	$('#image' + selected).css('zIndex', 1);

		
	$('#image' + selected).fadeIn(2000, function(){
		$('#image' + prevSelected).hide();
	});
	
	
	
	
}