//主選單

var cMainTable = "titleTable";
var cMainMouseOut = "titleWd_a";
var cMainMouseIn = "titleWD_a";

//次選單

var cChildTable = "menuTable";
var cChildMouseOut = "menuBtn";
var cChildMouseIn = "menuBtn_H";

//彈出選單
function PopUpMenu() {
    this.CreateMenu = function(strXml, cType, Discuss) { createMenu(strXml, cType, Discuss); }      //傳入xml文件字串，並產生html選單       
    this.GetFirstMenu = function FirstMenu() { return tmpMenuBar; }       //傳回橫向功能列

    this.GetChildMenu = function ChildMenu() { return ArrMenu.join(''); } //傳回所有子選單的Div
    var ArrMenu = new Array();
    var tmpMenuBar;

    //建立選單
    function createMenu(strXml, cType, Discuss) {
        tmpMenuBar = makeMenuBar($(strXml).find("menu"), cType, Discuss);
    }

    //將xml第一層轉成橫向排列選單
    function makeMenuBar(wDom, cType, Discuss) {
        var result = "";
        //var wCount = $(wDom).children.length;

        result += "<div id='MB' width='100%'><table cellpadding=0 cellspacing=0 border=0 class=" + cMainTable + ">";
        $(wDom).children().each(function() {
            switch (this.tagName) {
                case "item":
                    var vimglink = $(this).attr("imglink")
                    if (vimglink != undefined && vimglink != "") {
                        var strTd = "<td align='left' valign='bottom' class='{classname}' colspan='3'><img id='{id}' src=\"{imglink}\" onmouseover='menuOnMouseOver(this, \"W\",\"{imglinkover}\")' onmouseout='menuOnMouseOut(this,\"W\",\"{imglink}\")' onclick='menuOnClick(\"{url}\",\"{mode}\")'></td>";
                    } else {
                        var strTd = "<td align='left' valign='bottom' class='{classname}' id='{id}' onmouseover='menuOnMouseOver(this, \"W\")' onmouseout='menuOnMouseOut(this,\"W\")' onclick='menuOnClick(\"{url}\",\"{mode}\")' >&nbsp;&nbsp;&nbsp;{name}</td>";
                    }
                    strTd = strTd.replace(/{id}/, $(this).attr("id"));
                    strTd = strTd.replace(/{url}/, $(this).attr("url"));
                    strTd = strTd.replace(/{name}/, $(this).attr("name"));
                    strTd = strTd.replace(/{imglink}/g, $(this).attr("imglink"));
                    strTd = strTd.replace(/{imglinkover}/, $(this).attr("imglinkover"));
                    strTd = strTd.replace(/{mode}/, $(this).attr("mode"));
                    strTd = strTd.replace(/{classname}/, cMainMouseOut);
                    result += strTd;
                    break;

                case "itemlink":
                    if ($(this).attr("id") != "2-7") {
                        var vimglink = $(this).attr("imglink")
                        if (vimglink != undefined && vimglink != "") {
                            var strTd = "<td align='left' valign='bottom' class='{classname}' colspan='3'><img id='{id}' src=\"{imglink}\" onmouseover='menuOnMouseOver(this, \"W\",\"{imglinkover}\")' onmouseout='menuOnMouseOut(this,\"W\",\"{imglink}\")' onclick=menuOnClick(\"{url}\",\"{mode}\")></td>";
                        } else {
                            var strTd = "<td align='left' valign='bottom' class='{classname}' id='{id}' onclick='menuOnClick(\"{url}\",\"{mode}\")' onmouseover='menuOnMouseOver(this)' onmouseout='menuOnMouseOut(this,\"W\")'>&nbsp;&nbsp;&nbsp;{name}&nbsp;</td>";
                        }
                        strTd = strTd.replace(/{id}/, $(this).attr("id"));
                        strTd = strTd.replace(/{url}/, $(this).attr("url"));
                        strTd = strTd.replace(/{name}/, $(this).attr("name"));
                        strTd = strTd.replace(/{imglink}/g, $(this).attr("imglink"));
                        strTd = strTd.replace(/{imglinkover}/, $(this).attr("imglinkover"));
                        strTd = strTd.replace(/{mode}/, $(this).attr("mode"));
                        strTd = strTd.replace(/{classname}/, $(this).attr("classname"));
                        result += strTd;
                    }
                    break;

                case "line":
                    result += "<td width='40' align='left' valign='bottom'><div class='line_b'></div></td>";
                    break;
            }

            if (this.hasChildNodes()) {
                makeMenu($(this), cType, Discuss);
            }
        });
        result += "<tr></table></div>";
        return result;
    }

    //將xml其它層轉成直向排列選單

    function makeMenu(wDom, cType, Discuss) {
        var result = "";
        var ZoneList = Discuss.split(',');
        result += "<iframe id='I" + $(wDom).attr('id') + "' style=\"display:none;position:absolute; \" scrolling='no' frameborder='0'></iframe>";
        result += "<div id='D" + $(wDom).attr('id') + "' style=\"display:none;position:absolute;background-color:transparent;text-align:left; \" ><table cellpadding=0 cellspacing=0 border=0 class=" + cChildTable + ">";
        $(wDom).children().each(function() {
            switch (this.tagName) {
                case "item":
                    var vimglink = this.imglink;
                    if (vimglink != undefined && vimglink != "") {
                        strTd = "<tr id='{id}' class='{classname}'><td classname='title_titleB' colspan='3'><img id='{id}' src=\"{imglink}\" onmouseover='menuOnMouseOver(this, \"H\",\"{imglinkover}\")' onmouseout='menuOnMouseOut(this,\"H\",\"{imglink}\")' onclick='menuOnClick(\"{url}\",\"{mode}\")'></td></tr>";
                    } else {
                        strTd = "<tr id='{id}' onmouseover='menuOnMouseOver(this,\"H\")' onmouseout='menuOnMouseOut(this,\"H\")' class='{classname}' onclick='menuOnClick(\"{url}\",\"{mode}\")'><td colspan='3'>&nbsp;&nbsp;&nbsp;{name}</td></tr>";
                    }
                    strTd = strTd.replace(/{id}/, $(this).attr("id"));
                    strTd = strTd.replace(/{img}/, chkImg($(this).attr("img")));
                    strTd = strTd.replace(/{name}/, $(this).attr("name"));
                    strTd = strTd.replace(/{url}/, $(this).attr("url"));
                    strTd = strTd.replace(/{imglink}/g, $(this).attr("imglink"));
                    strTd = strTd.replace(/{imglinkover}/, $(this).attr("imglinkover"));
                    strTd = strTd.replace(/{mode}/, $(this).attr("mode"));
                    strTd = strTd.replace(/{classname}/, cChildMouseOut);
                    result += strTd;
                    break;
                case "itemlink":
                    var vimglink = this.imglink;
                    var opendiscuss = false;

                    //未登入的用戶 (不顯示國外行情服務)
                    if (cType == "" && $(this).attr("id") != "4-8") {
                        if ($(this).attr("value")) {
                            for (var i = 0; i < ZoneList.length; i++) {
                                if (ZoneList[i] == $(this).attr("value")) {
                                    opendiscuss = true;
                                }
                            }
                        }
                        else {
                            opendiscuss = true;
                        }

                        if (opendiscuss == true) {
                            if (vimglink != undefined && vimglink != "") {
                                strTd = "<tr class='{classname}'><td colspan='3'><img id='{id}' src=\"{imglink}\" onmouseover='menuOnMouseOver(this, \"H\",\"{imglinkover}\")' onmouseout='menuOnMouseOut(this,\"H\",\"{imglink}\")' onclick=menuOnClick(\"{url}\",\"{mode}\") width=100%></td></tr>";
                            } else {
                                strTd = "<tr id='{id}' onmouseover='menuOnMouseOver(this,\"H\")' onmouseout='menuOnMouseOut(this,\"H\")' onclick='menuOnClick(\"{url}\",\"{mode}\")' class='{classname}' ><td colspan='3' >&nbsp;&nbsp;&nbsp;{name}</td></tr>";
                            }
                            strTd = strTd.replace(/{id}/, $(this).attr("id"));
                            strTd = strTd.replace(/{img}/, chkImg($(this).attr("img")));
                            strTd = strTd.replace(/{name}/, $(this).attr("name"));
                            strTd = strTd.replace(/{url}/, $(this).attr("url"));
                            strTd = strTd.replace(/{imglink}/g, $(this).attr("imglink"));
                            strTd = strTd.replace(/{imglinkover}/, $(this).attr("imglinkover"));
                            strTd = strTd.replace(/{mode}/, $(this).attr("mode"));
                            strTd = strTd.replace(/{classname}/, cChildMouseOut);
                            result += strTd;
                        }
                    }

                    //已登入有購買 CUBEDATA 的用戶可 (顯示：國外行情服務）
                    if (cType == "A") {
                        if ($(this).attr("value")) {
                            for (var i = 0; i < ZoneList.length; i++) {
                                if (ZoneList[i] == $(this).attr("value")) {
                                    opendiscuss = true;
                                }
                            }
                        }
                        else {
                            opendiscuss = true;
                        }

                        if (opendiscuss == true) {
                            if (vimglink != undefined && vimglink != "") {
                                strTd = "<tr class='{classname}'><td colspan='3'><img id='{id}' src=\"{imglink}\" onmouseover='menuOnMouseOver(this, \"H\",\"{imglinkover}\")' onmouseout='menuOnMouseOut(this,\"H\",\"{imglink}\")' onclick=menuOnClick(\"{url}\",\"{mode}\") width=100%></td></tr>";
                            } else {
                                strTd = "<tr id='{id}' onmouseover='menuOnMouseOver(this,\"H\")' onmouseout='menuOnMouseOut(this,\"H\")' onclick='menuOnClick(\"{url}\",\"{mode}\")' class='{classname}' ><td colspan='3' >&nbsp;&nbsp;&nbsp;{name}</td></tr>";
                            }
                            strTd = strTd.replace(/{id}/, $(this).attr("id"));
                            strTd = strTd.replace(/{img}/, chkImg($(this).attr("img")));
                            strTd = strTd.replace(/{name}/, $(this).attr("name"));
                            strTd = strTd.replace(/{url}/, $(this).attr("url"));
                            strTd = strTd.replace(/{imglink}/g, $(this).attr("imglink"));
                            strTd = strTd.replace(/{imglinkover}/, $(this).attr("imglinkover"));
                            strTd = strTd.replace(/{mode}/, $(this).attr("mode"));
                            strTd = strTd.replace(/{classname}/, cChildMouseOut);
                            result += strTd;
                        }
                    }                    
                    break;
                case "line":
                    result += "<tr><td colspan='3'><div style='border-bottom:solid 1px #999999; width:100%; height:0px'></div></td></tr>";
                    break;
            }
            if (this.hasChildNodes()) {
                makeMenu($(this));
            }
        });

        result += "</table></div>";
        ArrMenu.push(result);
    }


    //檢查是否有圖片存在並傳回(適用小圖示)
    function chkImg(vImage) {
        var result;
        if (vImage == "") {
            result = ""
        } else {
            result = "<img src='" + vImage + "' width='16' height='16' />";
        }
        return result;
    }

}

