// mootools 1.11 of hoger is benodigd (www.mootools.net)

/*
	Voorbeeld
	
	Bij gebruik van de URL Mapper dient het id van het fotoalbum in het formulier ingevuld te worden.
	
	<script type="text/javascript">
	<!--
		{js_fotos}
		// '{"font-size":"72px"}'
		// Functie die aangeroepen moet worden als er een watermerk over een foto geplaatst moet worden
		var watermerkChange = function(){watermerken('foto_watermerk','Slufter BBQ 2007',95,0.3,0.8,null,null);};
		// Initaliseer de diashow
		init_diashow('slideshow_control','foto_watermerk','dp_content.php?id=[id]&foto_id=[foto_id]&aktie=foto_get',watermerkChange,5000,'../layout/gallerijknoppen/start.gif','../layout/gallerijknoppen/stop.gif');
		// Na het eerste keer loaden de watermerkchange uitvoeren
		window.addEvent('load', watermerkChange);
		
	-->
	</script>




*/


// Pas het watermerk toe op alle foto's waarvan het id match_id bevat
// match_id 			(string)	:	Alle IMG elementen met een overeenkomend ID die moeten worden verwerkt
// str					(string)	: 	Tekst die in het watermerk moet komen te staan
// heightoffset			(int)		: 	0-100% van waar de balk in het plaatje komt te staan
// opacity_watermerk	(float)		:	0.xxx - 1.0 Transparantie balk
// opacity_tekst		(float)		:	0.xxx - 1.0 Transparantie tekst in balk
// watermerk_styles		(Jsonstr)	:	Json string met extra style attributen voor balk
// comment_styles		(Jsonstr)	:	Json string met extra style attributen voor tekst in balk
function watermerken(match_id, str, heightoffset, opacity_watermerk, opacity_tekst, watermerk_styles, comment_styles) {
	// Extra style opgave als Json strings evalueren
	watermerk_styles = Json.evaluate(watermerk_styles);
	comment_styles	 = Json.evaluate(comment_styles);

	if(opacity_watermerk > 0 || opacity_tekst > 0) {
		// Alle foto's bij langs gaan
		$ES('img').each(	function(item,index) {
								var img = $(item.id);
								if(!img) {
									return;
								}
								
								if(heightoffset > 100) {
									heightoffset = 100;
								}
								else if(heightoffset < 0) {
									heightoffset = 0;
								}
	
	
								//img.setStyle('position', 'absolute');
								img.setStyle('z-index', '0');
	
								// Alleen foto's met een id waar 'foto_watermerk' in voorkomt verwerken
								if(!img.getProperty('id').match(match_id)) {
									return;
								}
								
								if(watermerk_styles == null || !watermerk_styles.bordersize) {
									watermerk_styles = {bordersize:0};
								}
	
	
								var container = new Element('div', {
																		'class':				'foto_container',
																		'styles': {
																			'position': 		'relative',
																			'width':			parseInt(img.width),
																			'height':			parseInt(img.height),
																			'overflow':			'visible'
																		}
																	});
	
								
								var watermerk = new Element('div', {
																		'class':				'foto_watemerk',
																		'styles': {
																			'position': 		'absolute',
																			'display': 			'block',
																			'z-index': 			'1',
																			'left':				'0px',
																			'width':			parseInt(img.width)
																		}
																	});											
								
								var comment = new Element('span', {
																		'class':				'foto_comment',
																		'styles': {
																			'position': 		'absolute',
																			'z-index': 			'2',
																			'visibility':		'hidden',
																			'white-space':		'nowrap'
																		}
																	});
	
								var parent = img.getParent();
								if(parent.getProperty('class') == 'foto_container') {
									img.injectBefore(parent);
									parent.remove();
								}
								
								// Container VOOR img tag plaatsen
								container.injectBefore(img);
								// img tag IN container plaatsen
								img.injectInside(container);
								// div tag IN container plaatsen
								watermerk.injectInside(container);
								// span tag IN container plaatsen
								comment.injectInside(container);
	
								// Extra style instellingen overnemen
								watermerk.setStyles(watermerk_styles);
								watermerk.setStyle('width', parseInt(container.getStyle('width')) - (watermerk_styles.bordersize * 2) );
	
								// Extra style instellingen overnemen
								comment.setStyles(comment_styles);
								//container.makeDraggable();
								
								// Watermerk doorzichtig maken
								watermerk.setOpacity(opacity_watermerk);
								// Commentaar regel doorzichtig maken
								comment.setOpacity(opacity_tekst);
	
								// Hoogte voor waar het watermerk geplaatst moet worden
								var height = parseInt(img.height) - parseInt(watermerk.getStyle('height'));
								height = parseInt((heightoffset / 100) * height);
	
								// Tekst in de span tag zetten
								comment.setText(str);
								
	
								// Net zolang verkleinen totdat deze gaat passen. Houd rekening met font-size zodat tekst
								// niet buiten de afbeelding kan komen
								while(		parseInt(comment.getStyle('width')) + parseInt(comment.getStyle('font-size')) > parseInt(img.getStyle('width'))) {
	
										// Font-size verkleinen
										comment.setStyle('font-size', parseInt(comment.getStyle('font-size')) - 1);
	
										//if(confirm('test')) {break;}else{comment.setStyle('visibility', 'visible');}
										if(parseInt(comment.getStyle('font-size')) <= 0) {
											//alert('error');
											break;
										}
								}
	
								// Hoogte van balk aanpassen aan tekst
								watermerk.setStyle('height', parseInt(comment.getStyle('height')));
								var comment_height = parseInt(comment.getStyle('height')) + (watermerk_styles.bordersize * 2);
	
	
								// Zorg er voor dat de balk in de foto blijft
								if(height < 0) {
									height = 0;
								}
								else if(height > parseInt(img.getStyle('height')) - comment_height) {
									height = parseInt(img.getStyle('height')) - comment_height;
								}
								
								// Hoogte voor de balk instellen
								watermerk.setStyle('top', height + 'px');
	
								// Hoogte voor watermerk berekenen
								//height = parseInt(img.height) - parseInt(comment.getStyle('font-size')) - 4 + heightoffset;
								
								// Hoogte van watermerk instellen
								comment.setStyle('top', (height + parseInt(watermerk.getStyle('border-top-width'))) + 'px');
								
								// Commentaar uitlijnen naar rechts
								comment.setStyle('left',  parseInt(img.width) - parseInt(comment.getStyle('width')) - (parseInt(comment.getStyle('font-size')) / 2));
								
								// Commentaar tonen
								comment.setStyle('visibility', 'visible');
								
							}
						);
	}
}

