window.browser = {
	IE6: /msie|MSIE 6/.test(navigator.userAgent),
	IE7: /msie|MSIE 7/.test(navigator.userAgent),
	isMSIE: /msie|MSIE/.test(navigator.userAgent)
}


function addEvent(target, eventType, functionRef){
	if (typeof target.addEventListener != "undefined") {
		target.addEventListener(eventType, functionRef, false);
	} else if (typeof target.attachEvent != "undefined") {
		target['e'+eventType+functionRef] = functionRef;
		target[eventType+functionRef] = function() { target['e'+eventType+functionRef](window.event); }
		target.attachEvent("on" + eventType, target[eventType+functionRef]);
	}
}

function preventDefault(event) {
	if (event.preventDefault) event.preventDefault(); else event.returnValue = false;
}

function stopPropagation(event) {
	if (event.stopPropagation) event.stopPropagation(); else event.cancelBubble = true;
}


function $(element) {
	this.element = element;
	this.getClasses = function() {
		return this.element.className.replace(/\s+/,' ').split(' ');
	}
	this.hasClass = function(className) {
		return (' ' + this.element.className + ' ').indexOf(' ' + className + ' ') > -1;
	}
	this.addClass = function(className) {
		if (!this.hasClass(className)) {
			this.element.className += (this.element.className ? ' ' :'') + className;
		}
	}
	this.removeClass = function(className) {
		this.element.className = this.element.className.replace(new RegExp('(^|\\s)' + className + '(?:\\s|$)'), '$1');
	}
	this.getPrevious = function(className) {
		var prev = this.element.previousSibling;
		while (prev) {
			if (prev.nodeType == 1 && $(prev).hasClass(className)) break;
			prev = prev.previousSibling;
		}
		return prev;
	}
	this.getNext = function(className) {
		var next = this.element.nextSibling;
		while (next) {
			if (next.nodeType == 1 && $(next).hasClass(className)) break;
			next = next.nextSibling;
		}
		return next;
	}
	return this;
}


