ExpressionEngine AJAX Comment Form

// Based on: http://gristmill.github.com/jquery-popbox/
//
// Special thanks to Tom Davies
// http://expressionengine.stackexchange.com/questions/1378/how-to-create-front-end-ajax-handler-which-validates-and-adds-comment-to-content
//
$(function() {

    function hideBox(speed) {
        $('.box').fadeOut(speed || 'fast');
        $('.popbox-button').removeClass('active');
    }

    function showBox(pop) {
        pop = $(pop);
        box = pop.parent().find('.box');

        box.find('.arrow, .arrow-border').css({
            'left': 45
        });

        if (box.css('display') !== 'block') {
            pop.addClass('active');
            box.css({
                'display': 'block',
                'top': 5
            });
        }
        else
            hideBox();
    }

    var actionUrl = $('#leave-comment-placeholder').data('action');
    var form;

    // Hide comment popup box when escape key is pressed or document
    // was clicked somewhere.
    $(document).bind('keyup', function(event) {
        if (event.keyCode == 27)
            hideBox();
    });
    $(document).bind('click', function(event){
        if (!$(event.target).closest('.popbox').length)
            hideBox();
    });

    // Replace placeholder element with "Leave Comment" button
    $('#leave-comment-placeholder').replaceWith(
        '<div id="comment-popbox" class="popbox">' +
            '<button id="leave-comment-button" class="ui-pink-button popbox-button">Leave Comment</button>' +
            '<div class="collapse">' +
                '<div class="box">' +
                    '<div class="arrow"></div>' +
                    '<div class="arrow-border"></div>' +
                    '<div class="message-body"></div>' +
                    '<div class="popbox-content"></div>' +
                '</div>' +
            '</div>' +
        '</div>'
    );

    // Occurs when comment form has been submitted successfully
    function onCommentFormSuccess(responseHtml) {
        // Was an error message returned?
        if (responseHtml.match(/<title>Error<\/title>/)) {
            // Add error prompt.
            responseHtml = responseHtml.match(/<div[^]+div>/)[0];
            if (!responseHtml)
                responseHtml = '<div class="message-body">An unknown error occurred when submitting comment.</div>';

            responseHtml = $(responseHtml);
            responseHtml.find('p.link').remove();
            $('#comment-popbox .message-body')
                .replaceWith(responseHtml);
        }
        else {
            // Comment was posted, display success message!
            $('#comment-popbox .message-body')
                .html('<h2>Thank you!</h3><p>Your comment has been submitted for moderation.</p>');

            // Reload comment submission form next time button is clicked!
            form.remove();
            form = null;

            setTimeout(function() {
                hideBox('slow');
            }, 2000);
        }
    }

    // Occurs when comment form has been loaded
    function onCommentFormLoaded(formHtml) {
        var popboxContent = $('#comment-popbox .popbox-content');
        popboxContent.html(formHtml);
        form = popboxContent.find('form');
        form.submit(function(e) {
            e.preventDefault();
            e.stopPropagation();

            $.ajax({
                type: 'POST',
                url: form.attr('action'),
                data: form.serialize(),
                success: onCommentFormSuccess
            });
        });
        showBox('#leave-comment-button');
    }

    $('#leave-comment-button')
        .click(function() {
            // Do not reload comment form if it has already been loaded!
            if (!form) {
                // Make button stick down
                $(this).addClass('active');
                // Remove previous status message
                $('#comment-popbox .message-body').html('');

                // Load comment form using AJAX
                $.ajax({
                    url: actionUrl,
                    success: onCommentFormLoaded
                })
            }
            else {
                showBox($(this));
            }
        })

});