var __tabControlCurrent, __tabs = {};
function openTab(tabID, on) {
    if (!on) {
        setTimeout("openTab( '" + tabID + "', true )", 0);
        return;
    }

    // Ensure current tab is set:
    __tabControlCurrent = __tabControlCurrent ? __tabControlCurrent : resolveCurrentTab();

    // Unhighlight current tab:
    if (__tabControlCurrent) {
        __tabControlCurrent.SetEnabled(false);
    }

    // Highlight the tab with the specified ID:
    __tabControlCurrent = createTab(tabID);
    __tabControlCurrent.SetEnabled(true);

    // Change the associated picture
    document.getElementById('tab_picture').src = "images/" + tabID + ".jpg";
}

function createTab(tabID) {
    if (__tabs[tabID]) {
        return __tabs[tabID];
    }
    return __tabs[tabID] = new Tab(tabID);
}

function resolveCurrentTab() {
    var allContent = document.getElementsByTagName("div");
    for (var contentIndex = 0; contentIndex < allContent.length; contentIndex++) {
        if (allContent[contentIndex].className == "tabLabelSelected") {
            var parts = allContent[contentIndex].id.split("_");
            parts.pop();
            return createTab(parts.join("_"));
        }
    }
    return null;
}

function Tab(tabID) {
    function SetEnabled(on) {
        var prev = parseInt(tabID.replace('tab', '')) - 1;
        var prevID = 'tab' + prev + '_bottom';
        var previousBottom = document.getElementById(prevID);
        var qualifier = (on ? "Selected" : "");
        if (tabID == 'tab1' && !on)
            this.elementTop.className = "tabLabelBottom";
        else {
            if (tabID != 'tab1' && on)
                previousBottom.className = "tabLabelTop";
            else
                if (prevID != __tabControlCurrent.elementID && tabID != 'tab1')
                previousBottom.className = "tabLabelBottom";
            this.elementTop.className = "tabLabelTop" + qualifier;
        }
        this.elementCenter.className = "tabLabel" + qualifier;
        this.elementBottom.className = "tabLabelBottom" + qualifier;

        this.elementContent.className = on ? "tabContent" : "tabContentHidden";

        this.elementArrow.className = on ? "tabArrow" : "tabArrowHidden";
    }
    this.SetEnabled = SetEnabled;

    this.elementID = tabID;
    this.elementContent = document.getElementById(tabID);
    this.elementTop = document.getElementById(tabID + "_top");
    this.elementCenter = document.getElementById(tabID + "_center");
    this.elementBottom = document.getElementById(tabID + "_bottom");
    this.elementArrow = document.getElementById(tabID + "_arrow");
}