var form = {
	initialized: false,

	initialize: function() {
		var self = this;

		if (document.forms.length == 0) return;
		this.form = document.getElementById('contact-form');
		this.errorPanel = document.getElementById('errormsg');
		this.errorMsgs = [];

		// Input fields
		this.inputFields = [];
		var tmp = document.getElementsByTagName('INPUT');
		for (var i=0; i<tmp.length; i++) {
			if (tmp[i].parentNode.className != 'field') continue;
			this.inputFields.push(tmp[i]);
		}

		// Hook field events
		for (var i = 0, l = this.inputFields.length; i < l; i++) {
			var field = this.inputFields[i];

			// Focus event
			addEvent(field, 'focus', function(event) {
				if ($(this).hasClass("defaultvalue")) {
					this.value = "";
				}
				this.className = ""; // Remove all classes
				self.hideStar(this);
				if (this.name == 'password' || this.name == 'passwordconf') {
					this.type = 'password';
				}
			});

			// Blur event
			addEvent(field, 'blur', function(event) {
				// Clean leading and trailing spaces
				this.value = this.value.replace(/^\s*/, '').replace(/\s*$/, '');

				if (this.value == "") {
					self.setDefault(this); // If field is empty, set defualt value
				} else {
					if (self.validateField(this)) {
						this.className = "valid"; // Remove any other class
						self.showTick(this);
					} else {
						this.className = ""; // Remove all classes
					}
				}
			});
			
			// Change event
			addEvent(field, 'keypress', function(event) {
				this.className = ""; // Remove all classes
				self.hideStar(this);
			});
		}

		// Submit button
		this.submitBtn = document.getElementById('btn-submit');
		addEvent(this.submitBtn.childNodes[0], 'click', function(event) {
			preventDefault(event);
			self.submit();
		});
		
		this.initialized = true;
	},

	clean: function() {
		// Clear error messages
		this.errorPanel.innerHTML = "";
		this.errorMsgs.length = 0;

		// Clear input field status
		for (var i = 0, l = this.inputFields.length; i < l; i++) {
			var field = this.inputFields[i];
			$(field).removeClass("error");
		}
		
		this.hideStars();
	},

	setDefault: function(field) {
		$(field).removeClass("valid");
		$(field).removeClass("error");
		$(field).addClass("defaultvalue");

		// Registration page
		if (field.name == "firstname")    { field.value = "First name"; }
		if (field.name == "lastname")     { field.value = "Last name"; }
		if (field.name == "email")        { field.value = "email@domain.com"; }
		if (field.name == "emailconf")    { field.value = "Confirm email@domain.com"; }
		if (field.name == "password")     { field.value = "Choose a password"; field.type = 'text'; }
		if (field.name == "passwordconf") { field.value = "Confirm password";  field.type = 'text'; }
		
		// Success page
		if (field.name == "phone")        { field.value = "Phone number"; }
	},

	// Submit form
	submit: function() {
		if (this.onsubmit()) this.form.submit();
	},

	// Form submit event listener
	onsubmit: function(event) {
		this.clean();
		return this.validateAll();
	},

	validateAll: function() {
		var valid = true;
		var self = this;

		for (var i = 0, l = this.inputFields.length; i < l; i++) {
			var field = this.inputFields[i];
			if (!self.validateField(field, true)) {
				$(field).addClass("error");
				valid = false;
			}
		}

		if (!valid) this.showErrorPanel();

		self.showStars();

		return valid;
	},

	validateField: function(field, showError) {

		if (field.name == "firstname") {
			if ($(field).hasClass("defaultvalue") || this.isEmptyText(field.value)) {
				if (showError) this.errorMsgs.push('Please fill in your First name');
				return false;
			}
			return true;
		}

		if (field.name == "lastname") {
			if ($(field).hasClass("defaultvalue") || this.isEmptyText(field.value)) {
				if (showError) this.errorMsgs.push('Please fill in your Last name');
				return false;
			}
			return true;
		}

		if (field.name == "email") {
			if ($(field).hasClass("defaultvalue") || this.isEmptyText(field.value)) {
				if (showError) this.errorMsgs.push('Please fill in your email');
				return false;
			}
			if (!this.isEmail(field.value)) {
				if (showError) this.errorMsgs.push('Please enter a valid email');
				return false;
			}
			return true;
		}

		if (field.name == "emailconf") {
			if ($(field).hasClass("defaultvalue") || this.isEmptyText(field.value)) {
				if (showError) this.errorMsgs.push('Please confirm your email');
				return false;
			}
			if (this.form.email.value != this.form.emailconf.value) {
				if (showError) this.errorMsgs.push('Email confirmation does not match');
				return false;
			}
			return true;
		}

		if (field.name == "password") {
			if ($(field).hasClass("defaultvalue") || this.isEmptyText(field.value)) {
				if (showError) this.errorMsgs.push('Please fill in your password');
				return false;
			}
			if (field.value.length < 6 || field.value.length > 12 || field.value.indexOf(' ') > -1) {
				if (showError) this.errorMsgs.push('Please enter a valid password');
				return false;
			}
			return true;
		}

		if (field.name == "passwordconf") {
			if ($(field).hasClass("defaultvalue") || this.isEmptyText(field.value)) {
				if (showError) this.errorMsgs.push('Please confirm your password');
				return false;
			}
			if (this.form.password.value != this.form.passwordconf.value) {
				if (showError) this.errorMsgs.push('Password confirmation does not match');
				return false;
			}
			return true;
		}

		if (field.name == "phone") {
			if ($(field).hasClass("defaultvalue") || this.isEmptyText(field.value)) {
				if (showError) this.errorMsgs.push('Please fill in your phone number');
				return false;
			}
			if(!this.isPhone(field.value)) {
				if (showError) this.errorMsgs.push('Please enter a valid phone number');
				return false;
			}
			return true;
		}

		return false; // Field not found
	},

	isEmptyText: function(str) {
		return (str == null || str.length < 1);
	},

	isEmail: function (str) {
		var re = /^[^\s()<>@,;:\/]+@\w[\w\.-]+\.[a-z]{2,}$/i
		return re.test(str);
	},

	isPhone: function (str) {
		// var re = /^\(?[2-9]\d{2}[\)\.-]?\s?\d{3}[\s\.-]?\d{4}$/ // USA Phone
		var re = /^(\+?)[0-9]\d{4}[0-9]+$/ // International phones (min 6 digits, + at the beginning optional)
		return re.test(str);
	},

	showErrorPanel: function() {
		if (this.errorMsgs.length > 0) {
			var html = '<p>Whoops! Something is wrong:</p><ul>';
			for (i in this.errorMsgs) {
				html += '<li>' + this.errorMsgs[i] + '</li>';
			}
			html += '</ul>';
			this.errorPanel.innerHTML = html;
		}
	},
	
	showStar: function(field) {
		var star = $(field).getPrevious('star');
		star.style.display = 'block';
	},
	
	showStars: function() {
		var self = this;
		for (var i = 0, l = this.inputFields.length; i < l; i++) {
			var field = this.inputFields[i];
			if ($(field).hasClass("error")) self.showStar(field);
		}
	},
	
	hideStar: function(field) {
		var star = $(field).getPrevious('star');
		star.style.display = 'none';
	},
	
	hideStars: function() {
		var self = this;
		for (var i = 0, l = this.inputFields.length; i < l; i++) {
			var field = this.inputFields[i];
			self.hideStar(field); // Always hide
		}
	},
		
	showTick: function(field) {
		var tick = $(field).getNext('tick');
		$(field).addClass('tick');
		tick.style.opacity = 1;
		if (window.browser.isMSIE) tick.style.filter = 'alpha(opacity=100)';
		this.setTickTimer(field, tick);
	},
	
	setTickTimer: function(field, tick) {
		var self = this;
		setTimeout(function() { self.fadeTick(self, field, tick); }, 100);
	},

	fadeTick: function(self, field, tick) {
		tick.style.opacity = Math.max(0, tick.style.opacity - 0.05);
		if (window.browser.isMSIE) tick.style.filter = 'alpha(opacity='+parseInt(tick.style.opacity*100)+')';
		if (tick.style.opacity > 0) {
			self.setTickTimer(field, tick);
		} else {
			$(field).removeClass('tick');
		}
	}
}

