/* CLOSED_IMAGE - the image to be displayed when the sublists are closed
 * OPEN_IMAGE   - the image to be displayed when the sublists are opened
 */
CLOSED_IMAGE='/~pavlict/images/TriRight.png';
OPEN_IMAGE='/~pavlict/images/TriDown.png';
NIL_IMAGE='/~pavlict/images/nil.png';

/* makeCollapsible - makes a list have collapsible sublists
 * 
 * listElement - the element representing the list to make collapsible
 */
function makeCollapsible(listElement){

  // removed list item bullets and the space they occupy
  listElement.style.listStyle='none';
  //listElement.style.marginLeft='0';
  //listElement.style.paddingLeft='0';

  // 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;
      while (grandchild!=null){
        if (grandchild.tagName=='OL' || grandchild.tagName=='UL' || grandchild.tagName=='BLOCKQUOTE'){
          if( child.getAttribute('class') != 'collapsibleOpen' && child.getAttribute('className') != 'collapsibleOpen' )
          {   
            grandchild.style.display='none';
          }
          list.push(grandchild);
        }
        grandchild=grandchild.nextSibling;
      }

      // add toggle buttons

      // add some space
      var nilnode=document.createElement('img');
      nilnode.setAttribute('border','0pt');
      nilnode.setAttribute('src',NIL_IMAGE);
      nilnode.setAttribute('width','5');
      //child.insertBefore(nilnode,child.firstChild);

      // add an open/closed image
      var node=document.createElement('img');
      node.setAttribute('border','0pt');
      if( child.getAttribute('class') == 'collapsibleOpen' || child.getAttribute('className') == 'collapsibleOpen' )
      {
        node.setAttribute('src',OPEN_IMAGE);
        node.setAttribute('title','Collapse');
        node.setAttribute('class','collapsibleOpen');
      }
      else
      {
        node.setAttribute('src',CLOSED_IMAGE);
        node.setAttribute('title','Expand');
        node.setAttribute('class','collapsibleClosed');
      }
      node.setAttribute('width','10');
      node.setAttribute('height','10');
      //node.setAttribute('style','width: 10pt;');
      //node.onclick=createToggleFunction(node,list);
      //child.insertBefore(node,child.firstChild);

      var newlink=document.createElement('a');
      newlink.setAttribute('href','#');
      newlink.appendChild(node);
      newlink.onclick=createToggleFunction(node,list);
       
      child.insertBefore(nilnode,child.firstChild);
      child.insertBefore(newlink,child.firstChild);
    }

    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(){
    var listdisplay;

    // toggle status of toggle gadget
    if(toggleElement.getAttribute('class') == 'collapsibleClosed' || toggleElement.getAttribute('className') == 'collapsibleClosed')
    {
      toggleElement.setAttribute('class','collapsibleOpen');
      toggleElement.setAttribute('src',OPEN_IMAGE);
      toggleElement.setAttribute('title','Collapse');
      toggleElement.setAttribute('alt','v');
      listdisplay='block';
    }
    else
    {
      toggleElement.setAttribute('class','collapsibleClosed');
      toggleElement.setAttribute('src',CLOSED_IMAGE);
      toggleElement.setAttribute('title','Expand');
      toggleElement.setAttribute('alt','>');
      listdisplay='none';
    }

    // toggle display of sublists
    for (var i=0;i<sublistElements.length;i++){
      sublistElements[i].style.display=listdisplay;
    }

    return false;

  }

}