addLoadEvent(setupTabBoxControls);


function setupTabBoxControls(){
	if(!enableBehaviors) return;
	if(enableTabBoxControls != null && enableTabBoxControls != undefined)
	{
		if(!enableTabBoxControls) return;
    }
    var containerDivs = getElementsByTagNameAndClassNames("div", "tabBox");
    if(!containerDivs) return false;
    for(var i=0; i<containerDivs.length; i++){
        setupTabBoxControl(containerDivs[i]);
    }
}
function setupTabBoxControl(div){
    var tabBoxCotroller = new TabBoxController();
    tabBoxCotroller.enableMouseOverSwitching = true;    // enable mouse over tabbing
    tabBoxCotroller.attach(div);
    tabBoxCotroller.addBehaviors();
}


function TabBoxController(){
    this._div = null;
    this._tabs = null;
    this._tabDivs = null;
    this._attached = false;
    this._selectedIndex = -1;
    this._selectedTab = null;
    this.enableMouseOverSwitching = false;
}
TabBoxController.prototype.attach = function(div){
    this._div = div;
    // get the ul
    var tabUL = getFirstElementByTagName(this._div, "ul", false);
    if(tabUL == null) return;
    // get the tabs
    this._tabs = getElementArrayByTagName(tabUL, "li", false);
    if(this._tabs == null || this._tabs.length == 0) return false;
    // get the tab panels
    this._tabDivs = getElementArrayByTagName(this._div, "div", false);
    if(this._tabDivs == null) return;
    if(this._tabDivs.length != this._tabs.length) return null;
    // get the selected tab
    this._selectedIndex = -1;
    this._selectedTab = null;
    for(var i=0; i<this._tabs.length; i++){
        var tab = this._tabs[i];
        if(tab.className == "tabBoxTabCurrent"){
            this._selectedIndex = i;
            this._selectedTab = tab;
            break;
        }
    }
    if(this._selectedTab == null){
        this._selectedIndex = 0;
        this._selectedTab = this._tabs[0];
    }
    // attach events and disable anchors
    var me = this;
    for(var i=0; i<this._tabs.length; i++){
        var tab = this._tabs[i];
        var anchor = getFirstElementByTagName(tab, "a", false);
        if(anchor) anchor.href = "javascript:void(null);";  // disable
        tab._index = i;
        tab._tabBoxController = this;
        tab._tabDiv = this._tabDivs[i];
        tab._anchor = anchor;
        tab.onclick = function(){ me.onClickTab(this); }   
        tab.onmouseover = function(){ me.onMouseOverTab(this); }
    }
    this._attached = true;
    overrideColor(this._selectedTab._anchor, "#000000");
}
TabBoxController.prototype.onClickTab = function(obj){
    obj._tabBoxController.selectIndex(obj._index);
}
TabBoxController.prototype.onMouseOverTab = function(obj){
    if(this.enableMouseOverSwitching){
        obj._tabBoxController.selectIndex(obj._index);
    }
}
TabBoxController.prototype.selectIndex = function(index){
    if(index == this._selectedIndex) return;
    var tab = this._tabs[index];
    if(tab == null) return;
    if(this._selectedTab != null){
        this._selectedTab._tabDiv.style.display = "none";
        this._selectedTab.className = "tabBoxTab";
        removeOverrideColor(this._selectedTab._anchor);
    }
    tab.className = "tabBoxTabCurrent";
    tab._tabDiv.style.display = "block";
    overrideColor(tab._anchor, "#000000");
    this._selectedIndex = index;
    this._selectedTab = tab;
}
TabBoxController.prototype.addBehaviors = function(){
    for(var i=0; i<this._tabDivs.length; i++){
		this.addBehaviorsToTabDiv(this._tabDivs[i]);
    }
}
TabBoxController.prototype.addBehaviorsToTabDiv = function(tabDiv){
    
    var outerDiv0 = getFirstElementByTagName(tabDiv, "div", false);
    if(!outerDiv0) return;
    
    var outerDiv1 = getFirstElementByTagName(outerDiv0, "div", false);
    if(!outerDiv1) return;
    
    var itemDivs = getElementArrayByTagName(outerDiv1, "div", false);
    if(!itemDivs) return false;

    for(var i=0; i<itemDivs.length; i++){
        this.addBehaviorsToTabDivItem(itemDivs[i]);
    }
   
}
TabBoxController.prototype.addBehaviorsToTabDivItem = function(tabDivItem){
	// the header is supposed underline.
	// first get the dom objects for the two links.
	// title.
	var titleObj = getFirstElementByTagName(tabDivItem, "h3", false);
	if(!titleObj) return;
	var titleAnchorObj = getFirstElementByTagName(titleObj, "a", false);
	if(!titleAnchorObj) return;
	// description.
	var descObj = getFirstElementByTagName(tabDivItem, "p", false);
	if(!descObj) return;
	var descAnchorObj = getFirstElementByTagName(descObj, "a", false);
	if(!descAnchorObj) return;
	
	// ok we have the objects.
	// now if you underline one, underline the other.
	
	if(addClass && removeClass && overrideColor){	// make sure we have the functions needed
		// add two spaces to the title text
		titleAnchorObj.innerHTML = titleAnchorObj.innerHTML + "&nbsp;&nbsp;";
		titleObj.style.paddingRight = "0px";
		titleAnchorObj.onmouseover = function(){ addClass(descAnchorObj, "underline"); overrideColor(descAnchorObj, themeColor); }
		titleAnchorObj.onmouseout = function(){ removeClass(descAnchorObj, "underline"); removeOverrideColor(descAnchorObj); }
		descAnchorObj.onmouseover = function(){ addClass(titleAnchorObj, "underline"); }
		descAnchorObj.onmouseout = function(){ removeClass(titleAnchorObj, "underline"); }
	}
	
}