var zindex = 110;
var currentitem ;
var stoprotate = false;

$(document).ready( function() {
	
	currentitem 	= $("#bannerCntr li a.active").attr('rel');
		
	$("#bannerCntr li a.linkimage").each(function() {
		
		$(this).mouseover(function() {
			if ($(this).attr('rel') != currentitem)
			{
				/* Plaats de gekoze thumbimage vooraan */
				//$(this).parent().css("z-index",zindex);
				/* verberg de donkere laag */
				$(this).find(".dark").css("display","none");
				/* toon de donkere laag voor de vorige thumb */
				$("#bannerCntr li a.linkimage.active").find(".dark").css("display","block");
				/* Verwijder de active class van de vorige thumb */
				$("#bannerCntr li a.linkimage.active").removeClass("active");
				
				/* geef de huide thumb een active class */
				$(this).addClass("active");
					
				/* haal het id van de grote image op uit de rel van de link */
				var bigimage = "#" + $(this).attr('rel');
				//console.log(bigimage);
				/* Verberg de gekoen grote image */
				$(bigimage).css("display", "none");
				/* Breng de gekozen grote image naar voren */
				$(bigimage).css("z-index", zindex);
				/* Toon de grote afbeelding met een fadein effect */
				$(bigimage).fadeIn();
				/* Verhoog de z-index variable voor de volgende keuze. */
				zindex++;
				if (zindex == 150){zindex=110};
				
				currentitem = $(this).attr('rel');
				
				stoprotate = true;
			}
		});
		$(this).mouseleave(function() {
			stoprotate = false;
		});
	});
	function rotate(curritem)
	{
		if (! stoprotate)
		{
	
			if (curritem == 4){curritem=0};
			fnext = curritem + 1; 
			/* toon de donkere laag voor de vorige thumb */
			$("#bannerCntr li a.linkimage.active").find(".dark").css("display","block");
			
			/* verberg de donkere laag */
			$('a.linkimage[rel="id'+ fnext +'"]').find(".dark").css("display","none");
			
			$('a.linkimage[rel="id'+ fnext +'"]').addClass("active");
			
			/* haal het id van de grote image op uit de rel van de link */
					var bigimage = "#id" + fnext;
					//console.log(bigimage);
					/* Verberg de gekoen grote image */
					$(bigimage).css("display", "none");
					/* Breng de gekozen grote image naar voren */
					$(bigimage).css("z-index", zindex);
					/* Toon de grote afbeelding met een fadein effect */
					$(bigimage).fadeIn();
					/* Verhoog de z-index variable voor de volgende keuze. */
					zindex++;
					
			if (zindex == 150){zindex=110};
			
			
		}
		setTimeout(function(){
			rotate(fnext);
					   }, 4000);
	}
	rotate(0);
	
});