function hookContactBtn() {
/*	var contactMenu = document.getElementById('contact-menu');
	var contactBtn  = document.getElementById('btn-contact');
	if (!contactMenu || !contactBtn) return;

	// Show/hide menu on contactButton Click
	addEvent(contactBtn, 'click', function(event) {
		preventDefault(event);
		stopPropagation(event);
		if ($(contactMenu).hasClass('menu-visible')) {
			$(contactMenu).removeClass('menu-visible');
		} else {
			$(contactMenu).addClass('menu-visible');
		}
	});

	addEvent(contactBtn, 'mouseout', function(event) {
		timeout = setTimeout(function() { hideMenu(contactMenu); }, 500);
	});
	addEvent(contactMenu, 'mouseover', function(event) {
		clearTimeout(timeout);
		$(contactMenu).addClass('menu-visible');
	});
	addEvent(contactMenu, 'mouseout', function(event) {
		timeout = setTimeout(function() { hideMenu(contactMenu); }, 500);
	});
	*/
}

function hookEmbedBtn() {
	var embedMenu = document.getElementById('embed-menu');
	var embedBtn  = document.getElementById('btn-embed');
	var timeout = null;
	if (!embedMenu || !embedBtn) return;

	// Show/hide menu on embedButton Click
	addEvent(embedBtn, 'click', function(event) {
		preventDefault(event);
		stopPropagation(event);
		if ($(embedMenu).hasClass('menu-visible')) {
			$(embedMenu).removeClass('menu-visible');
		} else {
			$(embedMenu).addClass('menu-visible');
		}
	});

	addEvent(embedBtn, 'mouseout', function(event) {
		timeout = setTimeout(function() { hideMenu(embedMenu); }, 500);
	});
	addEvent(embedMenu, 'mouseover', function(event) {
		clearTimeout(timeout);
		$(embedMenu).addClass('menu-visible');
	});
	addEvent(embedMenu, 'mouseout', function(event) {
		timeout = setTimeout(function() { hideMenu(embedMenu); }, 500);
	});

	// Select text on focus
	var box = document.getElementById('embedcode');
	addEvent(box, 'focus', function(event){
		this.select();
	});
}

function hideMenu(menu) {
	$(menu).removeClass('menu-visible');
}


addEvent(window, 'load', function() {
	form.initialize();
	hookContactBtn();
	hookEmbedBtn();
});