//<!--
/*************************************************************
 * explorerMenu()
 *
 * Finds all uls of class 'explorerMenu', and makes an explorer-like navigation system
 * Relies on webassets/css/explorerMenu.css
 * Include bootstrap and this file, and all ul's will be converted.
 * 
 * It relies on an object called explorerMenuOptions with the following properties:
 * @param expandedTitleText string
 * @param collapsedTitleText string
 * @param beforeStart function - this function passes the child UL.id and the state of the li as a boolean (expanded, true | false)
 * @param afterFinish string - this function passes the child UL.id and the state of the li as a boolean (expanded, true | false)
 *************************************************************/
var explorerMenuOptions;

function explorerMenuExpand()
{
    //find the parent (li)
    var parent = findFirstElementByNodeName({nodeNameToFind: 'li', startAt: this, direction: 'back'});
    
    if ( parent )
    { 
        //When the A within the menu LI is clicked, toggle expansion of parent LI - 2 levels above the <a> (<a> is contained in a <span>, which is contained in the <li>
        if (parent.className.indexOf("expanded") >= 0)
        {
            //set the className of the a for image switching
            this.className = this.className.replace(new RegExp("expanded\\b"), "");

            this.title = explorerMenuOptions.collapsedTitleText;
            
            //set the className of the parent LI
            parent.className = parent.className.replace(new RegExp("expanded\\b"), "");

            //replace the '-' text in the child span of this
            this.firstChild.innerHTML = '+';
        }
        else
        {
            //set the className of the a for image switching
            this.className += " expanded";

            this.title = explorerMenuOptions.expandedTitleText;

            //set the className of the parent LI
            parent.className += " expanded";

            //set the html text of the child span to '-'
            this.firstChild.innerHTML = '-';
        }
    }
}

/*
 * explorerMenu
 * Tree-like menu expansion from a ul
 *
 * @param options object
 * @param options.beforeStart function : to be called before the expansion 
 * @param options.afterFinish function : to be called after the expansion
 */
function explorerMenu(options)
{
    //set some defaults
    if (empty(explorerMenuOptions) || typeof explorerMenuOptions == 'undefined')
    {
        explorerMenuOptions = {expandedTitleText: 'collapse', collapsedTitleText: 'expand'};
    }

    var ulObjs = getElementsByClassName("explorerMenu", "UL");

    for (var i=0; i<ulObjs.length; i++)
    {
        var ulObj = ulObjs[i];

        var liObjs = ulObj.getElementsByTagName("LI");

        for (var ii=0; ii<liObjs.length; ii++)
        {
            var liObj = liObjs[ii];

            //do only if the li has children
            if (liObj.className.indexOf('daddy') != -1)
            {
                var expandButtonObj = findFirstElementByClassName({startAt: liObj, cssClass: 'expandButton', deep: true});
                
                if (!expandButtonObj)
                {
                    continue;
                }
                else
                { 
                    expandButtonObj = expandButtonObj.getElementsByTagName('A')[0];
                }
                
                expandButtonObj.onclick = function()
                {
                    var parentLi    = findFirstElementByNodeName({nodeNameToFind: 'li', startAt: this, direction: 'back'});
                    var childUl     = parentLi.getElementsByTagName('UL')[0];
                    var expanded    = (parentLi.className.indexOf('expanded') != -1) ? false : true;
                     
                    if (childUl !== false && !empty(explorerMenuOptions.beforeStart))
                    {
                        explorerMenuOptions.beforeStart.apply(this, [childUl.id, expanded]);
                    }
                    
                    explorerMenuExpand.apply(this);
                    
                    if (childUl !== false && !empty(explorerMenuOptions.afterFinish))
                    {
                        explorerMenuOptions.afterFinish.apply(this, [childUl.id, expanded]);
                    }
                }
                
            } //if className == 'daddy'
        } //for ii
    } //for i
} //explorerMenu

womAdd('explorerMenu()');

//-->