// ----------------------------------------------------------------------------
// Mini Tabs Javascript
// ----------------------------------------------------------------------------
    
    // Two arrays are created. One for the list items, one for the content divs.

    var tabContentsDivItems = new Array();
    var tabHeadersListItems = new Array();
    
    // Call the initilise method.
    window.onload = init;
    
    // init
    function init()
    {

        // This runs everytime the page loads up.
        
        // Assign each list of elements to the arrays.
        tabHeadersListItems = document.getElementById("tabbedContent").getElementsByTagName("li");
        tabContentsDivItems = document.getElementById("tabContentContainer").getElementsByTagName("div");
        
        // Hide all the elements.
        HideAllElements();
        
        // Set All list item classes to the default.
        SetAllElementsToDefaultClass();
        
        // Show the default first element
        ShowHideElement(tabContentsDivItems[0],1);
        
        // Apply the active list item class to the default item.
        SetElementClassName(tabHeadersListItems[0],"active");
        
        // Assign the click event handle to all list items
        for (var liCnt = 0; liCnt < tabHeadersListItems.length; liCnt++)
        {
            tabHeadersListItems[liCnt].onmousedown = function(){ListItemClicked(this)};
        }
    }
    
    // Called when an item has been clicked.
    function ListItemClicked(listElement)
    {
        // Hide all content elements.
        HideAllElements();
        
        // find out which list item has been clicked. Once found, set the corresponding
        // div tag to display.
        for (var findCnt = 0; findCnt < tabHeadersListItems.length; findCnt++)
        {
            if (listElement.innerHTML == tabHeadersListItems[findCnt].innerHTML)
            {
                ShowHideElement(tabContentsDivItems[findCnt],1);
            }
        }
        
        // Set all list tabs to hidden.
        SetAllElementsToDefaultClass();
        // Set the list tab that has been clicked to display.
        SetElementClassName(listElement,"active");
    }
    
    // Simple function to show / hide any element.
    function ShowHideElement(element,status)
    {
        if(status == 1)
        {
            element.style.display = "block";
        }
        else
        {
            element.style.display = "none";
        }
    }
    
    // Function that iterates through all the content divs and hides them.
    function HideAllElements()
    {
        for(var cnt = 0; cnt < tabContentsDivItems.length; cnt++)
        {
            ShowHideElement(tabContentsDivItems[cnt],0);
        }
    }
    
    // Function that alters an elements class name.
    function SetElementClassName(element,className)
    {
        element.className = className;
    }
    
    // Function that sets all elements to the default class.
    function SetAllElementsToDefaultClass()
    {
        for (var clCnt = 0; clCnt < tabHeadersListItems.length ; clCnt++)
        {
            SetElementClassName(tabHeadersListItems[clCnt],"");
        }
    }