Ah.CollapsableList = new Class({
  
  Implements: [Events, Options, Ah.DetachableEvents],
  
  element: null,
  
  options: {
                open_class: 'collapsable_open',
                closed_class: 'collapsable_closed'
              },
  
  initialize: function(el, options){
      this.element = $(el);
      this.setOptions(options);
      this.setupEvents();
      this.hideDds();       
      this.fireEvent('onInitialize');
  },
  
  setupEvents: function(){
      this.element.getChildren('dt').each(function(dt){
          dt.addEvent('click', this.onDtClick.bindWithEvent(this));
      }, this);
  },
  
  onDtClick: function(e){
      if( e.target.hasClass(this.options.closed_class) ){
          this.hideDds();
          e.target.removeClass(this.options.closed_class);
          e.target.addClass(this.options.open_class);
          e.target.getNext('dd').show();
      }else{
          this.hideDds();
      }
  },
  
  hideDds: function(){
      this.element.getChildren('dd').each(function(dd){
          var dt = dd.getPrevious('dt');
          dt.removeClass(this.options.open_class);
          dt.addClass(this.options.closed_class);
          dd.hide();
      }, this);
  }
  
});



// static function to parse page for collapsable lists and set them up for you
Ah.CollapsableList.parseLists = function( class_to_replace, options ){
    var class_to_replace = class_to_replace || 'collapsable';
    $$('dl').each(function(list){
        if( list.hasClass(class_to_replace) ) new Ah.CollapsableList( list, options || {} );
    });
}