function toggleXpMenu( showMenu )
{    
    // main menu
    var menu = document.getElementById( "popupMenu" );
    menu.style.display = (showMenu)? "block" : "none";
    menu.style.visibility = (showMenu)? "visible" : "hidden";
    menu.style.position = (showMenu)? "absolute" : "absolute";
    menu.style.top = event.clientY + document.body.scrollTop;
    menu.style.left = event.clientX + document.body.scrollLeft;
    menu.style.width = 135;
    
    // shadow
    /*
    var shadow = document.getElementById( "shadow" );
    shadow.style.display = (showMenu)? "block" : "none";
    shadow.style.visibility = (showMenu)? "visible" : "hidden";
    shadow.style.position = (showMenu)? "absolute" : "absolute";
    
    
    if ( showMenu )
    {
        var offset = 2;
        var xpos = event.clientX + document.body.scrollLeft;
        var ypos = event.clientY + document.body.scrollTop;
        menu.style.left = xpos;
        menu.style.top = ypos;

        shadow.style.left = xpos + offset;
        shadow.style.top = ypos + offset;
    }
    */
}

/// <summary>
/// When a user hovers over/out a row of the menu this function
/// updates the correct css styles so the appearance of the menu 
/// item changes.
/// </summary>
function updateHover( ctrl, type )
{
    if ( type == "OVER" )
    {
        ctrl.cells[0].className = "menu_icon_cell_over";
        ctrl.cells[1].className = "menu_link_cell_over";
    }
    else
    {
        ctrl.cells[0].className = "menu_icon_cell";
        ctrl.cells[1].className = "menu_link_cell";
    }
}