//--------------事件段--------------------
var focusMenu = false;      //mouseout,mouseover的狀態開關

var tmplay = 0;             //存放目前開到那一層

var arrDiv = new Array();   //已開啟的div
var cursorDiv = "";
var vTimer;                //拿來放計時器用的

//鼠標移入時觸發

function menuOnMouseOver(obj, wType, imgPath) {
    clearTimeout(vTimer); //將預排的計時器拿掉

    obj.style.cursor = "hand";
    focusMenu = true;
    if (imgPath) {
        obj.src = imgPath;
    }

    //設定滑鼠事件的css變化
    switch (wType) {
        case "W":
            obj.className = cMainMouseIn;
            break;
        case "H":
            obj.className = cChildMouseIn;
            break;
    }

    //顯示選單項目
    if ($("#D" + obj.id)) {
        var vIframe = "#I" + obj.id
        var vDiv = "#D" + obj.id
        switch (wType) {
            case "W":
                $(vDiv).css({
                    "left": findPosX(obj),
                    "top": findPosY(obj) + obj.offsetHeight + obj.offsetTop
                });
                break;
            case "H":
                $(vDiv).css({
                    "left": findPosX(obj) + obj.offsetWidth + obj.offsetLeft,
                    "top": findPosY(obj)
                });
                break;
        }
        if ($.browser.msie) {
            $(vIframe).css({
                "left": $(vDiv).css("left"),
                "top": $(vDiv).css("top"),
                "width": $(vDiv).width() ,
                "height": $(vDiv).height() 
            }).show();

        } else {
            $(vIframe).css({
                "left": $(vDiv).css("left"),
                "top": $(vDiv).css("top"),
                "width": $(vDiv).width() - 4,
                "height": $(vDiv).height() - 4
            }).show();
        }
        $(vDiv).show();
    }

    //顯示隱藏選單區塊

    var layer = obj.id.split('-').length - 1;  // 索引從0開始，所以-1;

    if (layer == tmplay) {              //同一層內移動
        var a = arrDiv.pop();
        hiddenDiv(a);
        showDiv(obj.id);
        arrDiv.push(obj.id);
    } else if (layer < tmplay) {        //回到上層時

        //退到所選到的層次

        for (i = layer + 1; i <= arrDiv.length; i++) {
            var a = arrDiv.pop();
            hiddenDiv(a);
        }
        //判斷是不是相同的項目。若不同時則更新
        if (arrDiv[layer] != obj.id) {
            var a = arrDiv.pop();
            hiddenDiv(a)
            arrDiv.push(obj.id);
        }
    } else if (layer > tmplay) {        //往下層移動
        arrDiv.push(obj.id);
    }
    tmplay = layer;
}


