addLoadEvent(init);

function init()
{
    //if javaScript is enabled then we can add styling for a tabbed display
    var tabControl = document.getElementById("tabControl");
    tabControl.className += " scripted";
    var tabs = tabControl.getElementsByTagName("li");
    
    for (var i = 0; i < tabs.length; i++)
    {
        var tab = tabs[i];
        tab.className += " scripted";
        var tabAnchor = tab.getElementsByTagName("a")[0];
        tabAnchor.onclick = tabClick;
        var tabBody = tab.getElementsByTagName("div")[0];
        tabBody.className += " scripted";
        if (i == 0)
        {   
            tab.className += " active";
            tabBody.style.display = "block";  
            window.activeTab = tab;  
        }
        else
        {
            tabBody.style.display = "none";
        }
    }

}

function tabClick(evt)
{
    var newTab = this.parentNode;
    var newTabBody = newTab.getElementsByTagName("DIV")[0];
    var currentTab = window.activeTab;
    var currentTabBody = currentTab.getElementsByTagName("DIV")[0];

    if (currentTab && currentTab != newTab)
    {
        currentTabBody.style.display = "none";
        currentTab.className = currentTab.className.replace(/active/,'');
    }
    newTabBody.style.display = "block";
    newTab.className += " active";
    window.activeTab = newTab;  
}