$.fn.popup = function(options) {
    var defaults = {
        width: 500,
        height: 410,
        title: $(this).attr('title'),
        submitForm: 'form',
        closeButton: 'input[type="button"]',
        url: undefined,
        dataType: 'json'
    }
    var settings = $.extend({}, defaults, options);
    var $validator;

    $(this).click(function() {
        settings.url = (settings.url == undefined) ? this.href : settings.url;

        $('<div id="modal" class="ui-widget"><div class="loading"></div></div>').dialog({
            title: settings.title,
            width: settings.width,
            height: settings.height,
            resizable: false,
            modal: true,
            close: function() {
                $(this).dialog('destroy').remove();
            }
        });

        $.ajax({
            url: settings.url,
            success: invokeDialog
        });
        return false;
    });

    $.fn.disableForm = function() {
        $(this).find('input,textarea').attr('disabled', 'disabled');
        $(this).find('input[type=submit]').after('<div class="form-loading"></div>');
        return this;
    };

    $.fn.enableForm = function(form) {
        $(this).find('input,textarea').removeAttr('disabled');
        $(this).find('.form-loading').remove();
        return this;
    };


    function invokeDialog(response) {
        $validator = $('#modal').html(response)
            .find(settings.closeButton).click(function() {
                $('#modal').dialog('close');
            }).end()
            .find(settings.submitForm).submit(function() {
                return false;
            }).validate({
                submitHandler: function(form) {
                    var $form = $(form);
                    $form.ajaxSubmit({
                        url: settings.url,
                        type: 'POST',
                        success: handleResponse,
                        dataType: settings.dataType
                    });
                    $form.disableForm();
                }
            });
    }

    function handleResponse(data, status, $form) {
        if (data.success == 0) {
            if (data.captcha) {
                $('img.captcha').replaceWith('<img class="captcha" alt="captcha" src="'+data.captcha.url+'" />');
                $('#id_captcha_0').val(data.captcha.hashkey);
            }
            if (data.errors) {
                if (data.errors.__all__) {
                    fireErrorModal(data.errors.__all__);
                } else {
                    $validator.showErrors(data.errors);
                }
            } else if (data.message) {
                fireErrorModal(data.message);
            }
            $form.enableForm();
        } else {
            if (data.message) {
                $.gritter.add({
                    title: settings.title,
                    text: data.message
                });
            }
            $('#modal').dialog('close');
        }
    }

    function fireErrorModal(message) {
        $('body').append('<div style="display:none;" id="error_modal">'+message+'</div>')
                 .find('#error_modal').dialog({
                      title: settings.title,
                      resizable: false,
                      buttons: {"OK": function() { $(this).dialog('close'); } },
                      modal: true,
                      close: function() {
                          $(this).remove();
                      }
                  });
    }
    return this;
};

