//on arrow click show menu and exchange image to white
//on mouse hide menu and exchange image to normal

var zMenu = Class.create();

zMenu.prototype = {
  
  timeout : null,
	id : null,
	object : null,
	position : null,
	height : null,
	menuObject : null,
  offsetX : 0,
  offsetY : 0, 
  
    initialize: function(an, elt, mnu, img) {
		this.anchor = $(an);
		this.object = $(elt);
    this.img = $(img);      
	
		this.height = this.anchor.getHeight();
		//this.position = Position.positionedOffset(this.object);
	  this.position = this.anchor.positionedOffset();
		this.menuObject = $(mnu);
		
		this.menuObject.setStyle({
      position: 'absolute', 
      top : (this.position[1] + this.height + this.offsetY)  + 'px',
      left : (this.offsetX + this.position[0]) + 'px',
      zIndex : 9999
		});
		
		this.mouseoverlistener = this.showPopup.bindAsEventListener(this);
		this.mouseoutlistener = this.hidePopup.bindAsEventListener(this);
		this.clicklistener = this.hidePopup.bindAsEventListener(this);
		
		Event.observe(this.object, "mouseover", this.mouseoverlistener);
		Event.observe(this.object, "mouseout", this.mouseoutlistener);
		Event.observe(this.object, "click", this.clicklistener);

		Event.observe(this.menuObject, "mouseover", this.mouseoverlistener);
		Event.observe(this.menuObject, "mouseout", this.mouseoutlistener);
  	
  },

    imageHoverOn: function(){
      this.img.src = 'images/arrow_hover.gif';
    },
    imageHoverOff: function(){
      this.img.src = 'images/arrow.gif';
    },
    
    showPopup : function(){
 		  clearTimeout(this.timeout);
        if(this.menuObject.style.display == 'none'){
				    var self = this;
            this.timeout = setTimeout(function(){new Element.show(self.menuObject); self.imageHoverOn();},200); 
			}
    },
    hidePopup : function(){
        if(this.menuObject.style.display == 'none'){
            clearTimeout(this.timeout);
        }else{
				    var self = this;
            this.timeout = setTimeout(function(){new Element.hide(self.menuObject); self.imageHoverOff();},400); 
			}
			
    }
}