function startMenu(id) {
    //Check to see if we can use the DOM
    if (!document.getElementById) return;
    if (!document.getElementsByTagName) return;
    if (!document.createElement) return;

    //Get all the UL's in the Navigation
    var navigation = document.getElementById('nav');
    var navSub = navigation.getElementsByTagName('ul');

    //Go through all the Sub Nav's - give them a hidden class, inject in the toogle graphic
    for (i = 0; i < navSub.length; i++) {

        //Create the Image to inject in
        var toggleImage = document.createElement('img');
        toggleImage.setAttribute('src', 'img/arrow.jpg');
        toggleImage.style.cursor = "pointer";
        toggleImage.onclick = function() {
            toggleNav(this);
        }

        //Get the Parent of the UL, and insert the Image before the first child
        navSub[i].parentNode.insertBefore(toggleImage, navSub[i].parentNode.firstChild);
        //Hide the Sub Navigation using a CSS Class and assign a class to the parent for styling
        navSub[i].style.display = "none";
        

        navSub[i].parentNode.className = "expandable";
    }

    if(id != null) expandSelected(id);
}

function expandSelected(id){
        var navigation = document.getElementById('nav');
        var navigationULs = navigation.getElementsByTagName('a');
        for (i = 0; i < navigationULs.length; i++) {
          if (navigationULs[i].getAttribute('id') == id) {
            
            navigationULs[i].style.color = "red";
            id = id.toString(); 
            if (id.substring(0, 3) == 'cat') {
                myroot = navigationULs[i];
                if ((myroot != null) && (myroot.getAttribute('id') != 'nav') && (myroot.tagName != 'SPAN') && (myroot.tagName != 'DIV')) toggleNav2(myroot);
            } else if (id.substring(0, 3) == 'sot') {
                myroot = navigationULs[i].parentNode.parentNode;
                if ((myroot != null) && (myroot.getAttribute('id') != 'nav') && (myroot.tagName != 'SPAN') && (myroot.tagName != 'DIV')) toggleNav2(myroot);
                myroot = navigationULs[i];
                if ((myroot != null) && (myroot.getAttribute('id') != 'nav') && (myroot.tagName != 'SPAN') && (myroot.tagName != 'DIV')) toggleNav2(myroot);
            } else {
                myroot = navigationULs[i].parentNode.parentNode.parentNode.parentNode;
                if ((myroot != null) && (myroot.getAttribute('id') != 'nav') && (myroot.tagName != 'SPAN') && (myroot.tagName != 'DIV')) toggleNav2(myroot);
                myroot = navigationULs[i].parentNode.parentNode;
                if ((myroot != null) && (myroot.tagName != 'SPAN')) toggleNav2(myroot);
                myroot = navigationULs[i].parentNode;
                if ((myroot != null) && (myroot.tagName != 'SPAN')) toggleNav2(myroot);
            }
          }
          
        }
        
}

function toggleNav(whichOne) {
        var theParent = whichOne.parentNode;
        var theParentULs = theParent.getElementsByTagName('ul');
        var theParentImage = theParent.getElementsByTagName('img');
        var theAtag = theParent.getElementsByTagName('a');

        //Grab just the first UL and the first toggle image so that sub-sub UL navs/image don't expand too
        if ((theParentULs[0] != null) && (theParentULs[0].style.display == "none")) {
            theParentULs[0].style.display = "block";
            theParentImage[0].setAttribute('src', 'img/arrow2.jpg');
        } else if (theParentULs[0] != null) {
            theParentULs[0].style.display = "none";
            theParentImage[0].setAttribute('src', 'img/arrow.jpg');
        }
}


function toggleNav2(whichOne) {
        var theParent = whichOne.parentNode;
        var theParentULs = theParent.getElementsByTagName('ul');
        var theParentImage = theParent.getElementsByTagName('img');
        var theAtag = theParent.getElementsByTagName('a');
        //Grab just the first UL and the first toggle image so that sub-sub UL navs/image don't expand too
        
        if ((theParentULs[0] != null) && (theParentULs[0].style.display == "none")) {
             theParentULs[0].style.display = "block";
            theParentImage[0].setAttribute('src', 'img/arrow2.jpg');
        } else if (theParentULs[0] != null) {
            theParentULs[0].style.display = "none";
            theParentImage[0].setAttribute('src', 'img/arrow.jpg');
        }
    }