var foto_index 					= 0;
var fotoboek_id					= null;
var foto_id 					= null;
var foto_url					= null;
var function_watermerkchange 	= function(){};
var img_slideshow 				= null;
var img_slideshow_src_on 		= null;
var img_slideshow_src_off 		= null;
var slideshow_delay 			= 3000;
var playslideshow				= 0;
var slideshowtimer				= null;


// Initaliseer diashow
// Pas het watermerk toe op alle foto's waarvan het id match_id bevat
// img_id 					(string)	:	id van slideshow IMG knop
// fotosrc_id				(string)	: 	id van de te manipuleren foto (img)
// foto_baseurl				(string)	: 	url naar foto met [id] als fotoboek id en [foto_id] als foto id
// funct_watermerkchange	(function)	:	functie die opgeroepen wordt na het veranderen van een foto (meestal function(){watermerken()})
// delay					(int)		:	In ms de wachttijd voordat de volgende foto van de slideshow getoond wordt
// src_on					(string)	:	Afbeelding van play slideshow
// src_off					(string)	:	Afbeelding van stop slideshow
function init_diashow(img_id,fotosrc_id,foto_baseurl,funct_watermerkchange,delay,src_on,src_off) {
	// Cookie uitlezen
	var ck = Cookie.get('fotoalbum_slideshow');

	// Globale variabelen instellen
	foto_id 					= fotosrc_id;
	foto_url 					= foto_baseurl;
	function_watermerkchange 	= funct_watermerkchange;
	img_slideshow 				= img_id;
	img_slideshow_src_on		= src_on;
	img_slideshow_src_off		= src_off;
	if(delay > 0) {
		slideshow_delay				= delay;
	}

	// Query string uitlezen
	var qs = query_string();
	if(qs['id']) {
		fotoboek_id = qs['id'];
	}
	if(qs['foto_id'] && qs['foto_id'] > 0) {
		for(var i = 0; i < js_fotos.length; i++) {
			if(qs['foto_id'] == js_fotos[i][0]) {
				foto_index = i;
				break;
			}
		}
	}

	// Update comments
	update_foto_comments(js_fotos[foto_index][0]);

	if(playslideshow == 1) {
		// Begin slideshow
		slideshowtimer = foto_next.delay(slideshow_delay);
		$(img_id).setProperty('src', src_off);
	} else {
		$(img_id).setProperty('src', src_on);
	}
	
	// Knoppen updaten
	slideshow_nav();

}

