$(document).ready(function() {

	$('.error').hide();

	$(".submitbutton").click(function() {
		// validate on clicking submit button
		// first hide error messages
		$('.error').hide();
		
		// change input elements background color to white 
		$("input.input").css({backgroundColor:"#ffffff"});

		// check if the value for name is not empty or not equal to default value
		var name = $("input#name").val();
		if (name == ""  || name =="Name") {
			$("label#name_error").fadeIn('slow');
			$("input#name").animate({ backgroundColor: '#ffffbb'}, 1000);
			$("input#name").focus();
			return false;
		}

		// check if the value for email is not empty or not equal to default value
		var email = $("input#email").val();	
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;	
		
		if (email == "" || email =="Email") {
			$("label#email_error").fadeIn('slow');
			$("input#email").animate({ backgroundColor: '#ffffbb'}, 400);
			$("input#email").focus();
			return false;
		}
		// test if the value for email is a valid email address
		else if(!emailReg.test(email)) {
			$("label#email_error2").fadeIn('slow');
			$("input#email").animate({ backgroundColor: '#ffffbb'}, 400);
			$("input#email").focus();
    		return false;
		}
		
		// check if the value for subject is not empty or not equal to default value
		var subject = $("input#subject").val();
		if (subject == "" || subject =="Subject") {
		    $("label#subject_error").fadeIn('slow');
		    $("input#subject").animate({ backgroundColor: '#ffffbb'}, 400);
		    $("input#subject").focus();
			return false;
		}
		
		// check if the value for message is not empty or not equal to default value
		var message = $("textarea#message").val();
		if (message == "" || message =="Message") {
		    $("label#message_error").fadeIn('slow');
		    $("textarea#message").animate({ backgroundColor: '#ffffbb'}, 400);
			$("textarea#message").focus();
			return false;
		}		
	
		var str = $("form").serialize();

		$.ajax({
			type: "POST",
			url: "contact.php",
			data: str,
			
			success: function(msg){
				$("#note").ajaxComplete(function(event, request, settings){
					$("#note").show();
					if(msg == 'OK'){
						result = '<span class="notification_ok">Your message has been sent. We will be in touch soon.</span>';
						$("#fields").hide();
					} 
					else {
						result = msg;
					}
					$(this).html(result);
				});
			}
		});
		return false;
	
	});
});