var PopUp = Class.create({
	
	FADING_DURATION_ON_CLOSE: 0.3,
	FADING_DURATION_ON_SUCCESS: 0.3,
	FADING_DURATION_ON_LOADING: 0.3,
	DISPLAY_DURATION_ON_SUCCESS: 1,
	UPLOAD_FRAME_POLLING: 1,
	
	initialize: function() {
	},
	
	create: function() {
		var body = document.getElementsByTagName('body')[0];
		var elDivOverlay = new Element('div', {
								id: 'popupOverlay'
							}).update('').setStyle({
								position: 'absolute',
								top: '0px',
								left: '0px',
								zIndex: '30000',
								width: '100%',
								height: '100%'
							}).hide();
		body.appendChild(elDivOverlay);
		var elDivBackground = new Element('div', {
								id: 'popupBackground'
							}).update('').setStyle({
								backgroundColor: '#036',
								position: 'fixed',
								top: '0px',
								left: '0px',
								zIndex: '30001',
								width: '100%',
								height: '100%',
								opacity: 0.8
							});
		elDivOverlay.appendChild(elDivBackground);
		var elDivForeground = new Element('div', {
								id: 'popupForeground'
							}).update('').setStyle({
								position: 'absolute',
								zIndex: '30010',
								width: '100%',
								height: '100%',
								textAlign: 'center'
							});
		elDivOverlay.appendChild(elDivForeground);
		var elDivContainer = new Element('div', {
								id: 'popupContainer'
							}).update('text').setStyle({
								backgroundColor: '#FFF',
								width: '500px',
						//		height: '300px',			hab ich rausgenommen, dann wirds dynamisch ... ;)
								margin: '186px auto',
								color: '#000',
								padding: '15px'
							});
		var elDivContainerOptions = new Element('div', {
								id: 'popupContainerOptions'
							}).setStyle({
								backgroundColor: '#FFF',
								zIndex: '30020',
								width: '16px',
								margin: '0px auto',
								position: 'relative',
								top: '186px',
								left: '254px',
								padding: '3px',
								textAlign: 'right'
							}).update('<img src="img/16/delete2.png" title="Schlie&szlig;en">');
		elDivForeground.appendChild(elDivContainerOptions);
		elDivForeground.appendChild(elDivContainer);
		//alert(elDivContainerOptions.childElements()[0]);
		//Event.observe('popupContainer','dblclick',this.close );
		Event.observe(elDivContainerOptions.childElements()[0],'click',this.close.bind(this) );
	},
	
	load: function() {
		//alert('load...');
		/*** implement ***/
		$('popupContainer').update('<img src="img/ajax-loader_bar.gif" class="loading-indicator">');
		$('popupOverlay').show();
	},
	
	success: function() {
		$('popupContainer').update('Aktion erfolgreich');
		window.setTimeout(function(){
			//alert(this.FADING_DURATION_ON_SUCCESS);
			$('popupOverlay').fade({duration: this.FADING_DURATION_ON_SUCCESS});
		}.bind(this), this.DISPLAY_DURATION_ON_SUCCESS*1000);
	},
	
	failure: function() {
		$('popupContainer').update('Es ist ein Fehler aufgetreten');
	},
	
	prepare: function() {
		//var arr = document.getElementsByAttribute('rel', 'popup');
		var arr = document.getElementsByTagName('body')[0].getElementsBySelector('a[rel="popup"]');
		for(var i=0; i<arr.length; i++) {
			if(!arr[i].href.endsWith('#')) {
				//alert(arr[i].href);
				var params = arr[i].href.toQueryParams();
				arr[i].href = '#';
				arr[i].observe('click', this.open.curry(params).bind(this));
			}
		}
		var arr = document.getElementsByTagName('body')[0].getElementsBySelector('a[rel="confirm_delete"]');
		for(var i=0; i<arr.length; i++) {
			if(!arr[i].href.endsWith('#')) {
				//alert(arr[i].href);
				var params = arr[i].href.toQueryParams();
				arr[i].href = '#';
				arr[i].observe('click', this.deleteBg.bindAsEventListener(this, params));
			}
		}
		var arr = document.getElementsByTagName('body')[0].getElementsBySelector('a[rel="confirm"]');
		for(var i=0; i<arr.length; i++) {
			if(!arr[i].href.endsWith('#')) {
				//alert(arr[i].href);
				var params = arr[i].href.toQueryParams();
				arr[i].href = '#';
				arr[i].observe('click', this.confirm.curry(params).bind(this));
			}
		}
		//alert('prepared '+i+' links');
	},
	
	confirm: function(params) {
		//alert('confirm...');
		var confirmation = confirm("Sicher, dass du diese Aktion durchführen möchtest?");
		if(confirmation == true) {
			//alert('proceed...');
			this.open(params);
		} else {
			//alert('break');
		}
	},
	
	deleteBg: function(evt, params) {
		//alert(Object.toJSON(params));
		//alert(evt);
		var el = evt.findElement();
		//alert(el);
		el = el.up('td');
		//alert(el.innerHTML);
		while(Element.previous(el, 'td') != undefined) {
			el = Element.previous(el, 'td');
		}
		var firstCellValue = el.innerHTML;
		var confirmation = confirm("Sicher, dass du den Datensatz '"+firstCellValue+"' löschen m&ouml;chtest?");
		if(confirmation == true) {
			new Ajax.Request('ajax.php', {
				parameters: params,
				onLoading: function() {
					$('popupContainer').update('<img src="img/ajax-loader_bar.gif" class="loading-indicator">');
					$('popupOverlay').appear({duration:0.5});
				},
				onSuccess: function(transport) {
					//alert(transport.responseText);
					var response = transport.responseText.evalJSON();
					JSONcallFuncs(response);
					var result = response.result;
					if(result == true) {
						$('popupContainer').update('Aktion erfolgreich');
						window.setTimeout(function(){ $('popupOverlay').fade();}, 1000);
						//alert('richtig');
					} else {
						$('popupContainer').update('Es ist ein Fehler aufgetreten');
						//alert('falsch');
					}
				}
			});
		}
	},
	
	postForm: function(url, id) {
		//alert($(id).serialize());
		new Ajax.Request(url, {
			parameters: $(id).serialize(true),
			onLoading: this.load,
			onSuccess: this.handleResponse.bind(this)
		});
	},
	
	prepareForm: function(id) {
		// prepare form within popup
		//alert('prepare '+id);

		var form = undefined;
		if($('popupContainer') == null || $('popupContainer').down('form') == undefined) {
			if(id != undefined) {
				form = $(id);
				//alert('form nicht popup');
			}
		} else {
			form = $('popupContainer').down('form');
		}
		//if($('popupContainer').down('form') != undefined) { // check if there is a form element
		if(form != undefined) { // check if there is a form element
			//var form = $('popupContainer').down('form');
			if(form.readAttribute('target') == 'uploadframe') {
				// dealing with upload form
				Event.observe(form, 'submit', function() {

					//alert('jetzt...');
					// on sending form, display loading dialog
					this.load();
					// poll iframe
					new PeriodicalExecuter(function(pe) {
						//alert('poll');
						//var responseStr = window.frames.uploadframe.document.body.innerHTML;
						//alert('Poll: '+responseStr);
						//var response = responseStr.evalJSON();
						//alert('Json:');
						var json = this.filterJSON(window.frames.uploadframe.document.body.innerHTML);
						//alert(json);
						//json = json.replace(/'/g, "");
						//alert(json);
						//alert('s');
						//alert(String.evalJSON(json));
						var response = json.evalJSON();
						//alert('fert');
						//alert(response);
						if(response.result == true) {
							//alert('ss');
							//alert(json);
							pe.stop();
							this.success();
							//alert('sdsda');
							this.callbacks(response);
						}
					}.bind(this), this.UPLOAD_FRAME_POLLING);
				}.bind(this));
			} else {
				// standard upload form
				var formaction = form.action;
				if(!formaction.include('ajax.php')) {
					// reroute action to ajax.php instead of index.php
					var t = formaction.split('?');
					formaction = 'ajax.php?' + t.pop();
				}
				Element.observe(form.down('input[type=submit]'), 'click', this.postForm.bind(this).curry(formaction, form.readAttribute('id')));
				this.disableSendingForm(form);
				form.action = '#';
			}
			
			form.focusFirstElement();
		} // if
	},
	
	disableSendingForm: function(element) {
		Event.observe(element, 'submit', function(event) {
			Event.stop(event);
			return false;
		});
	},
	
	open: function(params) {
		new Ajax.Request('ajax.php', {
			parameters: params,
			onLoading: this.load,
			onSuccess: this.handleResponse.bind(this)
		});
	},
	
	handleResponse: function(transport) {
		//alert('response handler');
		logInfo(transport.responseText);
		//alert(transport.responseText);
		//alert(this.FADING_DURATION_ON_CLOSE);
		var json = this.filterJSON(transport.responseText);
		//alert(json);
		var response = json.evalJSON();
		//alert(response);
		switch(response.context) {
		case 'result':
			this.handleResponseResult(response);
			break;
		default: // html
			this.handleResponseHTML(response);
			break;
		};
		this.callbacks(response);
	},
	
	handleResponseHTML: function(responseObj) {
		//alert('handle HTML response');
		//alert(this.FADING_DURATION_ON_CLOSE);
		//alert(responseObj);
		$('popupContainer').hide();
		$('popupContainer').update((responseObj.html));
		//alert('sda');
		this.prepareForm();
		$('popupOverlay').show();
		$('popupContainer').appear();
		//JSONcallFuncs(responseObj);
	},
	
	handleResponseResult: function(responseObj) {
		//alert('handle Result response');
		if(responseObj.result == true) {
			//$('popupContainer').update('Aktion erfolgreich');
			//window.setTimeout(function(){ $('popupOverlay').fade();}, 1000);
			this.success();
			//alert('richtig');
		} else {
			this.failure();
			//$('popupContainer').update('Es ist ein Fehler aufgetreten');
			//alert('falsch');
		}
	},
	
	callbacks: function(responseObj) {
		//alert('callbacks...?!');
		if(responseObj.call != undefined) {
			//alert('proceeding callbacks...');
			//alert('da ist was...');
			//alert(Object.toJSON(responseObj.call));
			var params = responseObj.call;
			var funcs = Object.keys(responseObj.call);
			//alert(funcs);
			for(var i=0; i<funcs.length; i++) {
				//alert('call '+funcs[i]+' mit '+Object.toJSON(params[funcs[i]]));
				window[funcs[i]](params[funcs[i]]);
			}
		}
		this.prepare();
	},
	
	filterJSON: function(response) {
		//alert('filter...');
		var res = response.match(/\%json\%(\{.*\})\%json\%/);
		//alert('Result: '+res);
		if(res == null) return response;
		var json = res[1];
		return json;
	},
	
	close: function() {
		$('popupOverlay').fade({duration: this.FADING_DURATION_ON_CLOSE});
	}
});