/* collapselist.js
*
* original script url: http://safalra.com/web-design/javascript/collapsible-lists/
* modified Dec 2008 by Justin Cawthorne
*
* usage:
* 1) include this script in the head section of your page
* 2) create a list: <ul id="collapselist">
* 3) include collapsible content within div layer inside child li elements
*
* example: 
<ul id="collapselist">
	<li>First item
	    <div>This li contains text for the first item</div>
	</li>
	<li>Second item
	    <div>This div contains text for the second item</div>
	</li>
	<li>Third item
	    <div>This div contains text for the third item</div>
	</li>
</ul>
*
* and th-th-th-that's all folks!
*
*/

function makeCollapsible(listElement){

	/* 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='plus.png';
	// OPEN_IMAGE='minus.png';
	// preset list to elements with id of 'collapselist'
	listElement = document.getElementById('collapselist');
	
  // 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 == 'DIV'){
        	grandchild.style.display='none';
		 	dumptext = grandchild.textContent;
        	list.push(grandchild);
        }
        grandchild=grandchild.nextSibling;
    }
	  
    	// add toggle buttons
    	// possibly overelaborate code gets the text from the li to use as the link, then hides the original li text		
		//longtext = child.textContent;
		longtext = child.innerHTML;
		//longtext = 'my test text';
		linktext = longtext.replace(dumptext,'');
		child.removeChild(child.firstChild);
		// he we create the clickable li element
		var node=document.createElement('a');
		node.setAttribute('href','javascript:void()');
    	node.setAttribute('class','collapsibleClosed');
		node.onclick=createToggleFunction(node,list);
		child.insertBefore(node,child.firstChild);
		//node.innerHTML = 'expand';
		node.innerHTML = linktext;
    }
	
    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','collapsibleOpen');
      //toggleElement.setAttribute('src',OPEN_IMAGE);
	  //toggleElement.innerHTML = 'contract';
    }else{
      toggleElement.setAttribute('class','collapsibleClosed');
      //toggleElement.setAttribute('src',CLOSED_IMAGE);
	  //toggleElement.innerHTML = 'expand';
    }

    // toggle display of sublists
    for (var i=0;i<sublistElements.length;i++){
      sublistElements[i].style.display=
          (sublistElements[i].style.display=='block')?'none':'block';
    }

  }

}

/* addLoadEvent - automatically activates collapsible lists on page load
*
*/

function addLoadEvent(func) { 
	  var oldonload = window.onload; 
	  if (typeof window.onload != 'function') { 
	    window.onload = func; 
	  } else { 
	    window.onload = function() { 
	      if (oldonload) { 
	        oldonload(); 
	      } 
	      func(); 
	    } 
	  } 
} 

addLoadEvent(makeCollapsible); 