var AjaxPopup = new Class({
	Implements: [Events, Options],
	
	initialize: function (options) {
		var width = 750;
		var height = 200;
		
		options = options || {};
		
		options.width = options.width || width;
		options.height = options.height || height;
		
		if (!$defined(options.buttons_panel)) options.buttons_panel = true;
		
		this.setOptions(options);
		
		this.addEvent('ready', this._init_form);
	},
	
	_initialize: function () {
		this.overlay = new Element('div', {
			'class': 'overlay',
			styles: {
				width: window.getScrollWidth(),
				height: window.getScrollHeight()
			}
		}).inject(document.body);
		
		window.addEvent('resize', function () {
			this.overlay.setStyles({
				width: window.getWidth(),
				height: window.getScrollHeight()
			});
		}.bind(this));
		
		this.popup = new Element('div', {
			'class': 'popup',
			styles: {
				width: this.options.width
			}
		}).inject(this.overlay);
		
		this.popup.setStyle('margin-top', parseInt(this.popup.getStyle('margin-top')) + window.scrollY);
		
		this.content = new Element('div', {
			'class': 'content',
			styles: {
				//height: 300/*this.popup.getHeight() - title.getHeight() - (parseInt(this.popup.getStyle('border-bottom-width')) + parseInt(this.popup.getStyle('border-top-width')))*/
			}
		}).inject(this.popup);
		
		this.loader = new Element('div', {
			'class': 'loader'
		}).inject(this.content);
		
		this.loader.setStyles({
			left: this.content.getWidth() / 2 - this.loader.getWidth() / 2,
			top: this.content.getHeight() / 2 - this.loader.getHeight() / 2
		});
		
		if (!this.options.buttons_panel) return;
	},
	
	_init_form: function () {
		var form = this.content.getElement('form');
		form.set('send', {
			onSuccess: function (resp) {
				this.resp = resp;
				form.over.destroy();
				this.content.set('html', resp);
				
				this._init_form();
			}.bind(this)
		});
		
		if (this.content.getElement('.close')) {
			this.content.getElement('.close').addEvent('click', function (e) {
				e.stop();
				this.close(false);
			}.bind(this));
		}
		
		this.content.getElement('form').addEvent('submit', function (e) {
			e.stop();
			
			form.over = new Element('div', {
				styles: {
					position: 'absolute',
					left: 0,
					top: 0,
					width: this.popup.getWidth() - parseInt(this.popup.getStyle('border-left-width')) - parseInt(this.popup.getStyle('border-right-width')),
					height: this.popup.getHeight() - parseInt(this.popup.getStyle('border-left-width')) - parseInt(this.popup.getStyle('border-right-width')),
					zIndex: 100,
					background: 'url(/img/b/overlay_white.png)'
				}
			}).inject(this.popup);
			
			form.loader = new Element('div', {
				'class': 'loader'
			}).inject(form.over);
			
			form.loader.setStyles({
				left: this.content.getWidth() / 2 - form.loader.getWidth() / 2,
				top: this.content.getHeight() / 2 - form.loader.getHeight() / 2
			});
			
			
			form.send();
		}.bind(this));
		
	},
	
	ready: function (content) {
		this.loader.destroy();
		this.content.set('html', content);
		
		window.fireEvent('resize', {});
		
		this.fireEvent('ready', {});
	},
	
	close: function (status) {
		var e = { ok: status, _stop: false, stop: function () { this._stop = true }, resp: this.resp };
		
		this.fireEvent('close', e);
		
		if (!e._stop) {
			this.overlay.destroy();
			if (this.closeButton)
			this.closeButton.destroy();
			this.content.destroy();
			this.popup.destroy();
			if (this.saveButton)
			this.saveButton.destroy();
		}
	},
	
	open: function (params) {
		this.options.url = params.url;
		this.options.title = params.title;
		this.options.re_init = params.re_init || true;
		
		if (this.options.re_init) {
			this._initialize(null);
		}
		
		new Request({
			url: this.options.url,
			method: 'get',
			onSuccess: function (resp) {
				this.ready(resp);
			}.bind(this)
		}).send();
	}
});