var timeout         = 500;
var closetimer		= 0;
var ddmenuitem      = 0;

function toggleBg(tdElem, bgColor, txtColor)
{
	tdElem.style.backgroundColor = bgColor;
	tdElem.firstChild.style.color = txtColor;
}

// open hidden layer
function mopen(id, darkColor, lightColor)
{	
	// cancel close timer
	mcancelclosetime();

	// close old layer
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

	// get new layer and show it
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';
	
	var tds = ddmenuitem.getElementsByTagName("td");
	
    for (var i = 0; i < tds.length; i++) 
    {
      if (tds[i].addEventListener){
        tds[i].addEventListener("mouseover", function() {  toggleBg(this, lightColor, '#FFFFFF'); }, false);
        tds[i].addEventListener("mouseout", function() { toggleBg(this, '#FFFFFF', darkColor); }, false);
      } 
      else if (tds[i].attachEvent)
      {
          if (event.srcElement.tagName != "TD")
          {
            tds[i].attachEvent("onmouseover", function(){ toggleBg(findTd(event.srcElement), lightColor, '#FFFFFF'); });
            tds[i].attachEvent("onmouseout", function() { toggleBg(findTd(event.srcElement), '#FFFFFF', darkColor); });
          }
       }
    } 
}

function findTd(node) {

    if (node.tagName == "TD") {
        return node;
    } else {
        node = node.parentElement;
        return findTd(node);
    }
}

// close showed layer
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close layer when click-out
document.onclick = mclose;