$(document).ready(function() {
	//alert("jQuery ready to do your bidding.");
	processForm();
});

// Declare initial variables
var name;
var email;
var subject;
var message;
var challengeField;
var responseField;
// Put all the form data values into a single variable which we will use to send it to the server via Ajax
// Remember the proper format to send the strings (check jQuery API for ajax call)
var dataString;

// Begins client side validation of the form, initially it validates the form when the input
// box loses focus and adds a nice hint for the user to correct or fill in the input box properly.
// When the input field validates correctly it adds a green check mark, the ajax call will only
// be made if all three required fields are filled in with three check marks added to the form
// container.
function processForm() {
	
	/*NAME*/
	// Check the name entered
	$('#formContainer #name:input').blur(function() {
		if ($(this).val().length == 0) {
			$('.formName label').append('<span class="error">What is your name?</span>');
			$('.formName').removeClass('focused');
		} else {
			name = $(this).val();
			// Show a green check mark if the field is filled in correctly
			$(this).after('<span class="checkMark"></span>');
			$('.formName').removeClass('focused');
		}
	});
	
	// Dont forget to remove the class of error for name
	$('#formContainer #name:input').focus(function() {
		$(this).removeClass('checkMark').next('span').remove();
		$('.formName label span').remove();
		$('.formName').addClass('focused');
	});
	
	/*EMAIL*/
	// Check the email address
	// This will be done via regular expression
	var checkEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)$/;
	var emailAddressInput = $('#formContainer #email:input');
	
	emailAddressInput.blur(function() {
		if (!checkEmail.test(emailAddressInput.val())) {
			$('.formEmail label').append('<span class="error">I need a valid email.</span>');
			$('.formEmail').removeClass('focused');
		} else {
			email = $(this).val();
			// Show a green check mark if the field is filled in correctly
			$(this).after('<span class="checkMark"></span>');
			$('.formEmail').removeClass('focused');
		}
	});
	
	emailAddressInput.focus(function() {
		$(this).removeClass('checkMark').next('span').remove();
		$('.formEmail label span').remove();
		$('.formEmail').addClass('focused');
	});
	
	/*SUBJECT*/
	// Subject is optional but there will be a default set if the user doesn't type one in the field
	// This field will be set via our PHP script when we test if its empty or not
	$('#formContainer #subject:input').blur(function() {
		$('.formSubject').removeClass('focused');
		subject = $(this).val();
	});
	//subject = $('#subject').val();
	// Remove the focused class for our subject
	$('#formContainer #subject:input').focus(function() {
		$('.formSubject').addClass('focused');
	});
	
	/*TEXT AREA*/
	// Check the text area
	$('#formContainer #message:input').blur(function() {
		if ($(this).val().length == 0) {
			$('.formMessage label').append('<span class="error">Don&#39;t forget the message.</span>');
			$('.formMessage').removeClass('focused');
		} else {
			message = $(this).val();
			// Show a green check mark if the field is filled in correctly
			$(this).after('<span class="checkMark"></span>');
			$('.formMessage').removeClass('focused');
		}
	});
	
	// Dont forget to remove the class of error for name
	$('#formContainer #message:input').focus(function() {
		$(this).removeClass('checkMark').next('span').remove();
		$('.formMessage label span').remove();
		$('.formMessage').addClass('focused');
	});
	
	/*CAPTCHA IMAGE VERIFICATION*/
	$('#formContainer #recaptcha_response_field').blur(function() {
		if ($(this).val().length == 0) {
			$('.formVerification label').append('<span class="error">Verify that your human.</span>');
			$('.formVerification').removeClass('focused');
			console.log("Please fill image verification box...");
		} else {
			responseField = $(this).val();
			challengeField = $('#formContainer #recaptcha_challenge_field').val();
			$('.formVerification label').after('<span class="checkMark"></span>');
			$('.formVerification').removeClass('focused');
			console.log('Your response field is ' + responseField + ' your challenge field is: ' + challengeField);
		}
	});
	
	$('#formContainer #recaptcha_response_field').focus(function() {
		$(this).removeClass('checkMark').next('span').remove();
		$('.formVerification label span').remove();
		$('.formVerification').addClass('focused');
	});

	// Submit our form only when all fields are validated and there are three green check marks displayed
	//***DOUBLE CHECK IF THE e.preventDefault() MAKES A DIFFERENCE NOW THAT THE FORM WORKS CORRECTLY***
	// The e.preventDefault() prevents the submit button from doing what it normally does, in this case it calls
	// on the default method and action we have set for our form. By using e.preventDefault() we prevent this
	// from happening because we are using AJAX, we don't want our page to change to sendemail.php with
	// our thank you message, we want the message to be sent from our script. Because this is happening, we
	// need to clear our fields once it has successfully been submitted or we can do this by deleting the action
	// attribute from our form. SOMETHING TO KEEP IN MIND!
	$('#contactForm').submit(function(e) {
		// If there are three check marks loaded then submit the form
		if ($('.checkMark').length == 4) {
			/*IMPORTANT*/
			// Make sure for the future you always check and make sure the string being sent through $.ajax data is in the
			// correct format. This was the main issue why your emails were coming out blank and why you spent
			// two hours trying to figure out why your script wasn't working. Also keep in mind to use the ampersand
			// and not the dollar sign like you were in your key=value1
			dataString = 'name=' + name + '&email=' + email + '&subject=' + subject + '&message=' + message + '&recaptcha_challenge_field=' + challengeField + '&recaptcha_response_field=' + responseField;
			/*alert(dataString);
			return false;*/
			$.ajax({
				type: 'post',
				url: 'php/sendemail.php',
				data: dataString,
				beforeSend: function() {
					/*$('<div id="sendIndicator"></div>').appendTo('.formButton')
					.hide()
					.fadeTo('slow', 1);*/
					// Put the ajax loading animation inside the button tag
					$('#cButton').html('Sending');
					$('#cButton').append('<div id="sendIndicator"></div>')
					.hide()
					.fadeTo('slow', 1);
				},
				success: function(data) {
					$('#ajaxEmail').html(data).hide().fadeTo('slow', 1);
				},
				complete: function() {
					$('#sendIndicator').fadeOut('slow', function() {
						$(this).remove();
					});
					$('#cButton').html('Email Me!');
					// Clear the form
					$('#formContainer').find(':input').val('');
					// Select all the green check marks and remove them
					$('.checkMark').removeClass('checkMark');
					// Wait a while before we remove the form confirmation message and remove it
					$('#ajaxEmail').delay(9000).fadeOut('slow', function() {
						$('#mailIcon').remove();
						$('#mailText').remove();
					});
				}
			});
		} else {
			alert("Please fill in the required fields.");
			// Hightlight/show all the required field
			/*$('.formName label').append('<span class="error">What is your name?</span>');
			$('.formEmail label').append('<span class="error">I need a valid email.</span>');
			$('.formMessage label').append('<span class="error">Don&#39;t forget the message.</span>');*/
			return false;
		}
	e.preventDefault();
	});
}