// ########## INSTRUCTIONS - general ##########
// 1. Delete comments after changes have been made.

(function () { // Anonymous function (no name bound to it). Wrapping with () and adding () at the end executes the function. Helps prevent namespace collisions.
	if (window.addEventListener) { // For Mozilla  based browsers.
		window.addEventListener("load", init, false); // When the page loads init function executes.
	} else if (window.attachEvent) {
		window.attachEvent("onload", init); // This code is required for IE.
	}

	function init() { 		
		// ########## INSTRUCTIONS ##########
		// 1. Change if needed "contact_submit" (id of the submit button).
		// 2. Add var as needed for more radioboxs (should generally be only 2 though).
		// 3. Change gender_male, gender_female, gender_msg to relevant id names.
		if (document.getElementById("contact_submit")) {
			document.getElementById("contact_submit").onclick = function() { // When form submit button with id "contact_submit" clicked the function is executed.
		
				var valid = true;
		
				// ########## FIRST_NAME - (text input)##########
				// 1. Change "first_name", "first_name_msg" to relevant id names if needed.
		
				var first_name = document.getElementById("first_name").value; // Targets the id "first_name" and returns the value of the variable entered into the field.
				var first_name_msg = document.getElementById("first_name_msg"); // Targets the id "first_name_msg" to display the error message.
			
				if (first_name_check(first_name)) { // If the function "first_name_check" returns the value of "first_name" as true...
					first_name_msg.innerHTML = ""; // ... Then no message displayed.
				} else {
					first_name_msg.innerHTML = "Please enter a valid first name"; // Targets the id "first_name_msg" and insert the error message within the html.
					first_name_msg.className = "error"; // Assigns the class "error" to the id "first_name_msg" for the CSS.
					valid  = false;
				} 
			
				// ########## FAMILY_NAME - (text input) ##########
				// 1. Change "family_name", "family_name_msg" to relevant id names if needed.
		
				var family_name = document.getElementById("family_name").value; // Targets the id "family_name" and returns the value of the variable entered into the field.
				var family_name_msg = document.getElementById("family_name_msg"); // Targets the id "family_name_msg" to display the error message.
			
				if (family_name_check(family_name)) { // If the function "family_name_check" returns the value of "family_name" as true...
					family_name_msg.innerHTML = ""; // ... Then no message displayed.
				} else { 
					family_name_msg.innerHTML = "Please enter avalid family name"; // Targets the id "family_name_msg" and insert the error message within the html.
					family_name_msg.className = "error"; // Assigns the class "error" to the id "family_name_msg" for the CSS.
					valid  = false;
				}
				
				// ########## EMAIL - (text input) ##########
				// 1. Change "email" to relevant id names if needed.
			
				var email = document.getElementById("email").value; // Targets the id "email" and returns the value of the variable entered into the field.
				var email_msg = document.getElementById("email_msg"); // Targets the id "email" to display the error message.
			
				if (email_check(email)) { // If the function "email" returns the value of "message" as true...
					email_msg.innerHTML = ""; // ... Then no message displayed.
				} else { 
					email_msg.innerHTML = "Please enter a valid email address"; // Targets the id "email_msg" and insert the error message.
					email_msg.className = "error"; // Assigns the class "error" to the id "email_msg" for the CSS.
					valid = false;
				}

				var message = document.getElementById("message").value; // Targets the id "message" and returns the value of the variable entered into the field.
				var message_msg = document.getElementById("message_msg"); // Targets the id "message_msg" to display the error message.
			
				if (message_check(message)) { // If the function "message_check" returns the value of "message" as true...
					message_msg.innerHTML = ""; // ... Then no message displayed.
				} else { 
					message_msg.innerHTML = "Please enter a message"; // Targets the id "message_msg" and insert the error message within the html.
					message_msg.className = "error"; // Assigns the class "error" to the id "message_msg" for the CSS.
					valid  = false;
				}
				
				// ########## SPAM ##########
				var spam = document.getElementById("spam").value;
				var spam_msg = document.getElementById("spam_msg");
				
				if (spam) {
					if (spam.toLowerCase() == 'hot') {
						spam_msg.innerHTML = "";
					} else {
						spam_msg.innerHTML = "This answer is not correct";
						spam_msg.className = "error";
						valid  = false;
					}
					
				} else {
					spam_msg.innerHTML = "You must answer the question";
					spam_msg.className = "error";
					valid  = false;
				}
				
				return valid;
			} // end onclick function
			
		} // End contact_submit
	
		if (document.getElementById("confirm")) {
			document.getElementById("confirm").onclick = function() { // When form submit button with id "contact_submit" clicked the function is executed.
		
				var valid = true;
		
				// ########## FIRST_NAME - (text input)##########
				// 1. Change "first_name", "first_name_msg" to relevant id names if needed.
		
				var first_name = document.getElementById("first_name").value; // Targets the id "first_name" and returns the value of the variable entered into the field.
				var first_name_msg = document.getElementById("first_name_msg"); // Targets the id "first_name_msg" to display the error message.
			
				if (first_name_check(first_name)) { // If the function "first_name_check" returns the value of "first_name" as true...
					first_name_msg.innerHTML = ""; // ... Then no message displayed.
				} else {
					first_name_msg.innerHTML = "Please enter a valid first name"; // Targets the id "first_name_msg" and insert the error message within the html.
					first_name_msg.className = "error"; // Assigns the class "error" to the id "first_name_msg" for the CSS.
					valid  = false;
				} 
		
		
				var family_name = document.getElementById("family_name").value; // Targets the id "family_name" and returns the value of the variable entered into the field.
				var family_name_msg = document.getElementById("family_name_msg"); // Targets the id "family_name_msg" to display the error message.
			
				if (family_name_check(family_name)) { // If the function "family_name_check" returns the value of "family_name" as true...
					family_name_msg.innerHTML = ""; // ... Then no message displayed.
				} else { 
					family_name_msg.innerHTML = "Please enter a valid family name"; // Targets the id "family_name_msg" and insert the error message within the html.
					family_name_msg.className = "error"; // Assigns the class "error" to the id "family_name_msg" for the CSS.
					valid  = false;
				}


				var email = document.getElementById("email").value; // Targets the id "email" and returns the value of the variable entered into the field.
				var email_msg = document.getElementById("email_msg"); // Targets the id "email" to display the error message.
			
				if (email_check(email)) { // If the function "email" returns the value of "message" as true...
					email_msg.innerHTML = ""; // ... Then no message displayed.
				} else { 
					email_msg.innerHTML = "Please enter a valid email address"; // Targets the id "email_msg" and insert the error message.
					email_msg.className = "error"; // Assigns the class "error" to the id "email_msg" for the CSS.
					valid = false;
				}
				
				
				var address = document.getElementById("address").value; // Targets the id "address" and returns the value of the variable entered into the field.
				var address_msg = document.getElementById("address_msg"); // Targets the id "address" to display the error address.
				if (family_name_check(address)) { // If the function "address_check" returns the value of "address" as true...
					address_msg.innerHTML = ""; // ... Then no address displayed.

				} else {
					address_msg.innerHTML = "Please enter a valid address"; // Targets the id "address_msg" and insert the error address within the html.
					address_msg.className = "error"; // Assigns the class "error" to the id "address_msg" for the CSS.
					valid = false;
				}


				var postal_code = document.getElementById("postal_code").value;
				var postal_code_msg = document.getElementById("postal_code_msg");
			
				if (number_check(postal_code)) {
					postal_code_msg.innerHTML = "";
				} else { 
					postal_code_msg.innerHTML = "Please enter a valid postal code";
					postal_code_msg.className = "error";
					valid  = false;
				}
		
				var delivery = document.getElementById("delivery").value;
				var delivery_msg = document.getElementById("delivery_msg");
			
				if (select_check(delivery)) {
					delivery_msg.innerHTML = "";
				} else { 
					delivery_msg.innerHTML = "Please select an option";
					delivery_msg.className = "error";
					valid  = false;
				}
					 
				return valid;
			} // end onclick function
			
		} // End contact_submit
		
	} // end init function	

	//regular expressions functions

	function first_name_check(first_name) {
		var r = /[a-zA-Z]{2,}/;
		return r.test(first_name);
	}
	
	function number_check(number) {
		var r = /[0-9]{4,}/;
		return r.test(number);
	}
	
	function family_name_check(family_name) {
		var r = /[a-zA-Z]{2,}/;
		return r.test(family_name);
	}

	function message_check(message) {
		var r = /[a-zA-Z]{2,}/;
		return r.test(message);
	}

	function email_check(email) {
		var r = /^[a-zA-Z0-9_\-\.]+@[a-z\.\-]+\.([a-z]{2,6})$/i;
		return r.test(email);
	}
	
	function select_check(select) {
		if(select == 'chooseone') {
			return false;
		}
		return true;
	}
	
})(); // execute the anon fuction - () runs the function