// Functie om slideshow aan/uit te schakelen
function slideshow_switch() {
	if(playslideshow == 1) {
		$(img_slideshow).setProperty('src', img_slideshow_src_on);
		playslideshow = 0;
		$clear(slideshowtimer);
	} else {
		$(img_slideshow).setProperty('src', img_slideshow_src_off);
		playslideshow = 1;
		// Begin slideshow
		//var t = setTimeout("foto_next()",slideshow_delay);
		slideshowtimer = foto_next.delay(500);
	}
}


// volgende foto
function foto_next() {
	if(js_fotos[foto_index + 1]) {		
		js_fotos[++foto_index];
		change_foto();
	}
	// Navigatie updaten
	slideshow_nav();
	
	// Slideshow bezig?
	if(playslideshow == 1) {
		//var t = setTimeout("foto_next()",slideshow_delay);
		slideshowtimer = foto_next.delay(slideshow_delay);
	}
}

// vorige foto
function foto_prev() {
	if(js_fotos[foto_index - 1]) {
		js_fotos[--foto_index]
		change_foto();
	}
	slideshow_nav();
}

// Zorgt er voor dat de juiste knoppen getoond of verborgen worden
function slideshow_nav() {
	// Vorige knop tonen ja/nee
	if(js_fotos.length > 0 && foto_index > 0) {
		$('foto_prev').setStyle('visibility', 'visible');
		$('foto_prev').setProperty('alt','Vorige foto (' + js_fotos[foto_index - 1][0] + ')');
		$('foto_prev').setProperty('title','Vorige foto (' + js_fotos[foto_index - 1][0] + ')');
	} else {
		$('foto_prev').setStyle('visibility', 'hidden');
	}
	
	// Volgende knop tonen ja/nee
	if(js_fotos.length > 0 && foto_index < js_fotos.length - 1) {
		$('foto_next').setStyle('visibility', 'visible');
		$('foto_next').setProperty('alt','Volgende foto (' + js_fotos[foto_index + 1][0] + ')');
		$('foto_next').setProperty('title','Volgende foto (' + js_fotos[foto_index + 1][0] + ')');
	} else {
		$('foto_next').setStyle('visibility', 'hidden');
	}
}

