var Dropdown = Class.create();
Dropdown.registry = new Array();
Dropdown.prototype = {
  initialize: function(controlId, contentId) {
    this.active = false;
    this.control = $(controlId);
    this.content = $(contentId);
    Event.observe(this.control, 'click', this.controlClicked.bindAsEventListener(this));
    Event.observe(this.content, 'mouseover', this.onMouseOver.bindAsEventListener(this));
    Event.observe(this.content, 'click',  this.onMouseOut.bindAsEventListener(this));
    Event.observe(this.control, 'cli',  this.onMouseOut.bindAsEventListener(this));
    Dropdown.registry.push(this);
  },
  onMouseOver: function(event) {
    if(!this.active) {
      this.open();
      this.active = true;
    }
  },
  
  controlClicked: function(event) {
    if(!this.active) {
      this.open();
      this.active = true;
    } else {
      this.active = false;
      this.closeNow();
    }
  },
  onMouseOut: function(event) {
    this.active = false;
    setTimeout(this.close.bind(this), 800);
  },
  open: function() {
    if(this.active) return;
    this.active = true;
    Dropdown.registry.each( function(dropdown) { if(dropdown != this){ dropdown.closeNow(); }}.bind(this) );
    if(this.content.style.display == 'none') new Effect.Appear(this.content, {duration:0.2});
  },
  close: function() {
    if(!this.active) {
      new Effect.Fade(this.content, {duration:0.2});
    }
  },
  closeNow: function() {
    this.active = false;
    this.content.style.display = 'none';
  }
}