softAuth = Class.create();
softAuth.prototype = {
		
	
		divLoginForm: 0,
		
		divFeedback: 0,
		
		divButtons: 0,
		btnSend: 0,
		btnCancel: 0,
		
		divName: 0,
		inputName: 0,
		textNameField: "Email adres",
		
		
		divPass: 0,
		inputPass: 0,
		textPassField: "Wachtwoord",
		
				
		divNameValidate: 0,
		inputNameValidate: 0,
		textNameValidateField: "Email bevestiging",
		
		divPassValidate: 0,
		inputPassValidate: 0,
		textPassValidateField: "Wachtwoord bevestiging",
		
		divActive: 0,
		inputActivate: 0,
		textActivate: "Activatie code",
		
		txtTeaser: "Maak ook een <a href=\"#\" id=\"accountSetup\">account</a> en verrijk deze website met een mooi gedicht of verhaal van je favoriete plek in Oosterhout",
		txtNewAccount: "Nieuwe account aanmaken en <a href=\"#\" id=\"activeren\">activeren</a>",
		txtAccountActivate: "Activeer uw account met de code die u per email ontvangen heeft! ",
		
		boolNewAccount: false,
		
		inputSend: 0,
		
		sendData: [],
		
		
		initialize: function(){
	
			this.divBubble = $('loginWindow');
			this.divBubble.style.visibility = "visible";
			
			this.divLoginForm = $('loginBouds');
			// -> if javaScript show login window
			this.divLoginForm.style.visibility = "visible";
			
			this.divFeedback = Builder.node('div', {'class':'loginRow', 'id':'serverFeedback'}, 'email adres:\n');
			
				
			var url = "/loginVerify.pxml";
			var self = this;
			var request = new softRequest(url, this.sendData, function (data){ self.severVerifyLogin(data); });
			
			
		},	
		
		
		createNewAccount : function() {

			this.divLoginForm.innerHTML = this.txtNewAccount; // clear
			
			var newAccount = $("activeren");
			Event.observe(newAccount, 'click', this.displayAccountActivate.bind(this));
			
			
			this.boolNewAccount = true; // new account mode
			this.displayNormalFields(); //
			this.displayValidationFields();
			
		},

		
		
		displayNormalFields: function(){

			
			var self = this;
			// name
			var txt = this.textNameField;
			this.inputName = Builder.node('input', {'id':'email', 'class': 'loginInput', 'type':'text', 'value': txt }, '');
			
			Event.observe(this.inputName, 'focus', this.clearName.bind(this));
			
			Event.observe(this.inputName, 'keyup', this.validName.bind(this));
			Event.observe(this.inputName, 'change', this.validName.bind(this));
			
			this.divName = Builder.node('div', {'class':'loginRow'}, 'email adres:\n');
			
			this.divName.appendChild(this.inputName);
			this.divLoginForm.appendChild(this.divName);
			
			// login
			var txt = this.textPassField;
			this.inputPass = Builder.node('input', {'id':'pass', 'class': 'loginInput', 'type':'password', 'value': txt}, '');
			
			Event.observe(this.inputPass, 'focus', this.clearPass.bind(this));
			
			Event.observe(this.inputPass, 'keyup', this.validPass.bind(this));
			Event.observe(this.inputPass, 'change', this.validPass.bind(this));
			
			this.divPass = Builder.node('div', {'class':'loginRow'}, 'wachtwoord (min. 6 tekens):\n');
			
			this.divPass.appendChild(this.inputPass);
			
			this.divLoginForm.appendChild(this.divPass);
			
			
			if (this.boolNewAccount == false){
				//--> BUTTONS
				this.divButtons = Builder.node('div', {'class':'loginRow'},'');
				this.divLoginForm.appendChild(this.divButtons);
				
				this.btnSend = Builder.node('input', {'class':'loginRow', 'id':'send', 'type':'button', 'value':'Verzend'}, '');
				this.divButtons.appendChild(this.btnSend);
				
				Event.observe(this.btnSend, 'click', this.sendNormalAuth.bind(this));
				
			}
			this.divFeedback.innerHTML = '';
			this.divLoginForm.appendChild(this.divFeedback);
			
			// IE wont switch in first tests
			this.inputPass.type = "text";
			
		},
		
		displayValidationFields: function(){
			
			
			var self = this;
			// name
			var txt = this.textNameValidateField;
			this.inputNameValidate = Builder.node('input', {'id':'email', 'class': 'loginInput', 'type':'text', 'value': txt }, '');
			
			Event.observe(this.inputNameValidate, 'focus', this.clearNameValidate.bind(this));
			
			Event.observe(this.inputNameValidate, 'keyup', this.validNameValidate.bind(this));
			Event.observe(this.inputNameValidate, 'change', this.validNameValidate.bind(this));
			
			this.divNameValidate = Builder.node('div', {'class':'loginRow'}, 'email bevestigen:\n');
			
			this.divNameValidate.appendChild(this.inputNameValidate);
			this.divLoginForm.appendChild(this.divNameValidate);
			
			// login
			var txt = this.textPassValidateField;
			this.inputPassValidate = Builder.node('input', {'id':'pass', 'class': 'loginInput', 'type':'password', 'value': txt}, '');
			
			Event.observe(this.inputPassValidate, 'focus', this.clearPassValidate.bind(this));
			
			Event.observe(this.inputPassValidate, 'keyup', this.validPassValidate.bind(this));
			Event.observe(this.inputPassValidate, 'change', this.validPassValidate.bind(this));
			
			this.divPassValidate = Builder.node('div', {'class':'loginRow'}, 'wachtwoord bevestigen:\n');
			
			this.divPassValidate.appendChild(this.inputPassValidate);
			
			this.divLoginForm.appendChild(this.divPassValidate);
			
			// --> BUTTONS
			this.divButtons = Builder.node('div', {'class':'loginRow'},'');
			this.btnCancel = Builder.node('input', {'class':'loginRow', 'id':'annuleren', 'type':'button', 'value':'Annuleren'}, '');
			this.btnSend = Builder.node('input', {'class':'loginRow', 'id':'send', 'type':'button', 'value':'Verzend'}, '');
			
			this.divButtons.appendChild(this.btnCancel);
			this.divButtons.appendChild(this.btnSend);
			this.divLoginForm.appendChild(this.divButtons);
			
			Event.observe(this.btnCancel, 'click', this.cancelCreateAccount.bind(this));
			Event.observe(this.btnSend, 'click', this.sendNewAccountRequest.bind(this));	
			
			this.divFeedback.innerHTML = '';
			this.divLoginForm.appendChild(this.divFeedback);
			

			// IE wont switch in first tests
			this.inputPassValidate.type = "text";
			
		},
		cancelCreateAccount:function(){
			
			this.boolNewAccount = false;
			
			this.divLoginForm.innerHTML = this.txtTeaser;
			var newAccount = $("accountSetup");
			Event.observe(newAccount, 'click', this.createNewAccount.bind(this));
			
			
			this.displayNormalFields(); 
			
		},
		sendNewAccountRequest: function() {
			
			if(this.validName() && this.validPass() && this.validNameValidate() && this.validPassValidate()){
				
			
				this.sendData.push(new Array("email", this.inputName.value));
				this.sendData.push(new Array("pass", this.inputPass.value));
				this.sendData.push(new Array("emailValidate", this.inputNameValidate.value));
				this.sendData.push(new Array("passValidate", this.inputPassValidate.value));
				
				var url = "/newPublicAccount.pxml";
				
				var self = this;
				var request = new softRequest(url, this.sendData, function (data){ self.severResponseNewAccount(data); });
			
			}else{
				
				this.divFeedback.innerHTML = "Controleer gebruikersnaam en wachtwoord";
			}
			
		},
		
		severNormalAuth: function (xmlDoc){
			
			var content = xmlDoc.getElementsByTagName('content');
			for (var i = 0; i < content.length; i++){
				var msg = nodeVal(content[i]); 
				var valid = content[i].getAttribute('login');
				var status = content[i].getAttribute('status');
				switch(status){
					case "12":
						// account not active
						this.divFeedback.innerHTML = msg;
						break;
					case "100":
						this.divFeedback.innerHTML = msg;
						this.accountActivated();
						break;
				}
			}
		},
		severResponseNewAccount : function (xmlDoc){
			
			// -> print server response
			var rows = xmlDoc.getElementsByTagName('content');
			for (var i = 0; i < rows.length; i++){
				
				var msg = nodeVal(rows[i]); 
				var status = rows[i].getAttribute('status');
				var code = rows[i].getAttribute('login');
				
				
				switch (status){
					case "2":
					case "12":
						
							this.divFeedback.innerHTML = msg;
						
						break;
						
					case "100":
							// account activated and ready for use
							this.accountActivated();
							break;
					default:
						this.divFeedback.innerHTML = msg;
						
				}
				
			}			
			
		},		
		
		severVerifyLogin: function (xmlDoc){
			
			var rows = xmlDoc.getElementsByTagName('content');
			for (var i = 0; i < rows.length; i++){
				var status = rows[i].getAttribute('status');
				if (status == "100"){
					this.accountActivated();
					return;
				}
			}
			
			// ->
			this.divLoginForm.innerHTML = this.txtTeaser;
			var newAccount = $("accountSetup");
			Event.observe(newAccount, 'click', this.createNewAccount.bind(this));
			
			this.displayNormalFields();
			
		},
		
		displayAccountActivate: function(){
			
			this.divLoginForm.innerHTML = this.txtAccountActivate; // clear
			
			this.inputActivate = Builder.node('input', {'id':'email', 'class': 'loginInput', 'type':'text', 'value': this.textActivate }, '');
			this.divActivate = Builder.node('div', {'class':'loginRow'}, '');
			this.divActivate.appendChild(this.inputActivate);
			this.divLoginForm.appendChild(this.divActivate);

			this.divButtons = Builder.node('div', {'class':'loginRow'},'');
			this.divLoginForm.appendChild(this.divButtons);
			
			this.btnCancel = Builder.node('input', {'class':'loginRow', 'id':'annuleren', 'type':'button', 'value':'Annuleren'}, '');
			this.btnSend = Builder.node('input', {'class':'loginRow', 'id':'send', 'type':'button', 'value':'Verzend'}, '');
			
			this.divButtons.appendChild(this.btnCancel);
			this.divButtons.appendChild(this.btnSend);
			
			Event.observe(this.btnCancel, 'click', this.createNewAccount.bind(this));
			Event.observe(this.btnSend, 'click', this.sendActivationCode.bind(this));
			
			this.divFeedback.innerHTML = '';
			this.divLoginForm.appendChild(this.divFeedback);
			
			
		},
		sendNormalAuth: function(){
			
			if(this.validName() && this.validPass()){
				this.sendData.push(new Array("email", this.inputName.value));
				this.sendData.push(new Array("pass", this.inputPass.value));
				
				var url = "/login.pxml";
				
				var self = this;
				var request = new softRequest(url, this.sendData, function (data){ self.severNormalAuth(data); });
				
			}else{
				
				this.divFeedback.innerHTML = "Controleer gebruikersnaam en wachtwoord";
			}
		},
		
		sendActivationCode: function(){
			
			this.sendData.push(new Array("activationCode", this.inputActivate.value));
			
			var url = "/newPublicAccount.pxml";
			var self = this;
			var request = new softRequest(url, this.sendData, function (data){ self.severResponseNewAccount(data); });
			
		},
		logout : function(){
			
			this.sendData = new Array();
			
			var url = "/logout.pxml";
			var self = this;
			var request = new softRequest(url, this.sendData, function (data){ self.severResponseLogout(data); });
			
		},
		severResponseLogout: function(){
			this.divLoginForm.innerHTML = '';
			this.displayNormalFields();
			
		},
		clearName: function(){
			if (this.textNameField == this.inputName.value){
				this.inputName.value = '';
			}
		},
		clearPass: function(){
			if (this.textPassField == this.inputPass.value){
				this.inputPass.value = '';
			}
		},
		validName: function(){
			var goodEmail = this.inputName.value.match(/\b(^(\S+@).+((\....)|(\...)|(\.....)(\..{2,2}))$)\b/gi);
			if (goodEmail){
				this.inputName.style.color = "#00aa10";
				return true;
			}else{
				this.inputName.style.color = "#aa0000";
			}
		},
		validPass: function(){
			if (this.inputPass.value.length >= 6){
				this.inputPass.style.color = "#00aa10";
				return true;
			}else{
				this.inputPass.style.color = "#aa0000";
			}
			
			this.inputPass.type = "password";
		},
		clearNameValidate: function(){
			if (this.textNameValidateField == this.inputNameValidate.value){
				this.inputNameValidate.value = '';
			}
		},
		clearPassValidate: function(){
			if (this.textPassValidateField == this.inputPassValidate.value){
				this.inputPassValidate.value = '';
			}
		},
		validNameValidate: function(){
			var goodEmail = this.inputNameValidate.value.match(/\b(^(\S+@).+((\....)|(\...)|(\.....)(\..{2,2}))$)\b/gi);
			if ((goodEmail) && (this.inputName.value == this.inputNameValidate.value)){
				this.inputNameValidate.style.color = "#00aa10";
				return true;
			}else{
				this.inputNameValidate.style.color = "#aa0000";
			}
		},
		validPassValidate: function(){
			
			if ((this.inputPassValidate.value.length >= 6) && (this.inputPassValidate.value == this.inputPass.value)){
				this.inputPassValidate.style.color = "#00aa10";
				return true;
			}else{
				this.inputPassValidate.style.color = "#aa0000";
			}
			this.inputPassValidate.type = "password";
			
		},
		accountActivated : function(){
		
			publicOptions = new froPublicOptions();
			publicOptions.init();
			
		}
};