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

$(document).ready( function() {
							
	var numImgs = $('div.bannerBox img').length;
	
	currentitem 	= $(".bannerBox li.selected a").attr('rel');
		
	$(".bannerBox li a").each(function() {
		
		$(this).mouseover(function() {
			if ($(this).attr('rel') != currentitem)
			{
				/* Verwijder de active class van de vorige thumb */
				$(".bannerBox li.selected").removeClass("selected");
				
				/* geef de huide thumb een active class */
				$(this).parent().addClass("selected");
				
				if ( $('.bannerBox ul li#noTitle').hasClass("selected") ){
				$('#headerCntr h1').hide();
				}
				else{
					$('#headerCntr h1').show();
				}
					
				/* haal het id van de grote image op uit de rel van de link */
				var bigimage = "#headerimg_" + $(this).attr('rel');
				/* 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('slow');
				/* 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 == numImgs){curritem=0};
			fnext = curritem + 1; 
			/* toon de donkere laag voor de vorige thumb */
			$(".bannerBox li.selected").removeClass("selected");
			
			/* verberg de donkere laag */			
			$('a.[rel="'+ fnext +'"]').parent().addClass("selected");
			
			if ( $('.bannerBox ul li#noTitle').hasClass("selected") ){
				$('#headerCntr h1').hide();
			}
			else{
				$('#headerCntr h1').show();
			}
			
			
			
			/* haal het id van de grote image op uit de rel van de link */
					var bigimage = "#headerimg_" + 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);
	}
	setTimeout(function(){
	rotate(0);
	}, 4000);
		
});