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

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

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


var timer=-1;

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

});

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

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

	//fill the divs in an array
	jQuery(".singleFade").each(function(i){
		divArray[i]=jQuery(this);
		fadeDivNumber++;
		if(i!=0){
			jQuery(".navUl").append("<li><a href=\"#\"></a></li>");
		}else{
			jQuery(".navUl").append("<li class=\"selected\"><a href=\"#\"></a></li>");
		}
		
		navArray[i]=jQuery("ul.navUl li").eq(i);
		
	});
	
	
	if(fadeDivNumber>0){
		jQuery(".navUl li").mouseover(function(){
			jQuery(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(){
	jQuery("ul.navUl li").each(function(i){	
		jQuery(this).click(function(){
			window.clearInterval(timer);
			selectedFade=i;
			fadeSelected();	
			timer = window.setInterval("fade()", fadeWaitInterval);
		});		
	});
}

function setArrowClickHandlers(){
	jQuery("#leftArrow").click(function(){
		if(currentFade!=0){
			window.clearInterval(timer);
			selectedFade=currentFade-1;
			fadeSelected();	
			timer = window.setInterval("fade()", fadeWaitInterval);
		}
	});
	
	jQuery("#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, 
		
		function(){
				
			img=divArray[selectedFade];
			img.fadeIn(selectFadeSpeed);
			
			navLi=navArray[selectedFade];
			navLi.addClass("selected");
			
			currentFade=selectedFade;
	
		}
	);
	
	var navLi=navArray[currentFade];
	navLi.removeClass("selected");
}
/**
 *	The whole fading is performed here.
 */
function fade(){
	
	var img=divArray[currentFade];
	
	img.fadeOut(fadeSpeed, 
		
		function(){
			jQuery(this).css('filter','');
			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");
			
			
		}
	
	);
}