// Klik functies
$(document).ready(function(){			
	$('#backgroundWindow').click(function(){			
		// Sluit venster
		closeWindow();
	});

	$('#left').click(function(){
		// Toon vorige foto
		backPicture();
	});
	
	$('#right').click(function(){
		// Toon volgende foto
		nextPicture();
	});
});


// ***************************************************************************************************************************************
// nr - Hoeveelste image in de rij.
var numberinRow;
var hoogteBeeld = document.documentElement.clientHeight;
var breedteBeeld = document.documentElement.clientWidth;
var caption;

function showImage(nr){
	
	// Haal src op van de afbeelding met gekozen nr. Plaats image-tag in venster.
	document.getElementById('windowPhoto').innerHTML = '<a href="' + getImageSrc(nr) + '" target="_blank"><img id="windowPicture" src="' + getImageSrc(nr) + '" width="100%-10px" border="0"/></a>';
	
	$('#windowPicture').load(function(){
		// Bepaal welke knoppen zichtbaar zijn.
		controlButtons(nr);
		
		// Toon link naar vergrote foto.
		toonBeschrijving(nr);
		
		// Plaats venster in het midden.
		centerWindow();

		// Maak het venster zichtbaar.
		openWindow();
	});
}

function getImageSrc(nr){
	var photos = document.getElementsByName('photo');
	//document.write(photos[nr].src);
	numberinRow = nr;
	return photos[nr].src;
}

function getImageAlt(nr){
	var photos = document.getElementsByName('photo');
	return photos[nr].alt;
}

function showOtherImage(nr){

	// Haal src op van de afbeelding met gekozen nr. Plaats image-tag in venster.
	document.getElementById('windowPhoto').innerHTML = '<a href="' + getImageSrc(nr) + '" target="_blank"><img id="windowPicture" src="' + getImageSrc(nr) + '" width="100%-10px" border="0"/></a>';
	
	$('#windowPicture').load(function(){
		// Bepaal welke knoppen zichtbaar zijn.
		controlButtons(nr);
		
		// Toon link naar vergrote foto.
		toonBeschrijving(nr);
	});
}


// ***************************************************************************************
// JQuery

var status = 0;

function openWindow(){
	if(status == 0){
		$('#backgroundWindow').css({
			"opacity": "0.9"
		});
	
		$('#backgroundWindow').fadeIn("slow");
		
		$('#window').fadeIn("slow");
		
		status = 1;
	}	
}

function closeWindow(){
	if(status == 1){
		$('#backgroundWindow').fadeOut("slow");
		
		$('#window').fadeOut("slow");
		$('#left').fadeOut("slow");
		$('#right').fadeOut("slow");
		
		status = 0;
	}
}

function centerWindow(){
	hoogteBeeld;
	breedteBeeld;
	var hoogteWindow = $('#window').height();
	var breedteWindow = $('#window').width();

	// Plaats window in het midden
	$('#window').css({
		"position": "fixed",
		"top": hoogteBeeld/2-(hoogteWindow/2),
		"left": breedteBeeld/2-(breedteWindow/2)
	});
}

function toonBeschrijving(nr){
	document.getElementById('windowContent').innerHTML = '<p>' + getImageAlt(nr) + '</p><br/><a href="' + getImageSrc(nr) + '" target="_blank"/>Klik hier voor de vergroting</a>';
}

function controlButtons(nr){
	
	// Toon wel/niet de knop 'Vorige'.
	if(nr <= 0){
		$('#left').fadeOut("slow");
	}else{
		$('#left').fadeIn("slow");
	}
	
	// Toon wel/niet de knop 'Volgende'.
	// Vergelijk het nr met de grootste index van de array.
	var photos = document.getElementsByName("photo");
	var max = photos.length-1;
	
	if(nr >= max){
		$('#right').fadeOut("slow");
	}else{
		$('#right').fadeIn("slow");
	}
	
	centerButtons();
}

function centerButtons(){
	hoogteBeeld;
	breedteBeeld;
	var hoogteLeft = $('#left').height();
	var hoogteRight = $('#right').height();

	// Plaats buttons verticaal in het midden
	$('#left').css({
		"position": "fixed",
		"top": hoogteBeeld/2-(hoogteLeft/2),
		"left": "0px"
	});
	
	$('#right').css({
		"position": "fixed",
		"top": hoogteBeeld/2-(hoogteRight/2),
		"right": "0px"
	});
}

function backPicture(){
	if(numberinRow !== 0){
		showOtherImage(numberinRow-1);
		centerWindow();
	}
}

function nextPicture(){
	// Ga de array met foto's door om te bepalen wat de grootste index is van de array. Dit is de max.
	var photos = document.getElementsByName('photo');
	var max = photos.length-1;

	if(numberinRow < max){
		showOtherImage(numberinRow+1);
		centerWindow();
	}
}

// Thanks to this tutorial: http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/