var Speed = 6;
var Timer = 15;

// main function to handle the mouse events //
function showMenu(MenuId, DropDown)
{
	var Parent = document.getElementById('menu_' + MenuId);
	var Child = document.getElementById('submenu_' + MenuId);

	clearInterval(Child.timer);
	
	if(DropDown == 1)
	{
		clearTimeout(Parent.timer);

		if(Child.maxh && Child.maxh <= Child.offsetHeight)
		{
			return
		}
		else if(!Child.maxh)
		{
			Child.style.display = 'block';
			Child.style.height = 'auto';
			Child.maxh = Child.offsetHeight;
			Child.style.height = '0px';
		}

		Child.timer = setInterval(function(){slideMenu(Child,1)},Timer);
	}
	else
	{
		Parent.timer = setTimeout(function(){collapseMenu(Child)},1);
	}
}

// collapse the menu //
function collapseMenu(Child)
{
	Child.timer = setInterval(function(){slideMenu(Child,-1)},Timer);
}

// cancel the collapse if a user rolls over the dropdown //
function hideMenu(MenuId)
{
	var Parent = document.getElementById('menu_' + MenuId);
	var Child = document.getElementById('submenu_' + MenuId);

	clearTimeout(Parent.timer);
	clearInterval(Child.timer);
	
	if(Child.offsetHeight < Child.maxh)
	{
		Child.timer = setInterval(function(){slideMenu(Child,1)},Timer);
	}
}

// incrementally expand/contract the dropdown and change the opacity //
function slideMenu(Child,Dropdown)
{
	var currentHeight = Child.offsetHeight;
	var Distance;

	if(Dropdown == 1)
	{
		Distance = (Math.round((Child.maxh - currentHeight) / Speed));
	}
	else
	{
		Distance = (Math.round(currentHeight / Speed));
	}
	
	if(Distance <= 1 && Dropdown == 1)
	{
		Distance = 1;
	}
	
	Child.style.height = currentHeight + (Distance * Dropdown) + 'px';
	Child.style.opacity = currentHeight / Child.maxh;
	Child.style.filter = 'alpha(opacity=' + (currentHeight * 100 / Child.maxh) + ')';

	if((currentHeight < 2 && Dropdown != 1) || (currentHeight > (Child.maxh - 2) && Dropdown == 1))
	{
		clearInterval(Child.timer);
		Child.style.opacity = '1.0';
		Child.style.filter = 'alpha(opacity=100)';
	}
}