$(document).ready(function() {
  // Load feedback form on button click
  $('#feedback').click(function(e) {
    e.preventDefault();

    // Create feedback content section w/ loading spinner
    var feedback = $('<div id="feedback-content" class="center"> \
      <img src="Library/images/loadingCircle.gif" /> \
    </div>');
    feedback.appendTo($('body'));

    // Retrieve feedback form markup via ajax,
    // replace content, and attach behaviors
    $.get($(this).attr('href'), {}, function(data) {
      feedback.find('img').fadeOut(500, function() {
        feedback.empty();
        feedback.removeClass('center');
        feedback.append($(data)).show();

        // Link submits form via ajax:
        // replace button w/ spinner, POST,
        // and display confirmation
        feedback.find('.btn').click(function(e) {
          e.preventDefault();

          var form = feedback.find('form');
          var submit = form.find('.submit');
          submit.html('<img src="Library/images/loadingCircle.gif" />');

          $.post(form.attr('action'),
            form.serialize(),
            function(data) {
              submit.find('img').fadeOut(500, function() {
                $(this).remove();

                submit.append('<p class="success">Message sent. Thank you for your feedback!</p>');
                feedback.delay(2500).fadeOut(500, function() { $(this).remove(); });
              });
          });
        });

        // Remove form on cancel
        feedback.find('.cancel').click(function(e) {
          e.preventDefault();
          feedback.fadeOut(500, function() { $(this).remove(); });
        });
      });
    });
  });
});