(function($) {

  $.fn.inline_edit = function(updater, callback) {

    return this.each(function() {
      var $this  = $(this);
      var viewer = $this.find(".view");
      var editor = $this.find(".edit");
      var edit_field  = editor.find(".edit-field");
      var cancel_edit = editor.find("a.cancel-edit");
      var commit_edit = editor.find("a.commit-edit");
      var commit_form = editor.find("form");

      viewer.bind("mouseover mouseleave", function(e) {
        if (e.type == "mouseover") {
          $(this).addClass("edit-on-click");
        } else {
          $(this).removeClass("edit-on-click");
        }

      });

      viewer.click(function(e) {
        e.preventDefault();
        viewer.hide();
        editor.show().find(".edit-field").eq(0).focus();
      });

      cancel_edit.click(function(e) {
        e.preventDefault();
        editor.hide();
        viewer.show();
      });

      commit_edit.click(function() {
        editor.hide();
        updater.show().insertBefore(viewer);

        $.post(
          commit_form.attr("action"),
          commit_form.serialize(),
          function(data, status) {
            callback(viewer, data, status);
            updater.hide();
            viewer.show();
          }
        );
      });
    });

  };
})(jQuery);