// Verander foto
function change_foto() {
	// Vervang [id] met de geselecteerde foto
	var copy = foto_url.replace(/\[foto_id\]/, js_fotos[foto_index][0]);
	copy = copy.replace(/\[id\]/, fotoboek_id);

	// Nieuwe foto tonen
	var foto_fx2= new Fx.Styles($(foto_id).getParent(),{
															duration: 200,
															transition: Fx.Transitions.linear,
															'onStart': 	function() {
																				// Als het element met id foto_id bestaat
																				// dan id in dit element updaten	
																				
																				if($('foto_id_nr')) {
																					$('foto_id_nr').setHTML(js_fotos[foto_index][0]);
																				//	alert($('foto_id').getProperty('name'));
																				}
																				
																				// Als het element met id foto_datum bestaat
																				// dan datum in dit element updaten
																				if($('foto_datum')) {
																					$('foto_datum').setHTML(js_fotos[foto_index][1]);
																				}
																				
																				// Als het element met id foto_nr bestaat
																				// dan volgorde nummer in dit element updaten	
																				if($('foto_nr')) {
																					$('foto_nr').setHTML(js_fotos[foto_index][2]);
																				}
																				
																				// Als het element met id foto_nr_js bestaat
																				// dan volgorde nummer van js in dit element updaten	
																				if($('foto_nr_js')) {
																					$('foto_nr_js').setHTML(foto_index  +1);
																				}
																				
																			}
														}); 
	// Foto verbergen
	var foto_fx = new Fx.Styles($(foto_id).getParent(), {
															duration: 200,
															transition: Fx.Transitions.linear,
															'onComplete': 	function() {
																				// foto_id is niet hetzelfde als 'foto_id' !
																				// foto_id is een variabele
																				$(foto_id).setProperty('src',copy);
																				$(foto_id).addEvent('load', function_watermerkchange);
																				var functie = function(){foto_fx2.start({'opacity': [0, 1]});};
																				$(foto_id).addEvent('load', functie);
																				// Update comments
																				update_foto_comments(js_fotos[foto_index][0]);
																			}
														}
										);
	 

	foto_fx.start({'opacity': [1, 0]});
}

// Update de comments van een foto
function update_foto_comments(foto_id) {
	if($('foto_korte_omschrijving') || $('foto_lange_omschrijving')) {
		var pagina_id  =(fotoboek_id != null ? '&id=' + fotoboek_id : '');
		var jSonRequest = new Json.Remote("?aktie=comments_get&foto_id=" + foto_id + pagina_id,{onComplete: function(foto){
																									if($('foto_korte_omschrijving')) {
																										$('foto_korte_omschrijving').setText(foto.comment_short);
																									}
																									if($('foto_lange_omschrijving')) {
																										$('foto_lange_omschrijving').setText(foto.comment_long);
																									}
																								}
																					}).send(null);
	}

}

// Toon foto navigatie
function foto_navigatie_toon() {
	if($('foto_mail') && $('foto_navigatie')) {

		$('foto_navigatie').setOpacity(0);
		
		// Effect om mail navigatie te tonen
		var fx_in = new Fx.Styles($('foto_navigatie'),{	duration: 300,
														transition: Fx.Transitions.linear,
														'onComplete':	function() {
																			
																		}
														});
		// Effect om formulier te verbergen
		var fx_out= new Fx.Styles($('foto_mail'),{		duration: 300,
														transition: Fx.Transitions.linear,
														'onStart':		function() {
																			$('mail_foto_veld').blur();
																		},
														'onComplete': 	function() {
																			$('foto_mail').setStyle('display','none');
																			$('foto_navigatie').setStyle('display','block');
																			// Start het effect
																			fx_in.start({'opacity': [0, 1]});
																		}
													   });
		// Start het effect
		fx_out.start({'opacity': [1, 0]});
	}
}

// Toon mailfoto formulier
function mailfoto_toon() {
	if($('foto_mail') && $('foto_navigatie')) {
		// Slideshow stoppen
		if(playslideshow == 1) {
			slideshow_switch();
		}

		$('foto_mail').setOpacity(0);
		
		// Effect om mail formulier te tonen
		var fx_in = new Fx.Styles($('foto_mail'),	  {	duration: 300,
														transition: Fx.Transitions.linear,
														'onComplete':	function() {
																			$('mail_foto_veld').focus();
																		}
														});
		// Effect om navigatie te verbergen
		var fx_out= new Fx.Styles($('foto_navigatie'),{	duration: 300,
														transition: Fx.Transitions.linear,
														'onComplete': 	function() {
																			$('foto_mail').setStyle('display','block');
																			$('foto_navigatie').setStyle('display','none');
																			// Start het effect
																			fx_in.start({'opacity': [0, 1]});
																		}
													   });
		// Start het effect
		fx_out.start({'opacity': [1, 0]});
	}
}

