$(document).ready(function() {		// Hiermee wordt de slider uitgevoerd.
	
	slideShow(3000); //De wachttijd per afbeelding in milliseconden, nu 3 seconden dus.

});

function slideShow(speed) {


	//We voegen een 'list-item' toe aan de lijst, om de tekst te laten zien van die afbeelding.
	$('ul.slider').append('<li id="slider-caption" class="caption"><div class="slider-caption-container"><h3></h3><p></p></div></li>');

	//Alle afbeelding worden volledig doorzichtig gemaakt.
	$('ul.slider li').css({opacity: 0.0});
	
	//We pakken het eerste plaatje en maken dit plaatje volledig zichtbaar.
	$('ul.slider li:first').css({opacity: 1.0});
	
	//Hiermee pakken we de tekst van het plaatje (titel en beschrijving).
	$('#slider-caption h3').html($('ul.slider a:first').find('img').attr('title'));
	$('#slider-caption p').html($('ul.slider a:first').find('img').attr('alt'));
		
	//We laten die zien, met 30% doorzichtigheid.
	$('#slider-caption').css({opacity: 0.7, bottom:0});
	
	//We roepen de 'gallery()'-functie aan om door te gaan.	
	var timer = setInterval('gallery()',speed);
	
	//Dit zorgt ervoor dat de timer stopt, wanneer de cursor boven het plaatje zweeft.
	$('ul.slider').hover(
		function () {
			clearInterval(timer);	
		}, 	
		function () {
			timer = setInterval('gallery()',speed);			
		}
	);
	
}

function gallery() {


	//Een error-catch. Als er geen eerste plaatje is aangegeven.
	var current = ($('ul.slider li.show')?  $('ul.slider li.show') : $('#ul.slider li:first'));

	//Dit zorgt ervoor dat de functie het volgende plaatje pakt, of als we bij het eind zijn, het eerste plaatje weer.
	var next = ((current.next().length) ? ((current.next().attr('id') == 'slider-caption')? $('ul.slider li:first') :current.next()) : $('ul.slider li:first'));
		
	//Uiteraard ook de tekst van het volgende plaatje.
	var title = next.find('img').attr('title');	
	var desc = next.find('img').attr('alt');	
		
	//We zorgen voor een 'fade-in' effect.
	next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
	
	//Eerst verstoppen we de tekst, om deze vervolgens te laten zien.
	$('#slider-caption').animate({bottom:115}, 300, function () {
			$('#slider-caption h3').html(title);
			$('#slider-caption p').html(desc);				
			$('#slider-caption').animate({bottom:0}, 500);	
	});		

	//We laten het huidige plaatje verdwijnen.
	current.animate({opacity: 0.0}, 1000).removeClass('show');

}