var RegisterModal = new Class({

	Extends:Mooverlay.HTML,

	options:{
		animations:true,
		ajax:{
			url:'/modals/register.php'
		}
	},

	initialize:function(options) {
		this.options.animations = !!! Browser.Engine.trident;
		this.parent('register-modal',options);

		//setup the events
		this.addEvent('show',this.onShow.bind(this));
	},

	onShow:function() {
		if(!this.registration) {
			this.registration = new Registration('form-signup');
		}

		Loader.fadeOut();
		Cufon.set('fontFamily','FuturaLight');
		Cufon.replace('.modal-stage h2');
		Cufon.now();

		var cancel = function(event) {
			event.stopPropagation();
			(function() {
				$('input-terms').checked=false;
			}).delay(50);
		};

		try {
			$('modal-policy-link').addEvent('click',cancel);
			$('modal-terms-link').addEvent('click',cancel);
		}
		catch(e) {
			
		}
	}

});

var Registration = new Class({

	initialize:function(form) {
		form = $(form);
		this.form = form;
		var elements = {};
		elements.name = form.getElement('#input-name');
		elements.last = form.getElement('#input-last');
		elements.email = form.getElement('#input-email');
		elements.username = form.getElement('#input-username');
		elements.password = form.getElement('#input-password');
		elements.submit = form.getElement('.submit');
		elements.agree = form.getElement('#input-terms');
		elements.passwordRepeat = form.getElement('#input-password-repeat');
		this.elements = elements;

		//set the event
		if(!Browser.Engine.trident4) {
			elements.username.addEvent('change',this.onUsername.bind(this));
			elements.email.addEvent('change',this.onEmail.bind(this));
		}

		//set the event
		this.form.addEvent('submit',this.onSubmit.bind(this));
	},

	onUsername:function(event) {
		if(event) event.stop();

		var input = this.elements.username;
		var message = this.usernameMessage;
		if(!message) {
			message = this.usernameMessage = new Element('div').addClass('inline-message username-message').injectAfter(input);	
		}
		message.removeClass('available');
		message.removeClass('unavailable');
		var username = new Username(input.get('value'));
		if(username.isValid()) {
			message.addClass('loading');
			message.innerHTML='checking...';
			if(username.checkIfAvailable()) {
				message.addClass('available');
				message.innerHTML = 'Username Available';
			}
			else {
				message.addClass('unavailable');
				message.innerHTML = 'Error: Username Not Available';
			}
			message.removeClass('loading');
		}
		else {
			message.innerHTML = 'Error: Invalid Username Format. your username must be between 6 and 12 characters long and may only consist of alphabetical and numeric characters.';
			message.addClass('unavailable');
		}
	},

	onEmail:function(event) {
		if(event) event.stop();

		var input = this.elements.email;
		var message = this.emailMessage;
		if(!message) {
			message = this.emailMessage = new Element('div').addClass('inline-message email-message').injectAfter(input);	
		}
		message.removeClass('available');
		message.removeClass('unavailable');
		var email = new Email(input.get('value'));
		if(email.isValid()) {
			message.addClass('loading');
			message.innerHTML='checking...';
			if(email.checkIfAvailable()) {
				message.addClass('available');
				message.innerHTML = 'Email Available';
			}
			else {
				message.addClass('unavailable');
				message.innerHTML = 'Error: Email Not Available';
			}
			message.removeClass('loading');
		}
		else {
			message.innerHTML = 'Error: Invalid Email Format';
			message.addClass('unavailable');
		}
	},

	getForm:function() {
		return this.form;
	},

	onSubmit:function(event) {
		if(event) event.stop();
		var elements = this.elements;

		//check the errors
		var error = [];
		var name = (elements.name.get('value') || '').trim();
		if(name.length==0)
		error.push('you did not enter your <em>first name</em>');

		var last = (elements.last.get('value') || '').trim();
		if(last.length==0)
		error.push('you did not enter your <em>last name</em>');

		var username = (elements.username.get('value') || '').trim();
		if(username.length==0) {
		  error.push('you did not enter a <em>username</em>');
		}

		var agree = !! elements.agree.checked;
		if(!agree) {
			error.push('you did not agree to the liiv.com <em>terms of use</em> and <em>privacy policy</em>');
		}

		var email = (elements.email.get('value') || '').trim();
		if(email.length==0)
		error.push('you did not enter your <em>email address</em>');
		else if(!/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i.test(email)) {
			error.push('you did not enter a valid <em>email address</em>');
		}

		//check password
		var password = (elements.password.get('value') || '').trim();
		if(password.length==0) {
			error.push('you did not enter a <em>password</em> for your account');	
		}

		//check password
		var passwordRepeat = (elements.passwordRepeat.get('value') || '').trim();
		if(passwordRepeat.length==0 || passwordRepeat != password) {
			error.push('your two <em>passwords</em> do not match');	
		}

		if(error.length==0) {
			//check the username
			try {
				var avail = new Username(username).checkIfAvailable();
				if(!avail) {
					throw new Error;	
				}
			}
			catch(e) {
				error.push('your <em>username</em> is already in use by another user');
			}
		}

		//send request
		var token = document.getElement('#_token').value;
		if(error.length==0) {
			var data =  new Hash({ 
				'signup[name]':name,
				'signup[email]':email,
				'signup[last]':last,
				'signup[password]':password,
				'signup[token]':token,
				'signup[username]':username,
				'signup[password_r]':passwordRepeat,
				'signup[json]':'true'
			}).toQueryString();
			this.request = new Request.JSON({
				'url':'/json/signup.php',
				'data':data,
				'method':'post',
				'onRequest':this.onRequest.bind(this),
				'onSuccess':this.onResponse.bind(this),
				'onFailure':this.onResponse.pass(null,this),
				'onComplete':this.onComplete.bind(this)			   
			}).send();
		}
		else {
			this.onFailure(error);	
		}
	},

	onComplete:function() {
		this.setAsLoading(false);
	},

	onRequest:function() {
		this.setAsLoading(true);
	},

	setAsLoading:function(bool) {
		Loader.fadeIn();
		var loading = this.loading;
		if(bool) {
			try {
				if(loading) {
					loading.destroy();
				}
				if(Browser.Engine.trident) {
					this.from.setOpacity(0.5);
				}
				else {
					this.form.fade(0.5);
				}
				this.loading = loading = new Element('div').addClass('loading').injectBefore(this.elements.submit);
			}
			catch(e){ }
		}
		else {
			try {
				if(Browser.Engine.trident) {
					this.form.setOpacity(1);
				}
				else {
					this.form.fade(1);	
				}
				if(this.loading) {
					this.loading.destroy();
					this.loading = null;
				}
			}
			catch(e){ }
		}
	},

	onResponse:function(json) {
		this.setAsLoading(false);
		if(json && json.status == 'success') {
			this.onSuccess(json.message);
		}
		else if(json && json.status == 'refresh') {
			window.location='/';
			return;
		}
		else {
			this.onFailure(json	? json.error : null);
		}
	},

	onSuccess:function(message) {
		var f = this.getForm();
		this.elements.submit.destroy();
		message = new Message(message);
		this.setMessage(message);
		if(Browser.Engine.trident) {
			$(message).injectBefore(f);
			f.destroy();
		}
		else {
			$(message).setOpacity(0);
			$(message).injectBefore(f);
			$(message).morph({
				'opacity':[0,1],
				'margin-top':[-10,0]
			});
			new Fx.Morph(f).start({
				'opacity':0,
				'margin-bottom':[0,10]
			}).chain(function() {
				f.destroy();
			});
		}
		// refresh the page
		// setTimeout( function(){ window.location.reload( false ); }, 1000 );
		if(!Browser.Engine.trident)
		Loader.fadeOut();
	},

	onFailure:function(errors) {
		this.setAsLoading(false);
		var m = document.getElement('.error.message');
		if(m) {
			m.destroy();
		}
		if($type(errors) == 'string')
		errors = [errors];
		else if($type(errors) != 'array')
		errors = ['There was an error'];

		var error = new ErrorMessage;
		error.setErrors(errors);
		this.setMessage(error);
	},

	setMessage:function(message) {
		var f = this.getForm();
		var m = document.getElement('.message');
		if(m) {
			m.destroy();
		}
		if(Browser.Engine.trident) {
			$(message).injectBefore(f);
		}
		else {
			$(message).setOpacity(0);
			$(message).injectBefore(f);
			$(message).morph({
				'opacity':[0,1],
				'margin-top':[-10,0]			 
			});
		}
	}
});

