/*
日期 : 2007/06/13 Allen-Tsai
語法 :
    <div ecType="TabContainer" env="ec" width="700px" selectedTab="By Area" multiLabel>
        <div label="By Location" contentHeight="200" labelWidth="200" labelHeight="20" labelLevel="1">1</div>
        <div label="By Area" contentHeight="200" labelWidth="200" labelHeight="20" labelLevel="1">2</div>
        <div label="By Vessel" contentHeight="200" labelWidth="200" labelHeight="20" labelLevel="2">3</div>
        <div label="By Country" contentHeight="200" labelWidth="200" labelHeight="20" labelLevel="2">4</div>
    </div>
說明 :
    一、父節點屬性
            ecType          必要項   宣告為頁籤元件 (TabContainer)
            env                必要項   環境參數 (ec : shipmentlink、el  : evergreenline)
            width　         選項　   頁籤元件寬度，可指定像素(px)或百分比(%)，預設100%
            selectedTab   選項　   選取頁面，預設第一頁
            multiLabel     選項       是否為多層頁籤
    二、子節點屬性
            label                必要項  顯示名稱
            contentHeight 選項      內容高度，不指定則依div本身高度
            labelWidth      選項      頁籤寬度，預設200
            labelHeight     選項      頁籤高度，預設25
            labelLevel       選項      只有multiLabel存在時才有作用，指定頁籤階層
*/
if (window.addEventListener){
   window.addEventListener('load', initTabContainer, false);
}else if (window.attachEvent){
   window.attachEvent('onload', initTabContainer);
}

var envVariable = new envVariable();
function initTabContainer(){
    var nodes = document.getElementsByTagName("div");
    for(var x = 0 ; x< nodes.length; x++){
        var baseNode = nodes[x];
        if (baseNode.getAttribute('ecType') == 'TabContainer' ){
            envVariable.setup(baseNode.getAttribute('env'));
            var c =  get_childlength(baseNode.childNodes);
            var listNode = document.createElement("div");
            baseNode.appendChild(listNode);
            var containerNode = document.createElement("div");
            containerNode.style.borderBottom = "1px solid";
            containerNode.style.borderRight = "1px solid";
            containerNode.style.borderLeft = "1px solid";
            containerNode.style.margin="0px";
            containerNode.style.borderColor = envVariable.borderColor;
            containerNode.style.clear = "both";
            containerNode.style.overflow = "hidden";
            baseNode.appendChild(containerNode);
            var multi =  (baseNode.getAttributeNode("multiLabel") ? true : false);
            var listInnerHtml = "<table border='0' cellpadding='0' cellspacing='0' width='100%' >" + ( multi ? "<tr><td><table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>" : "<tr>");
            var selectedTab = 0 ;
            var level=1;
            for ( var i = 0 ; i < c ; i++){
                var tmpNode = get_firstchild(baseNode);
                if (baseNode.getAttribute("selectedTab") == tmpNode.getAttribute("label") ) {selectedTab = i ;}
                tmpNode.setAttribute("name","containerTag");
                tmpNode.style.display="none";
                tmpNode.style.height= tmpNode.getAttribute("contentHeight");
                tmpNode.innerHTML = "<table width='100%' cellspacing='0' cellpadding='10' ><tr><td>" + tmpNode.innerHTML + "</td></tr></table>";
                containerNode.appendChild(tmpNode) ;
                if (multi && level != tmpNode.getAttribute("labelLevel")){
                    level = tmpNode.getAttribute("labelLevel");
                    listInnerHtml += "</tr></table><tr><td><table border='0' cellpadding='0' cellspacing='0' width='100%'><tr>";
                }
                var labelW =  tmpNode.getAttribute("labelWidth");
                var labelH =  tmpNode.getAttribute("labelHeight");
                listInnerHtml += "<td id='tab' name='tab' width='"+ (labelW ? labelW : '200' ) +"' valign='top'>"+
                                           "<table border='0' width='100%' cellspacing='0' cellpadding='0' onclick='changeView("+i+")'>"+
                                           "<tr height='" + ( labelH ? labelH : '25' ) +"'>"+
                                           "<td id='tabLeft' name='tabLeft' width='13' nowrap>&nbsp;</td>"+
                                           "<td id='tabMiddle' name='tabMiddle' align='center' nowrap>"+ tmpNode.getAttribute("label") +"</td>"+
                                           "<td id='tabRight' name='tabRight' width='13' nowrap>&nbsp;</td>"+
                                           "</tr>"+
                                           "</table>"+
                                           "</td>";
            }
            listInnerHtml += ( multi ? "" : "<td style='border-bottom: solid 1px "+envVariable.borderColor+";'>&nbsp;</td>" )+ "</tr></table>";
            listNode.innerHTML = listInnerHtml;
            var width = baseNode.getAttribute('width')
            if (width){
                baseNode.style.width= width;
                listNode.style.width = width;
                containerNode.style.width = width;
            }
            changeView(selectedTab);
        }
    }
}

