function testWebBroswer() {
    var Sys = {};
    var ua = navigator.userAgent.toLowerCase();
    if (window.ActiveXObject) {
        Sys.ie = ua.match(/msie ([\d.]+)/)[1]
    }
    else if (document.getBoxObjectFor) {
        Sys.firefox = ua.match(/firefox\/([\d.]+)/)[1]
    }
    else if (window.MessageEvent && !document.getBoxObjectFor && navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
        Sys.chrome = ua.match(/chrome\/([\d.]+)/)[1]
    }
    else if (window.opera) {
        Sys.opera = ua.match(/opera.([\d.]+)/)[1]
    }
    else if (window.openDatabase) {
        Sys.safari = ua.match(/version\/([\d.]+)/)[1];
    }

    if (Sys.ie) return ('IE' + Sys.ie);
    if (Sys.firefox) return ('Firefox' + Sys.firefox);
    if (Sys.chrome) return ('Chrome' + Sys.chrome);
    if (Sys.opera) return ('Opera' + Sys.opera);
    if (Sys.safari) return ('Safari' + Sys.safari);

    this.isFirefox = function() {
        if (Sys.firefox) return true;
        else
            return false;
    }

    this.isIE = function() {
        if (Sys.ie)
            return true;
        else
            return false;
    }
    this.isSafari = function() {
        if (Sys.safari)
            return true;
        else
            return false;
    }
}

var webBrowswer = testWebBroswer();

function getElesByName(tag, eltname) {
    var elts = document.getElementsByTagName(tag);
    var count = 0;
    var elements = [];
    for (var i = 0; i < elts.length; i++) {
        if (elts[i].getAttribute("name") == eltname) {
            elements[count++] = elts[i];
        }
    }
    return elements;
}

function menuItemMouseOver(item) {
    var idLen = item.getAttribute("id").length;
    var bgcolor = "";
    switch (idLen) {
        case 3: bgcolor = '#001965'; break;
        case 4: bgcolor = '#82786f'; break;
        case 5: bgcolor = '#81dcff'; break;
    }
    item.style.backgroundColor = bgcolor;
    item.style.cursor = "pointer";
    // add by leo
    if (item.getAttribute("id") == "MI1") {
        item.style.backgroundImage = "url(/Images/novo_menu_up1.jpg)";
    }

    if (item.getAttribute("id") == "MI7") {
        if (null != document.getElementById("l2ChangePoss") && document.getElementById("l2ChangePoss").style.display == "none") {
            item.style.backgroundImage = "url(/Images/novo_menu_down1.jpg)";
        }
        else {
            item.style.backgroundImage = "";
        }
    }

    if (item.getAttribute("id") == "MI74") {
        item.style.backgroundImage = "url(/Images/novo_menu_down_1_1.jpg)";
    }

    if (item.getAttribute("id") == "MI2") {
        item.style.backgroundImage = "url(/Images/novo_menu_just_like_you1.jpg)";
    }
}

function menuItemMouseOut(item) {
    var idLen = item.getAttribute("id").length;
    var bgcolor = "";
    switch (idLen) {
        case 3: bgcolor = '#009fda'; break;
        case 4: bgcolor = '#aea79f'; break;
        case 5: bgcolor = '#c0edff'; break;
    }
    item.style.backgroundColor = bgcolor;
    // add by leo
    if (item.getAttribute("id") == "MI1") {
        item.style.backgroundImage = "url(/Images/novo_menu_up.jpg)";
    }

    if (item.getAttribute("id") == "MI7") {
        if (null != document.getElementById("l2ChangePoss") && document.getElementById("l2ChangePoss").style.display == "none") {
            item.style.backgroundImage = "url(/Images/novo_menu_down.jpg)";
        }
        else {
            item.style.backgroundImage = "";
        }
    }

    if (item.getAttribute("id") == "MI74") {
        item.style.backgroundImage = "url(/Images/novo_menu_down_1.jpg)";
    }

    if (item.getAttribute("id") == "MI2") {
        item.style.backgroundImage = "url(/Images/novo_menu_just_like_you.jpg)";
    }
}
// for to direct the li url
function redirect(source) {
    // setSelectedStyle(source.getAttribute("id"));
    var url = source.getAttribute("href");
    if (url != "") {
        document.location = url;
        return;
    }
}

function showHide(evt, id, name) {
    var obj = document.getElementById(id);
    var display = obj.style.display;
    var img = document.getElementById('img' + id);
    switch (name) {
        case "level2":
            {
                hideAll();
                if (display == "none") {
                    obj.style.display = "";
                    if (img != null)
                        img.src = "/Images/minus.gif";
                }
                else {
                    obj.style.display = "none";
                    if (img != null)
                        img.src = "/Images/plus.gif";
                }
                break;
            }
        case "level3":
            {
                hideAllLevel3();
                if (display == "none") {
                    obj.style.display = "";
                    if (img != null)
                        img.src = "/Images/minus.gif";
                }
                else {
                    obj.style.display = "none";
                    if (img != null)
                        img.src = "/Images/plus.gif";
                }
                break;
            }
    }

    if (id == "l2ChangePoss") {
        if (display == "none") {
            if (null != document.getElementById("MI7")) {
                document.getElementById("MI7").style.backgroundImage = "";
            }
        }
        else {
            if (null != document.getElementById("MI7")) {
                document.getElementById("MI7").style.backgroundImage = "url(/Images/novo_menu_down1.jpg)";
            }
        }
    }
    else if (id == "l2ChangePoss" && $("#l2ChangePoss").is(":hidden")) {
        if (null != document.getElementById("MI7")) {
            document.getElementById("MI7").style.backgroundImage = "url(/Images/novo_menu_down.jpg)";
        }
    }
    evt = evt ? evt : (window.event ? window.event : null);

    if (window.event) {
        evt.cancelBubble = true;
    }
    else {
        evt.stopPropagation();
    }
}

