var menuActivating;
var subTimer;

function showSubmenu(subItem){
    //animate submenu
	$("div.submenucontainerSlide", subItem).animate({
		height: $("div.submenucontainer", subItem).height()+4 //+4 voor margin submenucontainer
	}, { queue:false, speed:350 });
}

function hideSubmenu(subItem){
	
	//var container = $(subItem);
	
	//animate submenucontainer
	$("div.submenucontainerSlide", subItem).animate({
		height: 0
	}, { queue:false, speed:350 });
	
	//button hide when no submenu is present
	if($(subItem).data("menuitem").status == "deselected"){
	   $("div.menu_selected", subItem).attr("class","menuitem menu_deselected");
	}
}

$(function() {
	
    //store data value to prefend using rel attr
    $("div.menucontainer").each(function(i){
        var status = "deselected";
        if($("div.menuitem",this).hasClass("menu_selected")){
            status = "selected"
        }
        $(this).data("menuitem",{item:i, status: status});
    });
    
	//click menu functions
	$("div.menuitem").click(function(){
		location.href=$("a", this).attr("href");
	});
	
	//click submenu functions
	$("div.submenuitem").click(function(){
		location.href=$("a", this).attr("href");
	});
	
	//IE6 hack for submenu flow above pulldowns
	/*if($("div.submenucontainerSlide").length > 0){
		$("div.submenucontainerSlide").bgiframe();
	}*/
	
	//start menu animation
	$("div.menucontainer").bind("mouseenter", function(){
	    var subItem = this;

	    if(typeof(menuActivating) != "undefined" && menuActivating!= $(subItem).data("menuitem").item){
			//hide prev
			var prevSubmenuItem = $("div.menucontainer").eq(menuActivating);
			hideSubmenu(prevSubmenuItem);
		}
		
		menuActivating = $(subItem).data("menuitem").item;
		
		clearTimeout(subTimer);
		
		//topmenu button change
		$("div.menu_deselected", this).attr("class","menuitem menu_selected");
		
		showSubmenu(subItem);
		
		//alleen als submenu aanwezig is
		if($("div.submenucontainerSlide", this).length > 0){
			$("div.menu_selected", this).attr("class","menuitem menu_selected");
		}
	}).bind("mouseleave", function(){
		var subItem = this;
		
		//als submenu er is dan hide met delay anders button deselected
		if($("div.submenucontainerSlide", this).length > 0){
			subTimer = setTimeout(function(){hideSubmenu(subItem)}, 800);
		} else {
			//button hide when no submenu is present
			if($(subItem).data("menuitem").status == "deselected"){
			    $("div.menu_selected", subItem).attr("class","menuitem menu_deselected");
			    
			}
    	}
	});
	
});