// Признак готовности меню
var menuReady = false;

function getElementStyle(elem, IEStyleProp, CSSStyleProp) {
    if (elem.currentStyle) {
        return elem.currentStyle[IEStyleProp];
    } else if (window.getComputedStyle) {
        var compStyle = window.getComputedStyle(elem, "");
        return compStyle.getPropertyValue(CSSStyleProp);
    }
    return "";
}

// переносим значения некоторых важных CSS атрибутов
var CSSRuleValues = {menuItemHeight:"22px",
                     menuItemLineHeight:"24px",
                     menuWrapperBorderWidth:"2px",
                     menuWrapperPadding:"3px",
                     defaultBodyFontSize:"12px"
                    };

// описание содержимого меню и назначение изображений для строки меню

// формируем хэш-таблишу для поиска объектов меню по строковым идентификаторам
function makeHashes() {
    for (var i = 0; i < menus.length; i++) {
        menus[menus[i].elemId] = menus[i];
        menus[menus[i].mBarImgId] = menus[i];
    }
}

// устанавливаем обработчики событий для заголовков меню
function assignLabelEvents() {
    var elem;
    for (var i = 0; i < menus.length; i++) {
        elem = document.getElementById(menus[i].mBarImgId);
        elem.onmouseover = swap;
        elem.onmouseout = swap;
    }
}

// Функция, генерирующая элементы div для меню и их содержимое
// все эти действия невидимы для пользователя в процессе выполнения
function makeMenus() {
    var menuDiv, menuItem, itemLink, mbarImg, textNode, offsetLeft, offsetTop;
    
    // определяем основные факторы, задающие общую высоту div для меню
    
    var menuItemH = 0;
    var bodyFontSize = parseInt(getElementStyle(document.body, "fontSize", "font-size"));
    // Проверяем, был ли размер шрифта в браузере изменен пользователем
    // и новый размер появился в свойстве стиля
    if (bodyFontSize == parseInt(CSSRuleValues.defaultBodyFontSize)) {
        menuItemH = (parseFloat(CSSRuleValues.menuItemHeight));
    } else {
	// прекрасно работает в Netscape 7
        menuItemH = parseInt(parseFloat(CSSRuleValues.menuItemLineHeight) * bodyFontSize);
    }
    var heightAdjust = parseInt(CSSRuleValues.menuWrapperPadding) + 
        parseInt(CSSRuleValues.menuWrapperBorderWidth);
    if (navigator.appName == "Microsoft Internet Explorer" && 
        navigator.userAgent.indexOf("Win") != -1 && 
        (typeof document.compatMode == "undefined" || 
        document.compatMode == "BackCompat")) {
        heightAdjust = -heightAdjust;
    }
    
    // для управления циклом создания меню используется массив menus
    for (var i = 0; i < menus.length; i++) {
        menuDiv = document.createElement("div");
        menuDiv.id = "popupmenu" + i;
        // сохраняем идентификатор меню как свойства элемента массива menus
        menus[i].elemId = "popupmenu" + i;
        menuDiv.className = "menuWrapper";
        if (menus[i].menuItems.length > 0) {
            menuDiv.style.height = (menuItemH * menus[i].menuItems.length) - 
            heightAdjust + "px";			
        } else {
            // не отображаем пустые меню
            menuDiv.style.display = "none";
        }
        // задаем обработчики событий
        menuDiv.onmouseover = keepMenu;
        menuDiv.onmouseout = requestHide;

        // устанавливаем порядок наложения,на тот случай если на странице есть
        // другие слои
        menuDiv.style.zIndex = 1000;
        
        // собираем элементы пунктов меню
        for (var j = 0; j < menus[i].menuItems.length; j++) {
            menuItem = document.createElement("div");
            menuItem.id = "popupmenuItem_" + i + "_" + j;
            menuItem.className = "menuItem";
            menuItem.onmouseover = toggleHighlight;
            menuItem.onmouseout = toggleHighlight;
            menuItem.onclick = hideMenus;
            menuItem.style.top = menuItemH * j + "px";
            itemLink = document.createElement("a");
            itemLink.href = menus[i].menuItems[j].href;
            itemLink.className = "menuItem";
            itemLink.onmouseover = toggleHighlight;
            itemLink.onmouseout = toggleHighlight;
            textNode = document.createTextNode(menus[i].menuItems[j].text);
            itemLink.appendChild(textNode);
            menuItem.appendChild(itemLink);
            menuDiv.appendChild(menuItem);
        }
        // присоединяем div с меню к телу документа
        document.body.appendChild(menuDiv);
    }
    makeHashes();
    assignLabelEvents();
    // предварительно позиционируем меню
    for (i = 0; i < menus.length; i++) {
        positionMenu(menus[i].elemId);
    }
    menuReady = true;
}