// Functie om het mail formulier te verzenden
function mail_foto() {

	var qs = query_string();
	// Alleen verzenden als de volgende velden aanwezig zijn
	// Bij gebruik van de URL Mapper is het id van het fotoalbum niet aanwezig. Dus moet deze in het formulier worden ingevuld
	if((qs['id'] || $('mail_fotoalbum_id').getProperty('value').length > 0) && $('mail_form') && $('foto_mail') && $('mail_foto_sent') && $('mail_fotoalbum_id') && $('mail_foto_veld') && $('mail_foto_veld').getProperty('value').length > 0 && $('mail_foto_id') && js_fotos[foto_index] && js_fotos[foto_index][0]) {	
		$('mail_foto_id').setProperty('value', js_fotos[foto_index][0]);
		// Als er gebruik gemaakt wordt van de URL Mapper dan dient het
		// id van het fotoalbum ingevuld te worden in het formulier.
		if(qs['id']) {
			$('mail_fotoalbum_id').setProperty('value', qs['id']);
		}

		// get lijkt niets uit te maken...
		// Maar vooralsnog het formulier in een Ajax request verzenden
		$('mail_form').send({method: 'get'});


		// Effect om navigatie formulier te tonen
		var fx_in2 = new Fx.Styles($('foto_navigatie'),{duration: 600,
														transition: Fx.Transitions.linear
														});
	
		// Effect om msucces bericht te verbergen
		var fx_out2 = new Fx.Styles($('mail_foto_sent'),{duration: 600,
														transition: Fx.Transitions.linear,
														'onComplete':	function() {
																			// Formulier verbergen
																			$('foto_mail').setStyle('display','none');
																			// Verberg succes bericht
																			$('mail_foto_sent').setStyle('display','none');
																			// Navigatie zichtbaar maken
																			$('foto_navigatie').setStyle('display','block');
																			fx_in2.start({'opacity': [0, 1]});
																		}
														});	
		// Effect om succes bericht te tonen
		var fx_in = new Fx.Styles($('mail_foto_sent'),{	duration: 600,
														transition: Fx.Transitions.linear,
														'onComplete':	function() {
																			fx_out2.start({'opacity': [1, 0]},500)
																		}
														});
		// Effect om formulier te verbergen
		var fx_out= new Fx.Styles($('foto_mail'),{	duration: 600,
														transition: Fx.Transitions.linear,
														'onStart':		function() {
																			$('mail_foto_veld').blur();
																			// Succes bericht ontzichtbaar maken
																			$('mail_foto_sent').setOpacity(0);
																		},
														'onComplete': 	function() {
																			// Maak succes bericht zichtbaar
																			$('mail_foto_sent').setStyle('display','block');
																			// Verberg formulier
																			$('foto_mail').setStyle('display','none');
																			// Start het effect
																			fx_in.start({'opacity': [0, 1]});
																		}
													   });
		// Start het effect
		fx_out.start({'opacity': [1, 0]});
	} else {
		// In elk ander geval navigatie weer tonen
		foto_navigatie_toon();
	}
}


// Functie om de query string uit te lezen
function query_string() {
	var qsParm = new Array();
	var query = window.location.search.substring(1);
	var parms = query.split('&');
	for (var i=0; i<parms.length; i++) {
		var pos = parms[i].indexOf('=');
		if (pos > 0) {
			var key = parms[i].substring(0,pos);
			var val = parms[i].substring(pos+1);
			qsParm[key] = val;
		}
	}
	return qsParm;
}