// deze functie start automatisch als de pagina-dom geladen is.
$(function() { 
	
	var speed = 15000;   // snelheid waarmee de plaatjes wisselen in de automatische doorloop
	// zoek het aantal plaatjes die niet de class afwerking hebben. Haal er 1 van af om de variabele te kunnen gebruiken als maximale indexwaarde.
	$('#slideshow').data('aantalPlaatjes', $('#slideshow div:not(div.afwerking)').length -1);
	$('#slideshow').data('nummer', 0);
	
	
	
	
	if($('#info').length == 1){
		toggleInfo();
	};
	
	// kijk of er kleine foto's staan op de detailpagina
	if($('#miniaturen').length == 1){
		miniaturen();
	};
	/****/
	// kijk of er detailgegevens op de pagina staan
	if($('#detail_gegevens').length == 1){
	//  bind de rij-hover functie voor de afwerking en/of de kijkregeling uitleg
		materiaalHover();	
	}; 
	// kijk eerst of er wel meerdere plaatjes zijn om na elkaar te laten zien!
	if($('#slideshow').data('aantalPlaatjes') > 0) {
		/**
		//Deze functie wordt niet meer gebruikt. kijk dan of er een rijtje knopjes onderaan in de foto moeten worden geplaatst. Zo ja, dan die bevolken met 1 knop per plaatje, met een id van het nummer van het plaatje. 
		if($('#knoppenbalk').length == 1){
			bevolkknoppenbalk();
		}; **/
		
		// als er geen bedieningsknoppen zijn, maak dan automatische doorloop als er meerdere plaatjes zijn.
		/**/
		if($('#knopNext').length > 0){
			hoofdschermKnoppen();
		} else {
			$('#slideshow').data('stopslideshow', 0);// slideshow is nog niet gestopt
			var timer = setInterval('timerslideImages()',speed);
		};
		
	};
});

function materiaalHover() {
	
	$('#detail_gegevens .materiaal_mouseover').click(
			function(){
				  var pIndex = parseInt($(this).attr('rev'));
				  var formNaam = "#form_" + pIndex;
				  $(formNaam).submit();
			});
	//$('div.afwerking').slideDown(1);
	$('.materiaal_mouseover').hover(										 
			function(){
				var pIndex = parseInt($(this).attr('rev'))-1;
				var afwerkingNxt = $('div.afwerking').eq(pIndex);	
				//$(this).html(pIndex);
				afwerkingNxt.stop().animate({top:450, opacity:1},600);//.slideUp(200)
				},
			function(){
				var pIndex = parseInt($(this).attr('rev'))-1;
				var afwerkingNxt = $('div.afwerking').eq(pIndex);	
				afwerkingNxt.stop().animate({top:536, opacity:0},300);//.slideDown(600)
	});
}
function timerslideImages(){
		var volgende =($('#slideshow').data('nummer'))+1;
		
		// bij automatische slideshow pIndex op het einde weer naar 0 schakelen
		if( volgende > $('#slideshow').data('aantalPlaatjes') && $('#slideshow').data('temp') < 1 ){
			// als alle plaatjes 1 maal gezien zijn ga dan naar het eerste plaatje dan automatische doorloop.
			$('#slideshow').data('stopslideshow',1);
			SlideImages(0);
		};
		// als alle plaatjes 1 maal gezien zijn en we zijn weer bij het eerste plaatje. Stop dan automatische doorloop.
		if ($('#slideshow').data('stopslideshow') > 0) {timer.clearInterval()};
		SlideImages(volgende);
}