// глобальная переменная, помогающая управлять скрытием меню
var timer;

// вызывается при перемещении мыши по меню, чтобы
// блокировать запрос на скрытие меню
function keepMenu() {
    clearTimeout(timer);
}

function cancelAll() {
    keepMenu();
    menuReady = false;
}

// Вызывается, когда мышь покидает строку меню, чтобы скрыть 
// все меню через 1/4 секунды.
function requestHide() {
    timer = setTimeout("hideMenus()", 250);
}

// "Грубое" скрытие всех меню и восстановление нормального вида 
// изобрадений в строке меню
function hideMenus() {
    for (var i = 0; i < menus.length; i++) {
	   document.getElementById(menus[i].mBarImgId).style.background = 'url(img/menu_bg.gif)';
       var menu = document.getElementById(menus[i].elemId)
       menu.style.visibility = "hidden";
    }
}

// устанавливаем положение меню перед тем. как его показывать.
function positionMenu(menuId){
    // для относительного позиционирования меню используем положение
    // изобрадения на строке меню
    var mBarImg = document.getElementById(menus[menuId].mBarImgId);
    var offsetTrail = mBarImg;
    var offsetLeft = 0;
    var offsetTop = 30;
    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }
    if (navigator.userAgent.indexOf("Mac") != -1 && 
        typeof document.body.leftMargin != "undefined") {
        offsetLeft += document.body.leftMargin;
        offsetTop += document.body.topMargin;
    }
    var menuDiv = document.getElementById(menuId);
    menuDiv.style.left = offsetLeft + "px";
    menuDiv.style.top = offsetTop + "px";
}

// показываем нужный div с меню
function showMenu(menuId) {	
    if (menuReady) {
        keepMenu();
        hideMenus();
        positionMenu(menuId);
        var menu = document.getElementById(menuId);
        menu.style.visibility = "visible";
    }
}

// динамическая смена изображений в строке меню. Вызывается из событий мыши
// при ее перемещении по строке.
function toggleHighlight(evt) {
    evt = (evt) ? evt : ((event) ? event : null);
    if (typeof menuReady != "undefined") {
        if (menuReady && evt) {
            var elem = (evt.target) ? evt.target : evt.srcElement;
            if (elem.nodeType == 3) {
                elem = elem.parentNode;
            }
            if (evt.type == "mouseover") {
                keepMenu();
                elem.className ="menuItemOn";
            } else {
                elem.className ="menuItem";
                requestHide();
            }
            evt.cancelBubble = true;
        }
    }
}

function swap(evt) {
    evt = (evt) ? evt : ((event) ? event : null);
    if (typeof menuReady != "undefined") {
        if (evt && (document.getElementById && document.styleSheets) && menuReady) {
            var elem = (evt.target) ? evt.target : evt.srcElement;
            if (elem.className == "menuImg") {
                if (evt.type == "mouseover") {
                    
					showMenu(menus[elem.id].elemId);                   
					document.getElementById(menus[elem.id].mBarImgId).style.background = 'url(img/menu_bgact.gif)';

                } else if (evt.type == "mouseout") {
                    requestHide();
                }
                evt.cancelBubble = true;
            }
        }
    }
}

// создаем меню только в том случае, если поддерживаются ключевые элементы
function initMenus() {
    if (document.getElementById && document.styleSheets) {
        setTimeout("makeMenus()", 5);
        window.onunload=cancelAll;
    }
}

