// JavaScript Document

$( document ).ready( initOverlay );
var overlay;

function initOverlay()
{
	overlay = new Overlay();
	overlay.init();
}

function Overlay()
{
	this.content = '';
	this.main = $( "#overlay" );
	this.container = $( "#overlay-panel" );
	
	var that = this;
	
	this.init = function()
	{
		this.main.click( this.hide );
		this.showLoader();
		this.align();
		this.container.click( function( evt ){ 
									   evt.cancelBubble = true;
									   if( evt.stopPropagation )
									   		evt.stopPropagation();
									});
		$( "#overlay-close" ).click( this.hide )
	}
	
	this.show = function()
	{
		this.main.fadeIn( "fast" );
	}
	
	this.hide = function( evt )
	{
		if( evt )
		{
			evt.preventDefault();
		}
		that.hideContent();
		that.main.fadeOut( "fast" );
	}
	
	this.showContent = function()
	{
		this.container.fadeIn( 'fast' );
	}
	
	this.hideContent = function()
	{
		this.container.fadeOut( 'fast' );
	}
	
	this.showLoader = function()
	{
		html = '<img src="' + IMG_URL + '/ajax_loader.gif" alt="" id="ajax_loader" />';
		this.setContent( html );
		this.align();
		this.showContent();
	}
	
	this.hideLoader = function()
	{
		$( "#ajax_loader" ).remove();
	}
	
	this.align = function()
	{
		mh = this.main.height();
		ch = this.container.height();
		topMargin = ( mh - ch ) / 2 - 20;
		
		this.container.css( "margin-top", topMargin + 'px' );
		
	}
	
	this.setContent = function( content )
	{
		this.content = content;
		this.container.children( "#overlay-content" ).html( this.content );
	}
	
	this.loadTemplate = function( url, params )
	{
		this.showLoader();
		$.post( url, params, this.onLoadTemplate );
	}
	
	this.onLoadTemplate = function( data )
	{
		that.hideLoader();
		that.setContent( data );
		that.showContent();
		that.align();
	}
}