var Overlay = new Class({
	Implements: [Options, Events, Log],
	
	options: {
		useBackground: true,
		allowClose: true,
		onCloseConfirm: null,
		depth: 1000,
		windowMargin: {top: 50},
		className: null
	},
	
	// Variables
	application: null,
	name: null,
	className: null,
	background: null,
	backgroundFx: null,
	element: null,
	elementFx: null,
	useBackground: null,
	allowClose: null,
	onCloseConfirm: null,
	depth: null,
	endPosition: null,
	startPosition: null,
	
	isShown: false,
	isAnimating: false,
	onShow: null,
	onHide: null,
	onClose: null,
	
	initialize: function(name, options)
	{
		//this.enableLog();
		this.disableLog();
		this.log("Overlay::initialize(" + name + ", " + options + ")");
		
		this.setOptions(options);

		// Application
		this.application = new Application();

		// Set variables
		this.name = name;
		this.useBackground = this.options.useBackground;
		this.allowClose = this.options.allowClose;
		this.onCloseConfirm = this.options.onCloseConfirm;
		this.depth = this.options.depth;
		this.className = (this.options.className) ? this.options.className : this.name;

		// Create opicity background
		this.createBackground();
		
		// Create HTML window
		this.createWindow();
	},

	reset: function()
	{
		this.log("Overlay::reset()");
		
	},
	
	show: function()
	{
		this.log("Overlay::show()");

		this.log("this.isShown: " + this.isShown);

		if(this.isShown)
		{
			return;
		}

		if(this.element)
		{
			var windowPosition = $(document.body).getScroll().y + this.options.windowMargin.top;

//			this.log("windowPosition: " + windowPosition);
//			this.log("this.startPosition: " + this.startPosition);
//			this.log("this.endPosition: " + this.endPosition);

			var window = this.element.getElement('.window');
			window.setStyle('top', windowPosition);

			// Animation
			this.elementFx.start.delay(200, this.elementFx,
			[{
				'opacity': 1,
				'top': [this.startPosition, this.endPosition]
			}]);
		}
		
		if(this.useBackground)
		{
			this.backgroundFx.start('opacity', 1);
		}
	},
	
	hide: function()
	{
		this.log("Overlay::hide()");
		
		if(!this.isShown || this.isAnimating)
		{
			return;
		}

		if(this.element)
		{
			this.elementFx.start({
				'opacity': 0,
				'top': [this.endPosition, this.startPosition]
			});
		}
		
		if(this.useBackground)
		{
			this.backgroundFx.start('opacity', 0);
		}
	},
	
	close: function(force)
	{
		this.log("Overlay::close()");
		
		if(this.onCloseConfirm && !force)
		{
			if(this.onCloseConfirm() == false)
			{
				return;
			}
		}
		
		this.hide();
		
		if(this.onClose)
		{
			this.onClose();
		}
	},
	
	createBackground: function()
	{
		this.log("Overlay::createBackground()");

		var backgroundIsInited = false;

		if($(document.body).getElement('.overlay-background'))
		{
			backgroundIsInited = true;
			this.background = $(document.body).getElement('.overlay-background');
		}

		if(!backgroundIsInited)
		{
			this.background = new Element("div");
			this.background.addClass('overlay-background');
			this.background.setStyle('z-index', this.depth);
			this.background.hide();
		}
		
		this.backgroundFx = new Fx.Tween(this.background, {duration: 250, transition: Fx.Transitions.linear.easeOut});
		this.backgroundFx.set('opacity', 0);
		this.backgroundFx.addEvent('start', function(event) {

			if(this.background.getStyle('opacity').toInt() == 0)
			{
				this.background.show();
			}
		}.bind(this));
		this.backgroundFx.addEvent('complete', function(event) {

			if(this.background.getStyle('opacity').toInt() == 0)
			{
				this.background.hide();
			}

		}.bind(this));
		
		this.background.addEvent("click",function(event) {
			if(this.allowClose)
			{
				this.close();
			}
		}.bind(this));

		// Add to DOM
		if(!backgroundIsInited)
		{
			$(document.body).appendChild(this.background);
		}

	},
	
	createWindow: function()
	{
		this.log("Overlay::createWindow()");

		this.element = new Element('div', {'class': 'overlay'});
		this.element.addClass(this.className);
		this.element.setStyle('z-index', this.depth + 1);

		this.elementFx = new Fx.Morph(this.element, {duration: 400, transition: Fx.Transitions.Quad.easeOut});
		this.elementFx.set({
			'opacity': 0
		});

		this.elementFx.addEvent('start', function(event) {

			if(this.element.getStyle('opacity').toInt() == 0)
			{
				this.element.show();

				this.isAnimating = true;
			}
		}.bind(this));
		
		this.elementFx.addEvent('complete', function(event) {

			this.isAnimating = false;

			if(this.element.getStyle('opacity').toInt() == 0)
			{
				this.element.hide();
				this.isShown = false;
				this.reset();

				this.fireEvent('hidden');
			}
			
			if(this.element.getStyle('opacity').toInt() == 1)
			{
				this.isShown = true;
			}

		}.bind(this));


		$(document.body).appendChild(this.element);
		
		this.endPosition = this.element.getStyle('top').toInt();
		this.startPosition = this.endPosition - 20;

		this.element.hide();


		var url = '/overlay/' + this.name + '.html';
		
		var request = new Request.HTML({method: 'get', url: url, 
			onSuccess: function(html) 
			{
				this.element.adopt(html);
				this.initilizeWindow();
			}.bind(this),
			
			onFailure: function() 
			{
			}.bind(this)
		});
		
		// Send request
		request.send();
	},
	
	initilizeWindow: function()
	{
		this.log("Overlay::initilizeWindow()");

		this.element.addEvent("click",function(event) {

			if(event.target.hasClass(this.className))
			{
				if(this.allowClose)
				{
					this.close();
				}
			}
			
		}.bind(this));


		if($(this.element).getElement('.close'))
		{
			$(this.element).getElement('.close').addEvent('click', function(event) {
				event.preventDefault();
				this.close();
			}.bind(this));
		}
	}
	
});