$(document).ready(function(){

	$("ul.subnav").parent().append("<span></span>"); 

	$("ul.topnav li").hover(function() {
			//$(".nu").removeClass("active").css("background","#007DAC");
			$(this).find("a").addClass("active");
			$(this).find("ul.subnav").slideDown('fast').show();
	
			$(this).hover(function() {
			}, function(){
				$(this).find("ul.subnav").slideUp('fast'); //When the mouse hovers out of the subnav, move it back up
			});

		//Following events are applied to the trigger (Hover events for the trigger)
		}).hover(function() {
			$(this).addClass("subhover"); //On hover over, add class "subhover"
			$(this).next().css("color","#FFFFFF");
		}, function(){	//On Hover Out
			$(this).removeClass("subhover"); //On hover out, remove class "subhover"
			$(this).find("a").removeClass("active");
	});

});




//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) * -500 + "px"}, 200);

}

$(function() {
	
	$("#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) * -500 + "px"}, 200);
			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;
			
		});
	
	});
	
});