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

/* definieer variabelen */
var hoogte = 214;
var breedte = 518;
var richting = 'hor'	/* horizontale verschuiving */
//var richting = 'ver'	/* vertitale verschuiving */
var move_x = 0;
var move_y = 0;
//var carousselcookie = parseInt(readCookie('caroussel'));

function prepareSlideshow() {
	if (!document.getElementsByTagName) return false;
	if (!document.getElementById) return false;
	if (!document.getElementById('caroussel')) return false;
	
	var navigatie = document.getElementById('carousselnavigatie');
	var links = navigatie.getElementsByTagName('a');
	var controller_terug = document.getElementById('terug');
	var controller_vooruit = document.getElementById('vooruit');
	
	var caroussel = document.getElementById('caroussel');
	var carousseldata = document.getElementById('carousseldata');
	var imgs = carousseldata.getElementsByTagName('img');	
	var aantal = imgs.length;
	
	//if(carousselcookie != '') {
		//var teller = carousselcookie;
	//} else {
		// haal indexen op voor terug/vooruit [komen uit "class"- en "rel"-attributen]
		var teller = parseInt(navigatie.className.substring(1));
	//}
	
	var terug = parseInt(controller_terug.getAttribute('rel').substring(1));
	var vooruit = parseInt(controller_vooruit.getAttribute('rel').substring(1));
		
	// bepaal uitgangssituatie
	if(teller != 1) {
		changeLink(teller);
		move(teller);
		updateLinks(teller);
	}
	
	// verander class van de plaatjes
	for (var i=0; i<aantal; i++) {
		changeClass(imgs[i],i);
	}	
	
	// definieer beweging
	if(richting == 'hor') {
		var div_breedte = imgs.length * breedte;
		carousseldata.style.width= div_breedte + 'px';	
	} else if(richting == 'ver') {	
		var div_hoogte = imgs.length * hoogte;
		carousseldata.style.height= div_hoogte + 'px';
	}
	
	// laat plaatjes bewegen op basis van mouseclick navigatielinkjes  
	for (var i=0; i<links.length; i++) {
		links[i].onclick = function() {
			var destination = parseInt(this.getAttribute('rel').substring(1));
			if(destination) {
				changeLink(destination);
				move(destination);
				updateLinks(destination);
				//createCookie('caroussel',destination,1);
			}
			return false;
		}
	}
	
	// laat plaatjes bewegen op basis van mouseclick controller
	controller_terug.onclick = function() {
		var destination = parseInt(this.getAttribute('rel').substring(1));
		if(destination) {
			changeLink(destination);
			move(destination);				
			updateLinks(destination);
			//createCookie('caroussel',destination,1);
		}	
		return false;
	}
	
	controller_vooruit.onclick = function() {
		var destination = parseInt(this.getAttribute('rel').substring(1));
		if(destination) {
			changeLink(destination);
			move(destination);				
			updateLinks(destination);
			//createCookie('caroussel',destination,1);
		}	
		return false;
	}
	
	
	// update controllerlinks
	function updateLinks(n) {
		terug = n - 1;
		if(terug < 1) {
			terug = aantal;
		}
		vooruit = n + 1;
		if(vooruit > aantal) {
			vooruit = 1;
		}
		controller_terug.href = 'site.php?toon=' + terug;
		controller_terug.rel = 'l' + terug;
		controller_vooruit.href = 'site.php?toon=' + vooruit;
		controller_vooruit.rel = 'l' + vooruit;
	}
	
	function changeLink(n) {
		for (var i=0; i<links.length; i++) {
			if(i==n-1) {
				links[i].className = 'actief';
			} else {
				links[i].className = 'inactief';	
			}
		}
	}
}

/* functie om HTML-elementen te laten bewegen */
/* [ ontleend aan http://www.domscripting.com/ van Jeremy Keith ] */
function moveElement(elementID,final_x,final_y,interval) {
	if (!document.getElementById) return false;
	if (!document.getElementById(elementID)) return false;
	var elem = document.getElementById(elementID);
	if (elem.movement) {
		clearTimeout(elem.movement);
	}
	if (!elem.style.left) {
		elem.style.left = '0px';
	}
	if (!elem.style.top) {
		elem.style.top = '0px';
	}
	var xpos = parseInt(elem.style.left);
	var ypos = parseInt(elem.style.top);
	if (xpos == final_x && ypos == final_y) {
		return true;
	}
	if (xpos < final_x) {
		var dist = Math.ceil((final_x - xpos)/10);
		xpos = xpos + dist;
	}
	if (xpos > final_x) {
		var dist = Math.ceil((xpos - final_x)/10);
		xpos = xpos - dist;
	}
	if (ypos < final_y) {
		var dist = Math.ceil((final_y - ypos)/10);
		ypos = ypos + dist;
	}
	if (ypos > final_y) {
		var dist = Math.ceil((ypos - final_y)/10);
		ypos = ypos - dist;
	}
	elem.style.left = xpos + 'px';
	elem.style.top = ypos + 'px';
	var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
	elem.movement = setTimeout(repeat,interval);
}

// functie die div laat verschuiven in gewenste richting
function move(n) {
	n = n-1;	// correctie voor telling [arrays starten bij 0 ipv 1]
	if(richting == 'hor') {
		move_x = n * breedte;
	} else if(richting == 'ver') {
		move_y = n * hoogte;
	}	
	moveElement('carousseldata',-move_x,-move_y,1);
}

/* hulpfunctie */
function changeClass(el,n) {
	el.className = 'show';
}