// Speed of the automatic slideshow
var slideshowSpeed = 3500;

// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
		"title" : "Lees verder",
		"image" : "../files/35/uploads/image/sliderImg1.jpg",
		"url" : "/restaurant-het-middelpunt-enschede",
		"firstline" : "Welkom bij restaurant<br/><span>Het Middelpunt</span>",
		"secondline" : "Restaurant Het Middelpunt is al jarenlang een begrip in Enschede West. Het gezellige restaurant ligt in de wijk Stadsveld. Bij ons kunt u heerlijk tafelen in een sfeervolle omgeving!"
	}, {
		"title" : "Bekijk ons cafetaria",
		"image" : "../files/35/uploads/image/sliderImg4.jpg",
		"url" : "/cafetaria-de-keizer",
		"firstline" : "Cafetaria<br/><span>De Keizer</span>",
		"secondline" : "Sinds kort is ons nieuwe cafetaria 'De Keizer' in Enschede geopend. Cafetaria De Keizer biedt tevens zaalverhuur!"
	}, {
		"title" : "Meer over onze cateringservice",
		"image" : "../files/35/uploads/image/sliderImg3.jpg",
		"url" : "/cateringservice",
		"firstline" : "Het Middelpunt<br/><span>cateringservice</span>",
		"secondline" : "Klik op de knop voor meer informatie over onze cateringservice."
	}, {
		"title" : "Bekijk onze menukaart",
		"image" : "../files/35/uploads/image/sliderImg2.jpg",
		"url" : "/restaurant-het-middelpunt-enschede/menukaart",
		"firstline" : "Met familie of vrienden<br/><span>Heerlijk uit eten</span>",
		"secondline" : "Het Middelpunt is de ideale stek om lekker met familie of vrienden een hapje te eten, een biertje of wijntje te drinken of een spelletje te spelen. Voor borrels of etentjes in grotere groepen zijn wij ook uitermate geschikt."
	}
];



$(document).ready(function() {
		
	// Backwards navigation
	$("#back").click(function() {
		stopAnimation();
		navigate("back");
	});
	
	// Forward navigation
	$("#next").click(function() {
		stopAnimation();
		navigate("next");
	});
	
	var interval;
	$("#control").toggle(function(){
		stopAnimation();
	}, function() {
		// Change the background image to "pause"
		$(this).css({ "background-image" : "url(images/btn_pause.png)" });
		
		// Show the next image
		navigate("next");
		
		// Start playing the animation
		interval = setInterval(function() {
			navigate("next");
		}, slideshowSpeed);
	});
	
	
	var activeContainer = 1;	
	var currentImg = 0;
	var animating = false;
	var navigate = function(direction) {
		// Check if no animation is running. If it is, prevent the action
		if(animating) {
			return;
		}
		
		// Check which current image we need to show
		if(direction == "next") {
			currentImg++;
			if(currentImg == photos.length + 1) {
				currentImg = 1;
			}
		} else {
			currentImg--;
			if(currentImg == 0) {
				currentImg = photos.length;
			}
		}
		
		// Check which container we need to use
		var currentContainer = activeContainer;
		if(activeContainer == 1) {
			activeContainer = 2;
		} else {
			activeContainer = 1;
		}
		
		showImage(photos[currentImg - 1], currentContainer, activeContainer);
		
	};
	
	var currentZindex = -1;
	var showImage = function(photoObject, currentContainer, activeContainer) {
		animating = true;
		
		// Make sure the new container is always on the background
		currentZindex--;
		
		// Set the background image of the new active container
		$("#headerimg" + activeContainer).css({
			"background-image" : "url(images/" + photoObject.image + ")",
			"display" : "block",
			"z-index" : currentZindex
		});
		
		// Hide the header text
		$("#headertxt").css({"display" : "none"});
		
		// Set the new header text
		$("#firstline").html(photoObject.firstline);
		$("#secondline")
			.attr("href", photoObject.url)
			.html(photoObject.secondline);
		$("#pictureduri")
			.attr("href", photoObject.url)
			.html(photoObject.title);
		
		
		// Fade out the current container
		// and display the header text when animation is complete
		Cufon.refresh();
		$("#headerimg" + currentContainer).fadeOut(function() {
			setTimeout(function() {
				$("#headertxt").css({"display" : "block"});
				animating = false;
			}, 500);
		});
	};
	
	var stopAnimation = function() {
		// Change the background image to "play"
		$("#control").css({ "background-image" : "url(images/btn_play.png)" });
		
		// Clear the interval
		clearInterval(interval);
	};
	
	// We should statically set the first image
	navigate("next");
	
	// Start playing the animation
	interval = setInterval(function() {
		navigate("next");
	}, slideshowSpeed);
	
});