//直向選單，鼠標移出時
function menuOnMouseOut(obj, wType, imgPath) {
    obj.style.cursor = "default";
    focusMenu = false;
    if (imgPath) {
        obj.src = imgPath;
    }
    obj.style.cursor = "default";
    if (document.getElementById("D" + obj.id)) {
        var layer = obj.id.split('-').length;
    }

    switch (wType) {
        case "W":
            obj.className = cMainMouseOut;
            break;
        case "H":
            obj.className = cChildMouseOut;
            break;
    }

    vTimer = setTimeout("menuHidden()", 500);
}

//隱藏DIV
function hiddenDiv(wID) {
    if (document.getElementById("D" + wID)) {
        document.getElementById("D" + wID).style.display = "none";
        document.getElementById("I" + wID).style.display = "none";
    }
}
//顯示DIV
function showDiv(wID) {
    if (document.getElementById("D" + wID)) {
        document.getElementById("D" + wID).style.display = "block";
        document.getElementById("I" + wID).style.display = "block"
    }
}

//遊標離開Menu時隱藏所有DIV選單
function menuHidden() {
    var vLength = arrDiv.length;
    if (focusMenu == false) {
        for (var i = 0; i <= vLength; i++) {
            var a = arrDiv.pop();
            hiddenDiv(a);
        }
    }
    layer = 0;
}

//執行換頁
function menuOnClick(obj, mode) {
    if (obj != "" && obj != "undefined") {
        switch (mode) {
            case "window":
                vWidth = window.screen.availWidth;      //取得可用寬

                vHeight = window.screen.availHeight;    //取得可用高

                window.open(obj, "", "toolbar=0,resizable=1,location=0,directories=0");
                break;
            case "frame":
                document.all.ifContent.src = obj;
                break;
            case "mail":
                location.href = obj;
            default:
                top.location = obj;
        }
        //執行後讓選單隱藏
        focusMenu = false;
        menuHidden();
    }
}


//傳回該物件(html) X座標
function findPosX(obj) {
    var curleft = 0;
    if (obj.offsetParent)
        while (1) {
        curleft += obj.offsetLeft;
        if (!obj.offsetParent)
            break;
        obj = obj.offsetParent;
    }
    else if (obj.x)
        curleft += obj.x;
    return curleft;
}

//傳回該物件(html) Y座標
function findPosY(obj) {
    var curtop = 0;
    if (obj.offsetParent)
        while (1) {
        curtop += obj.offsetTop;
        if (!obj.offsetParent)
            break;
        obj = obj.offsetParent;
    }
    else if (obj.y)
        curtop += obj.y;
    return curtop;
}