var Ajax_Login = new Class({
	
	link: null,
	box: null,
	fx: null, fx2: null, fx3: null,
	el: {}, msg: {},
	active: false,
	response: null,
	backupMsgBox: false,
	
	data: {
		userPID: 6,
		buttons: {
			login: {
				normal: "typo3conf/ext/ajax_login/res/pics/login_normal.gif",
				hover:  "typo3conf/ext/ajax_login/res/pics/login_hover.gif",
				click:  "typo3conf/ext/ajax_login/res/pics/login_click.gif"
			},
			logout: {
				normal: "typo3conf/ext/ajax_login/res/pics/logout_normal.gif",
				hover:  "typo3conf/ext/ajax_login/res/pics/logout_hover.gif",
				click:  "typo3conf/ext/ajax_login/res/pics/logout_click.gif"
			}
		},
		pics: {
			form_header: "typo3conf/ext/ajax_login/res/images/header_login.gif",
			logout_header: "typo3conf/ext/ajax_login/res/images/header_logout.gif"	
		},
		status: {
			login:false
		}
	},
	btn: null,
	
	addMsgEvents: function() {
		if ($('forgot_submit')) {
			$('forgot_submit').removeEvents().addEvents({
				mousedown: function() {
					this.setStyle('backgroundImage', 'url(fileadmin/templates/images/forgot_click.gif)');	
				},
				mouseenter: function() {
					this.setStyle('backgroundImage', 'url(fileadmin/templates/images/forgot_hover.gif)');	
				},
				mouseleave: function() {
					this.setStyle('backgroundImage', 'url(fileadmin/templates/images/forgot_normal.gif)');	
				}
			});
		}
	},
	
	initialize: function(raw_data) {
		
		$extend(this.data, raw_data);
		this.link = $$("#meta a")[0];
		
		
		//new Asset.css('typo3conf/ext/ajax_login/res/styles.css');
		//new Asset.css('../../typo3conf/ext/ajax_login/res/styles.css');
		new Asset.images([
			this.data.buttons.login.normal,
			this.data.buttons.login.hover,
			this.data.buttons.login.click,
			this.data.buttons.logout.normal,
			this.data.buttons.logout.hover,
			this.data.buttons.logout.click,
			this.data.pics.form_header,
			this.data.pics.logout_header
		]);
		
		this.constructBox();
		
		this.link.addEvent("click", function(ev) {
			ev = new Event(ev).stop();
			return this.show();
		}.bind(this));
	},
	
	constructBox: function() {
		s = window.getSize().scrollSize;		
		var ww = (window.getWidth() == 0) ? window.getScrollWidth()-22 : window.getWidth();
		var wh = (window.getHeight() == 0) ? window.getScrollHeight() : window.getHeight();
		this.box = new Element("div", {
			'class' : 'login-wrapper',
			events: {
				click: this.hide.bind(this)
			},
			styles: {
				width: ww,
				height: wh
			}
		}).injectBefore( $('page') );


		this.fx  = new Fx.Style(this.box, "opacity", {duration: 300, transition: Fx.Transitions.Cubic.easeInOut}).set(0);
		
			
			// Make Orange Marker
		this.el.marker = new Element("div").addClass("marker").setText("Login").addEvent("click", function() {
			this.hide();
		}.bind(this)).injectInside(this.box);


			// Make Login Form
		this.el.box  = new Element("div", {
			'class': 'loginbox', 
			styles: {
				opacity: 0
			}
		}).injectAfter( this.box ).setHTML(this.data.box);
		this.fx2  = new Fx.Style(this.el.box, "opacity", {duration:300, transition: Fx.Transitions.Cubic.easeInOut});

			
			// Attach Events to the elements
		this.attachEvents();
			// Infobox
		this.msg.outer = new Element("div", {styles: {display: 'none'}}).addClass("login-msg").injectAfter( this.el.box );
		
		
		this.msg.box = new Element("div",{styles: {width: 0, opacity: 0}, 'class': 'message'}).injectInside( this.msg.outer );
		this.fx3 = new Fx.Styles(this.msg.box, {duration: 300, transition: Fx.Transitions.Cubic.easeInOut});
		//this.fx3 = new Fx.Styles(this.msg.box, {duration: 500});
		/*
		this.fx3.set({
			width: 0,
			opacity: 0
		});
		*/
		
		
	},
	
	attachEvents: function() {
		
		if ($type($('user')) == "element") {
			$('user').removeEvents().addEvents({
																																			   
				'focus': function() {
						
					var i = $('user');
					if (i.getProperty("value") == "Benutzername") i.setProperty("value", "");
						
				}.bind(this),
					
				'blur': function() {
						
					var i = $('user');
					if (i.getProperty("value").trim() == "" || i.getProperty("value").trim() == "Benutzername") i.setProperty("value", "Benutzername");
						
				}.bind(this)
			});
		}
		
		if ($type($('pass')) == "element") {
			$('pass').removeEvents().addEvents({
																																					   
				'focus': function() {
					if ($('pass').getProperty("value").trim() == "Passwort") {
							$('pass').setProperties({
								value: '',
								type: 'password'
							});
					}

				}.bind(this),
					
				'blur': function() {

					if ($('pass').getProperty("value") == "" || $('pass').getProperty("value") == "Passwort") $('pass').setProperties({
						value: 'Passwort',
						type: 'text'
					});

				}.bind(this)
			});
		}
		
		if (!this.data.status.login) this.btn = this.data.buttons.login;
		else this.btn = this.data.buttons.logout;
		
		if ($type($('button')) == "element") {
			this.send = new XHR({
				method: "post",
				onRequest: function() {
					this.hideLayer();
				}.bind(this),
				onSuccess: function() {
					this.react(this.send.response.text);
				}.bind(this),
				onFailure: function() {
					this.react(this.send.response.text);
				}.bind(this)
			});
		
		
			$('button').removeEvents().addEvents({
		
					"click": function() {
						
						if (this.data.status.login) {
							sendData = 'pid='+ this.data.userPID + '&logintype=logout';
						} else {
							sendData = 'user=' + encodeURI($('user').value) + '&pass=' + encodeURI($('pass').value) + '&pid='+this.data.userPID+'&logintype=login';
						}
						
						this.send.send('index.php?eID=ajax_login', sendData);

			        }.bind(this),
	
					"mousedown": function() {
		            	$('button').setProperty("src", this.btn.click);
		        	}.bind(this),
	
					"mouseup": function(e) {
		            	$('button').setProperty("src", this.btn.hover);
		        	}.bind(this),
	
					"mouseover": function() {
			            $('button').setProperty("src", this.btn.hover);
		        	}.bind(this),
	
					"mouseout": function() {
		            	$('button').setProperty("src", this.btn.normal);
		        	}.bind(this)
	
			});
		}
			
			if ($('forgot-password')) {
				$('forgot-password').removeEvents().addEvent('click', this.showForgottenFields.bind(this));
			}
			
			if ($('login-help')) {
				$('login-help').removeEvents().addEvent('click', this.showHelp.bind(this));
			}
	},
	
	showHelp: function(e) {
		e = new Event(e).stop();
		(function() {

			this.msg.box.setHTML(this.data.help);
			this.addMsgEvents();
			this.showLayer();

		}.bind(this)).delay(300);
	},

	showForgottenFields: function(e) {
		e = new Event(e).stop();
		new XHR({
			method: "post",
			onRequest: function() {
				this.hideLayer();
			}.bind(this),
			onSuccess: function(r) {
				this.makeForgot(Json.evaluate(r, true));
				this.showLayer();
			}.bind(this),
			onFailure: function(r) {
				this.makeForgot(Json.evaluate(r, true));
				this.showLayer();
			}.bind(this)
		}).send(
			'index.php?eID=tx_ajaxlogin_forgot',
			'action=getform'
		);
	},
	
	makeForgot: function(r) {
		this.msg.box.setHTML(r.text);
		this.addMsgEvents();
		
		if ($('forgot_mail') && $('forgot_submit')) {
			
			$('forgot_submit').removeEvents().addEvent('click', function(e) {
				e = new Event(e).stop();				
				
				new XHR({
					method: "post",
					onRequest: function() {
						this.hideLayer();
					}.bind(this),
					onSuccess: function(r) {
						this.makeForgot(Json.evaluate(r, true));
		//				this.msg.box.setHTML(.text);
						this.showLayer();
					}.bind(this),
					onFailure: function(r) {
						this.makeForgot(Json.evaluate(r, true));
		//				this.msg.box.setHTML(Json.evaluate(r, true).text);
						this.showLayer();
					}.bind(this)
				}).send(
					'index.php?eID=tx_ajaxlogin_forgot',
					'action=getpassword&email=' + encodeURI($('forgot_mail').value)
				);
				
			}.bind(this));
		}
	},
	
	hideLayer: function() {
		
		if (!this.active) return;
		
		this.active = false;
		return this.fx3.stop().start({
			'width'  : 0,
			'opacity': 0
		});
	},
	
	showLayer: function() {
		if (this.active) return;
		
		this.active = true;
		return this.fx3.stop().start({
			'width': 760,
			'opacity': 1
		});
	},
	
	react: function(r) {
		
		r = Json.evaluate(r, true);
		this.data.status.login = r.login;
		this.msg.box.setHTML(r.message);
		
		
		if (r.show_message) this.showLayer();
		
		if (r.box) {
			this.el.box.setHTML(r.box);
			this.attachEvents();
		}
	},
	
	show: function() {
		this.box.setStyle("display", "block");
		this.el.box.setStyle("display", "block");
		this.msg.outer.setStyle("display", "block");
		
		
		// Position Login Link
		
		this.el.marker.setStyles({
			left: this.link.getLeft(),
			top:  this.link.getTop()
		});
		
		// Position Loginbox
		this.el.box.setStyles({
			left: $('balken-oben').getLeft(),
			top:  $('balken-oben').getTop() - 8
		});
		this.msg.outer.setStyles({
			top: this.el.box.getTop(),
			left: (this.el.box.getLeft() + this.el.box.getSize().size.x)
		});
		
		this.fx.stop().start( 0.75);
		this.fx2.stop().start(1);
		if (this.backupMsgBox) {
			this.msg.box.setStyle('display', 'block');
			this.fx3.stop().start({opacity: 1})
		}
		return false;
	},
	
	hide: function() {
	
		this.fx.stop().start(0);
		this.fx2.stop().start(0);
		
		if (this.msg.box.getStyle("opacity").toInt() > 0) {
			this.fx3.stop().start({opacity: 0})
			this.backupMsgBox = true;
			(function() { 
				this.msg.box.setStyle('display', 'none');
				this.msg.outer.setStyle('display', 'none');
				this.box.setStyle("display", "none");
				this.el.box.setStyle("display", "none");  
//				this.msg.outer.setStyle("display", "none");
			}.bind(this)).delay(350);
		}
		else {
			this.backupMsgBox = false;
		}
	}
});