var categoryPadWidth = 18;
var categoryTimer = null;
var categoryVisible = false;

function showCategories(element, categoryId) {
	var category = document.getElementById(categoryId);
	category.style.minWidth = (category.parentNode.offsetWidth - categoryPadWidth) + "px";
	category.style.visibility = "visible";
	/* hide the category if the category does not receive a mouseover */
	element.onmouseout = function() { categoryTimer = setTimeout("document.getElementById('"+categoryId+"').style.visibility = '';", 500); };
}

function hideCategories(element, categoryId) {
	var target = event.target || event.srcElement;
	if (element == target) {
		/* first time mouseout is called, the mouse entered the category */
		if (categoryVisible == false) {
			categoryVisible = true;
			clearTimeout(categoryTimer);
		}
		/* second time mouseout is called, the mouse exited the category */
		else {
			categoryVisible = false;
			document.getElementById(categoryId).style.visibility = "";
		}
	}
}