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

var fadeDivNumber=0;
var currentFade=0;
var selectedFade=0;

var fadeWaitInterval=10000;  //this is the interval between each fade
var fadeSpeed=1000;    //this is the speed of the fade action
var selectFadeSpeed=1000;


var timer=-1;

$(function(){
	getAllFaderDivs();
	if(fadeDivNumber>0){
		setFader();
		timer = window.setInterval("fade()", fadeWaitInterval);
		setClickHandlers();
		setArrowClickHandlers();
	}

});

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

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

	//fill the divs in an array
	$(".singleFade").each(function(i){
		divArray[i]=$(this);
		fadeDivNumber++;
		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);
	});
	
	if(fadeDivNumber>0){
		$(".navUl li").mouseover(function(){
			$(this).css({cursor:"pointer"});
		});
	}
}

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

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

function setArrowClickHandlers(){
	$("#leftArrow").click(function(){
		if(currentFade!=0){
			window.clearInterval(timer);
			selectedFade=currentFade-1;
			fadeSelected();	
			timer = window.setInterval("fade()", fadeWaitInterval);
		}
	});
	
	$("#rightArrow").click(function(){
		if(currentFade!=fadeDivNumber-1){
			window.clearInterval(timer);
			selectedFade=currentFade+1;
			fadeSelected();	
			timer = window.setInterval("fade()", fadeWaitInterval);
		}
	});
}

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

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