/*
**
** Original Author: Paul Hollands
** Date Created: 17th January 2007
** Purpose: Javascript Functions to validate forms and send them using Ajax
** 			
** Last Modified by: Paul Hollands
** Last Modified date: 25th September 2009
** Reason for Modification: isTelephone validation tweak, tidied up code, fixed IE8 issue
**
** Version 1.01
*/

/* Validates the form before posting */
var FormValidator = {
	errors: [],
	previous_errors: [],
	errorList: "",
	isMandatory: function(element) {
		var value = element.value;
		if (element.value.length === 0 || value.match(/^\s+$/)) {
			this.raiseError(element);
		}
	},
	isEmail: function(element) {
		var value = element.value;
		if(!value.match(/^[a-zA-Z0-9._%+-]+@(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,4}$/)) {
			this.raiseError(element);
		}
	},
	isTelephone: function(element) {
		var value = element.value.replace(" ","");
		if(value.length < 10 || isNaN(value)) {
			this.raiseError(element);
		}
	},
	isChecked: function(element) {
		var value = element.value;
		if(!element.checked) {
			this.raiseError(element);
		}
	},
	isRadioChosen: function(form, element) {
		var radio_name = element.name;
		var radio_group = form[radio_name];
		var checkvalue;
		
		for(var i=0; i<radio_group.length; i++) {
			if(radio_group[i].checked) {
				checkvalue = radio_group[i].value;
				break;
			}
		}
		
		if (!(checkvalue)) {
		   this.raiseError(element);
		}	
	},
	raiseError: function(element) {
		this.errors[this.errors.length] = element;
		var new_error = capitalizeFormElements(element.id.toString());
		this.errorList += '"' +  new_error  + '", ';
	},
	getNumberOfErrors: function() {
		return this.errors.length;
	},
	highlightErrorField: function(_form) {
		var form = document.getElementById(_form.id);
		var labels = form.getElementsByTagName('label');
		var elementClasses;
		var errorDisplayed = false;
		for(var i=0; i<labels.length; i++) {
			for(var j=0; j<this.errors.length; j++) {
				if (labels[i].getAttribute("for") !== null) {
					if (document.addEventListener) {
						if (labels[i].getAttribute("for") == this.errors[j].id) {
							labels[i].className += " error_label";
						}
					}
					else {
						if (labels[i].attributes['for'].nodeValue == this.errors[j].id) {
							labels[i].className += " error_label";
						}
					}
				}
				elementClasses = this.errors[j].className.split(" ");
				for(var x =0;x<elementClasses.length; x++) {
					if(elementClasses[x] == "error_textfield") {
						errorDisplayed = true;
					} 
				}
				if(errorDisplayed === false) {
					this.errors[j].className += " error_textfield";
				}
			}
		}
	},
	resetErrorField: function(_form) {
		var form = document.getElementById(_form.id);
		var labels = form.getElementsByTagName('label');
		var elementClasses;
		var labelClasses;
		for(var i=0; i<labels.length; i++) {
			labelClasses = labels[i].className.split(" ");
			for(var x=0;x<labelClasses.length;x++) {
				if(labelClasses[x] == "error_label") {
					labelClasses.splice(x, 1);
				}
			}
			labels[i].className = labelClasses.join(" ");
		}
		for(var j=0; j<this.previous_errors.length; j++) {
			elementClasses = this.previous_errors[j].className.split(" ");
			for(var y=0;y<elementClasses.length; y++) {
				if(elementClasses[y] == "error_textfield") {
					elementClasses.splice(y, 1);
				} 
			}
			this.previous_errors[j].className = elementClasses.join(" ");
		}
	},
	displayErrors: function(_form) {
		hiddenErrorMessage = document.getElementById("error_div");
		hiddenErrorMessage.innerHTML = "<div class='light-row-two error_row'><div class='error_text bold'>Your information could not be processed.  Please correct following fields:</div><div class='error_text'>" + this.errorList.substr(0, this.errorList.length-2) + ".</div></div>";
		hiddenErrorMessage.className = "reveal";
	},
	validateForm: function(form) {
		for(var i = 0; i<form.elements.length; i++) {
			var classes = form.elements[i].className.split(" ");
			for(var j =0;j<classes.length; j++) {
				if(classes[j] == 'isMandatory') {
					this.isMandatory(form.elements[i]);
				}
				if(classes[j] == 'isEmail') {
					this.isEmail(form.elements[i]);
				}
				if(classes[j] == 'isTelephone') {
					this.isTelephone(form.elements[i]);
				}
				if(classes[j] == 'isRadioChosen') {
					this.isRadioChosen(form, form.elements[i]);
				}
			}
		} 
	},
	getErrors: function(form) {
		this.validateForm(form);
		var form_errors = this.getNumberOfErrors();
		if(form_errors > 0) {
			return false;
		} else {
			return true;
		}
	},
	resetErrors: function(form) {
		document.getElementById("error_div").className = "hidden";
		this.resetErrorField(form);
	}
};

