var Menu = Class.create({
    initialize: function(){
        this.itens = new Array();
        this.recent = null;
        this.objeto = false;
        Event.observe(window, 'click', this.clicked.bindAsEventListener(this));
    },
    addButton:function(button){
        this.itens.push(button);
    },
    existClicked: function(){
        var r = null;
        
        for(var i=0; i<this.itens.length; i++){
            if(this.itens[i].clicked){
                r = this.itens[i];
                break;
            }
        }
        
        return r;
    },
    clicked:function(button){
        this.recent = button;
        if(typeof(button.clicked)=='undefined'){
            if(!this.objeto){
                this.windowClick();
            }else if(this.objeto){
                this.objeto = false;
            }
        }else{
            this.objeto = true;
            this.buttonClick(button);
        }
    },
    windowClick:function(){
        var item = this.existClicked();
        if(!this.objeto && item!= null){
            $(item.submenu).setStyle({display: 'none'});
            item.clicked = false;
            item.mouseOut();
        }
    },
    buttonClick:function(button){
        for(var i=0; i<this.itens.length; i++){
            if(button!=this.itens[i]){
                $(this.itens[i].submenu).setStyle({display: 'none'});
                this.itens[i].clicked = false;
                this.itens[i].mouseOut();
            }
        }
    }
});

var MenuButton = Class.create({
  initialize: function(container, id, text, image, alt, submenu, menu) {
    this.container = $(container);
	this._button;
	this.id = id;
	this.text = text;
	this.image = image;
	this.alt = alt;
	this.submenu = submenu;
	this.menu = menu;
	this.clicked = false;
	this.onmouseOver = this.mouseOver.bindAsEventListener(this);
	this.onmouseOut = this.mouseOut.bindAsEventListener(this);
	this.onClick = this.click.bindAsEventListener(this);
	this.create();
  },
  create: function()
  {
	  this._button = document.createElement('div');
	  this._button.className = 'button';
	  //_button.id = this.id;
	  
	  var _icon = document.createElement('div');
	  _icon.className = 'icon';
	  
	  var _image = document.createElement('img');
	  _image.setAttribute('src', this.image);
	  _image.setAttribute('alt', this.alt);
	  
	  _icon.appendChild(_image);
	  
	  var _text = document.createElement('div');
	  _text.className = 'text';
	  _text.innerHTML = this.text;
	  
	  this._button.appendChild(_icon);
	  this._button.appendChild(_text);
	  
	  this.container.appendChild(this._button);
	  
	  Event.observe(this._button, 'mouseover', this.onmouseOver);
  	  Event.observe(this._button, 'mouseout', this.onmouseOut);
  	  Event.observe(this._button, 'click', this.onClick);
  },
  mouseOver: function(e)
  {      
	  var _icon = this._button.getElementsByClassName('icon')[0];
	  _icon.addClassName('left_over');
	  var _text = this._button.getElementsByClassName('text')[0];
	  _text.addClassName('right_over');
  },
  mouseOut: function(e)
  {
    if(!this.clicked){
	  var _icon = this._button.getElementsByClassName('icon')[0];
	  _icon.removeClassName('left_over');
	  var _text = this._button.getElementsByClassName('text')[0];
	  _text.removeClassName('right_over');
	}
  },
  click: function(e)
  {
    var pos = this._button.cumulativeOffset();
    
    Element.absolutize($(this.submenu));
    
    this.menu.clicked(this);
    
    if($(this.submenu).style.display == 'none'){
        this.clicked = true;
        $(this.submenu).setStyle({top: (this._button.getHeight()+pos[1]) + 'px', left: pos[0] + 'px', display: 'block'});
    }else{
        this.clicked = false;
        $(this.submenu).setStyle({display: 'none'});
    }
  }
});