var Popout = Class.create();   

Popout.prototype = {

	buttonId : null,
	wrapperId : null,
	closeId : null,
	eventType : null,
	
	popoutX : null,
	popoutY : null,
	
	animationInProgress : false,
	popoutOpen : false,
	timerId : null,
	
	blindDuration : 0.34,
	fadeDuration : 0.35,
	timeoutDuration : 500,
	popoutOpacity : 0.95,	

	initialize : function(buttonId, wrapperId, closeId, eventType)
	{
		if (!$(buttonId) || !$(wrapperId) || !$(closeId)) {
      // alert("here: "+buttonId);
			return;
		}
	
		this.buttonId = buttonId;
		this.wrapperId = wrapperId;
		this.closeId = closeId;
		if (eventType == null) {
			this.eventType = "mouseover";
		} else {
			this.eventType = eventType;
		}
		
		$(this.buttonId).writeAttribute("href", "#");
		
		Event.observe($(this.buttonId), this.eventType, this.buttonOver.bindAsEventListener(this));
		Event.observe($(this.buttonId), "mouseout", this.buttonOut.bindAsEventListener(this));		
		Event.observe($(this.wrapperId), "mouseover", this.contentOver.bindAsEventListener(this));
		Event.observe($(this.wrapperId), "mouseout", this.contentOut.bindAsEventListener(this));		
		Event.observe($(this.closeId), "click", this.closeClick.bindAsEventListener(this));	
  },

  show : function()
  {
  	this.beforeShow();
  	this.animationInProgress = true;
  	
    // var buttonXY = $(this.buttonId).viewportOffset();
  	var buttonXY = $(this.buttonId).positionedOffset();
  	var popoutX = buttonXY[0] + $(this.buttonId).getWidth() - $(this.wrapperId).getWidth() - (Prototype.Browser.IE ? 3 : 0);
  	var popoutY = buttonXY[1] + $(this.buttonId).getHeight() - 1;
    	
  	$(this.wrapperId).style.position = 'absolute';
		$(this.wrapperId).style.left = popoutX+'px';
		$(this.wrapperId).style.top = popoutY+'px';
	  		
		new Effect.BlindDown($(this.wrapperId), {
			duration : this.blindDuration
		});			
			
		new Effect.Appear($(this.wrapperId), {
			duration: this.fadeDuration,
			from : 0,
			to : this.popoutOpacity,
			afterFinish : this.showAfterFinished.bindAsEventListener(this)
		});
		
  },
    
  showAfterFinished : function()
  {
		this.animationInProgress = false;
		this.popoutOpen = true;
		$(this.buttonId).addClassName('popout-button-on');
		this.afterShow();
  },
    
  hide : function()
  {
    this.beforeHide();
		this.animationInProgress = true;
	
		new Effect.BlindUp($(this.wrapperId), {
			duration : this.blindDuration
		});	
		
		new Effect.Fade($(this.wrapperId), {
			duration : this.fadeDuration,
			afterFinish : this.hideAfterFinished.bindAsEventListener(this)
		});
  },
    
  hideAfterFinished : function()
  {
  	this.animationInProgress = false;
		this.popoutOpen = false;
		$(this.buttonId).removeClassName('popout-button-on');
		this.afterHide();
  },
    
  buttonOver : function()
  {
		window.clearTimeout(this.timer);
		if (this.animationInProgress == false && this.popoutOpen == false) {
			this.show();
		}    
  },
    
  buttonOut : function()
  {
  	this.timer = window.setTimeout(this.hide.bindAsEventListener(this), this.timeoutDuration);
  },
    
  contentOver : function()
  {
  	window.clearTimeout(this.timer);
  },
    
  contentOut : function()
  {
  	this.timer = window.setTimeout(this.hide.bindAsEventListener(this), this.timeoutDuration);
  },
    
  closeClick : function()
  {
  	this.hide();
  },
    
  afterShow : function() {},
  afterHide : function() {},
  beforeShow : function() {},
  beforeHide : function() {}
    
}