function changeView(m){
    var containerObj = ( document.all ? getElementsByName_iefix('containerTag') : document.getElementsByName("containerTag") ) ;
    for( i = 0 ; i < containerObj.length;i++){
        var selectedTab = ( i == m ? true : false);
        var tabObj =  document.getElementsByName("tab")[i];
        var leftObj = document.getElementsByName("tabLeft")[i];
        var middleObj = document.getElementsByName("tabMiddle")[i];
        var rightObj = document.getElementsByName("tabRight")[i];
        tabObj.style.borderBottom = ( selectedTab ? "0px" : "solid 1px "+envVariable.borderColor+"" );
        tabObj.style.cursor = ( selectedTab ? "" : "pointer" );
        leftObj.setAttribute("background", envVariable.imgFolder + ( selectedTab ? "tab_left_selected.gif" : "tab_left.gif") );
        middleObj.setAttribute("background", envVariable.imgFolder + ( selectedTab ? "tab_center_selected.gif" : "tab_center.gif" ) );
        middleObj.className = ( selectedTab ? envVariable.selectedClass : envVariable.noSelectedClass );
        rightObj.setAttribute("background", envVariable.imgFolder + ( selectedTab ? "tab_right_selected.gif" : "tab_right.gif" ) );
        containerObj[i].style.display=( selectedTab ? "" : "none");
    }
}

function getElementsByName_iefix(name) {
     var elem = document.getElementsByTagName('div');
     var arr = new Array();
     for(i = 0,iarr = 0; i < elem.length; i++) {
          att = elem[i].getAttribute("name");
          if(att == name) {
               arr[iarr] = elem[i];
               iarr++;
          }
     }
     return arr;
}

function get_childlength(n){
    var c = 0 ;
    for (i = 0; i < n.length; i++) {
        if (n[i].nodeType == 1) {
            c++
        }
    }
    return c;
}

function get_firstchild(n){
    var x = n.firstChild;
    while (x.nodeType!=1){
        x = x.nextSibling;
    }
    return x;
}

function envVariable(){
    this.selectedClass = null;
    this.noSelectedClass = null;
    this.borderColor=null;
    this.imgFolder = "/tuf1/images/";
    this.setup = function(env){
        if (env == 'ec'){
            this.borderColor = "#A4A4A4";
            this.selectedClass = "f11wrdb1";
            this.noSelectedClass = "f11wrdn1";
        }else if (env == 'el' ){
            this.borderColor = "#98B781";
            this.selectedClass = "tabTit11b1";
            this.noSelectedClass = "tabTit11n1";
        }else if (env == 'emu' ){
            this.borderColor = "#98B781";
            this.selectedClass = "f12rown1";
            this.noSelectedClass = "f12rown1";
        }else{
            this.selectedClass = "f11wrdb1";
            this.noSelectedClass = "f11wrdn1";
        }
    }
}