function miniaturen() {
	
		
		// de click functie definieren de id wordt meegestuurd naaar de slideImage functie.
		var miniatuurknoppen = $("div#miniaturen a");
		
		miniatuurknoppen.click(function(evt){
			$('#slideshow').data('stopslideshow',1);//
			var pIndex = parseInt($(this).attr('id'));
			$('#slideshow').data('nummer',pIndex);
			SlideImages(pIndex);
			
		});	
		
}
function bevolkknoppenbalk() {
	
		var knoppenbalk = $('#knoppenbalk');
		var teller = 0;
		$('#slideshow div:not(div.afwerking)').each(function(){
		  	knoppenbalk.append('<div class="knoppenbalk-knop"><a href="#" class="niet" id='+teller+'></a></div>')
		  	teller++;
		  });
		// de click functie definieren de id wordt meegestuurd naaar de slideImage functie.
		var knoppenbalkknoppen = $("div.knoppenbalk-knop a");
		
		knoppenbalkknoppen.click(function(evt){
			var pIndex = parseInt($(this).attr('id'));
			$('#slideshow').data('nummer',pIndex);
			SlideImages(pIndex);
			
		});	
		// bij het opstarten kleuren van de eerste knop.
		knoppenbalkknoppen.eq(0).removeClass("knoppenbalkknop").addClass("knoppenbalkknop_select");		
}

//========================= info slidedown ============================
function toggleInfo(){
		
		 // de togglefunctie maakt gebruik van een datablokje, zodat beide functies het infovlak kunnen sluiten.
		 $('#info-icon').hide().data('dicht', true);
		 $('#info').hide().css({'z-index':6});// de z-index stond op 0 omdat explorer anders even een flash laat zien van deze lagen
		 $('#info_schaduw').hide().css({'z-index':5});//.css({'z-index':'5'}) de z-index stond 0 op omdat explorer anders even een flash laat zien van deze lagen
		 //$('#info-icon img').attr({'src':'images/start/up.gif'});
		 // eerst de info div laten zien om de gebruiker erop atend te maken. 
		 var timerInfo = setTimeout(function(){		//$('#info').animate({ "opacity": 0, "height": "hide" }, 1000);
												 	//$('#info-icon').data('dicht', true);
													$('#info').stop().fadeIn(2000);
													setTimeout(function(){	$('#info_schaduw').stop().fadeIn(2500);},500);
													setTimeout(function(){	$('#info, #info_schaduw').stop().fadeOut(2000);},8000);
													setTimeout(function(){	$('#info-icon img').attr({'src':'images/start/veer_a.png'});
													$('#info-icon').animate({"height": "show" }, 2500);},10000);
												 	
												 },6000);
		 
		 
		 
		//toggle de info pijltjes en de info div              .css({ "opacity": 0.7 })
		 $('#info-icon').click(function() {  
		   
			 if ($(this).data('dicht')) {
				$(this).data('dicht', false);  
				$('#info, #info_schaduw').stop().slideDown(800);
				$('#info-icon img').attr({'src':'images/start/veer_b.png'});
			 }  
			 else { 
				$(this).data('dicht', true);  
				$('#info-icon img').attr({'src':'images/start/veer_a.png'});
				$('#info, #info_schaduw').slideUp(800); 
			}  
		  });  
		  // zorgen dat ook op de tekst geclickt kan worden om de info te sluiten
		  $("#info").click(function(){
				$('#info-icon img').attr({'src':'images/start/veer_a.png'});
				$('#info, #info_schaduw').slideUp(800);
				$('#info-icon').data('dicht', true);
				});
}

//========================= vooruit en terug functies ============================

function hoofdschermKnoppen() {
		/** Deze functie maakt dat klikken op de kleine plaatjes in het hoofdscherm, dat product in de viewer getoond wordt. De ankertag wordt dan dus uitgeschakeld.
		$("a.foto_miniaturen").click(function(){
					var pIndex = parseInt($(this).attr('rev'));
					var pData = $('#slideshow').data('nummer');
					// check eerst of het plaatje in de slider niet al voorop staat.
					if(pData != pIndex){
							$('#slideshow').data('nummer',pIndex);
							SlideImages(pIndex);
					};
					return false;
		});
		**/
		//var aantalPlaatjes = $('#slideshow div').length;
		// De knoppen vooruit een terug acties definieren. setInterval("SlideImages()",3000);
		$("#knopNext").click(function(){
									  
				  	if($('#slideshow').data('nummer') < $('#slideshow').data('aantalPlaatjes')) { 
							var pIndex = ($('#slideshow').data('nummer'))+1;
						} else {
							var pIndex = 0;
					};
					
					//var pIndex = ($('#slideshow').data('nummer'))+1;
					SlideImages(pIndex);
					$('#slideshow').data('nummer',pIndex);
					return false;
		});
		$("#knopPrev").click(function(){
									  /****/
					if($('#slideshow').data('nummer') == 0) { 
						var pIndex = $('#slideshow').data('aantalPlaatjes');
					} else {
						var pIndex = $('#slideshow').data('nummer') - 1;
					};
					
					//var pIndex = $('#slideshow').data('nummer') - 1;
					SlideImages(pIndex);
					$('#slideshow').data('nummer',pIndex);
					return false;
		});
		var pIndex = 0;
		$("#details").html('<a href="'+$('#slideshow div:eq('+pIndex+') a').attr('href') +'"><span>'+$('#slideshow div:eq('+pIndex+') a').attr('title') +'</span></a>');
		//$("#details").html('<a href="details.cfm">Details:<br />'+$('#slideshow div:eq('+$('#slideshow').data('nummer')+') img').attr('title') +'</a>');
		// bij het verwijderen van de knoppen vooruit en terug in het eerste begin de terugknop verwijderen
		//$("#knopPrev").fadeOut(1);
}


