//************************************************************************************* 
// File     :   mf_wcog_tabs.js
// Version  :   1.1
// Requires :   mf_domLibrary_0.1.js, prototype.js
// Author   :   Kyle Weems (ksw)
// Origin   :   mindfly.com
// Created  :   March 12, 2008
// Modified :   March 13, 2008
// Purpose  :   On page load, if there are any divs marked 'pageTab', they are marked
// with the class "displayNone" (which should have the style display:none applied to it 
// in your stylesheets), and creates a link to that tab in a nav-menu. When an item on
// the nav-menu is clicked, the "displayNone" class is removed, making it visible.
//
// Note     : This will only run if there are divs marked 'pageTab' on the page. 
//*************************************************************************************


// Version History (only for changes of at least 0.0.1 in version number)
// ===============
// Version 1.0   (03/13/2008) - Basic functionality completed (see purpose section in file's top comments).
// Version 1.1   (04/18/2008) - Altered the inserted text for the UL (removed parentheses and commas).

//=============================================================================================
// startPageTabs()
//=============================================================================================
// Create a page tab menu and then hide all divs marked 'pageTab'
function startPageTabs()
{
    // If there's any elements marked with the pageTab class...
    if($$('.pageTab').length > 0)
    {
        // then fill the tabMenu and hide the elements marked .pageTab
        fillTabMenu();
        hidePageTabs();
    }

    // Adjust the content's height to compensate for a possible adjustment of the content's height.
    try
    {
        adjustContentHeight();
    }
    catch(err)
    {
        // Do nothing.
    }
    
} // end of function startPageTabs()


//=============================================================================================
// fillTabMenu()
//=============================================================================================
// Create an unordered list called 'ulTabMenu' inside a div called 'tabMenu' just prior to the first
// div labeled 'pageTab', and fill it with list items with links going to the various divs marked 
// with 'pageTab'.
function fillTabMenu()
{
    if($$('.pageTab').length > 0)
    {
        // Create the div that will hold the list of links just above the first tabbed section.
        $$('.pageTab')[0].insert({before: new Element('div',{'id':'tabMenu'})});
        
        // Create the unordered list 'ulTabMenu' and put it inside the div.
        $('tabMenu').insert(new Element('ul', {'id':'ulTabMenu'}));
        
        // Loop through all the divs of the class 'pageTab' and add tab 'links' for them in the menu.
        for(i=0;i<$$('.pageTab').length;i++)
        {
            // Get the title of the tabbed section from the first h3.
            var tabTitle = $$('.pageTab')[i].select('h3')[0].innerHTML;
            // Create a li with an anchor that will display the tab, and name it with the title grabbed above.
            $('ulTabMenu').insert(new Element('li').insert(new Element('a', {'href':'javascript:showTab('+i+');'}).update(tabTitle)));
            
        } // end of for loop
        
    } // end of if/then

} // end of function fillTabMenu


//=============================================================================================
// hidePageTabs()
//=============================================================================================
// Puts the class "displayNone" on all the elements with the class pageTab.
function hidePageTabs()
{
    // Loop through all the elements with the class pageTab.
    for(i=0;i<$$('.pageTab').length;i++)
    {
        // If the element at index 'i' doesn't have the class displayNone...
        if($$('.pageTab')[i].hasClassName('displayNone') == false)
        {
            // then add the class displayNone to it.
            $$('.pageTab')[i].addClassName('displayNone');
        } // end of if/then
        
    } // end of for loop


} // end of function hidePageTabs()


//=============================================================================================
// showTab()
//=============================================================================================
// Removes the class "displayNone" from the pageTab that's index # matches 'tabID' after first 
// calling hidePageTabs to hide all the tabs.
function showTab(tabID)
{

    hidePageTabs();
    // Remove the class name 'displayNone' from the div tabID.
    $$('.pageTab')[tabID].removeClassName('displayNone');

    // Adjust the content's height to compensate for a possible adjustment of the content's height.
    try
    {
        adjustContentHeight();
    }
    catch(err)
    {
        // Do nothing.
    }

        
} // end of function showTab()


// On page load, call the startPageTabs() function.
addLoadEvent(startPageTabs);