/*
 * Javascript Lightbox v1.0
 * http://www.emielverbeek.nl
 *
 * Copyright 2010, Emiel Verbeek
 *
 * Inspired by the tutorial 'building your own lightbox' by Kilian Valkhof (http://kilianvalkhof.com/2008/javascript/building-your-own-lightbox-part-1/)
 * Date: Tue 6 april 2010 
 */

$(document).ready(function(){
						   
// klik event
	$(".lightbox").click(function(){
		overlayLink = $(this).attr("href");
		window.startOverlay(overlayLink);
		return false;
	});
});

function startOverlay(overlayLink) {
// bouw lightbox
	$("body")
		.append('<div class="overlay"></div><div class="close"></div><div class="container"></div>')
		.css({"overflow-y":"hidden"});

// fade lightbox
	$(".overlay").animate({"opacity":"0.6"}, 400, "linear");
	$(".close").css({"left": "50%"}).animate({"opacity":"1","filter":"none"}, 400, "linear")

// afbeelding openen in lightbox
	$(".container").html('<img src="'+overlayLink+'" alt=""/>');
	
	$("#textvak").html('<img src="images/power_on.png" border="0"/>');

// afbeelding positioneren in lightbox
	$(".container img").load(function() {
		var imgWidth = $(".container img").width();
		var imgHeight = $(".container img").height();
		$(".container")
			.css({
				"top":        "343px",
				"left":       "50%",	
				"filter":"none",
				"width":      imgWidth,
				"height":     imgHeight,
				"margin-top": -(imgHeight/2),
				"margin-left":-(imgWidth/2) //to position it in the middle
			})
			.animate({"opacity":"1"}, 400, "linear");
// maak volgende processen mogelijk
		window.removeOverlay();
		$(document).pngFix();
	});
}

function removeOverlay() {

// sluit lightbox door op close te klikken
	$(".close").click(function(){
		$(".container, .close, .overlay").animate({"opacity":"0"}, 200, "linear", function(){
			$(".container, .close, .overlay").remove();
			$("#textvak").html('<img src="images/power_off.png" border="0" />');
			$(document).pngFix();
		});
	});
// sluit lightbox door op de overlay te klikken	
	//$(".overlay").click(function(){
	//	$(".container, .close, .overlay").animate({"opacity":"0"}, 200, "linear", function(){
	//		$(".container, .close, .overlay").remove();	
	//	});
	//});
}