/* javascript voor slideshow met fade-effect */
/* (c)2008 Arthur van Zuylen, www.2parts.nl */

addEvent(window,'load',hideFocusBorders);
addEvent(window,'load',prepareSlideshow);

/* slideshow-functie */
function prepareSlideshow() {
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById) return false;
	if (!document.getElementById('carousselcontainer')) return false;
	if (!document.getElementById('carousselcontroller')) return false;
	if (!document.getElementById('cbutton')) return false;
	
	var autoSwitch = true; 
	var interval = 3000;
	var controller = document.getElementById('carousselcontroller');
	var links = controller.getElementsByTagName('a');
	var caroussel = document.getElementById('carousselcontainer');
	var imgs = caroussel.getElementsByTagName('img');	
	var aantal = imgs.length;
	var button = document.getElementById('cbutton');

	// haal teller [komt uit "class"-attribuut: "imgX" --> via substring(3)]
	var teller = parseInt(controller.className.substring(3));
	
	function autoPlay() {
		// bepaal uitgangssituatie
		if(teller != 1) {
			setTimeout((function(){changeFoto(teller);}),duration);
		}
		
		if(autoSwitch) {
			var autoplay = setTimeout(function() { nextFoto(); },interval);
		}
		
		// toon plaatjes op basis van mouseclick controllerlinkjes  
		for (var i=0; i<aantal; i++) {
			links[i].onclick = function() {
				var destination = parseInt(this.getAttribute('rel').substring(3));
				if(destination) {
					teller = destination;
					stop();
					
					setTimeout((function(){changeFoto(teller);}),duration);
		
					// fadeIn-effect
					fadeOut('carousselcontainer');
					setTimeout((function(){fadeIn('carousselcontainer');}),duration);
				}
				return false;
			}
		}
	
		/* (de)activeer controllerlinkjes en show/hide fotoos */
		function changeFoto(n) {
			for (var i=0; i<aantal; i++) {
				if(i==n-1) {
					links[i].className = 'actief';
					imgs[i].className = 'show';
				} else {
					links[i].className = 'inactief';
					imgs[i].className = 'hide';
				}
			}
		}	
	
		function nextFoto() {
			teller = ((teller) % aantal) + 1;
			setTimeout((function(){changeFoto(teller);}),duration);
		
			// fadeIn-effect
			fadeOut('carousselcontainer');
			setTimeout((function(){fadeIn('carousselcontainer');}),duration);
		
			autoPlay();
		}
		
		/* onderbreek animatie */
		button.onclick = function() {
						
			if(button.innerHTML == 'play') {
				play();
			} else if(button.innerHTML == 'pause') {
				stop();
			}
		
			return false;
		}
		
		function stop() {
			clearTimeout(autoplay);
			autoSwitch = false;
			button.innerHTML = 'play';
			button.className = 'actief';
		}
	
		function play() {
			autoSwitch = true; 
			nextFoto();
			button.innerHTML = 'pause';
			button.className = '';
		}
	}
	
	// start de player
	autoPlay();
}

/* hulpfuncties */

/* universele javascript-fader */
/* [ gebaseerd op http://www.ilikespam.com/blog/javascript-fade-effects ] */
var duration = 500;		/* milliseconds */
var steps = 24;			/* number opacity intervals */

function setOpacity(id,level) {
	var element = document.getElementById(id);
	element.style.opacity = level;
	element.style.MozOpacity = level;
	element.style.KhtmlOpacity = level;
	element.style.filter = 'alpha(opacity=' + (level * 100) + ');';
}

function fadeIn(id) {
	for (i = 0; i <= 0.999; i += (1/steps)) {
		setTimeout("setOpacity('" + id + "'," + i + ")", i * duration);
	}
	
	setTimeout("setOpacity('" + id + "'," + ".999);", duration);
	
}
      
function fadeOut(id) {
	for (i = 0; i <= 0.999; i += (1/steps)) {
		setTimeout("setOpacity('" + id + "'," + (1 - i) + ")", i * duration);
	}
	
	setTimeout("setOpacity('" + id + "',0);", duration);
}

/* 'add event' functie om meerdere javascript-functies aan te roepen */
function addEvent(obj, evType, fn) {
	if (obj.addEventListener) {
		obj.addEventListener(evType, fn, true);
		return true;
	
	} else if (obj.attachEvent) {
		var r = obj.attachEvent('on'+evType, fn);
		return r;
	
	} else {
		return false;
	}
}

/* verwijder stippellijntjes rond links */
/* ontleend aan http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt-i */
function hideFocusBorders() {
	var theahrefs = document.getElementsByTagName('a');
	
	if(!theahrefs) {
		return;
	}
	
	for(var x=0;x!=theahrefs.length;x++) {
		theahrefs[x].onfocus = function stopLinkFocus() {
			this.hideFocus=true;
		};
	}
}