$(document).ready(function () {
	
	//alleen doorgaan als het actieve element in het menu bestaat
	if ($('nav ul li a.actief').length){
	
			var style = 'easeOutElastic';
		
			
			
			//Retrieve the selected item position and width
			var default_left = Math.round($('nav ul li a.actief').offset().left - $('nav ul').offset().left);
			var default_width = $('nav ul li a.actief').width();
	
			//Set the floating bar position and width
			$('#box').css({left: default_left});
			$('#box .head').css({width: default_width});
	
			//if mouseover the menu item
			$('nav ul li').hover(function () {
				
				//Get the position and width of the menu item
				left = Math.round($(this).offset().left - $('nav ul').offset().left);
				width = $(this).width(); 
			$('#debug').html(left);
				//Set the floating bar position, width and transition
				$('#box').stop(false, true).animate({left: left},{duration:500, hover: style});	
				$('#box .head').stop(false, true).animate({width:width},{duration:500, hover: style});	
			
			//if user click on the menu
			}).click(function () {
				
				//reset the selected item
				$('nav ul li').removeClass('selected');	
				
				//select the current item
				$(this).addClass('selected');
		
			});
			
			//If the mouse leave the menu, reset the floating bar to the selected item
			$('nav ul').mouseleave(function () {
	
				//Retrieve the selected item position and width
				default_left = Math.round($('nav ul li a.actief').offset().left - $('nav ul').offset().left);
				default_width = $('nav ul li a.actief').width();
				
				//Set the floating bar position, width and transition
				$('#box').stop(false, true).animate({left: default_left},{duration:300, hover: style});	
				$('#box .head').stop(false, true).animate({width:default_width},{duration:300, hover: style});		
				
			});
			
			  $("nav ul li").hover(function(){
	    
	        $(this).addClass("hover");
	        $('ul:first',this).css('visibility', 'visible');
			$('ul:first',this).css('z-index', '999999');
			
	    }, function(){
	    
	        $(this).removeClass("hover");
	        $('ul:first',this).css('visibility', 'hidden');
	    
	    });
    
    }//einde if bestaat
    
    $("nav ul li ul li").find("a").prepend("<span>&raquo;</span>");
		
});