var HRMenu = Class.create ({
  version: '1',
  classes: ['menuopen','menuopened'],
  opened: [],

  initialize: function () {
    // grab all submenus & set toggle function
    var items = $$('.menuopen','.menuopened');
    var toggleFunc = this.toggleItem.bind(this);

    items.each(function (item){
      var itemParent = item.up();
      var itemSpan = item.childElements()[0];
      
      // Close menus by default
      items.each(function (item){
        if (item.readAttribute('class') == 'menuopen') {
          toggleFunc(item, 0);
        }
      });

      // Custom event
      item.observe('custom:click', function (){
        toggleFunc(this, 1);
      });

      // Onclick event
      itemSpan.observe('click', function (){
        // Catch if already open
        if (item.readAttribute('class') == 'menuopened') {
          toggleFunc(item, 0);
          return;
        }
        
        // Close all
        items.each(function (item){
          toggleFunc(item, 0);
        });

        // Open this one
        toggleFunc(item, 1);
      });

      // Mouse over events
/*    REMOVED, IS HANDLED IN CSS    
      itemParent.observe('mouseover', function (){
        itemParent.toggleClassName('arrowover');
      });
      itemParent.observe('mouseout', function (){
        itemParent.toggleClassName('arrowover');
      });
*/

      return true;
    });
  }, 

  toggleItem: function (item, sw) {
    var s = item.readAttribute('class');
    var list = item.childElements()[1];
    //var list = item.next();
    //alert(list);


    s = this.classes[sw];
    (sw == 0 ? list.hide() : list.show());
    item.writeAttribute('class', s);
    return true;
  }
});

document.observe("dom:loaded", function() {
  var theMenu = new HRMenu();
});