/* (c) 2005 Koen Peters */

var THUMBNAILS	= 0;
var FULLSIZE	= 1;

var preloadsProject = new Array();
var types  = [['img', 'span', 'preloadsProject', 'noimg'], ['maximg', 'div', 'preloadsProjectMax', '-skip-']];

/*	public functie die de fotos van de lijsten preload */
function initFotos(typeNr) {
	// Opslaan van de gewenste afbeeldingen
	var spans = document.getElementsByTagName(types[typeNr][1]);
	// Er wordt een array aangemaakt ter lengte van het aantal 'span' elementen (dit kunnen er meer zijn dan het aantal te laden plaatjes!)
	preloadsProject[typeNr] = new Array(spans.length);
	for (var i=0; i < spans.length; i++) {
		if (spans[i].id.split('|')[0] == types[typeNr][0]) {
			// Het is een span die een link naar een afbeelding bevat.
			var img	 = new Image();
			img.src	 = 'img/projecten/' + spans[i].id.split('|')[2]
			preloadsProject[typeNr][i] = img;
			// Save the index is the preloadsProject array inside the span element for later use.
			spans[i].id = spans[i].id + ('|' + i);
			
		} else if (spans[i].id.split('|')[0] == types[typeNr][3]) {
			// Het is een maximaliseer knop
			spans[i].onclick = 	function () { 
									initMaxFoto(this.id.split('|')[1]); 
								}
		}
	}
	// Controleren of de afbeeldingen zijn geladen en zo ja: actief maken van de gekoppelde acties
	checkFotoStatus(typeNr);
}

function checkFotoStatus(typeNr) {
	var allLoaded	= true;
	var spans		= document.getElementsByTagName(types[typeNr][1]);
	for (var i=0; i < spans.length; i++) {
		if (spans[i].id.split('|')[0] == types[typeNr][0]) {
			if (preloadsProject[typeNr][i].complete ) {
				// Het plaatje is geladen, er kan een actie aan de span worden gekoppeld en dat is niet al gedaan.				
				spans[i].onmouseover = function () {
											document.getElementById(this.id.split('|')[1]).src = preloadsProject[typeNr][this.id.split('|')[3]].src;
											// voeg de hover class toe aan de className indien die nog niet is toegevoegd
											this.className = this.className + (this.className.indexOf('hover') == -1? ((this.className != ''? ' ': '') + 'hover'): '');
										}
				spans[i].onmouseout = function () {
											var index = this.className.indexOf('hover');
											// verwijder de hover class van de className als die erbij zit.
											this.className = index == -1? this.className: this.className.substring(0, this.className.length - (this.className.indexOf(' ') != -1? 6: 5));
										}
				spans[i].className = 'loaded' + (spans[i].className != ''? ' ' + spans[i].className: '');
			} else {
				allLoaded = false;
			}
		} 
	}
	if (!allLoaded) setTimeout('checkFotoStatus(' + typeNr + ')', 100);
}


function initMaxFoto(fotoId) {
		// 1) Toevoegen van de nieuwe links
		// 1 a) zoek alle spans waar links in staan naar de foto's die nu gemaximaliseerd moeten worden afgebeeld.
		var spans			= document.getElementsByTagName('span');
		var newInnerHTML	= '';
		for (var j=0; j < spans.length; j++) {
			var spanSplit = spans[j].id.split('|');
			if (spanSplit[2] && spanSplit[0] == 'img' && spanSplit[1] == fotoId) {
				// Het is een span die een link naar een te maximalen afbeelding bevat.
	
				// 1 b) Stel de link naar de gemaximaliseerde versie samen
				var maxImgLink = spanSplit[2].substring(0, spanSplit[2].lastIndexOf('/')) + '/originelen' + spanSplit[2].substr(spanSplit[2].lastIndexOf('/'));
				
				// 1 c) De eerste afbeelding goed instellen
				if (newInnerHTML == '') document.getElementById('maxfoto').src = 'img/projecten/' + maxImgLink;
				
				// 1 d) Creëer een nieuwe div (span werkt niet, geeft errors)
				var newDiv = "<div id='maximg|maxfoto|" + maxImgLink + "'" + (newInnerHTML == ''? " class='begin'": "") + ">" + spans[j].innerHTML + "</div>";
	
				// 1 e) Sla de nieuwe span tijdelijk op
				newInnerHTML += newDiv;
			}
		}
		// 2) Voeg de 'close knop' toe
		newInnerHTML += "<div id='maxClose' onClick='closeMaxFoto();'>&nbsp;</div>";

		// 3) Voeg deze nieuwe toe aan 'maxlijst'
		document.getElementById('maxlijst').innerHTML = newInnerHTML;
	
		// 4) plaatsen van de div in de buurt van de thumbnails
		var maxfotos		= document.getElementById('maxfotos');
		maxfotos.style.top	= (getScrollingOffsetY() + ((screen.availHeight - 800) / 2)) + "px";
		maxfotos.style.left	= ((screen.availWidth - 400) / 2) + "px";
	
		// 5) zichtbaar maken van de div
		maxfotos.style.display = 'block';
	
		// 6) achtergrond uitfaden
		document.getElementById('container').id = 'container_hidden';
		
		initFotos(1);
}

function closeMaxFoto() {
	//1) onzichtbaar maken van de div
	document.getElementById('maxfotos').style.display = 'none';

	//2) achtergrond infaden
	document.getElementById('container_hidden').id = 'container';
}