// based upon http://www.safalra.com/programming/javascript/collapsible-lists/

// CLOSED_IMAGE - the image to be displayed when the sublists are closed
var CLOSED_IMAGE='images/plus.gif';
// OPENED_IMAGE - the image to be displayed when the sublists are opened
var OPENED_IMAGE='images/minus.gif';

/* makeCollapsible - makes a list have collapsible sublists
 * 
 * listElement - the element representing the list to make collapsible
 */
function makeCollapsible(listElement, opened) {
  // loop over all child elements of the list
  var child=listElement.firstChild;
  while (child != null) {
    // only process li elements (and not text elements)
    if (child.nodeType==1) {
      // build a list of child ol and ul elements and hide them
      var list=new Array();
      var grandchild=child.firstChild;
      var collapsible=false;
      while (grandchild != null) {
        // this assumes the existence of a div surrounding header text,
        // at the same level as the ol or ul, and a span surrounding it,
        // as the second child of the div
        if (grandchild.tagName=='DIV' && ! collapsible) {
          // add toggle images
          var node=document.createElement('img');
          node.setAttribute('src',opened?OPENED_IMAGE:CLOSED_IMAGE);
          node.setAttribute('class',opened?'collapsibleOpened':'collapsibleClosed');
          node.setAttribute('align','right');
          node.setAttribute('valign','center');
          node.onclick=createToggleFunction(node,list);
          var node2 = grandchild.firstChild;
          grandchild.insertBefore(node,node2);
          collapsible=true;
          // add onclick to bullet image before the header text
          if (node2.tagName=='IMG') {
            node2.onclick=createRefToggleFunction(node2, node);
          }
          // add onclick to span surrounding the header text
          node2=node2.nextSibling;
          if (node2.tagName=='SPAN') {
            node2.onclick=createRefToggleFunction(node2, node);
          }
        }
        else if (grandchild.tagName=='OL' || grandchild.tagName=='UL') {
          grandchild.style.display=opened?'block':'none';
          list.push(grandchild);
        }
        grandchild=grandchild.nextSibling;
      }
    }
    child=child.nextSibling;
  }
}

/* createToggleFunction - returns a function that toggles the sublist display
 * 
 * toggleElement  - the element representing the toggle gadget
 * sublistElement - an array of elements representing the sublists that should
 *                  be opened or closed when the toggle gadget is clicked
 */
function createToggleFunction(toggleElement,sublistElements) {
  return function() {
    // toggle status of toggle gadget
    if (toggleElement.getAttribute('class')=='collapsibleClosed') {
      toggleElement.setAttribute('class','collapsibleOpened');
      toggleElement.setAttribute('src',OPENED_IMAGE);
    } else {
      toggleElement.setAttribute('class','collapsibleClosed');
      toggleElement.setAttribute('src',CLOSED_IMAGE);
    }
    // toggle display of sublists
    for (var i=0;i<sublistElements.length;i++) {
      sublistElements[i].style.display=
          (sublistElements[i].style.display=='block')?'none':'block';
    }
  }
}

function createRefToggleFunction(toggleElement, refElement) {
  return function() {
    refElement.onclick();
  }
}