$(document).ready(function() { 

//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
    $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
    $(this).siblings().css({backgroundImage:"url(left.png)"});
});


//slides the element with class "menu_body" when mouse is over the paragraph
$("#secondpane p.menu_head").mouseover(function()
{
   $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
   $(this).siblings().css({backgroundImage:"url(left.png)"});
});


	var fotos = [];


        $(".bestuur tr td:nth-child(3)").hide();
        $(".bestuur tr td:nth-child(2)").click(function() {
                $(this).next().fadeToggle();
        });

        $("table.zebra tr:odd").css("background-color","LIGHTgrey");


//  LIGHTBOX

	// pijltjestoetsen en Esc
	$(document).keydown( function(event) {
		//		alert('toets '+ event.keyCode);
		if (event.keyCode == '27') { $('IMG#lightbox_sluiten').click(); }
		if (event.keyCode == '37') { $('IMG#lightbox_vorige').click(); }
		if (event.keyCode == '39') { $('IMG#lightbox_volgende').click(); }
	});

	$('.imgbox').click( function() {

//				alert('imgbox');
		// de HREF van de link bevat de link van de te tonen foto's
		fotos=fotos.slice(0,0);
		fotos[0] = $(this).attr('href');
		lightbox(fotos);

		return false;
	});


	$('.lightbox').click( function() {

//				alert('ajax');

		// de HREF van de link bevat de directory van de te tonen foto's
		var fotodir = $(this).attr('href');
		var laatsteslash = fotodir.lastIndexOf('/');
		fotodir = fotodir.substr(0, laatsteslash);

		$.ajax({
			type:"POST",
			url: "/fotoalbum/lightbox.asp",
			dataType: "application/x-www-form-urlencoded",
//			data: "Action=hello&map=/userfiles/image/fa/vresse/chalet/",
			data: "Action=hello&map=" + fotodir,
			async: false,
//			success: function(msg){ $("body").append(msg);}
			success: function(msg){ afhandelen(msg);}
		});
		return false;
	});

	function afhandelen(msg) {
//alert('msg ' + msg);
		// eerste komma weglaten
		msg = msg.slice(1);
		// string in array steken
		fotos = msg.split(',');

		//		fotos[0] = 'http://www.demowebsite.be/UserFiles/image/auto/300td1.jpeg';
		//		fotos[1] = '/UserFiles/image/auto/911a.jpeg';
		//		fotos[2] = '/UserFiles/image/auto/911b.jpeg';
		//		fotos[3] = 'http://www.demowebsite.be/UserFiles/image/auto/911v.jpeg';
		//		fotos[4] = 'http://www.demowebsite.be/UserFiles/image/auto/geld.jpeg';

		lightbox(fotos);

	};

	function lightbox(fotos) {
		/*
			toevoegen DIV als achtergrond volledige window
		*/
		//alert('in lightbox');
		$('body').append('<DIV ID="lightbox_bg"></DIV>');
		$('body').append('<DIV ID="lightbox_kader" align="center"><img ID="lightbox_vorige" src="/Userfiles/image/LAYOUT/lightbox/vorige.png"> <img ID="lightbox_sluiten" src="/Userfiles/image/LAYOUT/lightbox/stop.png"> <img ID="lightbox_volgende" src="/Userfiles/image/LAYOUT/lightbox/volgende.png"><img ID="lightbox_foto" style="display:none;"> <img ID="ajax_loader" src="/UserFiles/image/layout/lightbox/ajax-loader.gif"></DIV>');

		// dit ook nog in css proberen te steken
		$('DIV#lightbox_bg')
			.css('width', $(document).width())
			.css('height', $(document).height())
			;

		/*
			toevoegen DIV waarin foto wordt getoond
			met de navigatiebuttons en sluitknop
		*/
		//alert('bg toegevoegd');
		/*
			we tonen de eerste foto
			via attr fotonr houden we bij welke foto getoond wordt
		*/

		var fotonr = parseInt($('IMG#lightbox_foto').attr('fotonr'));
		var img = new Image();
		$('IMG#lightbox_foto').fadeOut('slow');
		fotonr = 0;

		img = $(new Image()).load(function() {
			$('IMG#lightbox_foto').attr('src', fotos[fotonr]);
			$('IMG#lightbox_foto').attr('fotonr', fotonr);
			fotosize(img);  
			$('IMG#lightbox_foto').fadeIn('slow');
		}).attr('src',fotos[fotonr] + '?' + (new Date().getTime()));

	};

	/*
		klikken op achtergrond : verwijderen boxen
	*/
	$('body').delegate('DIV#lightbox_bg', 'click', function(e) {
		$(this).remove();
		$('DIV#lightbox_kader').remove();
	});

	/*
		sluit-knop : verwijderen 
	*/
	$('body').delegate('IMG#lightbox_sluiten', 'click', function(e) {
		$('DIV#lightbox_bg').remove();
		$('DIV#lightbox_kader').remove();
	});
	
	/*
		vorige afbeelding 
	*/
	$('body').delegate('IMG#lightbox_vorige', 'click', function(e) {
		var fotonr = parseInt($('IMG#lightbox_foto').attr('fotonr'));
		var img = new Image();
		$('IMG#lightbox_foto').fadeOut('slow');
		fotonr = fotonr - 1;
		if (fotonr < 0) { fotonr = 0 };
		img = $(new Image()).load(function() {
			$('IMG#lightbox_foto').attr('src', fotos[fotonr]);
			$('IMG#lightbox_foto').attr('fotonr', fotonr);
			fotosize(img);  
			$('IMG#lightbox_foto').fadeIn('slow');
		}).attr('src',fotos[fotonr] + '?' + (new Date().getTime()));
	
	});

	/*
		volgende afbeelding 
	*/
	$('body').delegate('IMG#lightbox_volgende', 'click', function(e) {
//		alert('volgende' + $(window).scrollTop());
		var fotonr = parseInt($('IMG#lightbox_foto').attr('fotonr'));
		var img = new Image();
		$('IMG#lightbox_foto').fadeOut('slow');
		fotonr = fotonr + 1;
		if (fotonr > fotos.length - 1) { fotonr = fotonr - 1 };
		img = $(new Image()).load(function() {
			$('IMG#lightbox_foto').attr('src', fotos[fotonr]);
			$('IMG#lightbox_foto').attr('fotonr', fotonr);
			   fotosize(img);  
			$('IMG#lightbox_foto').fadeIn('slow');
		}).attr('src',fotos[fotonr] + '?' + (new Date().getTime()));

	});

	function fotosize(img)
	{
	//alert('fotosize2 - W=' + $(img).attr('width') + ' - H=' + $(img).attr('height'));
	//		alert('functie FOTOSIZE2');
		var fotonr = parseInt($('IMG#lightbox_foto').attr('fotonr'));

		var window_height = $(window).height();
		var window_width = $(window).width();

		var kader_height = 600;
		var kader_width = 800;
		var kader_top= 100;
		var kader_left = 100;
		
		var factor_height = 1;
		var factor_width = 1;
		var factor = 1;

		kader_height = $(img).attr('height');
		kader_width = $(img).attr('width');

		if (kader_height > window_height) { factor_height = window_height / kader_height; }
		if (kader_width > window_width) { factor_width = window_width / kader_width; }
				
		if (factor_height < factor_width) 
		{
			factor = factor_height;
		}
		else
		{
			factor = factor_width;
		}
		if (factor > 1) 
		{
			factor = 1;
		}

		kader_height = kader_height * factor;
		kader_width = kader_width * factor;

		kader_top = ((window_height - kader_height) / 2) + $(window).scrollTop();
		kader_left = ((window_width - kader_width) / 2) + $(window).scrollLeft();

		$('DIV#lightbox_kader').animate({
			top: kader_top + 'px',
			left: kader_left + 'px',
			height: kader_height + 20 + 'px',
			width: kader_width + 20 + 'px'
			}, 300, function() {
				// Animation complete.
			});

		$('IMG#lightbox_foto').css('height', kader_height + 'px');
		$('IMG#lightbox_foto').css('top', '0px');
		$('IMG#lightbox_foto').css('width', kader_width + 'px');
		$('IMG#lightbox_foto').css('left', '0px');
		
//		alert('aantal fotos' + fotos.length);

		if (parseInt($('IMG#lightbox_foto').attr('fotonr')) === fotos.length - 1)
		{
			$('IMG#lightbox_volgende').hide();
		}
		else
		{
			$('IMG#lightbox_volgende').show();
		}


		if (parseInt($('IMG#lightbox_foto').attr('fotonr')) === 0)
		{
			$('IMG#lightbox_vorige').hide();
		}
		else
		{
			$('IMG#lightbox_vorige').show();
		}
	
	};

});