var currentPhoto = null;

Event.observe(window, 'load', function(){
	$$('#foto-album li').each(function(element){
		// Verberg de foto
		element.hide();
		// Haal het <em> element op
		emChild = element.immediateDescendants().last();
		// Voeg links en rechts van de omschrijving een link toe
		emChild.update('<a href="#" class="prev-photo">&laquo;</a>'+emChild.innerHTML+'<a href="#" class="next-photo">&raquo;</a>');
	});

	// De eerste foto is de huidige foto
	currentPhoto = $('foto-album').immediateDescendants().first();
	currentPhoto.show();

	// Selecteer de link
	$$('#foto-album a.next-photo').each(function(element){
		// Registreer het gedrag voor de 
		// event 'onclick' op het link element
		element.observe('click', function(){
			// Verberg de huidige foto
			currentPhoto.hide();
			// Als er een volgende foto is
			if(currentPhoto.next() != undefined){
				// Selecteer het volgende html element
				// als deze niet undefined is
				currentPhoto = currentPhoto.next();
			} else {
				// Selecteer het eerste html element van
				// bovenliggende html node, in dit geval de
				// eerste foto
				currentPhoto = currentPhoto.parentNode.immediateDescendants().first();
			}
			// Laat de volgende foto zien
			currentPhoto.show();
		});
	});
	
	$$('#foto-album a.prev-photo').each(function(element){
		element.observe('click', function(){
			currentPhoto.hide();
			if(currentPhoto.previous() != undefined){
				currentPhoto = currentPhoto.previous();
			} else {
				currentPhoto = currentPhoto.parentNode.immediateDescendants().last();
			}
			currentPhoto.show();
		});
	});	
});