// mootools 1.2.1 is benodigd (www.mootools.net)
// DP_FOTOALBUM
// VERSIE 2.01 - 02-02-2009
// Bugfix zodat tekst goed geset wordt voor foto commentaar
// VERSIE 2.00 - 03-09-2008 / 22-10-2008
// Is afhankelijk van FancyUpload2.js en bijbehorende bestanden indien CreateDPFotoQueue() wordt aangeroepen

/*
	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.decode(watermerk_styles);
	comment_styles	 = JSON.decode(comment_styles);

	if(opacity_watermerk > 0 || opacity_tekst > 0) {
		// Alle foto's bij langs gaan
		document.getElements('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.inject(parent,'before');
									parent.dispose();
								}
								
								// Container VOOR img tag plaatsen
								container.inject(img,'before');
								// img tag IN container plaatsen
								img.inject(container,'inside');
								// div tag IN container plaatsen
								watermerk.inject(container,'inside');
								// span tag IN container plaatsen
								comment.inject(container,'inside');
	
								// 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.set('opacity',opacity_watermerk);
								// Commentaar regel doorzichtig maken
								comment.set('opacity',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.set('text',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.read('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.Morph($(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').set('html', 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').set('html', 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').set('html', 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').set('html', foto_index  +1);
																				}
																				
																			}
														}); 
	// Foto verbergen
	var foto_fx = new Fx.Morph($(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 Request.JSON({	url: "?aktie=comments_get&foto_id=" + foto_id + pagina_id,
										   		onComplete: function(foto){
																			if($('foto_korte_omschrijving')) {
																				$('foto_korte_omschrijving').set('text',foto.comment_short);
																			}
																			if($('foto_lange_omschrijving')) {
																				$('foto_lange_omschrijving').set('text',foto.comment_long);
																			}
																		}
															}).send();
	}

}

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

		$('foto_navigatie').set('opacity',0);
		
		// Effect om mail navigatie te tonen
		var fx_in = new Fx.Morph($('foto_navigatie'),{	duration: 300,
														transition: Fx.Transitions.linear,
														'onComplete':	function() {
																			
																		}
														});
		// Effect om formulier te verbergen
		var fx_out= new Fx.Morph($('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').set('opacity',0);
		
		// Effect om mail formulier te tonen
		var fx_in = new Fx.Morph($('foto_mail'),	  {	duration: 300,
														transition: Fx.Transitions.linear,
														'onComplete':	function() {
																			$('mail_foto_veld').focus();
																		}
														});
		// Effect om navigatie te verbergen
		var fx_out= new Fx.Morph($('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();


		// Effect om navigatie formulier te tonen
		var fx_in2 = new Fx.Morph($('foto_navigatie'),{duration: 600,
														transition: Fx.Transitions.linear
														});
	
		// Effect om msucces bericht te verbergen
		var fx_out2 = new Fx.Morph($('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.Morph($('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.Morph($('foto_mail'),{	duration: 600,
														transition: Fx.Transitions.linear,
														'onStart':		function() {
																			$('mail_foto_veld').blur();
																			// Succes bericht ontzichtbaar maken
																			$('mail_foto_sent').set('opacity',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();
	}
}

//////////////////////////////////////////////////////////////////////////////////////////
// DP_FOTOQUEUE
// Afgeleide van FancyUpload2
//////////////////////////////////////////////////////////////////////////////////////////

// Voer setup alleen uit in een domready event ( window.addEvent('domready', function() {}); )
// Parameter: '/layout/Swiff.Uploader.swf'
function CreateDPFotoQueue(SwiffUploaderPath) {
	
	// De klasse. Deze staat in deze functie omdat FancyUpload niet persé aanwezig hoeft te zijn
	var dp_fotoqueue = 	new Class({
									Extends: FancyUpload2,
									// De vertalingen
									options: {	dp_titels: {
													updateOverall: 	'Algehele voortgang',
													onComplete: 	'Uploaden voltooid!',
													onOpen: 		'Bestandsvoortgang "{name}"',
													onProgress:		'Uploaden met {rate}/s. Tijd resterend: ~{timeLeft}',
													emailSent:		false
												}},
												
									updateOverall: 	function(bytesTotal) {
														this.parent(bytesTotal);
														this.overallTitle.set('html', this.options.dp_titels.updateOverall + ' (' + this.sizeToKB(bytesTotal) + ')');
													},
													
									onComplete:		function(file, response) {
														this.parent(file, response);
														this.currentText.set('html', this.options.dp_titels.onComplete);
													},
									
									onAllComplete:	function(current) {
														this.parent(current);
														// Alleen na de eerste upload batch een e-mail sturen
														if(!this.options.emailSent) {
															this.options.emailSent = true;
															var jsonRequest = new Request.JSON({url: "/cms/dp_content.php?fotoqueue&sendmail",
																								onComplete: function(result){
																									
																								}}).post({	captcha: $('captcha').get('value'),
																											global_captcha: $('global_captcha').get('value')});
														}
													},
									
									onOpen: function(file, overall) {
										this.parent(file, overall)
										this.currentTitle.set('html', this.options.dp_titels.onOpen.substitute(file) );
									},
									
									fileCreate: function(file) {
										this.parent(file);
										this.list.getElements('.file-remove').set('html','Verwijder');
									}
						});

	
	
	
	var fotoqueue = new dp_fotoqueue($('fotoqueue-status'), $('fotoqueue-list'), {
																		'url': $('form-demo').action,
																		'limitFiles': 10,
																		'fieldName': 'photoupload',
																		'path': SwiffUploaderPath,
																		'onLoad': function() {
																			$('fotoqueue-status').removeClass('hide');
																			$('fotoqueue-fallback').destroy();
																		},
																		'dp_titels': {
																			overall_progress: 'Algehele voortgang',
																			currentTitle: $('fotoqueue-status').getElement('.current-title').get('text')
																		}
																	});
	
	// Bladeren knop
	$('fotoqueue-browse-images').addEvent('click', function() {
		// Alleen jpeg toestaan
		fotoqueue.browse({'Afbeeldingen (*.jpg, *.jpeg)': '*.jpg; *.jpeg;'});
		return false;
	});
 
 	// Leegt de bestandenlijst
	$('fotoqueue-clear').addEvent('click', function() {
		fotoqueue.removeFile();
		return false;
	});
 
	$('fotoqueue-upload').addEvent('click', function() {
		// Valideer CAPTCHA code
		var request = new Request.JSON({url: "/cms/dp_content.php?captchacheck",
										onComplete:	function(status) {
														switch(status.result) {
															case 'error':
															case 'failed':
																alert(status.error);
															break;
															case 'success':
																// Pas te uploaden data aan
																fotoqueue.options.data= {	email: $('email').get('value'),
																					  		captcha: $('captcha').get('value'),
																					  		global_captcha: $('global_captcha').get('value')
																					 	};
																// Uploaden starten
																fotoqueue.upload();
															break;
														}
													}
										// Request direct uitvoeren met beschikbare data
										}).get({global_captcha: $('global_captcha').get('value'),
												captcha: $('captcha').get('value')});
						});
	return fotoqueue;
}




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