/**
*  CollapsibleList function
*
*  pass a unique id into this constructor to designate it as a collapsible element.  In your css,
*  make sure you specify a .collapsed class that represents this list collapsed
*/
jsImport("com.denmat.util.StyleUtils");
function CollapsibleList(elementID, elementName) {

  this.elementID = elementID;
  this.name = elementName;
  this.collapsibleArea = null;
  this.collapsibleController = null;
  
  this.init = function(expand) {
	  this.collapsibleArea = document.getElementById("collapsibleArea" + this.elementID);
	  if (this.collapsibleArea == null)
	  	_Debugger.debug("could not find collapsible area collapsibleArea" + this.elementID);
  	this.collapsibleController = document.getElementById("collapsibleController" + this.elementID);
	  if (this.collapsibleController == null)
	  	_Debugger.debug("could not find collapsible controller collapsibleController" + this.elementID);
		var menu = eval(this.name);
	  this.collapsibleController.onmouseup = function() {menu.toggle();}
	  if (!expand)
		  this.collapse();
  }

  this.toggle = function() {
    if (this.collapsibleArea.className.indexOf("collapsed") >= 0) {
      for (var i=0; i< _menus.length; i++) {
        _menus[i].collapse();
      }
      this.expand();
    } else {
      this.collapse();
    }
  }

  this.expand = function() {
    _StyleUtils.removeClass(this.collapsibleArea, "collapsed");
    _StyleUtils.removeClass(this.collapsibleController, "collapsed");
  }

  this.collapse = function() {
    _StyleUtils.addClass(this.collapsibleArea, "collapsed");
    _StyleUtils.addClass(this.collapsibleController, "collapsed");
  }

}