jQuery(function() {
  jQuery('.error').hide();
  jQuery(".contactButton").click(function() {
		// validate and process form
		// first hide any error messages
    jQuery('.error').hide();
		
	  var name = jQuery("input#contactName").val();
		if (name == "") {
      jQuery("span#nameError").show();
      jQuery("input#contactName").focus();
      return false;
    }
	  var email = jQuery("input#contactEmail").val();
	  if (email == "") {
      jQuery("span#emailError").show();
      jQuery("input#contactEmail").focus();
      return false;
    }
	
	var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
	if(!emailReg.test(email)) {
	jQuery("span#emailError2").show();
    jQuery("input#contactEmail").focus();
      return false;
	}
	
	  var msg = jQuery("textarea#contactMessage").val();
	  if (msg == "") {
	  jQuery("span#messageError").show();
	  jQuery("textarea#contactMessage").focus();
	  return false;
    }
		
		var dataString = 'name='+ name + '&email=' + email + '&msg=' + msg;
		//alert (dataString);return false;
		
	  jQuery.ajax({
      type: "POST",
      url: "php/mail.php",
      data: dataString,
      success: function() {
        jQuery('#contactForm').html("<div id='successMessage' style='margin-top:15px;'></div>");
        jQuery('#successMessage').html("<img src='images/ok.png' alt='' style='float:left; margin-left:90px;'/><strong style='float:left; padding-top:8px; font-size:18px; font-weight:400; '>Thank you for contacting us!</strong>")
        .append("<p style='text-align:center; float:left; padding-left:20px; padding-right:30px; padding-top:20px;'>Thank you for contacting us. We will be in touch soon. We don't work during jupiters moon rise so don't flood our mail boxes! You can edit this text yourself directly in contact.js! Simple. Really simple! This form has field validation and it works like a charm! </p>")
        .hide()
        .fadeIn(1500, function() {
          jQuery('#successMessage');
        });
      }
     });
    return false;
	});
});