/*--------------------------------------------------------------

You must declare the path, alt text and 
links for the slideshow in the page. 
JS EXAMPLE:
	var heroPath = new Array();
	heroPath[0] = "/images/home/slides/home-hero-0.jpg";
	heroPath[1] = "/images/home/slides/home-hero-1.jpg";
			
	var heroAlt = new Array();
	heroAlt[0] = "Alt Text 1";
  heroAlt[1] = "Alt Text 2";

	
	var heroLink = new Array();
	heroLink[0] = "http://www.link1.com";
  heroLink[1] = "http://www.link2.com/";

 	//first image is loaded when the page loads (true) 
	//next images will not be loaded (false), 
	//end with 'notset' to stop loading.
	var heroLoaded = new Array(true,false,'notset');
	
HTML EXAMPLE:
<div id="heroslide0" class="heroslide"><a href="http://www.link.com"><img src="/images/home/slides/home-hero-0.jpg" alt="Alt Text 1" title="Alt Text 1" /></a></div>

-----------------------------------------------------------*/
$(function() {
  $.ajaxSetup({cache: false});
});

var heroImg = new Array();
var loadHeroX = 1;
var loadHeroN = 0;
//Load all the images into divs for the slideshow
var loadSlideShow = function(){
	
	if(loadHeroX < heroPath.length) { 
		loadHeroN = loadHeroX - 1;
		nextHTML = '<div id="heroslide'+loadHeroX+'" class="heroslide"></div>';
		
		//append the next slide div
		$("#heroslide"+loadHeroN).after(nextHTML);
		
		heroImg[loadHeroX] = new Image();
		$(heroImg[loadHeroX]).load(function() { 
			//happens after the image is loaded
			//alert(x);
			$("#heroslide"+loadHeroX).html(this);
			if(heroLink[loadHeroX] !='') { 
				//alert(this);
				$(this).wrap('<a href="' + heroLink[loadHeroX] + '"></a>');
			}	
			$(this).attr("alt",heroAlt[loadHeroX]);
			$(this).attr("title",heroAlt[loadHeroX]);
			heroLoaded[loadHeroX] = true;
			loadHeroX = loadHeroX+1;
			loadSlideShow();
		}).attr('src',heroPath[loadHeroX]).error(function () {
			 alert('there was an error loading the image: '+heroPath[loadHeroX]);
		});
	}
}

var lastDiv = heroPath.length - 1;
var heroIdx = 1;

//Begin the crossfading slideshow action
var slideShowAction = function() { 
	iPrev = heroIdx-1;
	switch (heroLoaded[heroIdx]){
	case true:
		//Next image is loaded - fade to it
		var t = setTimeout(function(){
			$("#heroslide"+heroIdx).css("display","none");
			$("#heroslide"+heroIdx).css("z-index","30");
			$("#heroslide"+heroIdx).fadeIn("slow",function(){
				$("#heroslide"+iPrev).css("display","none");
				$("#heroslide"+iPrev).css("z-index","5");
				heroIdx = heroIdx+1;
				slideShowAction();
			});
		}, 5000);
		break;
	case false:
		//Next image is not loaded - try again
		var t = setTimeout(function(){ slideShowAction(); }, 250);
		break;
	case 'notset':
		//End of the images - start over
		var t = setTimeout(function(){
			$("#heroslide0").css("display","none");
			$("#heroslide0").css("z-index","40");
			$("#heroslide0").fadeIn("slow",function(){
				$("#heroslide"+lastDiv).css("display","none");
				$("#heroslide"+lastDiv).css("z-index","5");
				$("#heroslide0").css("z-index","30");
				heroIdx = 1;																	 
				slideShowAction();
			});
		}, 5000);
		break;
	}
}

//Load the slideshow Images and start the slideshow once the window loads
	$(window).load(function(){
		if(heroPath.length > 1) {
			loadSlideShow();
			slideShowAction();
		}
	});