var ModalViewer = new Class({
			show: function(el) {
				if (!$('modalHideBox')) {
					hb = new Element('div');
					hb.setProperty('id','modalHideBox');
					hb.setStyles({
						position: 'fixed',
						zIndex: '100',
						top: '0px',
						left: '0px',
						backgroundColor: '#000',
						display:'none',
						width:'400px',
						height:'400px'
					});
					hb.setStyle('width',(window.getScrollWidth()+300)+'px');
					hb.setStyle('height',(window.getScrollHeight()+300)+'px');
					hb.injectInside(document.body);

					hb.addEvent('click', function(event) {
						this.modalViewer.hide();
					});
				} else {
					hb = $('modalHideBox');
				}
				hb.modalViewer = this;
				hb.setOpacity(0);
				hb.setStyle('display','block');
				new Fx.Style(hb, 'opacity', {duration:500, fps:20}).start(0,0.7);

				this.dialog=$(el);
				this.dialog.setOpacity(0);
				this.dialog.setStyle('display','block');
				new Fx.Style(this.dialog, 'opacity', {duration:500, fps:20}).start(0,1);
				this.dialog.setStyle('zIndex','101')
			},
			showCentered: function(el) {
				$(el).setStyle('visibility','hidden');
				this.show(el);
				d=this.dialog.getSize();
				this.dialog.setStyle('left',(window.getWidth()-d.size.x)/2);
				this.dialog.setStyle('top',(Math.max(window.getHeight()/3-d.size.y/2,10)));
				$(el).setStyle('visibility','visible');
			},
			hide: function() {
				hb =$('modalHideBox');
				this.dialog.setStyle('display','none');
				new Fx.Style(hb, 'opacity', {duration:500, onComplete: function(){hb.setStyle('display','none')},fps:20 }).start(0);
			}
		})

		var modalviewer;

		window.addEvent('domready', function(){
			modalviewer = new ModalViewer();
			$$('a.loginLink').forEach(function(login, index) {
				login.addEvent('click', function(event) {
					event = new Event(event);
					event.preventDefault();
					modalviewer.showCentered('loginBox');
					$('loginBox').getElement('form').getElement('input').focus();
				});
			});


			document.getElement('.centered').setStyle('min-height',window.getHeight()+"px");
			window.addEvent('resize', function(event) {
				document.getElement('.centered').setStyle('min-height',window.getHeight()+"px");
			});

			abort = new Element($('loginAbortButton'));
			abort.addEvent('click', function(event) {
				modalviewer.hide();
			});

			// Ajax Login
			$('loginBox').getElement('form').addEvent('submit', function(event) {
				event.preventDefault();
				var info = this.getElement("#info");
				info.innerHTML='<img src="/media/images/loading.gif" style="vertical-align:middle;"> Daten prüfen ...';
				info.setStyle('display','inline');

				var param = this.toQueryString();
				var xhr = new XHR({autoCancel:true,
					onSuccess:function(){
						var res =  Json.evaluate(this.response.text);
						if (res.result == true) {
							info.innerHTML='<span style="color:#2c2">Login erfolgreich.<'+'/span>';
							window.setTimeout("document.location.reload()",1000);
						} else {
							info.innerHTML='<span style="color:#c22">Login fehlerhaft.<'+'/span>';
						}
					},
					onFailure:function(){
							info.innerHTML='<span style="color:#c22">AJAX fehlgeschlagen.<'+'/span>';
					}
				});
				xhr.send("/ajax/login/",param);
			});
		});