/* 

menuScript.js clientside helper function, highlighting currently active menu nodes and hiding or 
displaying submenus through use of CSS. This script was originally written for the Kentico 
implementation of Castle Leslie Properties, 3rd Apr 2007, M.Voss, mike@xcomms.ie, for XCommunications

http://www.xcommunications.ie
http://www.castleleslieproperties.com
http://www.kentico.com

This function iterates through a menu based on nested <ul>s. It makes use of Kentico's aliaspathing,
identifying current menu items on the basis of window.location.href information.

The following render is applied:

1. Active submenus are displayed by overwriting the default "display:none" style with "display:block;"
2. The currently active list item is marked with class="on" 
3. <ul>'s that have a submenu are marked with class="hassub"
4. Toplevel nav items with empty or no submenus are wrapped in <span> tags for styling

See bottom of this file for an example render output.

Known limitation: 
Document and Section Names in Kentico currently MUST be unique to allow checking if the currently 
examined li's link href is part of the currently displayed path!

*/

function applyNavStyle()
{
    // variable definition of strings needed in each iteration
    var strCurrentHref = "";            // current page href
    var strLinkHref = "";               // href of the link currently examined in the loop
    var strCurrentDocName = "";         // file name without ".aspx" extension of the currently displayed file
    var strLinkDocName = "";            // file name without ".aspx" extension of the document linked in the currently examined link in the loop
    
    // variable definition of arrays needed in each iteration
    var arrNavListItems = new Array();  // array storing all the <li>s in the navigation
    var arrAllAs = new Array();         // array storing all the <a>s in the currently examined <li> in the loop
    var arrAllUls = new Array();        // array storing all the <ul>s in the currently examined <li> in the loop (i.e. nested <ul>s)
    
    // find current page's url
    strCurrentHref = window.location.href;
    // identify the current document's alias name
    strCurrentDocName = strCurrentHref.substring(strCurrentHref.lastIndexOf("/")+1,strCurrentHref.lastIndexOf(".aspx"));
    // find navigation div and load all li's into an array
    arrNavListItems = document.getElementById("nav").getElementsByTagName("li");
    
    // loop through array
    for(i=0; i<arrNavListItems.length; i++)
    {
        // store info for current iteration
        arrAllAs = arrNavListItems[i].getElementsByTagName("a");
        arrAllUls = arrNavListItems[i].getElementsByTagName("ul");
        
        // for each item find the href of the (first) link contained in it
        if(arrAllAs.length > 0)
        {
            strLinkHref = arrAllAs[0].href;
            strLinkDocName = strLinkHref.substring(strLinkHref.lastIndexOf("/")+1,strLinkHref.lastIndexOf(".aspx"));            

            // check if current page is the same as the url of the link
            if(strCurrentHref == strLinkHref)
            {
                // if yes, set li's cssclass to "on"
                arrNavListItems[i].className = "on";
                // check if the current selection has a submenu to deal with
                if(arrAllUls.length != 0) 
                {
                    // if yes, check if there are items in the submenu
                    if(arrAllUls[0].getElementsByTagName("li").length != 0)
                    {
                        // if yes, mark a as "hassub"
                        arrAllAs[0].className = "hassub";
                        // and display the submenu
                        arrAllUls[0].style.display = "block";
                    }
                    else
                    {
                        // if not, apply <span> tags around the li's content for styling
                        arrNavListItems[i].innerHTML = "<span>" + arrAllAs[0].innerHTML + "</span>";
                    }
                }
                else
                {
                    // if not, apply <span> tags around the content for styling
                    arrNavListItems[i].innerHTML = "<span>" + arrAllAs[0].innerHTML + "</span>";
                }
            }
            else
            {
                // if not, check if the node has a submenu to deal with and 
                // also check if the currently examined li's link href is part of the currently displayed path
                if((arrAllUls.length != 0) && (strCurrentHref.indexOf("/" + strLinkDocName + "/") != -1))
                {
                    // if it is part of the path, display the submenu <ul>, mark the <a> as "hassub" and the <li> as on
                    arrAllAs[0].className = "hassub";
                    arrNavListItems[i].className = "on";
                    arrAllUls[0].style.display = "block";
                }
            }
        }
    }
}

function linkKiller(strLinkTextWithTags)
{
    var strLinkText = strLinkTextWithTags.slice(strLinkTextWithTags.indexOf(">")+1,strLinkTextWithTags.indexOf("</a>"));
    strLinkTextWithTags = strLinkText + strLinkTextWithTags.slice(strLinkTextWithTags.indexOf("</a>")+4,strLinkTextWithTags.length);
    return strLinkTextWithTags;
}

/*

Example menu before script (nested <ul>s are hidden by default 
by defining "#nav ul ul { display:none; }" for them in the documents stylesheet):

<div id=nav>
    <ul>
        <li><a href="firstnav.aspx">First Nav Item</a></li>
        <li><a href="secondnav.aspx">Second Nav Item</a>
            <ul>
                <li><a href="firstsubnav.aspx">First Subnav Item</a></li>
            </ul>
        </li>
    </ul>
</div>

Example render after script, while viewing the firstnav.aspx page:

<div id=nav>
    <ul>
        <li class="on"><span>First Nav Item</span></li>
        <li><a href="secondnav.aspx">Second Nav Item</a>
            <ul>
                <li><a href="firstsubnav.aspx">First Subnav Item</a></li>
            </ul>
        </li>
    </ul>
</div>

Example render after script, while viewing the firstsubnav.aspx page:

<div id=nav>
    <ul>
        <li><a href="firstnav.aspx">First Nav Item</a></li>
        <li class="on"><a href="secondnav.aspx">Second Nav Item</a>
            <ul style="display:block;">
                <li class="on"><a href="firstsubnav.aspx">First Subnav Item</a></li>
            </ul>
        </li>
    </ul>
</div>

*/