tabbox = function() {
    this.SourceDiv = "";
    this.Div;
    this.TabDiv = document.createElement('div');
        this.TabDiv.className = "tabbox_tabset"; 
    this.Sections = new Array();
    this.ActiveTab;
    
    this.RightShadowContainer = document.createElement('div');
        this.RightShadowContainer.className = "tabbox_shadow_right";
    this.BottomShadowContainer = document.createElement('div');
        this.BottomShadowContainer.className = "tabbox_shadow_bottom";
        
    this.LeftCornerShadow = document.createElement('div');
        this.LeftCornerShadow.className = "tabbox_corner_left";
    this.RightCornerShadow = document.createElement('div');
        this.RightCornerShadow.className = "tabbox_corner_right";
    
    var tabbox = this;
}
tabbox.prototype.SetSource = function(str) {
    this.SourceDiv = str;
    this.Div = document.getElementById(str);
        this.Div.className = "tabbox";
    this.Div.insertBefore(this.TabDiv, this.Div.firstChild);
    this.Div.appendChild(this.RightShadowContainer);
    this.Div.appendChild(this.BottomShadowContainer);
    this.Div.appendChild(this.LeftCornerShadow);
    this.Div.appendChild(this.RightCornerShadow);
}
tabbox.prototype.Render = function() {
    var items = this.Div.getElementsByTagName('span');
    for (var i=0; i<items.length; i++) {
        this.AddItem(items[i]);
    }
    this.StretchTabs();
    this.Sections[0].Activate();
}
tabbox.prototype.AddItem = function(item) {
    var section = new tabbox.tab(item, this);
    this.Sections[this.Sections.length] = section;
}
tabbox.prototype.StretchTabs = function(item) {
    var boxWidth = this.Div.offsetWidth;
    var tabswidth = 14; // Account for the shadow overhang on the right and the start pos of 4 on the left
    for (var i=0; i<this.Sections.length; i++) {
        var tab = this.Sections[i];
        tabswidth += tab.Main.offsetWidth;
    }
    
    if (boxWidth > tabswidth) {
        var totalStretch = boxWidth - tabswidth;
        var addtoeachtab = Math.floor(totalStretch/this.Sections.length);
        var count = 10; // The tab div starts at 4px;
        for (var i=0; i<this.Sections.length; i++) {
            var tab = this.Sections[i];
            var totaltabwidth = tab.Main.offsetWidth + 10; //Subtract the shadow overlap with the next tab
            var tmp = tab.Main.offsetWidth - 15 - 2; //Subtract the overhangs for the shadows and 2 for the borders
            tab.Main.style.width = (tmp+addtoeachtab) + 'px';
            count += (tab.Main.offsetWidth);
            
            if (i==(this.Sections.length-1)) {
                // final check
                if (count < boxWidth) {
                    var tmpWidth = integerizePos(tab.Main.style.width);
                    tab.Main.style.width = (tmpWidth+(boxWidth-count)) + 'px';
                }
            }
        }
    }
}


tabbox.tab = function(sectionTag, parent) {
    tabbox.tab.count++;
    this.ID = tabbox.tab.count;
    this.Parent = parent;
    this.Title = sectionTag.getAttribute('name');
    this.Content = sectionTag;
        this.Content.className = "content";
    
    this.Main = document.createElement('a');
        this.Main.href = "#";
        this.Main.appendChild(document.createTextNode(this.Title));
    this.Parent.TabDiv.appendChild(this.Main);
    
    this.LeftShadow = document.createElement('div');
        this.LeftShadow.className = "tab_shadow_left";
    this.LeftImg = document.createElement('img');
    this.LeftShadow.appendChild(this.LeftImg);
    this.Main.appendChild(this.LeftShadow);
    
    this.RightShadow = document.createElement('div');
    this.RightShadow.className = "tab_shadow_right";
    this.RightImg = document.createElement('img');
    this.RightShadow.appendChild(this.RightImg);
    this.Main.appendChild(this.RightShadow);
    
    var tab = this;
    this.Main.onmouseover = function() {
        this.blur();
        tab.Activate();
        return false;
    }
    
    this.DeActivate();
}
tabbox.tab.count = 0;

tabbox.tab.prototype.Activate = function() {
    if (this.Parent.ActiveTab) this.Parent.ActiveTab.DeActivate();
    this.Parent.ActiveTab = this;
    this.Main.className = "active";
    
    setImageSrc(this.LeftImg,'http://www.drf.com/global/img/bg_sh_tab_left_active.png');
    setImageSrc(this.RightImg,'http://www.drf.com/global/img/bg_sh_tab_right_active.png');
    
    this.Main.style.zIndex = 999;
    
    this.Content.style.display = 'block';
}
tabbox.tab.prototype.DeActivate = function() {
    this.Main.className = "";
    setImageSrc(this.LeftImg,'http://www.drf.com/global/img/bg_sh_tab_left.png');
    setImageSrc(this.RightImg,'http://www.drf.com/global/img/bg_sh_tab_right.png');
    
    // Set the z-index to the inverse of the order so that 
    // each tab overlaps the next one on the right
    this.Main.style.zIndex = 999 - (this.ID);
    
    this.Content.style.display = 'none';
}