function hideAll() {
    var eles = null;
    if (webBrowswer.indexOf("IE") != -1) {
        eles = getElesByName('span', 'level2');
    }
    else {
        eles = document.getElementsByName('level2');
    }

    var i = 0;
    for (i = 0; i < eles.length; i++) {
        eles[i].style.display = "none";
        var img = document.getElementById('img' + eles[i].id);
        if (img != null)
            img.src = "/Images/plus.gif";
    }
    hideAllLevel3();
}
// for to hide third level
function hideAllLevel3() {
    var eles = null;
    if (webBrowswer.indexOf("IE") != -1) {
        eles = getElesByName('span', 'level3');
    }
    else {
        eles = document.getElementsByName('level3');
    }
    var i = 0;
    for (i = 0; i < eles.length; i++) {
        eles[i].style.display = "none";
        var img = document.getElementById('img' + eles[i].id);
        if (img != null)
            img.src = "/Images/plus.gif";
    }
}
// be invoked by server, serer pass the parameters to client.
function showMenuItem(id) {
    var item = document.getElementById(id);
    while (item != null && typeof (item) != 'undefined') {
        if (typeof (item.tagName) != 'undefined' &&
             item.tagName.toUpperCase() == 'SPAN' &&
             typeof (item.getAttribute("name")) != 'undefined' &&
             (item.getAttribute("name") == "level2" || item.getAttribute("name") == "level3")) {
            if (item.style.display == "none") {
                var img = document.getElementById('img' + item.id);
                if (img != null)
                    img.src = "/Images/minus.gif";
                item.style.display = "";
            }
            if (item.getAttribute("name") == 'level2')
                return;
        }
        item = item.parentNode;
    }
}
// be invoked by server client. Server pass the parameters to client and set the selected style.
function showItem(id, selectedMenuItem) {
    if (typeof (selectedMenuItem) != 'undefined' && selectedMenuItem != null) {
        var tmp = selectedMenuItem;
        while (tmp.length >= 3) {
            setSelectedStyle(tmp);
            tmp = tmp.substr(0, tmp.length - 1);
        }
    }
    showMenuItem(id);

    // add by leo
    if (selectedMenuItem == "MI7") {
        if (null != document.getElementById("l2ChangePoss") && document.getElementById("l2ChangePoss").style.display == "none") {
            document.getElementById(selectedMenuItem).style.backgroundImage = "url(/Images/novo_menu_down1.jpg)";
        }
        else {
            document.getElementById(selectedMenuItem).style.backgroundImage = "";
            document.getElementById("MI7").style.backgroundColor = "#001965";
        }
    }

    if (selectedMenuItem == "MI72" || selectedMenuItem == "MI71" || selectedMenuItem == "MI74" || selectedMenuItem == "MI73"
    || selectedMenuItem == "MI711" || selectedMenuItem == "MI712" || selectedMenuItem == "MI713") {
        document.getElementById("MI7").style.backgroundImage = "";
        document.getElementById("MI7").style.backgroundColor = "#001965";
        if (selectedMenuItem == "MI74") {
            document.getElementById("MI74").style.backgroundImage = "url(/Images/novo_menu_down_1_1.jpg)";
        }
        else {
            document.getElementById("MI74").style.backgroundImage = "url(/Images/novo_menu_down_1.jpg)";
        }
    }

    // just like you
    if (selectedMenuItem == "MI2") {
        document.getElementById("MI2").style.backgroundImage = 'url(/Images/novo_menu_just_like_you1.jpg)';
    }
}

// only be invoked by showItem(), for to set selected item style, remove onmouseout event.
function setSelectedStyle(selectedMenuItem) {
    var bgcolor = "";
    switch (selectedMenuItem.length) {
        case 3:
            {
                if (selectedMenuItem == "MI1")
                    document.getElementById(selectedMenuItem).style.backgroundImage = "url(/Images/novo_menu_up1.jpg)";
                else if (selectedMenuItem == "MI7")
                    document.getElementById(selectedMenuItem).style.backgroundImage = "url(/Images/novo_menu_down1.jpg)";
                else if (selectedMenuItem == "MI2")
                    document.getElementById(selectedMenuItem).style.backgroundImage = "url(/Images/novo_menu_just_like_you1.jpg)";
                else
                    bgcolor = '#001965';
            }
            break;
        case 4: bgcolor = '#82786f'; break;
        case 5: bgcolor = '#81dcff'; break;
    }
    var ele = document.getElementById(selectedMenuItem);
    if (null != ele) {
        ele.style.backgroundColor = bgcolor;
        ele.setAttribute("onmouseout", "");
    }
}