/**
 * 
 * Classe de overlay
 * 
 */
function AdjetivaOverlay()
{
	this.domElement = $( "<div id='AdjetivaOverlay'><iframe style='position:absolute; filter: alpha(opacity=0); background-color:transparent;' width='100%' height='100%' src='' frameBorder='0' scrolling='no' ></iframe></div>" );
	$("body").append( this.domElement );
	
	this.background = new OverlayBackground();
	this.template = new OverlayTemplate();
	
	$(this.domElement).append( this.background.domElement );
	$(this.domElement).append( this.template.domElement );
	
	this.ajaxContentURL = "";
	this.windowTitle = "";
	
	this.template.startListeners();
	this.template.updateLayout();
}

AdjetivaOverlay.prototype.show = function( ajaxContent, windowTitleText )
{
	var that = this;
	
	this.ajaxContentURL = ajaxContent;
	this.windowTitle = windowTitleText;

	this.template.updateLayout();
	this.animateIn();	
	this.template.domElement.bind("ANIMATE_IN", function(e){
		that.template.loadIframe( that.ajaxContentURL );
		// handler para o término do carregamento do conteúdo do iframe.
		$( that.template ).bind( "IFRAME_LOADED",function(){
			alert( "iframe carergou" );
		} );
		that.template.setTitle( that.windowTitle );
		that.updateLayout();
	})
	
	$(this.background.domElement).bind( "click", function(e){
		that.animateOut(e);
	} );
	
	$(this.template.domElement).bind( "CLOSE", function(e){
		that.animateOut(e);
	} );	
	
	$( window ).bind( "resize", function(){
		that.updateLayout();
	} );
	
	$( window ).bind( "scroll", function(){
		that.updateLayout();
	} );
}

AdjetivaOverlay.prototype.close = function(e)
{
	$(this.domElement).css( { "display":"none" } );
	
	$(this.background.domElement).unbind();
	$(this.template.domElement).unbind();
	$( window ).unbind();
}

AdjetivaOverlay.prototype.updateLayout = function()
{
	var widthValue = $(window).width();
	var heightValue = $(window).height() + $(window).scrollTop();
	if ( heightValue < $("#AdjetivaOverlayTemplate").height() )
	{
		heightValue = $("#AdjetivaOverlayTemplate").height();
	}
	
	$( this.domElement ).height( heightValue );
	$( this.domElement ).width( widthValue );
	
	this.background.updateLayout();
	this.template.updateLayout();
}

AdjetivaOverlay.prototype.animateIn = function()
{
	var that = this;
	
	$(this.domElement).css( { "display":"block" } );
	this.updateLayout();
	$(this.background.domElement).bind( "ANIMATE_IN", function(e)
	{
		that.template.animateIn();
	} );
	this.background.animateIn();
}

AdjetivaOverlay.prototype.animateOut = function()
{
	var that = this;
	
	$(this.background.domElement).bind( "ANIMATE_OUT", function(e){
		that.close();
	} );
	
	$(this.template.domElement).bind( "ANIMATE_OUT", function(e){
		that.background.animateOut();
	} );
	
	this.template.animateOut();
}

/**
 * 
 * Classe do background do overlay
 * 
 */
function OverlayBackground()
{
	this.domElement = $( "<div id='AdjetivaOverlayBackground'></div>" );
	$(this.domElement).fadeTo(0, 0)
}

OverlayBackground.prototype.animateIn = function()
{
	this.updateLayout();
	
	$( this.domElement ).fadeTo( 300, 0.5, function(){
		$(this).trigger("ANIMATE_IN");
	} )
}

OverlayBackground.prototype.animateOut = function()
{
	$( this.domElement ).fadeTo( 300, 0, function(){
		$(this).trigger("ANIMATE_OUT");
	} )
}

OverlayBackground.prototype.updateLayout = function()
{
	$( this.domElement ).height( $(window).height() + $(window).scrollTop() );
	$( this.domElement ).width( $(window).width() );
}

/**
 * 
 * Classe com a template do overlay
 * 
 */
function OverlayTemplate()
{
	var that = this;
	this.loadingAnimation = document.createElement("img");
	this.loadingAnimation.src = "ajax-loader.gif";
	this.loadingAnimation.id = "AdjetivaOverlayTemplateLoadingAnimation";
	
	var domElementString = "";
	domElementString += "<div id='AdjetivaOverlayTemplate'>";
	domElementString += "	<div id='AdjetivaOverlayTemplateBody'></div>";
	domElementString += "	<div id='AdjetivaOverlayTemplateHeader'>";
	domElementString += "		<p id='AdjetivaOverlayTitulo'></p>";
	domElementString += "		<a id='AdjetivaOverlayBtnFechar'>fechar</a>";
	domElementString += "	</div>";
	domElementString += "</div>";
	
	this.domElement = $( domElementString );
	this.animateOut();
}

OverlayTemplate.prototype.startListeners = function()
{
	var that = this;
	
	$( "#AdjetivaOverlayBtnFechar" ).bind( "click", function(e){
		$(that.domElement).trigger( "CLOSE" );
	} );
}

OverlayTemplate.prototype.animateIn = function( speed )
{
	var animationSpeed = speed || 1000;
	
	var animationProperties = { 
        top: 0 + "px"
    };
	
	$( this.domElement ).animate( animationProperties, animationSpeed, "easeInOutCubic", function(){
		$(this).trigger("ANIMATE_IN");
	} )
}

OverlayTemplate.prototype.animateOut = function( speed )
{
	var animationSpeed = speed || 1000;
	
	var animationProperties = { 
        //marginLeft: $("body").innerWidth()/2 - $("#AdjetivaOverlayTemplate").width()/2 + "px",
        top: $(window).height() + $(window).scrollTop()
    };
	
	$( this.domElement ).animate( animationProperties, animationSpeed, "easeInOutCubic", function(){
		// limpa o conteudo da template
		$("#AdjetivaOverlayTemplateBody" ).html( "" );
		$(this).trigger("ANIMATE_OUT");
	} )
}

OverlayTemplate.prototype.updateLayout = function()
{
	var marginLeftX = $("body").innerWidth()/2 - $("#AdjetivaOverlayTemplate").width()/2 + "px"
	$( this.domElement ).css( {
		"marginLeft": marginLeftX
	} );
	
	if ( $("#AdjetivaOverlayTemplate").css("position") == "absolute" )
	{
		$( this.domElement ).css( {
			top: $(window).scrollTop()
		} );
	}
}

OverlayTemplate.prototype.loadAjax = function(url)
{
	$("#AdjetivaOverlayTemplateBody").append( this.loadingAnimation );
	
	// para carregamento via ajax
	$("#AdjetivaOverlayTemplateBody", this.domElement).load(url);
}

OverlayTemplate.prototype.loadIframe = function(url)
{
	$("#AdjetivaOverlayTemplateBody").append( this.loadingAnimation );
	
	// para carregamento via IFrame
	$("#AdjetivaOverlayTemplateBody", this.domElement).html( "<iframe id='AdjetivaOverlayContentIframe' frameborder='0' ></iframe>" );
	$("#AdjetivaOverlayContentIframe", this.domElement).attr( "src", url );
}

OverlayTemplate.prototype.setTitle = function( title )
{
	$("p#AdjetivaOverlayTitulo" ).html( title );
}