// menuControl2.js - requires dynamicCSS.js
// This supports the collapsing/expanding menus. In order to be more accessible in 
// the spirit of "unobtrusive" javascript, we collapse the menus as appropriate 
// using javascript if available. Thus, if a useragent doesn't have javascript 
// available, at least all of the menu items will be available. The most reliable 
// method for collapsing the menu list where appropriate is implemented by the 
// toggleOnLoad function, which is intended to be called from the onload event 
// for the page. Because the page is rendered by the browser before the onload 
// event fires, though, there can be a visible flash of the expanded menus before
// they are collapsed. For this reason, we use the dynamicCSS.js createStyleRule 
// function which works around the problem by inserting a style into the document
// before it's loaded and avoids the flash of expanded menu. The toggleOnLoad is 
// run from the onload event as a fallback for useragents that aren't supported 
// by the createStyleRule function (nominally IE/Mac).

function toggleOnLoad() {  // Collapse menu lists where appropriate
  //for (var i = 1; i<=20; i++) {
  //  if (document.getElementById('sublist_'+i)) {
  //    document.getElementById('sublist_'+i).className == "collapsed"
  //      ? document.getElementById('sublist_'+i).style.display="none"
  //      : document.getElementById('sublist_'+i).style.display="block";
  //  }
  //}
  setElementStyleByClassName("collapsed","display","none");
  setElementStyleByClassName("expanded","display","block");
}

if (document.getElementById) {  // this should include all feature tests needed for the DOM script
  createStyleRule(".collapsed", "display:none;"); 
  createStyleRule(".expanded", "display:block;"); 

  window.onload = toggleOnLoad; // This is a fallback method using onload for useragents that aren't
                                // supported by the dynamicCSS.js createStyleRule function. It is also
                                // needed to set the display style in the elements properly so 
                                // that the toggle function is able to query the current state to 
                                // determine what to do.
}

function toggle(sublist) {
  document.getElementById(sublist).style.display=='none'
    ? document.getElementById(sublist).style.display='block'
    : document.getElementById(sublist).style.display='none';
}

function toggleList(el) {
  var parent = el.parentNode
  var children = parent.childNodes;
  for ( var i=0; i < children.length; i++ ) {
    child = children[i];
    if ( child.nodeName.toLowerCase() == "ul" ) {
      child.style.display.toLowerCase() == "none"
        ? child.style.display= "block"
        : child.style.display= "none";
      break;
    }
  }
}