/* Creates an Ajax request */
var nState;
var Ajax = {
	isUpdating: true,
	Request: function(method, url, query, callback) { 
		this.isUpdating = true; 
		this.callbackMethod = callback; 
		this.request = (window.XMLHttpRequest)? new XMLHttpRequest(): new ActiveXObject("MSXML2.XMLHTTP");  
		this.request.onreadystatechange = function() { Ajax.checkReadyState(); }; 
		 
		if(method.toLowerCase() == 'get') { url = url+"?"+query+"&rand="+Math.random(); }
		this.request.open(method, url, true); 
		this.request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
		this.request.send(query); 
	},
	checkReadyState: function() { 	
		if(nState != this.request.readyState) { 
			switch(this.request.readyState) 
			{ 
				case 1:
					Ajax.displayLoading(); 
					break; 
				case 2: break; 
				case 3: break; 
				case 4: 
					this.isUpdating = false; 
					Ajax.destroyLoading();
					this.callbackMethod(); 
			}
		nState = this.request.readyState;
		}
	},
	displayLoading: function() {
		var lightbox = document.createElement('div');
		lightbox.id = "light-box";
		var loadingbox = document.createElement('div');
		loadingbox.id = "loading-box";
	
		var loadingheading = document.createElement('div');
		loadingheading.id = "send-message";
		loadingheading.innerHTML = "Sending...";
		loadingheading.className = "align-center bold sending-background";
	
		document.getElementsByTagName('body')[0].appendChild(lightbox);
		document.getElementsByTagName('body')[0].appendChild(loadingbox);
		loadingbox.appendChild(loadingheading);
	},
	destroyLoading: function() {
		var lightbox = document.getElementById('light-box');
		var loadingbox = document.getElementById('loading-box');
		var loadingheading = document.getElementById('send-message');
		loadingheading.parentNode.removeChild(loadingheading);
		loadingbox.parentNode.removeChild(loadingbox);
		lightbox.parentNode.removeChild(lightbox);
	}
};  

/* Posts a form using the ajax request */
var Post = {
	Send: function(form) { 
		FormValidator.errorList = "";
		FormValidator.previous_errors = FormValidator.errors;
		FormValidator.errors = [];
		var valid = FormValidator.getErrors(form);
		if(valid === true) {
			var query = Post.buildQuery(form);
			Ajax.Request(form.method, form.action, query, Post.OnResponse); 
			FormValidator.resetErrors(form);
			form.reset();
		} else {
			FormValidator.resetErrors(form);
			FormValidator.displayErrors(form);
			FormValidator.highlightErrorField(form);
		}
	}, 
	OnResponse: function() { 
		var darkbox = document.createElement('div');
		darkbox.id = "dark-box";
		var messagebox = document.createElement('div');
		messagebox.id = "result-message";
		
		var response = this.request.responseText;
		var responseType = response.substr(0,1);
		var moduleheadingText;
		if(responseType == "1") {
			moduleheadingText = "Form failed to send";
		} else {
			moduleheadingText = "Form sent successfully";
		}
		var modulebodyText = response.substr(2,response.length);
	
		var moduleheading = document.createElement('div');
		moduleheading.innerHTML = moduleheadingText;
		moduleheading.className = "module_heading_one";
		
		var modulebody = document.createElement('div');
		modulebody.innerHTML = modulebodyText;
		modulebody.className = "module_body_one";
		
		var okcontainer = document.createElement('div');
		okcontainer.id = "ok_button_container";
		okcontainer.className = "align-right";
		
		var okbutton = document.createElement('input');
		okbutton.setAttribute("type", "button");
		okbutton.setAttribute("name", "ok_button");
		okbutton.setAttribute("id", "ok_button");
		okbutton.setAttribute("value", "OK");
		okbutton.className = "submit_button";
		okbutton.onclick = function() {
			document.getElementsByTagName('body')[0].removeChild(darkbox);
			document.getElementsByTagName('body')[0].removeChild(messagebox);
			messagebox.removeChild(moduleheading);
			messagebox.removeChild(modulebody);
			modulebody.removeChild(okcontainer);
			okcontainer.removeChild(okbutton);
		};
	
		document.getElementsByTagName('body')[0].appendChild(darkbox);
		document.getElementsByTagName('body')[0].appendChild(messagebox);
		messagebox.appendChild(moduleheading);
		messagebox.appendChild(modulebody);
		modulebody.appendChild(okcontainer);
		okcontainer.appendChild(okbutton);
	},
	buildQuery: function(form) { 
		var query = "";
		for(var i=0; i< form.elements.length; i++)  {
			switch(form.elements[i].type)	{
				case 'select-one': 
					query += form.elements[i].name + "=" + form.elements[i].options[form.elements[i].selectedIndex].value + "&";
					break; 
				case 'checkbox': 
					query += form.elements[i].name + "=" + form.elements[i].checked + "&";
					break;
				case 'radio':
					if(form.elements[i].checked) {
						query += form.elements[i].name + "=" + form.elements[i].value + "&";
					}	
					break;
				default: 
					query += form.elements[i].name + "=" + escape(form.elements[i].value) + "&"; 
			}
		} 
		query = query.substr(0,(query.length - 1));
		
		return query;
	}
}; 

/* Capitalizes form elements ids to display in error information at top of the form */
capitalizeFormElements = function(string) {
	var new_string = string.split("_");
	for(var i=0;i<new_string.length;i++) {
		new_string[i] = new_string[i].charAt(0).toUpperCase() + new_string[i].substr(1).toLowerCase();
	}
	return new_string.join(" ");
};

/* Add unobtrusive validation to each form.  To add a new form add the new form id to the formIds array. */
emailFormsOnSubmit = function()  {
	var formIds = ["feedback", "help", "amend_account", "query_invoice", "query_payment", "contact_sales", "remittance", "contact"];
	var form;
	for(var i=0;i<formIds.length;i++) {
		if(document.getElementById(formIds[i])) {
			form = document.getElementById(formIds[i]);
			form.onsubmit = function () {
				Post.Send(form);
		        return false;
		    };
		}
	}
};