var Message = new Class({

	initialize:function(message) {
		this.create('success');
		if(message)
		this.setMessage(message);
	},

	create:function(classes) {
		classes = classes || 'success';
		this.container = new Element('div',{
			'class':'message '+classes
		});
		this.content = new Element('p').injectInside(this.container);
		this.arrows = [
			new Element('div').addClass('a'),
			new Element('div').addClass('b'),
		];
		this.container.adopt(this.arrows);
	},

	setMessage:function(message) {
		this.message = message;
		this.content.set('html',message);
	},

	getMessage:function() {
		return this.message;
	},

	getContainer:function() {
		return this.container;
	},

	toElement:function() {
		return this.getContainer();	
	}
});

var ErrorMessage = new Class({

	Extends:Message,

	initialize:function(errors) {
		this.create('error');
		if(errors)
		this.setErrors(errors);
	},

	setErrors:function(errors) {
		var text = '<strong>There was an error</strong>';
		if(Browser.Engine.trident) {
			for(var i=0;i<errors.length;i++) {
				text += errors[i]+'<br />';
			}
		}
		else {
			text += '<ol class="error-list">';
			for(var i=0;i<errors.length;i++) {
				text += '<li>'+errors[i]+'</li>';
			}
			text += '</ol>';
		}
		this.setMessage(text);
	}
});

var Username = new Class({

	MIN : 6,
	MAX : 12,

	initialize:function(value) {
		this.username = value;
	},

	checkIfAvailable:function() {
		this.avail = false;
		// alert(this.username);return;
		new Request.JSON({
			'url':'/json/username.php',
			'data':'&username='+this.username+'&',
			'async':false,
			'noCache':true,
			'onSuccess':function(json) {
				if(json && json.status == 'success')
				this.avail = true;
			}.bind(this)
		}).send();

		return this.avail;
	},

	isValid:function() {
		var length = this.username.length;
		if(!(length >= this.MIN && length <= this.MAX)) {
			return false;
		}

		if(!/[a-zA-Z0-9-_]/.test(this.username)) {
			return false;
		}
		
		return true;
	}
});

var Email = new Class({

	initialize:function(value) {
		this.email = value;
	},

	isValid:function() {
		return /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/.test(this.email);
	},

	checkIfAvailable:function() {
		this.avail = false;
		new Request.JSON({
			'url':'/json/email.php',
			'data':'&email='+this.email+'&',
			'async':false,
			'noCache':true,
			'onSuccess':function(json) {
				if(json && json.status == 'success')
				this.avail = true;
			}.bind(this)
		}).send();

		return this.avail;
	}
});