// JavaScript Document
function hideLoading() {
    document.getElementById('pageLoading').style.display = 'none';
}

function getFilteredURL(id, style, subStyle, gender) {
    return "/catalog/?SECTION_ID=" + id +
        (style != null ? "&style=" + encodeURIComponent(style) : "") +
        (subStyle != null ? "&subStyle=" + encodeURIComponent(subStyle) : "") +
        (gender != null ? "&gender=" + encodeURIComponent(gender) : "");
}
var debugMode = false;

function debug(txt) {
    if (debugMode) {
        $("#debugConsole").append(txt/* + "\n\r"*/);
        $("#debugConsole").scrollTo("*:last", 400);
    }
}
function absBlock(left, top, width, height) {
        var d = $("<div/>");
        d.css("width", $.px(width));
        d.css("height", $.px(height));
        d.css("position", "absolute");
        $.placeIn(d, left, top);
        return d;
}
var CatalogMenu = {
    slideSpeed: 400,    //  one of the following: milliseconds to execute | "slow" | "normal" | "fast"
    hideWaitTime: 200,
    hidePopupsTimer: null,
    inSubGroup: false,
    stopHiding: function() {
        if (CatalogMenu.hidePopupsTimer != null) {
            clearTimeout(CatalogMenu.hidePopupsTimer);
            CatalogMenu.hidePopupsTimer = null;
        }
    },
    group_hover: function (e) {  //  top-level groups: mouseover & mouseout
        CatalogMenu.stopHiding();
        var menuItem = $(this);
        $(".catalog-menu-group[itemindex!='" + menuItem.attr("itemindex") + "'],.catalog-menu-popup").replaceWith("");
        if ($(this).children("ul").length == 0)
            return;
        if($(".catalog-menu-group[itemindex='" + menuItem.attr("itemindex") + "']").length > 0)
            return;
        var subMenu = $(this).children("ul").clone();
        var off = menuItem.offset();
        subMenu.css("z-index", "5");
        subMenu.addClass("catalog-menu-group");
/*      var rightBorder = $("#catalog-menu").outerWidth() + $("#catalog-menu").offset().left;
        var left = off.left;
        if (off.left + subMenu.outerWidth() > rightBorder)
            left = off.left - subMenu.outerWidth();*/
        $.placeIn(subMenu, off.left, off.top + menuItem.height() - 2);
        subMenu.children("li").children("a").hover(
            function() {
                //CatalogMenu.hidePopups();
            },
            function(){}
        );
        subMenu.children("li").children("ul").hide();
        subMenu.children("li").children("a").click(CatalogMenu.subGroup_click);
        subMenu.show();
        subMenu.hover(CatalogMenu.subGroup_hover, CatalogMenu.subGroup_out);
        subMenu.attr("itemindex", menuItem.attr("itemindex"));
        $(document.body).append(subMenu);
    },
    group_out: function (e) {
        var menuItem = $(this);
        var slideBlock = $(".catalog-menu-group");
        if (slideBlock.length == 0)
            return;
        var off = slideBlock.offset();
        var cond = !($.within(e.clientX, e.clientY, off.left, off.top, menuItem.outerWidth(), menuItem.outerHeight()));
        if (cond)
            CatalogMenu.hidePopupsTimer = setTimeout(CatalogMenu.hidePopups, CatalogMenu.hideWaitTime);
    },
    subGroup_hover: function (e) {
        CatalogMenu.stopHiding();
        CatalogMenu.inSubGroup = true;
    },
    subGroup_out: function(e) {
        var slideBlock = $(this);
        var menuItem = $("#catalog-menu>ul>li:eq(" + slideBlock.attr("itemindex") + ")");
        var off = menuItem.offset();
        
        var cond =
            $.within(e.clientX, e.clientY, off.left, off.top, menuItem.outerWidth(), menuItem.outerHeight()) ||
            $(".catalog-menu-popup").filter(
                function() {
                    var ul = $(this);
                    var off = ul.offset();
                    return $.within(e.clientX, e.clientY, off.left, off.top, ul.outerWidth(), ul.outerHeight());
                }
            ).length > 0;
        if (!cond)
            $(".catalog-menu-group,.catalog-menu-popup").replaceWith("");
//      else
//            CatalogMenu.hidePopupsTimer = setTimeout(CatalogMenu.hidePopups, CatalogMenu.hideWaitTime);
        CatalogMenu.inSubGroup = false;
    },
    subGroup_click: function(e) {    //  2nd-level groups: mouseclick - 3rd-level groups slides down
        var subGroup = $(this).parent("li");
//      $(".catalog-menu-popup").replaceWith("");

        subGroup.siblings("li").children("ul").hide();
        if (subGroup.children("ul").length == 0) {
            document.getElementById('pageLoading').style.display = 'block';
            return;
        }
        subGroup.children("ul").show();
        subGroup.children("ul").children("li").show();
        subGroup.children("ul").children("li").click(CatalogMenu.itemClick);
        subGroup.children("ul").children("li").children("ul").hide();
        subGroup.children("ul").children("li").hover(CatalogMenu.submenu_popup_hover_li, CatalogMenu.submenu_popup_out_li);
    },
    submenu_popup_hover_li: function(e) {
        var menuItem = $(this);
        var thisLevel = menuItem.parent("ul").attr("level") ? (1 + parseInt(menuItem.parent("ul").attr("level"))) : 1;
        var classes = [];
        for(var i=0; i<4;i++)
            classes.push(".catalog-menu-popup:visible[level='" + (thisLevel + i).toString() + "']");
        //menuItem.hide();
        $(classes.join(",")).replaceWith("");
        //menuItem.show();
        
        if (menuItem.children("ul") != null) {
            menuItem.children("ul").children("li").children("ul");
        }
        
        if (menuItem.children("ul:hidden").length == 0)
            return;
        var off = menuItem.offset();
        
        var popupMenu = menuItem.children("ul").clone();
        $.placeIn(popupMenu, off.left + menuItem.outerWidth(), off.top);
        popupMenu.attr("level", thisLevel.toString()).css("z-index", (thisLevel + 5).toString());
        popupMenu.addClass("catalog-menu-popup");
        //popupMenu.children("li").children("ul").hide();
        popupMenu.show();
        popupMenu.children("li").hover(CatalogMenu.submenu_popup_hover_li, CatalogMenu.submenu_popup_out_li);
        popupMenu.children("li").click(CatalogMenu.itemClick);
        popupMenu.hover(CatalogMenu.submenu_popup_hover_ul, CatalogMenu.submenu_popup_out_ul);
        $(document.body).append(popupMenu);
    },
    submenu_popup_out_li: function(e) {
    },
    submenu_popup_hover_ul: function(e) {
/*        if (CatalogMenu.hidePopupsTimer != null) {
            clearTimeout(CatalogMenu.hidePopupsTimer);
            CatalogMenu.hidePopupsTimer = null;
        }*/
/*        var menuItem = $(this);
        var thisLevel = menuItem.attr("level") ? (1 + parseInt(menuItem.attr("level"))).toString() : 0;
        if (thisLevel == 0)
            return;
        else
            $(".catalog-menu-popup[level='" + (thisLevel + 1).toString() + "']").replaceWith("");*/
    },
    submenu_popup_out_ul: function(e) {
        if ($(".catalog-menu-popup,.catalog-menu-group").filter(
                function() {
                    var ul = $(this);
                    var off = ul.offset();
                    return $.within(e.clientX, e.clientY, off.left, off.top, ul.outerWidth(), ul.outerHeight());
                }
            ).length == 0)
            $(".catalog-menu-popup,.catalog-menu-group").replaceWith("");
    },
    hidePopups: function() {
        //$(".catalog-menu-popup").replaceWith("");
        if (!CatalogMenu.inSubGroup) {
            $(".catalog-menu-group").replaceWith("");
            //CatalogMenu.inSubGroup = false;
        }
        //debug(CatalogMenu.hidePopupsTimer.toString() + ' ');
        CatalogMenu.hidePopupsTimer = null;
    },
    itemClick: function(e) {
        //if ($(this).children("ul").length == 0) {
            document.getElementById('pageLoading').style.display = 'block';
        //}
    },
    init: function() {
        if (debugMode)
            $(document.createElement("pre")).attr("id", "debugConsole").appendTo(document.body);
        $.extend({px:function(val) { return val.toString() + "px"; }});
        $.extend({placeIn:function(el, left, top) { el.css("left", $.px(left)).css("top", $.px(top)); }});
        $.extend({within:function(x,y,left,top,width,height) {
            return (x >= left) && (x < left + width) &&
                    (y >= top) && (y < top + height);
        }});
        $("#catalog-menu").empty();
        $("#catalog-menu").append($("<ul/>"));
        $(menuDescriptor).each(
            function (i, el) {  //  group
                //  наполняем главное меню и его всплывающие блоки
                var li = $(document.createElement("li"));
                var a = $(document.createElement("a"));
                a.attr("href", el.items.length > 0 ? "#" : el.url);
                a.html(el.name);
                a.appendTo(li);
    
                li.attr("itemIndex", i);
                li.attr("id", "item_" + i);
                if (el.active)
                    li.addClass("active");
                li.appendTo($("#catalog-menu>ul"));
    
                if (el.items.length > 0) {
                    $("<ul/>").appendTo($("#catalog-menu>ul>li:last"));
                    $(el.items).each(
                        function(i, currentGroup) { //  group->group
                            var li = $(document.createElement("li"));
                            var a = $(document.createElement("a"));
                            a.attr("href", currentGroup.styles.length > 0 ? "#" : currentGroup.url);
                            a.html(currentGroup.name);
                            a.appendTo(li);
                            li.attr("itemIndex", i);
                            li.appendTo($("#catalog-menu>ul>li:last>ul"));
                            
                            if (currentGroup.styles.length > 0) {
                                $("<ul/>").appendTo($("#catalog-menu>ul>li:last>ul>li:last"));
                                $(currentGroup.styles).each(
                                    function(i, currentStyle) { //  group->group->style
                                        var li = $(document.createElement("li"));
                                        var a = $(document.createElement("a"));
                                        a.attr("href", getFilteredURL(currentGroup.id, currentStyle.name));
                                        a.html(currentStyle.name);
                                        a.appendTo(li);
                                        li.appendTo($("#catalog-menu>ul>li:last>ul>li:last>ul"));
                                        
                                        if (currentStyle.subStyles.length > 0) {
                                            $("<ul/>").appendTo($("#catalog-menu>ul>li:last>ul>li:last>ul>li:last"));
                                            $(currentStyle.subStyles).each(
                                                function(i, subStyle) { //  group->group->style
                                                    var li = $(document.createElement("li"));
                                                    var a = $(document.createElement("a"));
                                                    
                                                    a.attr("href", getFilteredURL(currentGroup.id, currentStyle.name, subStyle.name));
                                                    a.html(subStyle.name);
                                                    a.appendTo(li);
                                                    li.appendTo($("#catalog-menu>ul>li:last>ul>li:last>ul>li:last>ul"));
    
                                                    /*if (subStyle.genders.length > 0) {  //  group->group->gender
                                                        $("<ul/>").appendTo($("#catalog-menu>ul>li:last>ul>li:last>ul>li:last>ul>li:last"));
                                                        $(subStyle.genders).each(   //  group->group->style->gender
                                                            function(i, gender) {
                                                                var li = $(document.createElement("li"));
                                                                var a = $(document.createElement("a"));
                                                                a.attr("href", getFilteredURL(currentGroup.id, currentStyle.name, subStyle.name, gender));
                                                                a.html(gender.toString());
                                                                a.appendTo(li);
                                                                li.appendTo($("#catalog-menu>ul>li:last>ul>li:last>ul>li:last>ul>li:last>ul"));
                                                            }
                                                        );
                                                        var li = $(document.createElement("li"));
                                                        var a = $(document.createElement("a"));
                                                        a.attr("href", getFilteredURL(currentGroup.id, currentStyle.name, subStyle.name));
                                                        a.html("Все");
                                                        a.appendTo(li);
                                                        li.appendTo($("#catalog-menu>ul>li:last>ul>li:last>ul>li:last>ul>li:last>ul"));
                                                    }*/
                                                }
                                            );
                                            var li = $(document.createElement("li"));
                                            var a = $(document.createElement("a"));
                                            a.attr("href", getFilteredURL(currentGroup.id, currentStyle.name));
                                            a.html("Все");
                                            a.appendTo(li);
                                            li.appendTo($("#catalog-menu>ul>li:last>ul>li:last>ul>li:last>ul"));
                                        }/* else
                                        if (currentStyle.genders.length > 0) {  //  group->group->gender
                                            $("<ul/>").appendTo($("#catalog-menu>ul>li:last>ul>li:last>ul>li:last"));
                                            $(currentStyle.genders).each(   //  group->group->style->gender
                                                function(i, gender) {
                                                    var li = $(document.createElement("li"));
                                                    var a = $(document.createElement("a"));
                                                    a.attr("href", getFilteredURL(currentGroup.id, currentStyle.name, null, gender));
                                                    a.html(gender.toString());
                                                    a.appendTo(li);
                                                    li.appendTo($("#catalog-menu>ul>li:last>ul>li:last>ul>li:last>ul"));
                                                }
                                            );
                                            var li = $(document.createElement("li"));
                                            var a = $(document.createElement("a"));
                                            a.attr("href", getFilteredURL(currentGroup.id, currentStyle.name));
                                            a.html("Все");
                                            a.appendTo(li);
                                            li.appendTo($("#catalog-menu>ul>li:last>ul>li:last>ul>li:last>ul"));
                                        }*/
                                        
                                    }
                                );
                                var li = $(document.createElement("li"));
                                var a = $(document.createElement("a"));
                                a.attr("href", getFilteredURL(currentGroup.id));
                                a.html("Все");
                                a.appendTo(li);
                                li.appendTo($("#catalog-menu>ul>li:last>ul>li:last>ul"));
                            }
                        }
                    );
                }
            }
        );
    
        $("#catalog-menu>ul>li ul").nextAll("*").replaceWith("");
        $("#catalog-menu>ul>li ul").hide();
        $("#catalog-menu>ul>li").hover(CatalogMenu.group_hover, CatalogMenu.group_out);
        if ($("#sideMenuContainer").length > 0) {
            $("#sideMenuContainer>ul#mainList").empty();
            $(leftMenuBrands).each(
                function(i, brand) {
                    var li = $("<li/>");
                    if (brand.name == currentBrand) {
                        var div = $("<div/>");
                        div.appendTo(li);
                        div.html('&raquo;&nbsp;' + brand.name);
                    } else {
                        var a = $("<a/>");
                        a.attr("href", brand.url);
                        a.appendTo(li);
                        a.html(brand.name);
                    }
                    li.addClass("level1");
                    li.appendTo($("#sideMenuContainer>ul#mainList"));
                }
            );
            var href = getOutOfBrands;
            var li = $("<li/>");
            var a = $("<a/>");
            a.attr("href", href);
            a.appendTo(li);
            a.html("Все");
            li.addClass("level1");
            li.appendTo($("#sideMenuContainer>ul#mainList"));
            $("<h3>Бренды</h3>").insertBefore($("#sideMenuContainer>ul#mainList"));
        }
    }
};
$(CatalogMenu.init);