function SlideImages(pIndex){
	/****/


//========================= plaatje wisselen ============================	
	
	/** 
	(        ?  $('#slideshow div.slideUp') : $('#slideshow div:first')) 
	
	
	if( pIndex < 0){
					pIndex = $('#slideshow').data('aantalPlaatjes');
	};**/
	// kijk of er een foto is met class slideUp
	var vSlideUp = $('#slideshow div.slideUp');
	// het volgende plaatje zoeken we aan de hand van het indexnummer die is doorgegeven.
	var vSlideNxt = $('#slideshow div').eq(pIndex);
	
	
	// zet de bestaande foto 1 stapje omlaag in de z-index. (van 2 naar 1)
	vSlideUp.removeClass('slideUp').addClass('slidePrev');
	// zet de volgende foto 1 eerst doorzichtig dan twee stapjes omhoog in de z-index (van 0 naar 2), en vervolgens animeer de opacity naar 1.
	vSlideNxt.stop().css({opacity:0.0}).addClass("slideUp").animate({opacity:1.0},750,function() {
		// zet de bestaande fot helemaal onderaan in de z-index nadat de volgende foto helemaal zichtbaar is geworden.
		vSlideUp.removeClass('slidePrev');
		
	});
	// bewaar het nieuwe indexnummer.
	$('#slideshow').data('nummer',pIndex);
//========================= einde plaatje wisselen ============================		
//========================= knoppenbalkstatus aanpassen als die er is ============================	
	if($("div.knoppenbalk-knop a").length > 0) {
		var knoppenbalkknoppen = $("div.knoppenbalk-knop a");
		knoppenbalkknoppen.removeClass('knoppenbalkknop_select').addClass('knoppenbalkknop');//.css('background-color','#ccc')css('background-color','#ccc');.removeClass('deselect').addClass('select').css('background-color','#000')
		knoppenbalkknoppen.eq(pIndex).fadeOut(300).removeClass('knoppenbalkknop').addClass('knoppenbalkknop_select').fadeIn(300);
	}
//========================= vooruit en terugknoppen weghalen aan begin en einde. ============================	
	// knoppen verwijderen bij het begin en einde van de lijst
	/**
	if($('#slideshow div:first').attr("class") == "slideUp") {
			$("#knopPrev").fadeOut(300);
		}else{
				$("#knopPrev").fadeIn();
		};
		if($('#slideshow div:last').attr("class") == "slideUp") {
				$("#knopNext").fadeOut(300);
		}else{
				$("#knopNext").fadeIn();
		};
	
	**/
	//$("#knoppenbalk").append(pIndex);

	// schrijf naam van het kleine plaatje in het detail vak onder de grote foto in de slider van de hoofdpagina
	if ($("#details").length == 1) $("#details").html( '<a href="' + $('#slideshow div:eq('+pIndex+') a').attr('href') +'"><span>'+$('#slideshow div:eq('+pIndex+') a').attr('title') +'</span></a>');
	                                 
	//$("#bestelknop").html($('#slideshow').data('temp') + "haha" +$('#slideshow').data('nummer'));
	
}