// unsure if we'll need js for the menu, but introducing to the template just in case.
function sidebar_init() {
    if(document.getElementById && document.getElementsByTagName) {
    var sideMenu = document.getElementById('sideMenu');
    // constrain results to those within the sideMenu
    var menuDivs = sideMenu.getElementsByTagName('div');
    for(var i = 0; i < menuDivs.length; i++) {
        if(menuDivs[i].className != 'menuTitle') {
            menuDivs[i].onmouseover = menuOver;
            menuDivs[i].onmouseout = menuOut;
            }
        }
    }
}

/**
 * @author thomsonk
 */

function dashCount(elementId) {
    // scan through string for instances of underscore
    // if found, increment count value and truncate string
    // return count value once test condition is false
    var countValue = 0;
    while(elementId.indexOf('_') >= 0) {
        // truncate string starting from character after detected underscore
        elementId = elementId.substring(elementId.indexOf('_') + 1);
        // increment counter
        countValue++;
    }
    return countValue;
}

function menuInit() {
    // determine if browser can manipulate the DOM
    if(document.getElementById && document.getElementsByTagName) {
        // initial view of menu is fully extended to accommodate
        // users without JavaScript. The menu is then programatically
        // hidden, and click and mouse event handlers are assigned
        var sideMenu = document.getElementById('sideMenu');
        // constrain results to those within the sideMenu
        var menuDivs = sideMenu.getElementsByTagName('div');
        var menuElements = new Array();
        for(var i = 0; i < menuDivs.length; i++) {
            if(menuDivs[i].id.indexOf('level') == 0) {
                // if div has an id with 'level' in it, store it in new Array
                // store the number of underscores as the second array element
                var _dashCount = dashCount(menuDivs[i].id)
                menuElements[menuElements.length] = new Array(menuDivs[i].id, _dashCount);
            }
        }
        // menuElements array now has all the information necessary to continue
        // menuElements structure is [n][0] == id, [n][1] == number of underscores in id
        // a vaule of 1 = top level, 2 = second level, 3 = third level
        for(var i = 0; i < menuElements.length; i++){
            // first apply changes to primary elements to 
            // diminish the visual effect onload
            var thisElement = document.getElementById(menuElements[i][0]);
            if(menuElements[i][1] == 1) {
                // no need to test for children - as it must have children
                thisElement.onclick = menuShowMore;
                var j = 1;
                while(document.getElementById(thisElement.id + '_' + j) != null)	{
                    var childElement = document.getElementById(thisElement.id + '_' + j);
                    childElement.style.display = 'none';
                    j++;
                }
            }
            // now check the secondary elements
            if(menuElements[i][1] == 2) {
                // test to see if it has children
                if(document.getElementById(thisElement.id + '_1')) {
                    // has children
                    thisElement.className += ' menuPlus';
                    thisElement.onclick = menuShowMore;
                    var j = 1;
                    while(document.getElementById(thisElement.id + '_' + j) != null)	{
                        var childElement = document.getElementById(thisElement.id + '_' + j);
                        childElement.style.display = 'none';
                        j++;
                    }
                }
            }
            
            // apply mouseover and click events then
            // determine if this element is 'selected'
            // this is set on the style of the div contained by this one
            var innerDiv = thisElement.getElementsByTagName('div');
            if(innerDiv[0].className != 'menuSelected'){
                thisElement.onmouseover = menuOver;
                thisElement.onmouseout = menuOut;
                // thisElement.onclick = menuSelect;
            } else {
                // this is the selected one, ensure its parents are visible
               var thisParent = document.getElementById(thisElement.id.substring(0,thisElement.id.lastIndexOf('_')));
               menuShowMoreId(thisParent.id);
               thisParent.style.display = 'block';
               var thisGrandparent = document.getElementById(thisParent.id.substring(0,thisParent.id.lastIndexOf('_')));
               if(thisGrandparent) {
                   thisGrandparent.onclick = menuShowLess;
                   menuShowMoreId(thisGrandparent.id);
               }
            }

        }
    }
}

