// ########################################################
//   Requirements: prototype.js                           #
//   Purpose: Recursively build left nav menu            #
//            within each <div class="capsule">           #
//                                                        #
// ########################################################

function buildTopMenus() {
    var topLevelLists = $$("div#top_menu > ul");
    for(var i=0;i<topLevelLists.length;i++) {
        applyEvents2(topLevelLists[i]);
    }
}

function buildMenus() {
//style top-level ul border
$$("div.capsule > ul").each(function(node){
    node.style.borderTop = "1px solid #000000";
});
//style top-level li border
$$("div.capsule > ul > li").each(function(node){
    node.style.borderBottom = "1px solid #000000";
});
//firefox/safari only - style first-li in sublists
$$("div.capsule ul ul li:first-child").each(function(node){
    node.style.borderTop = "1px solid #000000";
});
//style all nested lists
$$("div.capsule ul ul").each(function(node){
        node.style.zIndex = 100;
        node.style.margin = "-22px 0 0 183px";
        node.style.position = "absolute";
        node.style.borderLeft = "1px solid #000000";
        node.style.borderRight = "1px solid #000000";
        node.style.borderTop = "1px solid #000000";
        node.style.borderBottom = "none";
        $A(node.getElementsByTagName("li")).each(function(childElement) {
            childElement.style.borderBottom = "1px solid #eeeecc";
            childElement.style.marginTop = "-1px";
            $A(childElement.getElementsByTagName("a")).each(function(aTag) {
                aTag.style.borderBottom = "1px solid #000000";
                aTag.style.marginTop = "0px";
            });
        });
        $(node).style.display = "none";

});

        // 

        $$("div.capsule ul li").each(function(node){

                //apply style to change menu colors and hover colors
                $A(node.getElementsByTagName("a")).each(function(aTag) {
                    Element.addClassName(aTag, "subHover");
                });

                var ul = $A(node.getElementsByTagName("ul")).first();

                //if there is a UL
                if(ul != null){

                        // select linkk and style to indicate subMenu
                        node.childElements()[0].style.backgroundImage = "url('/images/global/sub_indicator_white.gif')";
                        node.childElements()[0].style.backgroundRepeat = "no-repeat";
                        node.childElements()[0].style.backgroundPosition = "right";

                        //toggle event on mouseover and mouseout
                        node.onmouseover = function(){

                            Element.show(ul);

                        }
                        node.onmouseout = function() {
                            Element.hide(ul);
                        }

                }

        });



}


function applyEvents2(element) {
    var listItems = element.childElements();
    for (var j=0;j<listItems.length;j++) {
        var childUL = Element.down(listItems[j], "ul");
        if (childUL != null) {
            childUL.style.display = "none";
            childUL.style.zIndex = 100;
            var link = listItems[j].firstDescendant();
            applyStyle2(listItems[j], link);
            applyEvents2(childUL);
        }
    }
}


function applyStyle2(elementToObserve, linkTag) {
    elementToObserve.observe('mouseover', showMenu2);
    elementToObserve.observe('mouseout', hideMenu2);
}



function showMenu2(event) {
    subMenu = Element.down(this, "ul");
    link = Element.down(this, "a");
    link.style.backgroundColor = "Orange";
    link.style.color = "#FFFFFF";
    subMenu.style.display = "block";
}

function hideMenu2(event) {
    subMenu = Element.down(this, "ul");
    link = Element.down(this, "a");
    link.style.backgroundColor = "#369";
    link.style.color = "#FFFFFF";
    subMenu.style.display = "none";
}