var dtEls = null;
var ddEls = null;
var dtSpans = null;

var DTAction = Class.create({
  initialize: function( dtElem ) {
    this._elem = dtElem;
    this.myId = this._elem.id;
    this.num = this.myId.replace( "cat_", "" );
    this.subName = "sub_" + this.num;
    this.setup();
  },
  
  collapseAndExpand: function() {
    ddEls.each( function( elem ) {
      if ( elem.id != this.subName ) {
        elem.hide();
      } else {
        elem.show();
      }
    }.bind( this ));
    return false;
  },
  
  setup: function() {
    Event.observe( this._elem, "click", this.collapseAndExpand.bind( this ) );
  }
});

var Hover = Class.create({
  initialize: function( hoverElem ) {
    this._elem = hoverElem;
    this.setup();
  },
  
  _onelem: function() {
    this._elem.firstDescendant().addClassName( "bghover" );
  },
  
  _offelem: function() {
    this._elem.firstDescendant().removeClassName( "bghover" );
  },
  
  setup: function() {
    Event.observe( this._elem, "mouseover", this._onelem.bind( this ) );
    Event.observe( this._elem, "mouseout",  this._offelem.bind( this ) );
  }
});

window.onload = function() {
  dtEls = $$( "dt" );
  ddEls = $$( "dd" );
  
  dtEls.each( function( elem ) {
    new DTAction( elem );
    new Hover( elem );
  });
}