function menuOut(){
    if(this.className.indexOf(' menuMouseover') > 1 ){
        this.className = this.className.substring(0, this.className.indexOf(' menuMouseover'));
    }
    // reset cursor style
    this.style.cursor = 'auto';
}

function menuOver(){
    if(this.className.indexOf(' menuMouseover') == -1){
        this.className += ' menuMouseover';
    }
    // change cursor to 'hand pointer'
    this.style.cursor = 'pointer';
}

function menuSelect(){
    // first find the currently selected item and reset it
    var sideMenu = document.getElementById('sideMenu');
    var menuDivs = sideMenu.getElementsByTagName('div');
    for(var i = 0; i < menuDivs.length; i++){
        if(menuDivs[i].className == 'menuSelected'){
            // reset className
            var thisElement = menuDivs[i];
            thisElement.className = 'menuRegular';
            // assign events back to the parent div
            var thisParent = menuDivs[i-1];
            thisParent.onmouseover = menuOver;
            thisParent.onmouseout = menuOut;
            thisParent.onclick = menuSelect;
            break;
        }
    }
    // now apply selected status to this item
    var thisDiv = document.getElementById(this.id);
    // remove event assignment from this div
    thisDiv.onmouseover = '';
    thisDiv.onmouseout = '';
    thisDiv.onclick = '';
    var innerDiv = thisDiv.getElementsByTagName('div');
    // assign new selected style
    innerDiv[0].className = 'menuSelected';
    if(this.className.indexOf(' menuMouseover') > 1){
        this.className = this.className.substring(0, this.className.indexOf(' menuMouseover'));
    }
    // reset the cursor style
    this.style.cursor = 'auto';
}

function menuShowLess() {
    var j = 1;
    var thisElement = document.getElementById(this.id);
    while(document.getElementById(thisElement.id + '_' + j) != null) {
        var childElement = document.getElementById(thisElement.id + '_' + j);
        var innerDiv = childElement.getElementsByTagName('div');
        if(innerDiv[0].className != 'menuSelected') {
            childElement.style.display = 'none';
        }
        if(childElement.className.indexOf('menuMinus') >= 0 ){
            childElement.className = childElement.className.substring(0,(childElement.className.indexOf(' menuMinus')))+' menuPlus';
            childElement.onclick = menuShowMore;
        }
        // test to see if there are children of this element
        var k = 1;
        while(document.getElementById(thisElement.id + '_' + j + '_' + k) != null) {
            var grandchildElement = document.getElementById(thisElement.id + '_' + j + '_' + k);
            var innerDiv = grandchildElement.getElementsByTagName('div');
            if(innerDiv[0].className != 'menuSelected') {
                grandchildElement.style.display = 'none';
            }
            k++;
        }
        j++;
    }
    if(thisElement.className.indexOf('menuMinus') >= 0){
        thisElement.className = thisElement.className.substring(0,(this.className.indexOf(' menuMinus')))+' menuPlus';
    }
	thisElement.onclick = menuShowMore;
}

function menuShowMore() {
    var thisElement = document.getElementById(this.id);
    var j = 1;
    while(document.getElementById(thisElement.id + '_' + j) != null) {
        var childElement = document.getElementById(thisElement.id + '_' + j);
        childElement.style.display = 'block';
        j++;
    }
    if(thisElement.className.indexOf('menuPlus') >= 0){
        thisElement.className = thisElement.className.substring(0,(thisElement.className.indexOf(' menuPlus')))+' menuMinus';
    }
	thisElement.onclick = menuShowLess;
}

function menuShowMoreId(elementId) {
    var thisElement = document.getElementById(elementId);
    var j = 1;
    while(document.getElementById(thisElement.id + '_' + j) != null) {
        var childElement = document.getElementById(thisElement.id + '_' + j);
        childElement.style.display = 'block';
        j++;
    }
    if(thisElement.className.indexOf('menuPlus') >= 0){
        thisElement.className = thisElement.className.substring(0,(thisElement.className.indexOf(' menuPlus')))+' menuMinus';
    }
	thisElement.onclick = menuShowLess;
}