var currentLayer=1;
var currentSlide=1;
var queue=0;
var animating=false;
var timer=null;
var leesmeerLink=$("#header > a#leesmeer");

function getFrontLayerId() {
	return "#layer"+(currentLayer?1:0);
}

function getBackLayerId() {
	return "#layer"+(currentLayer?0:1);
}

function swapLayers() {
	$(getBackLayerId())
		.css("zIndex","1");
	$(getFrontLayerId())
		.css("zIndex","-1")		
		.find("div")
			.css({left: 0, opacity: 1})
			.show();
	currentLayer=(currentLayer?0:1);
	
	animating=false;
	
	if (queue>0) {		
		slide(queue);
		queue=0;
	}
}

function slide(targetSlide) {											
	if (targetSlide==currentSlide) {
		return;
	}
	
	if (animating) {
		queue=targetSlide;
		return;
	}
	
	animating=true;
	
	var highlightLink=$("ul#intromenu > li > a[tabIndex="+targetSlide+"]");

	leesmeerLink.attr('title','Lees meer over '+highlightLink.attr('title'));
	leesmeerLink.attr('href',highlightLink.attr('href'));
	leesmeerLink.find('span').text(leesmeerLink.attr('title'));
	
	$(getBackLayerId())
		.find("div.top")
			.css("backgroundPosition",""+(-940*(targetSlide-1))+"px 0")
			.end()
		.find("div.bottom")
			.css("backgroundPosition",""+(-940*(targetSlide-1))+"px -42px");
			
	$(getFrontLayerId())
		.find("div")
			.stop(false, true)
			.end()
		.find("div.top")
		 	.fadeOut(200)
			.end()
		.find("div.bottom")
		 	.animate(currentSlide<targetSlide?{left: "-940px", opacity: 0}:{left: "940px", opacity: 0},
					 500,
					 "swing",
					 swapLayers);
	
	currentSlide=targetSlide;
}

$("ul#intromenu > li > a")
	.mouseleave(setTimer)
	.mouseenter(function () {
				slide(parseInt(this.tabIndex));
				clearTimeout(timer);
				return false;
			});

leesmeerLink
	.mouseleave(setTimer)
	.mouseenter(function () {
				clearTimeout(timer);
				return false;
			});
			
function setTimer() {
	timer=setInterval(function () {slide(1+(currentSlide%3))},8000);
}
	
setTimer();