var divArray = new Array();
var navArray = new Array();

var divNumber=0;
var currentImage=0;
var selectedImage=0;

var waitInterval=5000;  //this is the interval between each fade
var fadeSpeed=2000;    //this is the speed of the fade action
var selectFadeSpeed=1000; 

// allows you to set it so that when you roll over a panel, it pauses on that panel until you roll out
// set PauseOnHover to 1 to turn this feature on or 0 to turn this feature off.
var PauseOnHover=1;  




var timer=-1;

$(function(){
	getAllDivs();
	setFader();
	setClickHandlers();
	setArrowClickHandlers();
	
	if (PauseOnHover == 1)
	{
		setMouseOverHandlers();
	}
	
	timer = window.setInterval("fade()", waitInterval);
	
	setLinks();
});


function setLinks(){
	$(".fadeWrapper").click(function(){
		var link=$(".imageHolder").eq(currentImage).find("a").attr("href");
		if(link!=null){
			location.href=link;
		}
	});
	
	//$(".fadeWrapper").mouseover(function(){
	//	$(".fadeWrapper").css({cursor:"pointer"});
	//});

}



/**
 *	Gets all the divs that have to be shown in the slider and fills them in an array.
 */
function getAllDivs(){

$("#sliderNavigation").append("<ul class=\"navUl\"></ul>");

	//fill the divs in an array
	$(".imageHolder").each(function(i){
		divArray[i]=$(this);
		divNumber++;
		if(i!=0){
			$(".navUl").append("<li><a href=\"#\"></a></li>");
		}else{
			$(".navUl").append("<li class=\"selected\"><a href=\"#\"></a></li>");
		}
		
		navArray[i]=$("ul.navUl li").eq(i);
	});
}

/**
 *	Makes all the images invisible.
 */
function setFader(){
	for(var i=1; i<divNumber; i++){
		divArray[i].find("img").css({display:"none"});
	}
}


/*** Makes it so that when you roll over one of the panels, the animation pauses *****/
function setMouseOverHandlers(){
	$(".imageHolder").each(function(i){	
		$(this).hover(
					  function()
					  {
						$(this).css("cursor","pointer")
						window.clearInterval(timer); //This stops the timer and pauses the animation
						navLi=navArray[currentImage];
						navLi.removeClass("selected").addClass("paused");
					  },
					  function()
					  {
						$(this).css("cursor","default")
						timer = window.setInterval("fade()", waitInterval);  // this resets the timer and resumes the animation.
						navLi=navArray[currentImage];
						navLi.removeClass("paused").addClass("selected");
					  }
		);		
	
	
	});
}

function setClickHandlers(){
	$("ul.navUl li").each(function(i){	
		$(this).click(function(){
			window.clearInterval(timer);
			selectedImage=i;
			fadeSelected();	
			timer = window.setInterval("fade()", waitInterval);
		});		
	});
}

function setArrowClickHandlers(){
	$("#leftArrow").click(function(){
		if(currentImage!=0){
			window.clearInterval(timer);
			selectedImage=currentImage-1;
			fadeSelected();	
			timer = window.setInterval("fade()", waitInterval);
		}
	});
	
	$("#rightArrow").click(function(){
		if(currentImage!=divNumber-1){
			window.clearInterval(timer);
			selectedImage=currentImage+1;
			fadeSelected();	
			timer = window.setInterval("fade()", waitInterval);
		}
	});
}

function fadeSelected(){
	var img=divArray[currentImage].find("img");
	img.fadeOut(selectFadeSpeed);
	
	var navLi=navArray[currentImage];
	navLi.removeClass("selected");
			
	img=divArray[selectedImage].find("img");
	img.fadeIn(selectFadeSpeed);
	
	navLi=navArray[selectedImage];
	navLi.addClass("selected");
	
	currentImage=selectedImage;
}

/**
 *	The whole fading is performed here.
 */
function fade(){
	var img=divArray[currentImage].find("img");
	img.fadeOut(fadeSpeed);
	
	var navLi=navArray[currentImage];
	navLi.removeClass("selected");
	
	if(currentImage<divNumber-1){
		img=divArray[currentImage+1].find("img");
		navLi=navArray[currentImage+1];
		currentImage++;
	}else{
		img=divArray[0].find("img");
		navLi=navArray[0];
		currentImage=0;
	}
		
	img.fadeIn(fadeSpeed);
	navLi.addClass("selected");
}