var c_overlay = new Class({
	Implements: [Options, Events],

	options: {
		visible: false,
		dragable: true,
		url: null,
		top: 100,
		left: false,
		width: false
	},
	container: {
		outer_div: null,
		inner_div: null
	},

	initialize: function(options) {
		this.setOptions(options);

		var scroll = window.getScroll();
		var styles = {
			'top': (this.options.top + scroll.y) + 'px'				
		};

		if(this.options.width) {
			styles.width = this.options.width + 'px';
			//styles.marginLeft = (-1 * (this.options.width / 2)) + 'px';
		}

		if(this.options.left) {
			styles.left = this.options.left + 'px';
			//styles.marginLeft = 0;
		}

		this.container.outer_div = new Element('div', {
			'class': 'container-overlay',
			'id': 'container-overlay',
			'styles': styles
		});

		this.container.inner_div = new Element('div', {
			'class': 'content'
		}).inject(this.container.outer_div);
		
		(new Element('img', {
			'src': '/app/1/img/button/load.gif',
			'styles': {
				'margin-left': '200px'
			}})).inject(this.container.inner_div);
				
		if (this.options.visible) {
			this.container.outer_div.fade('show');
			//this.container.outer_div.show();
		}
		else {
			this.container.outer_div.fade('hide');
			//this.container.outer_div.hide();
		}
		
		this.container.outer_div.inject(document.getElement('body'), 'bottom');
		
		if (this.options.url != null) {
			this.get(this.options.url);
		}
	},
		
	postcomplete: function() {
		this.fireEvent('postcomplete');
	},
	
	getcomplete: function() {
		this.fireEvent('getcomplete');
	},

	get: function(url) {
		if (!url) {
			return false;
		}
		this.options.url = url;
		
		var req = new Request.HTML({
			url: url,
			update: this.container.inner_div
		}).addEvent('success', this.onLoadSuccess.bind(this)).addEvent('failure', this.onLoadFailure.bind(this)).addEvent('success', this.getcomplete.bind(this));

		if (arguments[1] != 'undefined') {			
			req.get($(arguments[1]));
		}
		else {
			req.get();
		}		
		
	},
	
	post: function(url) {
		if (!url) {
			return false;
		}
		this.options.url = url;
		
		var req = new Request.HTML({
			url: url,
			update: this.container.inner_div
		}).addEvent('success', this.onLoadSuccess.bind(this)).addEvent('failure', this.onLoadFailure.bind(this)).addEvent('success', this.postcomplete.bind(this));
		
		if (arguments[1]) {
			req.post($(arguments[1]));
		}
		else {
			req.post();
		}
	},
	
	onLoadSuccess: function() {
		this.container.inner_div.setStyle('height', 'auto');
		if (this.options.dragable) {
			var element = this.container.outer_div;
			var element_headline = this.container.inner_div.getElement('h3');
			if (element_headline) {
				element_headline.setStyle('cursor', 'move');
				new Drag(element, {
					handle: element_headline,
					modifiers: {
						x: 'left',
						y: 'top'
					},
					onDrag: function() {
						element.fireEvent('move');
					}
				});
			}
			
			// buttons mit events 
			btnSubmit();	
			/*
			var element_textarea = this.container.inner_div.getElement('textarea');
			if (element_textarea) {
				element_textarea.setCaretPosition.delay(50, element_textarea, element_textarea.value.length);				
			}
			*/
		}			
	},
	
	onLoadFailure: function() {
		this.container.inner_div.empty();
		// this.container.inner_div.setStyle('height', '40px');
		
		(new Element('p', {
			'text': 'Bei der Anfrage ist ein Fehler aufgetreten. Bitte versuche es später nochmal.'
		})).inject(this.container.inner_div);		
		
		var btn_div = new Element('p', {
			'class': 'btn middle pink'
		}).inject(this.container.inner_div);
			
		(new Element('a', {
			'html': 'Schliessen',
			events: {
				click: this.hide.bind(this)
			}
		})).inject(btn_div);
	},
	
	reload: function() {
		if (arguments[0]) {
			this.post(this.options.url);
		}
		else {
			this.get(this.options.url);
		}		
	},

	show: function() {
		if (typeof arguments[1] != 'undefined') {
			var styles = arguments[1];
			if(styles.top && styles.top < 0) {
				styles.top = 0;
				alert('styles.top ausserhalb des erlaubten Bereichs');
			}

			if(styles.left && styles.left < 0) {
				styles.left = 0;
				alert('styles.left ausserhalb des erlaubten Bereichs');
			}
			
			this.container.outer_div.setStyles(styles);
		} else {
			var scroll = window.getScroll();
			this.container.outer_div.setStyles({
					'top': (this.options.top + scroll.y) + 'px',
					'left': null,
					'width': null
			});
		}

		if (!this.options.visible) {
			
			this.container.outer_div.fade('in');
			//this.container.outer_div.show();
			this.options.visible = true;			
		}

		if (arguments[0]) {
			this.get(arguments[0]);
		}
		
		return this;
	},

	hide: function() {
		if (this.options.visible) {
			this.container.outer_div.fade('out');
			//this.container.outer_div.hide();
			this.container.inner_div.set.delay(800, this.container.inner_div, ['html', '']);
			img = new Element('img', {
										'src': '/app/1/img/button/load.gif',
										'styles': {
											'margin-left': '200px'
										}});
			img.inject.delay(800, img, [this.container.inner_div]);			
			this.options.visible = false;
		}
		
		return this;		
	},
	
	toggle: function() {
		if (this.options.visible) {
			this.hide();
		}
		else if (arguments[0]) {
			this.show(arguments[0]);
		}
		else {
			this.show();
		}
		
		return this;
	}


});


var overlay = null;
if (Browser.Engine.trident) {	// der Internet Fucking Explorer kann nix -.-
	window.addEvent('domready', function() {
		if (typeof overlay_options != 'undefined') {
			overlay = new c_overlay(overlay_options);
		}
		else {
			overlay = new c_overlay();
		}
	});
}
else {
	if (typeof overlay_options != 'undefined') {
		overlay = new c_overlay(overlay_options);
	}
	else {
		overlay = new c_overlay();
	}
}