$(document).ready(function() {
  var form_elements = $('input[type="text"], textarea');
  form_elements.focus(function() {
    $(this).css('background-color', '#fbffda');
  });
  form_elements.blur(function() {
    $(this).css('background-color', '');
  });

  $('#contact_form').submit(function() {
    // show sending message
    var contact = $('#contact');
    contact.css('position', 'relative');
    var html = '<div id="sending_message" style="' +
    'width: ' + contact.width() + 'px; ' +
    'height: ' + contact.height() + 'px; ' +
    'position: absolute; top: 0;">' +
    '<p style="line-height: ' + contact.height() + 'px; text-align: center; margin: 0; padding: 0;">' +
    'Sending Message...' +
    '</p>' +
    '</div>';
    contact.append(html);

    // make XHR request
    $.post(this.action, $(this).serialize(), function(data, status, request) {
      // show the thank you response and clean up
      $("#sending_message").remove();
      var response = '<div id="message_response">Your message was sent. Thanks for contacting me!</div>';
      $('#contact').prepend(response);
      setTimeout(function() {
        $('#message_response').hide('slow', function() {
          $(this).remove();
        });
      }, 3000);
    });

    return false;
  });
});