$(function() {
  $('.blank').hide(); // this is a hidden field to help prevent spam; only bots will use this
  $('.error').hide(); // start with error messages hidden
  $( "select#who_to" ).focus(); // put the focus on who_to
  
  // gives a background color to the fields when they're focused
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#FDEBB4"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });
  $('textarea.text-input').css({backgroundColor:"#FFFFFF"});
  $('textarea.text-input').focus(function(){
    $(this).css({backgroundColor:"#FDEBB4"});
  });
  $('textarea.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });

  // validate and process form
  $(".submit_button").click(function() {
		$('.error').hide(); // hide the error messages initially
		
	  // if required fields are empty, display the error message and put focus on that field
	  var who_to = $("select#who_to").val();
		if (who_to == "") {
      $("label#who_to_error").show();
      $("select#who_to").focus();
      return false;
    }

		var from_email = $("input#from_email").val();
		if (from_email == "") {
      $("label#from_email_error").show();
      $("input#from_email").focus();
      return false;
    }

		var comment = $("textarea#comment").val();
		if (comment == "") {
      $("label#comment_error").show();
      $("textarea#comment").focus();
      return false;
    }
		
		// following two aren't required, so no functionality, just create a variable
		var from_name = $("input#from_name").val();
		var blank = $("input#blank").val(); // this is the spam stopper field

		// create a data string of all the info from the variables
		var dataString = 'who_to='+ who_to + '&from_email=' + from_email + '&from_name=' + from_name +
		  '&comment=' + comment + '&blank=' + blank;

    // following line is for error checking; uncomment if you need it for debugging
		// alert (dataString);return false;
		
		// send dataString via POST to contact.php
		$.ajax({
      type: "POST",
      url: "/scripts/contact.php",
      data: dataString,
      // upon successful completion of contact.php, hide 'email_form' and fadein 'message'
      // the image appears after the rest is faded in, because that's cool
      success: function() {
        $("#email_form").hide();
        $("#message").fadeIn(900, function () {
          $("#message").append("<img id=\"checkmark\" src=\"/images/check.png\" />");
        }); // end of fadeIn function
      } // end of success function
     }); // end of ajax
    return false; // required so the page doesn't reload or refresh
	});
});