var Popout = Class.create();   

Popout.prototype = {

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

	initialize : function(buttonId, wrapperId, closeId)
	{
		this.buttonId = buttonId;
		this.wrapperId = wrapperId;
		this.closeId = closeId;
		
		$(this.buttonId).writeAttribute("href", "#");
		
		Event.observe($(this.buttonId), "mouseover", 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).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() {}
    
}