var visibleMenuItem, menuItemToVisible, timeOutId;

function setDefaultMenuItem() {
    var selectedMenuItemList = document.getElementsByClassName("selectedMenuItem");

    if (selectedMenuItemList != null) {
        menuItemToVisible = selectedMenuItemList[0];
        visibleSubmenu();
    }
}

function showSubmenu(menuItem) {
    if (timeOutId != null)
        clearTimeout(timeOutId);

    if (visibleMenuItem == null || menuItem != visibleMenuItem) {
        menuItemToVisible = menuItem;

        if (IsMediaType('handheld'))
            timeOutId = setTimeout("visibleSubmenu()", 1000);
        else
            visibleSubmenu();
    }
}

function visibleSubmenu() {
    if (visibleMenuItem != null)
        unvisibleSubmenu(visibleMenuItem);

    visibleMenuItem = $(menuItemToVisible.id);

    var submenuList = visibleMenuItem.getElementsByTagName('ul');

    if (submenuList.length > 0) {
        var submenu = submenuList[0];
        var submenuWidth = getSubmenuItemsWidth(submenu) + submenu.childNodes.length - 1;
        var offsetLeft = visibleMenuItem.offsetLeft + visibleMenuItem.offsetWidth / 2;
        var mainMenuOffsetLeft = visibleMenuItem.parentNode.offsetLeft;
        var mainMenuOffsetWidth = visibleMenuItem.parentNode.offsetWidth;

        if (submenuWidth / 2 > offsetLeft - mainMenuOffsetLeft)
            submenu.style.left = (-1 * (visibleMenuItem.offsetLeft - mainMenuOffsetLeft + 20)) + 'px';
        else
            if (submenuWidth / 2 > mainMenuOffsetLeft + mainMenuOffsetWidth - offsetLeft) {
            submenu.style.right = (-1 * (mainMenuOffsetLeft + mainMenuOffsetWidth - offsetLeft - 9)) + 'px';
            submenu.style.left = 'auto';
        }
        else
            submenu.style.left = (-1 * (submenuWidth / 2 - visibleMenuItem.offsetWidth / 2)) + 'px';

        submenu.style.width = submenuWidth + 'px';

        setMenuItem(visibleMenuItem, 100, 0, "visible");
    }

    if (visibleMenuItem.hasClassName('first')) {
        visibleMenuItem.removeClassName('first');
        visibleMenuItem.addClassName('selectedFirst');
    }
    else {
        if (visibleMenuItem.hasClassName('last')) {
            visibleMenuItem.removeClassName('last');
            visibleMenuItem.addClassName('selectedLast');
        }
        else
            if (!(visibleMenuItem.hasClassName('selected') || visibleMenuItem.hasClassName('selectedFirst') || visibleMenuItem.hasClassName('selectedLast')))
            visibleMenuItem.addClassName('selected');
    }
}

function unvisibleSubmenu(menuItem) {
    setMenuItem(menuItem, 0, 100, "hidden");

    menuItem = $(menuItem.id);

    if (menuItem.hasClassName('selectedFirst')) {
        menuItem.removeClassName('selectedFirst');
        menuItem.addClassName('first');
    }
    else
        if (menuItem.hasClassName('selectedLast')) {
        menuItem.removeClassName('selectedLast');
        menuItem.addClassName('last');
    }
    else
        if (menuItem.hasClassName('selected'))
        menuItem.removeClassName('selected');
}

function setMenuItem(menuItem, itemZindex, subMeniZindex, visibility) {
    var subMenu = getSubmenu(menuItem);

    if (subMenu != null) {
        //menuItem.style.zIndex = itemZindex;
        subMenu.style.visibility = visibility;
        //subMenu.style.zIndex = subMeniZindex;
    }
}

function getSubmenu(menuItem) {
    return menuItem.getElementsByTagName("ul")[0];
}

function getSubmenuItemsWidth(submenu) {
    var width = 0;
    var submenuItems = submenu.getElementsByTagName('li');

    for (var i = 0; i < submenuItems.length; i++) {
        width += submenuItems[i].clientWidth;
    }

    return width;
}