var TabControl = {

    New: function (elemID){
    
        var elem = document.getElementById(elemID);
        
        elem.tabstyle = elem.getAttribute('tabstyle');
        if (!elem.tabstyle){elem.tabstyle='3D';}

        elem.containerborder = elem.getAttribute('nocontainerborder')==null;
        
        var outerTable = document.createElement("Table");
        outerTable.className='TabControl';
        outerTable.cellPadding=0;
        outerTable.cellSpacing=0;
        
        var r1 = outerTable.insertRow(0);
        var c11 = r1.insertCell(0);
        var tabsTable = document.createElement("Table");
        tabsTable.cellPadding=0;
        tabsTable.cellSpacing=0;        
        tabsTable.className='TabTable';
        c11.appendChild(tabsTable);
        elem.tabRow=tabsTable.insertRow(0);

        var tab;
        for(var i=elem.childNodes.length-1;i>-1;i--) {
                var node = elem.childNodes[i];
                if(node.nodeType==1){
                    tab = TabControl.Tab.New(elem, node);
                    tab.id = node.id;
               } 
        }
        
        var springCell = elem.tabRow.insertCell(elem.tabRow.childNodes.length);
        springCell.className='TabSpringCell';
        var springInner = document.createElement('div');
        springCell.appendChild(springInner);
        var springInnerInner = document.createElement('div');
        springInner.appendChild(springInnerInner);
        springInnerInner.className = 'TabTitle TabTitleSpring' + elem.tabstyle;
        springInnerInner.innerHTML=' '
        
        var r2 = outerTable.insertRow(1);
        elem.contentArea = r2.insertCell(0);
        
        var styleName = 'TabContainerOuter'
        if (elem.containerborder){styleName=styleName + ' TabContainerOuter' + elem.tabstyle;}
        elem.contentArea.className=styleName;
                
        elem.SelectTab = TabControl._SelectTab;
        
        elem.innerHTML='';
        elem.appendChild(outerTable);   
        
        elem.SelectTab(tab);
        
    }, //New
   
    _SelectTab: function (tab){
        if (this.selectedTab){
            this.selectedTab.SetSelected(false);
            this.contentArea.removeChild(this.selectedTab.content);
        }
        this.selectedTab=tab;
        if(this.selectedTab){
            this.selectedTab.SetSelected(true);
            this.contentArea.appendChild(this.selectedTab.content);
        }
    }, //_SelectTab

    Tab : {
        New: function(tabControl, target){
        
            var tab = tabControl.tabRow.insertCell(tabControl.tabRow.length);
            tab.tabControl = tabControl;
            tab.tabName =  target.getAttribute('tabname');
            
            tab.innerDiv=document.createElement('div');
            tab.appendChild(tab.innerDiv);
            
            tab.TabTitle=document.createElement('div');
            tab.innerDiv.appendChild(tab.TabTitle);
            tab.TabTitle.tabControl=tab;
            tab.TabTitle.className='TabTitle TabTitle' + tabControl.tabstyle;     

            tab.TabTitle.innerHTML = tab.tabName;
            
            tab.content = document.createElement('div');
            
            if (tabControl.style.height){tab.content.style.height=tabControl.style.height;}
            if (tabControl.style.width){tab.content.style.width=tabControl.style.width;}
            
            var styleName = 'TabContainerInner'
            if (tabControl.containerborder){styleName=styleName + ' TabContainerInner' + tabControl.tabstyle;}    
            tab.content.className=styleName;
            
            var nodesToMove = new Array(target.childNodes.length);
            for(var i=0; i<target.childNodes.length;i++) {nodesToMove[i]=target.childNodes[i];}
            for(var i=0; i<nodesToMove.length;i++) {
                tab.content.appendChild(nodesToMove[i]);
            }
            
            tab.onclick=TabControl.Tab._TabClick;
            tab.SetSelected=TabControl.Tab._SetSelected;
            tab.SetMouseOver=TabControl.Tab._SetMouseOver;
            
            tab.TabTitle.onmouseover=function(){tab.SetMouseOver(true);};
            tab.TabTitle.onmouseout=function(){tab.SetMouseOver(false);};
            
            tab.SetSelected(false);
            
            return tab;  
        }, //New
        
        _SetMouseOver :function(val){
            if (!this.selected){
                if(val){
                    this.innerDiv.className=this.innerDiv.mouseOutClassName + ' TabUnSelectedMouseOver';
                }else{
                    this.innerDiv.className=this.innerDiv.mouseOutClassName;
                }        
            }
        }, //_SetMouseOver
        
        _SetSelected : function(val){
            if(val){
                this.innerDiv.mouseOutClassName='TabSelected TabSelected' + this.tabControl.tabstyle;
                this.innerDiv.className=this.innerDiv.mouseOutClassName;
                this.selected=true; 
            }else{
                this.innerDiv.mouseOutClassName='TabUnSelected TabUnSelected' + this.tabControl.tabstyle;
                this.innerDiv.className=this.innerDiv.mouseOutClassName;
                this.selected=false;
            }
        }, //_SetSelected
        
        _TabClick : function(){
            this.tabControl.SelectTab(this);
        } //_TabClick

    } //Tab
  
} //TabControl