//home
var slideInterval;
function slide(el) {

	li = el.find(".nav > li.active").removeClass("active").next();
	if(!li.size())
		li = el.find(".nav > li:first")
	li.addClass("active");
	
	el.find("ul:first").animate({top: li.parent().find("> li").index(li) * -322 + "px"}, 937);

}

function quickEffect() {
	
	$("#quick li").each(function() {
	
		$("img:first", this).fadeIn(400);
		$("img:first", this).fadeOut(400);
	
	});

};

$(function() {
	
	$("#quick img").hover(function() {
	
		$(this).attr("src", $(this).attr("src").replace(".png", "_effect.png"));
	
	}, function() {
	
		$(this).attr("src", $(this).attr("src").replace("_effect.png", ".png").replace("_effect.png", ".png").replace("_effect.png", ".png").replace("_effect.png", ".png").replace("_effect.png", ".png"));
	
	}).each(function() {
		
		$(this).before('<img src="' + $(this).attr("src").replace("_effect.png", ".png").replace("_effect.png", ".png").replace(".png", "_effect.png") + '" alt="" style="position: absolute; top: 0; left: 1px;" />').prev().hide();
		
	});
	
	setInterval(quickEffect, 10000);
	
	$("li").hover(function() {
		$(this).addClass("hover");
	}, function() {
		$(this).removeClass("hover");
	});
	
	$("#home").each(function() {
		
		$("> ul", this).addClass("items");
		$(this).append('<ul class="nav"></ul>');
		
		visualSize = $("#home > ul > li").size();
		for(i = 0; i < visualSize; i++) {
			$("> .nav", this).append('<li><a href="#" title="Naar ' + (i+1) + '">' + (i+1) + '</a></li>');
		}
		$("> .nav > li:first", this).addClass("active");
		
		$("> .nav > li > a", this).click(function() {
			
			clearInterval(slideInterval);
			el = $("#visual");
			slideInterval = setInterval("slide(el);", 7500);
			
			$(this).parent().parent().find("> li").removeClass("active");
			$(this).parent().addClass("active");
			$(this).parent().parent().prev().animate({top: $(this).parent().parent().find("> li > a").index(this) * -322 + "px"}, 937);
			return false;
		});
		
		el = $(this);
		slideInterval = setInterval("slide(el);", 7500);

	});
	
	$(".dynamic").each(function() {
	
		$(this).next().find("> li").hide().fadeOut(0);
		$(this).next().find("> li:eq(" + $("> li", this).index($("> li.active", this)) + ")").fadeIn(0);
		
		$("a", this).click(function() {

			if($(this).parent().attr("class") != "active hover") {
			
				$(this).parent().parent().next().css("height", $(this).parent().parent().next().height() + "px");
				
				$(this).parent().parent().find("> li").removeClass("active");
				$(this).parent().addClass("active");
				
				$(this).parent().parent().next().find("> li:visible").hide();
				$(this).parent().parent().next().find("> li:eq(" +  $(this).parent().parent().find("> li").index($(this).parent()) + ")").fadeIn(500);
			
				$(this).parent().parent().next().css("height", "auto");
			
			}
			
			return false;
			
		});
	
	});
	
});