$(document).ready(function() { 

	var fotos = [];

	/*---- BEGIN  ACCORDEON ----*/
  $('div.acc> div').hide();  
  $('div.acc> h3').click(function() {
    var $nextDiv = $(this).next();
    var $visibleSiblings = $nextDiv.siblings('div:visible');
 
    if ($visibleSiblings.length ) {
      $visibleSiblings.slideUp('fast', function() {
        $nextDiv.slideToggle('fast');
      });
    } else {
       $nextDiv.slideToggle('fast');
    }
  });
	/*---- EINDE  ACCORDEON ----*/


// BEGIN  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');
//alert('fotodir ' + fotodir);
		var laatsteslash = fotodir.lastIndexOf('/');
		fotodir = fotodir.substr(0, laatsteslash);
//alert('fotodir ' + fotodir);

		$.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';

		//alert('Foto 5 ' + fotos[4]);

		//alert('nu lightbox');
		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"> <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()));


/*
		$('IMG#lightbox_foto').hide();
		$('IMG#lightbox_foto').attr('src', fotos[0]);
		$('IMG#lightbox_foto').attr('fotonr', '0');
		
		$('IMG#lightbox_foto').load ( function() {

		});
		fotosize();
		$('IMG#lightbox_foto').show();
*/
	};

	/*
		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;
		}


//		console.info(' factor_width ' + factor_width + 'factor_height ' + factor_height + 'factor ' + factor);
		
		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();

//		console.info('NA window_width ' + window_width + ' window_height ' + window_height + ' image_width ' + image_width + ' image_height ' + image_height);
		
		$('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.
			});
//alert('image top ' + image_top + ' left ' + image_left);		

/*		$('IMG#lightbox_foto').animate({
			top: '0px',
			left: '0px',
			height: kader_height + 'px',
			width: kader_width + 'px'
			}, 100, 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);
//		$('IMG#lightbox_foto').show();

		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();
		}
	
	};

// EINDE  LIGHTBOX


});