//************************************************************************************* 
// File     :   mf_sticky_dropdown.js
// Version  :   1.2
// Requires :   prototype.js, mf_domLibrary_0.1.js
// Author   :   Kyle Weems (ksw)
// Origin   :   mindfly.com
// Created  :   July 26, 2007
// Modified :   September 7, 2007 (ksw)
// Purpose  :   Toggles on & off the visibility of 'sticky' dropdown menus. Any element
//              that you want to have function as the button to turn the menus on or off
//              must have the class 'stickyToggle' assigned to it and have the onclick 
//              event of toggleSticky(menu), where menu is the name of the element that
//              you want to be visible or invisible.
//*************************************************************************************

// Version History (only for changes of at least 0.0.1 in version number)
// ===============
// Version 1.0   (07/26/2007) - Basic functionality.
// Version 1.1   (08/01/2007) - Avoided an IE bug with a try/catch statement in removeSticky(). 
// Version 1.2   (09/07/2007) - Improved comments. Renamed observer function to setStickyClickObserver(). Inside that function added extra code to extend the element clicked on before checking for classes (to prevent a script-killing error in IE).

//=============================================================================================
// toggleSticky()
//=============================================================================================
// Open or close the menu indicated, depending on it's current display status.
function toggleSticky(menu)
{
    // Create a variable to hold the current status of the menu.
    var newStickyStatus = "";
    // Get the current display style of the menu.
    var stickyStatus = $(menu).style.display;
    // If the menu is currently not visible... 
    if(stickyStatus == 'none')
    {
        // ...then get a list of menus that are already open.
        openStickyMenus = $('branding').getElementsByClassName('stickyOpen');
        // Close the open menus.
        for(i = 0; i < openStickyMenus.length; i++)
        {
            openStickyMenus[i].style.display = "none";
            openStickyMenus[i].removeClassName('stickyOpen');
        }
        newStickyStatus = "";
        // Apply the 'stickyOpen' class to the selected menu.
        $(menu).addClassName('stickyOpen');
    }
    // If the menu is currently visible...
    if(stickyStatus == '')
    {
        // ... then make it invisible by removing the stickyOpen class.
        newStickyStatus = "none";
        $(menu).removeClassName('stickyOpen');
    }
    // Apply the visibility state determined above.
    $(menu).style.display = newStickyStatus;
} // end of function toggleSticky(menu)


//=============================================================================================
// setStickyClickObserver()
//=============================================================================================
// Creates an observer that detects when the user clicks on the page. If any element without the 
// stickyToggle class on it is clicked, then close any open sticky menus.
function setStickyClickObserver()
{
    // Create the click event observer.
    Event.observe(document.body, 'click', function(event) {
        // Get the element that was clicked on.
        var element = Event.element(event);
        // Extend the element to access prototype functions
        Element.extend(element);
        // If the element clicked doesn't have the class 'stickyToggle'...
        if(!element.hasClassName('stickyToggle'))
        {
            // ...then get a list of all the open menus.
            openStickyMenus = document.getElementsByClassName('stickyOpen');
            //If there are any menus with the class 'stickyOpen'...
            if(openStickyMenus.length)
            {
                // ...then loop through the menus.
                for(i = 0; i < openStickyMenus.length; i++)
                {
                    // For each one, set their style to display: none and remove the stickyOpen class name.
                    openStickyMenus[i].style.display = "none";
                    openStickyMenus[i].removeClassName('stickyOpen');
                } // end of for(i=0;i<openStickyMenus.length)
            } // end of if(openStickyMenus.length)
        } // end of if(!element.hasClassName('stickyToggle'))
    }); // end of Event.observe function
}


// Run the setStickyClickObserver event when the page loads.
addLoadEvent(setStickyClickObserver);