<!-- //
/*
* NOTE: require scriptaculous.js and prototype.js
* For this script to work follow these steps
* 1. add in the prototype.js and scriptaculous.js scripts 
     <script src="scripts/prototype.js" type="text/javascript"></script>
     <script src="scripts/scriptaculous.js" type="text/javascript"></script>
     
  2. Body tag requires an onload event handler : 
     <body onload="activateMenu('{parent_id_for_js}','{child_id_for_js}');">
  
  3. The hidden blocks (usually the submenu div blocks) must be declared inline using :  style="display:none;"
     For example: <div id="subnav_{subnav_block_id}" style="display:none;">
     
  4. The top level menus require an onmouseover event handler.  The id passed to the function is its own id :
      onmouseover="switchMenu('{nav_id_string}');"
      
  5. To hilight the menu items, the style sheet MUST have styles declared that looks like this :
     #{id_of_parent_or_child}-over {
        color:white;
     }
*/
var current_id = "";
var current_child_id = "";

function activateMenu(id, child_id) {
    current_id = id;
    current_child_id = child_id;
    
    //hilight main menu
    hiLightMenu(id);
    
    //hilight sub menu
    hiLightMenu(child_id);
    
    //display sub menu items
    showMenu(id);
}

function hiLightMenu(id) {
    obj = document.getElementById(id);
    if ( obj ) {
        obj.className = id + "-over";
    }
}

function showMenu(id) {
    obj = document.getElementById("subnav_" + id);
    if ( obj ) {
        //Effect.BlindDown(obj);
        Effect.Appear(obj);
    }
}

function hideMenu(id) {
    obj = document.getElementById("subnav_" + id);
    if ( obj ) {
        //Effect.BlindUp(obj);
        obj.style.display="none";
    }
}

function switchMenu(id) {
    obj = document.getElementById("subnav_" + id);
    
    if (obj) {
        if ( id != current_id ) {
            hideMenu(current_id);
            showMenu(id);
            current_id = id;
        }
    } else {
        hideMenu(current_id);
        current_id = "";
    }
}

//-->