var currentSubMenu = null
var currentParentMenu = null;

function showSubMenu(parentMenu, menuId)
{
    var menu = document.getElementById(menuId);
    
    menu.style.top = getElementPosition(parentMenu).y + parentMenu.scrollHeight + 'px';
    menu.style.left = getElementPosition(parentMenu).x + 'px';
    
    menu.style.display = 'block';
    menu.style.zIndex = 1;
    
    currentSubMenu = menu;
    currentParentMenu = parentMenu;
    document.onmousemove = hideSubMenu;
}

function hideSubMenu(e)
{ 
    var x = getCursorPosition(e).x;
    var y = getCursorPosition(e).y;
    
    var xMax = getElementPosition(currentSubMenu).x + currentSubMenu.scrollWidth;
    var yMax = getElementPosition(currentSubMenu).y + currentSubMenu.scrollHeight;
    var xMin = getElementPosition(currentSubMenu).x;
    var yMin = getElementPosition(currentSubMenu).y;
    
    // Check the subMenu
    if (x >= xMin && x <= xMax && y >= yMin && y <= yMax)
    {
        return; 
    }
    
    xMax = getElementPosition(currentParentMenu).x + currentParentMenu.scrollWidth;
    yMax = getElementPosition(currentParentMenu).y + currentParentMenu.scrollHeight;
    xMin = getElementPosition(currentParentMenu).x;
    yMin = getElementPosition(currentParentMenu).y;
    
    // Check the parentMenu
    if (x >= xMin && x <= xMax && y >= yMin && y <= yMax)
    {
        return;
    }
    
    currentSubMenu.style.display = 'none';
    currentSubMenu = null;
    currentParentMenu = null;
    document.onmousemove = null;
}