var target				= document.getElementById('target');
var caption				= document.getElementById('caption');
var thumb_list 			= document.getElementById('thumbnails').getElementsByTagName('a');
var thumbnail_target 	= document.getElementById('thumbnail_target');
var current_img			= 0;
var total_img			= thumb_list.length - 1;
var active_thumb		= false;

/**
 * Zet een thumbnail op actief
 */
function setActivePhoto(thumbnail) {
	if(active_thumb)
		Dom.removeClass(active_thumb,"border thumbactive");

	target.src			= thumbnail.href;
	caption.innerHTML 	= thumbnail.title;

	active_thumb = thumbnail;
	Dom.addClass(active_thumb,"border thumbactive");
	current_img = thumbnail.rel;
}

/**
 * Functie voor het klikken op de foto
 */
function loadPhoto(e) {
	Event.preventDefault(e);

	var element = Event.getTarget(e);

	while(element.id != "thumbnails") {
		if(element.nodeName.toLowerCase() == "a")
			setActivePhoto(element);

		element = element.parentNode;
	}
}

/**
 * Functie voor het navigeren via de pijltjes
 *
 * (Via event delegation: http://developer.yahoo.com/yui/examples/event/event-delegation.html)
 */
function navigate(e) {
	Event.preventDefault(e);

	var element = Event.getTarget(e);

	// Voer de while uit zolang het element niet gelijk is aan de container
	while(element.id != "thumbnail_target") {
		// Check of het huidige element een link is
		if(element.nodeName.toLowerCase() == "a") {
			if(element.id == "prev")
				if(current_img > 0)
					current_img--;
				else
					current_img = total_img;
			else {
				if(current_img < total_img)
					current_img++;
				else
					current_img = 0;
			}

			setActivePhoto(thumb_list[current_img]);
		}

		// Als de link nog niet gevonden is, ga een niveau omhoog
		element = element.parentNode;
	}
}

// Voeg de event listeners toe als er thumbnails zijn
if(thumb_list.length) {
	setActivePhoto(thumb_list[current_img]);
	
	Event.addListener('thumbnails',"click",loadPhoto);
	Event.addListener('thumbnail_target',"click",navigate);
}