var Menu = Class.create({
  _submenus: [],

  initialize: function() {
    $$('li.submenu').each(function(elem, index) {
      var s = new Submenu(elem.down().next());
      if (elem.down('ul').getStyle('display') == "none") s.expanded = false;
      else s.expanded = true;
      this._submenus.push(s);
      elem.down('a').href = 'javascript: void(0);';
      var that = this;
      elem.down('a').observe('click', function(event) {
        var submenu = that._getSubmenu(this.next());
        submenu.toggle();
      });
    }, this);
  },

  _getSubmenu: function(elem) {
    var submenu;
    this._submenus.each(function(s) {
      if (s.elem == elem)
        submenu = s;
      else {
        if (s.expanded) s.toggle();
      }
    });
    return submenu;
  }
});

var Submenu = Class.create({
  _duration: 0.3,

  initialize: function(elem) {
    this.elem = elem;
    this.height = elem.getHeight();
    this.expanded = false;
  },

  toggle: function() {
    if (this.expanded) this.collapse();
    else this.expand();
  },

  expand: function() {
    this.expanded = true;
    this.elem.setStyle({ height: "0px" }).show()
      .morph('height: ' + this.height + 'px', {
        duration: this._duration });
  },

  collapse: function() {
    this.expanded = false;
    var elem = this.elem;
    elem.setStyle({ height: this.height + "px" })
      .morph('height: 0px;', { duration: this._duration,
                               afterFinish: function() {
                                 elem.hide();
                               }
                             });
  }
});

Event.observe(document, 'dom:loaded', function(event) {
  new Menu();
});