$(function() {
    // Get the form.
    var form = $('#email-form');

    // Get the messages div.
    var formMessages = $('#form-messages');

    // Set up an event listener for the contact form.
	$(form).submit(function(event) {
	    // Stop the browser from submitting the form.
	    event.preventDefault();

	    // Serialize the form data.
		var formData = $(form).serialize();

		// Submit the form using AJAX.
		$.ajax({
		    type: 'POST',
		    url: $(form).attr('action'),
		    data: formData
		}).done(function(response) {
		    // Make sure that the formMessages div has the 'success' class.
		    $(formMessages).removeClass('error-wrapper');
		    $(formMessages).removeClass('w-form-fail');
		    $(formMessages).addClass('success-wrapper');
		    $(formMessages).addClass('w-form-done');

		    // Set the message text.
		    $(formMessages).html('<p class="success-message">' + response + '</p>');

		    // Clear the form.
		    $('#name').val('');
		    $('#email').val('');
		    $('#message').val('');
		    $(form).hide();
		    $(formMessages).show();
		}).fail(function(data) {
		    // Make sure that the formMessages div has the 'error' class.
		    $(formMessages).removeClass('success-wrapper');
		    $(formMessages).removeClass('w-form-done');
		    $(formMessages).addClass('error-wrapper');
		    $(formMessages).addClass('w-form-fail');

		    // Set the message text.
		    if (data.responseText !== '') {
		        $(formMessages).text(data.responseText);
		    } else {
		        $(formMessages).html('<p class="error-message">Oops! Something went wrong while submitting the form :(</p>');
		    }
		    $(formMessages).show();
		});
	});
});