//THIS is how you make an onubtrustive JavaScript! GPR eat your heart out.
//when the page loads, function loadSlideshow will be called
//window.onload = loadSlideshow;
var timeoutId;

function loadSlideshow()
{
	//quits silently when browser has no JavaScript / DOM support
	if (document.getElementById && document.getElementById("vorige"))
	{
		//defines actions when clicking on links, to reduce the number of server calls
		document.getElementById("vorige").onclick = previousImage;
		document.getElementById("volgende").onclick = nextImage;

        //creates the "START" button for playing the slideshow
        //doesn't work for browsers that don't support JavaScript, so don't show them!
        //defines an anchor (a element) with an id, an href and the text "START"
        var startLink = document.createElement("a");
        var startId = document.createAttribute("id");
        startId.value = "startSlideshow";
        startLink.setAttributeNode(startId);
        var startHref = document.createAttribute("href");
        startHref.value = "javascript:startSlideshow();";
        startLink.setAttributeNode(startHref);
		var startSlideShow = document.getElementById("playSlideShow");
        startLink.appendChild(startSlideShow);
        document.getElementById("navigation").appendChild(startLink);
	}
}

function previousImage()
{
	//quits silently when browser has no JavaScrip / DOM support
	if (document.getElementById)
	{
		//gets the counter with current photo and total photo's and splits it to get the current photo
		var aantal = document.getElementById("aantal").innerHTML;
		var array = aantal.split("/");
		var current = array[0] - 1;
		//gets the main div and iterates all its childs, to change the visible photo
		var mainContainer = document.getElementById("image");
		var slideshowImages = mainContainer.getElementsByTagName("span");
		var numberOfSlideshowImages = array[1];
		if (current == 0)
		{
			current = numberOfSlideshowImages;
		}
		for (i=0;i<=numberOfSlideshowImages;i++)
		{
			if (slideshowImages[i].className != "")
			{
				slideshowImages[i].className="inactive";
			}
			if (i == current - 1)
			{
				slideshowImages[i].className="active";
				// changes the url of the fullscreen link
				var subLink = slideshowImages[i].getElementsByTagName("a");
				var fullscreenLink = document.getElementById("fullscreen");
				fullscreenLink.setAttribute("href", subLink[0].getAttribute("href"));
			}
		}
		//changes the counter for the current photo
		if (current != 12)
		{
			document.getElementById("aantal").innerHTML = current + "/" + array[1];
		}
		else
		{
			document.getElementById("aantal").innerHTML = numberOfSlideshowImages + "/" + array[1];
		}
	}
	return false;
}

//see previousImage() comments
function nextImage()
{
	if (document.getElementById)
	{
		var aantal = document.getElementById("aantal").innerHTML;
		var array = aantal.split("/");
		var current = array[0];
		var mainContainer = document.getElementById("image");
		var slideshowImages = mainContainer.getElementsByTagName("span");
		var numberOfSlideshowImages = array[1];
		if (current == numberOfSlideshowImages)
		{
			current = 0;
		}
		for (i=0;i<=numberOfSlideshowImages;i++)
		{
			if (slideshowImages[i].className != "")
			{
				slideshowImages[i].className="inactive";
			}
			if (i == current)
			{
				slideshowImages[i].className="active";
				// changes the url of the fullscreen link
				var subLink = slideshowImages[i].getElementsByTagName("a");
				var fullscreenLink = document.getElementById("fullscreen");
				fullscreenLink.setAttribute("href", subLink[0].getAttribute("href"));
			}
		}
		document.getElementById("aantal").innerHTML = (Number(current)+1) + "/" + array[1];
	}
	return false;
}

function startSlideshow()
{
    //start the slideshow with a timeout
    nextImage();
    timeoutId = setTimeout(startSlideshow, 5000); //5000 miliseconden = 5 seconden
	var startLink = document.getElementById('startSlideshow');
	var startHref = document.createAttribute("href");
	startHref.value = "javascript:stopSlideshow();";
	startLink.setAttributeNode(startHref);
	var slideshowIcon = document.getElementById("playSlideShow");
	var slideshowSrc = slideshowIcon.getAttributeNode("src");
	var temp = slideshowSrc.value;
	slideshowSrc.value = temp.replace("playButton.png", "stop.gif");
	slideshowIcon.setAttributeNode(slideshowSrc);
}

function stopSlideshow()
{
	clearTimeout(timeoutId);
	var startLink = document.getElementById('startSlideshow');
	var startHref = document.createAttribute("href");
	startHref.value = "javascript:startSlideshow();";
	startLink.setAttributeNode(startHref);
	var slideshowIcon = document.getElementById("playSlideShow");
	var slideshowSrc = slideshowIcon.getAttributeNode("src");
	var temp = slideshowSrc.value;
	slideshowSrc.value = temp.replace("stop.gif", "playButton.png");
	slideshowIcon.setAttributeNode(slideshowSrc);
}