var currentSub = '';
$(function () {
    $('#menu>li').mouseover
    (
        function () {
            var id = $(this).attr('Id');
            var sumElementName = id + 'Sub';
            fillsubBg($("#" + sumElementName), id);
            $(this).css({ "color": "#d49001", "background-color": "#000" });
        }
    );
    $('#menu>li').mouseout(
        function () {
            currentSub = $(this).attr('Id');
            $(this).css({ "color": "#fff", "background-color": "" });
        }

    );
    $('.sublist').mouseover(
            function () {
                var sublistId = $(this).attr('Id');
                if (currentSub && currentSub + 'Sub' == sublistId) {
                    $('#' + currentSub).css({ "color": "#d49001", "background-color": "#000" });
                }
                else {
                    $('#' + currentSub).css({ "color": "#fff", "background-color": "" });
                }
                // return false;
            }
        );
    $('.sublist').mouseout(
        function (event) {
            //debugger;
            var sublistId = $(this).attr('Id').toString();
            $('#' + sublistId.substr(0, sublistId.length - 3)).css({ "color": "#fff", "background-color": "" });
            //$('#subBg').empty();
            doSomething(event);
            //return false;

        }
    );

});

function fillsubBg(subMemu, ParentId) {
    $('#subBg').empty();
    var temp = subMemu.clone(true);
    switch (ParentId) {
        case "nav02":
            temp.css({ "margin-left": "95px" });
            break;
        case "nav03":
            temp.css({ "margin-left": "202px" });
            break;
        case "nav04":
            temp.css({ "margin-left": "323px" });
            break;
        case "nav05":
            temp.css({ "margin-left": "420px" });
            break;
        case "nav06":
            temp.css({ "margin-left": "517px" });
            break;
        case "nav07":
            temp.css({ "margin-left": "570px" });
            break;
    }
    temp.css('display', 'block');
    $('#subBg').append(temp);
}


function doSomething(e) {
        if (!e) var e = window.event;
        var tg = (window.event) ? e.srcElement : e.target;
        if (tg.nodeName != 'DIV') return;
        var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
        while (reltg != tg && reltg.nodeName != 'BODY')
                reltg= reltg.parentNode
        if (reltg== tg) return;
        // Mouseout took place when mouse actually left layer
        // Handle event
        $('#subBg').empty();
}