var timeouts = {};
var idcount = 1;

$( function() {

	$("li.menuitem").hover( function() {
		clearAllTimeouts();
		$(this).addClass("menu_hover");
		$(this).addClass("menu_hover2");
	}, function() {
		clearElementTimeout(this);
		el = $(this);
		el.removeClass("menu_hover2");
		setElementTimeout(this, function() {
			el.removeClass("menu_hover");
			el.find(".submenu").removeClass("menu_hover");			
		}, 400);
	});

	$("li.submenu").hover( function() {
		clearElementTimeout(this);
		$("li.submenu").removeClass("menu_hover");
		$(this).addClass("menu_hover");		
		var pos = (parseInt($(this).offset().top) - parseInt($(this).parent("ul").find("li").offset().top));
		//$(".sidebar_blok:first").text($(this).offset().top + " > " + $(this).parent("ul").find("li").offset().top + " = " + pos);
		$(this).find("ul.subsubmenu").css("top", pos - 1);
	}, function() {
		clearElementTimeout(this);
		el = $(this);
		this.timeout = setTimeout( function() {
			el.removeClass("menu_hover");
		}, 500);
	});
	
//	$("a, li, ul").mouseenter( function() {
//		$(".sidebar_blok:last").text(this.tagName + ">" + $(this).text());
//	});
		
});

var clearAllTimeouts = function() {
	for (x in timeouts) {
		//debug("clear all: " + x);
		clearTimeout(timeouts[x].timeout);
		timeouts[x].callback();
		delete(timeouts[x]);
	}
}

var clearElementTimeout = function(el) {
	if (el && el.id && timeouts[el.id]) {
		clearTimeout(timeouts[el.id]);
		delete(timeouts[el.id]);
	}
}

var setElementTimeout = function(el, cb, sec) {
	if (!el.id) {
		el.id = "el" + (idcount++) + "_" + $(el).children("a").first().text();
	}
	timeouts[el.id] = { timeout: setTimeout(cb, sec), callback: cb };
}

function debug(s) {
	if (!$("#debug").length) {
		$("body").append("<div id='debug' style='position: absolute; right: 10px; top: 10px; width: 300px; background-color: white; border: solid 1px silver; opacity: .8'></div>");
	}
	$("#debug").prepend("<div>" + s + "</div>");
}