best_in_place 2.1.0 → 3.0.0.rc1

data/best_in_place.gemspec

@@ -1,6 +1,6 @@
 # -*- encoding: utf-8 -*-
 $:.push File.expand_path("../lib", __FILE__)
-require "best_in_place/version"
+require 'best_in_place/version'
 
 Gem::Specification.new do |s|
   s.name        = "best_in_place"
@@ -9,20 +9,22 @@ Gem::Specification.new do |s|
   s.authors     = ["Bernat Farrero"]
   s.email       = ["bernat@itnig.net"]
   s.homepage    = "http://github.com/bernat/best_in_place"
-  s.summary     = %q{It makes any field in place editable by clicking on it, it works for inputs, textareas, select dropdowns and checkboxes}
-  s.description = %q{BestInPlace is a jQuery script and a Rails 3 helper that provide the method best_in_place to display any object field easily editable for the user by just clicking on it. It supports input data, text data, boolean data and custom dropdown data. It works with RESTful controllers.}
-
-  s.rubyforge_project = "best_in_place"
+  s.summary     = <<SUM
+  It makes any field in place editable by clicking on it, it works for inputs,
+  textareas, select dropdowns and checkboxes
+SUM
+  s.description = <<DESC
+  BestInPlace is a jQuery script and a Rails helper that provide the method best_in_place to display
+  any object field easily editable for the user by just clicking on it. It supports input data,
+  text data, boolean data and custom dropdown data. It works with RESTful controllers.
+DESC
 
   s.files         = `git ls-files`.split("\n")
-  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.test_files    = `git ls-files -- {spec}/*`.split("\n")
   s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
   s.require_paths = ["lib"]
 
-  s.add_dependency "rails", "~> 3.1"
-  s.add_dependency "jquery-rails"
+  s.add_runtime_dependency 'actionpack', '>= 3.2'
+  s.add_runtime_dependency 'railties', '>= 3.2'
 
-  s.add_development_dependency "rspec-rails", "~> 2.8.0"
-  s.add_development_dependency "nokogiri"
-  s.add_development_dependency "capybara", "~> 1.1.2"
 end

data/config.ru

@@ -0,0 +1,7 @@
+require 'rubygems'
+require 'bundler'
+
+Bundler.require :default, :development
+
+Combustion.initialize!
+run Combustion::Application

data/gemfiles/rails_3.2.gemfile

@@ -0,0 +1,24 @@
+# This file was generated by Appraisal
+
+source "http://rubygems.org"
+source "https://rails-assets.org"
+
+gem "rails-assets-jquery", "1.11.1"
+gem "rails-assets-jquery-ui", "1.10.4"
+gem "rdiscount"
+gem "rspec-rails"
+gem "nokogiri"
+gem "combustion"
+gem "sprockets-rails"
+gem "capybara"
+gem "selenium-webdriver"
+gem "sqlite3"
+gem "appraisal"
+gem "rails", "3.2.19"
+gem "strong_parameters"
+
+platforms :mri_21 do
+  gem "byebug"
+end
+
+gemspec :path => "../"

data/gemfiles/rails_4.0.gemfile

@@ -0,0 +1,23 @@
+# This file was generated by Appraisal
+
+source "http://rubygems.org"
+source "https://rails-assets.org"
+
+gem "rails-assets-jquery", "1.11.1"
+gem "rails-assets-jquery-ui", "1.10.4"
+gem "rdiscount"
+gem "rspec-rails"
+gem "nokogiri"
+gem "combustion"
+gem "sprockets-rails"
+gem "capybara"
+gem "selenium-webdriver"
+gem "sqlite3"
+gem "appraisal"
+gem "rails", "~> 4.0.0"
+
+platforms :mri_21 do
+  gem "byebug"
+end
+
+gemspec :path => "../"

data/gemfiles/rails_4.1.gemfile

@@ -0,0 +1,23 @@
+# This file was generated by Appraisal
+
+source "http://rubygems.org"
+source "https://rails-assets.org"
+
+gem "rails-assets-jquery", "1.11.1"
+gem "rails-assets-jquery-ui", "1.10.4"
+gem "rdiscount"
+gem "rspec-rails"
+gem "nokogiri"
+gem "combustion"
+gem "sprockets-rails"
+gem "capybara"
+gem "selenium-webdriver"
+gem "sqlite3"
+gem "appraisal"
+gem "rails", "~> 4.1.0"
+
+platforms :mri_21 do
+  gem "byebug"
+end
+
+gemspec :path => "../"

data/gemfiles/rails_edge.gemfile

@@ -0,0 +1,25 @@
+# This file was generated by Appraisal
+
+source "http://rubygems.org"
+source "https://rails-assets.org"
+
+gem "rails-assets-jquery", "1.11.1"
+gem "rails-assets-jquery-ui", "1.10.4"
+gem "rdiscount"
+gem "rspec-rails"
+gem "nokogiri"
+gem "combustion"
+gem "sprockets-rails"
+gem "capybara"
+gem "selenium-webdriver"
+gem "sqlite3"
+gem "appraisal"
+gem "rails", :github => "rails/rails"
+gem "arel", :github => "rails/arel"
+gem "minitest"
+
+platforms :mri_21 do
+  gem "byebug"
+end
+
+gemspec :path => "../"

data/lib/assets/javascripts/best_in_place.jquery-ui.js

@@ -0,0 +1,57 @@
+/*
+ * BestInPlace 3.0.0.alpha (2014)
+ *
+ * Depends:
+ *	best_in_place.js
+ *	jquery.ui.datepicker.js
+ */
+/*global BestInPlaceEditor */
+BestInPlaceEditor.forms.date = {
+    activateForm: function () {
+        'use strict';
+        var that = this,
+            output = jQuery(document.createElement('form'))
+                .addClass('form_in_place')
+                .attr('action', 'javascript:void(0);')
+                .attr('style', 'display:inline'),
+            input_elt = jQuery(document.createElement('input'))
+                .attr('type', 'text')
+                .attr('name', this.attributeName)
+                .attr('value', this.sanitizeValue(this.display_value));
+        if (this.inner_class !== null) {
+            input_elt.addClass(this.inner_class);
+        }
+        output.append(input_elt);
+
+        this.element.html(output);
+        this.setHtmlAttributes();
+        this.element.find('input')[0].select();
+        this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.input.submitHandler);
+        this.element.find("input").bind('keyup', {editor: this}, BestInPlaceEditor.forms.input.keyupHandler);
+
+        this.element.find('input')
+            .datepicker({
+                onClose: function () {
+                    that.update();
+                }
+            })
+            .datepicker('show');
+    },
+
+    getValue: function () {
+        'use strict';
+        return this.sanitizeValue(this.element.find("input").val());
+    },
+
+    submitHandler: function (event) {
+        'use strict';
+        event.data.editor.update();
+    },
+
+    keyupHandler: function (event) {
+        'use strict';
+        if (event.keyCode === 27) {
+            event.data.editor.abort();
+        }
+    }
+}

data/lib/assets/javascripts/best_in_place.js

@@ -1,740 +1,641 @@
 /*
-        BestInPlace (for jQuery)
-        version: 0.1.0 (01/01/2011)
-        @requires jQuery >= v1.4
-        @requires jQuery.purr to display pop-up windows
-
-        By Bernat Farrero based on the work of Jan Varwig.
-        Examples at http://bernatfarrero.com
-
-        Licensed under the MIT:
-          http://www.opensource.org/licenses/mit-license.php
-
-        Usage:
-
-        Attention.
-        The format of the JSON object given to the select inputs is the following:
-        [["key", "value"],["key", "value"]]
-        The format of the JSON object given to the checkbox inputs is the following:
-        ["falseValue", "trueValue"]
-*/
+ * BestInPlace (for jQuery)
+ * version: 3.0.0.alpha (2014)
+ *
+ * By Bernat Farrero based on the work of Jan Varwig.
+ * Examples at http://bernatfarrero.com
+ *
+ * Licensed under the MIT:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * @requires jQuery
+ *
+ * Usage:
+ *
+ * Attention.
+ * The format of the JSON object given to the select inputs is the following:
+ * [["key", "value"],["key", "value"]]
+ * The format of the JSON object given to the checkbox inputs is the following:
+ * ["falseValue", "trueValue"]
+
+ */
+//= require jquery.autosize
 
 function BestInPlaceEditor(e) {
-  this.element = e;
-  this.initOptions();
-  this.bindForm();
-  this.initNil();
-  jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
+    'use strict';
+    this.element = e;
+    this.initOptions();
+    this.bindForm();
+    this.initPlaceHolder();
+    jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
 }
 
 BestInPlaceEditor.prototype = {
-  // Public Interface Functions //////////////////////////////////////////////
-
-  activate : function() {
-    var to_display = "";
-    if (this.isNil()) {
-      to_display = "";
-    }
-    else if (this.original_content) {
-      to_display = this.original_content;
-    }
-    else {
-      if (this.sanitize) {
-        to_display = this.element.text();
-      } else {
-        to_display = this.element.html();
-      }
-    }
-
-    this.oldValue = this.isNil() ? "" : this.element.html();
-    this.display_value = to_display;
-    jQuery(this.activator).unbind("click", this.clickHandler);
-    this.activateForm();
-    this.element.trigger(jQuery.Event("best_in_place:activate"));
-  },
-
-  abort : function() {
-    this.activateText(this.oldValue);
-    jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
-    this.element.trigger(jQuery.Event("best_in_place:abort"));
-    this.element.trigger(jQuery.Event("best_in_place:deactivate"));
-  },
-
-  abortIfConfirm : function () {
-    if (!this.useConfirm) {
-      this.abort();
-      return;
-    }
-
-    if (confirm("Are you sure you want to discard your changes?")) {
-      this.abort();
-    }
-  },
-
-  update : function() {
-    var editor = this;
-    if (this.formType in {"input":1, "textarea":1} && this.getValue() == this.oldValue)
-    { // Avoid request if no change is made
-      this.abort();
-      return true;
-    }
-    editor.ajax({
-      "type"       : "post",
-      "dataType"   : "text",
-      "data"       : editor.requestData(),
-      "success"    : function(data){ editor.loadSuccessCallback(data); },
-      "error"      : function(request, error){ editor.loadErrorCallback(request, error); }
-    });
-    if (this.formType == "select") {
-      var value = this.getValue();
-      this.previousCollectionValue = value;
+    // Public Interface Functions //////////////////////////////////////////////
+
+    activate: function () {
+        'use strict';
+        var to_display;
+        if (this.isPlaceHolder()) {
+            to_display = "";
+        } else if (this.original_content) {
+            to_display = this.original_content;
+        } else {
+            switch (this.formType) {
+                case 'input':
+                case 'textarea':
+                    if (this.display_raw) {
+                        to_display = this.element.html().replace(/&/gi, '&');
+                    }
+                    else {
+                        var value = this.element.data('bipValue');
+                        if (typeof value === 'undefined') {
+                            to_display = '';
+                        } else if (typeof value === 'string') {
+                            to_display = this.element.data('bipValue').replace(/&/gi, '&');
+                        } else {
+                            to_display = this.element.data('bipValue');
+                        }
+                    }
+                    break;
+                case 'select':
+                    to_display = this.element.html();
 
-      jQuery.each(this.values, function(i, v) {
-        if (value == v[0]) {
-          editor.element.html(v[1]);
+            }
         }
-      }
-    );
-    } else if (this.formType == "checkbox") {
-      editor.element.html(this.getValue() ? this.values[1] : this.values[0]);
-    } else {
-      if (this.getValue() !== "") {
-        editor.element.text(this.getValue());
-      } else {
-        editor.element.html(this.nil);
-      }
-    }
-    editor.element.trigger(jQuery.Event("best_in_place:update"));
-  },
-
-  activateForm : function() {
-    alert("The form was not properly initialized. activateForm is unbound");
-  },
-
-  activateText : function(value){
-    this.element.html(value);
-    if(this.isNil()) this.element.html(this.nil);
-  },
-
-  // Helper Functions ////////////////////////////////////////////////////////
-
-  initOptions : function() {
-    // Try parent supplied info
-    var self = this;
-    self.element.parents().each(function(){
-      $parent = jQuery(this);
-      self.url               = self.url               || $parent.attr("data-url");
-      self.collection        = self.collection        || $parent.attr("data-collection");
-      self.formType          = self.formType          || $parent.attr("data-type");
-      self.objectName        = self.objectName        || $parent.attr("data-object");
-      self.attributeName     = self.attributeName     || $parent.attr("data-attribute");
-      self.activator         = self.activator         || $parent.attr("data-activator");
-      self.okButton          = self.okButton          || $parent.attr("data-ok-button");
-      self.okButtonClass     = self.okButtonClass     || $parent.attr("data-ok-button-class");
-      self.cancelButton      = self.cancelButton      || $parent.attr("data-cancel-button");
-      self.cancelButtonClass = self.cancelButtonClass || $parent.attr("data-cancel-button-class");
-      self.nil               = self.nil               || $parent.attr("data-nil");
-      self.inner_class       = self.inner_class       || $parent.attr("data-inner-class");
-      self.html_attrs        = self.html_attrs        || $parent.attr("data-html-attrs");
-      self.original_content  = self.original_content  || $parent.attr("data-original-content");
-      self.collectionValue   = self.collectionValue   || $parent.attr("data-value");
-    });
-
-    // Try Rails-id based if parents did not explicitly supply something
-    self.element.parents().each(function(){
-      var res = this.id.match(/^(\w+)_(\d+)$/i);
-      if (res) {
-        self.objectName = self.objectName || res[1];
-      }
-    });
 
-    // Load own attributes (overrides all others)
-    self.url               = self.element.attr("data-url")                 || self.url      || document.location.pathname;
-    self.collection        = self.element.attr("data-collection")          || self.collection;
-    self.formType          = self.element.attr("data-type")                || self.formtype || "input";
-    self.objectName        = self.element.attr("data-object")              || self.objectName;
-    self.attributeName     = self.element.attr("data-attribute")           || self.attributeName;
-    self.activator         = self.element.attr("data-activator")           || self.element;
-    self.okButton          = self.element.attr("data-ok-button")           || self.okButton;
-    self.okButtonClass     = self.element.attr("data-ok-button-class")     || self.okButtonClass || "";
-    self.cancelButton      = self.element.attr("data-cancel-button")       || self.cancelButton;
-    self.cancelButtonClass = self.element.attr("data-cancel-button-class") || self.cancelButtonClass || "";
-    self.nil               = self.element.attr("data-nil")                 || self.nil      || "—";
-    self.inner_class       = self.element.attr("data-inner-class")         || self.inner_class   || null;
-    self.html_attrs        = self.element.attr("data-html-attrs")          || self.html_attrs;
-    self.original_content  = self.element.attr("data-original-content")    || self.original_content;
-    self.collectionValue   = self.element.attr("data-value")               || self.collectionValue;
-
-    if (!self.element.attr("data-sanitize")) {
-      self.sanitize = true;
-    }
-    else {
-      self.sanitize = (self.element.attr("data-sanitize") == "true");
-    }
+        this.oldValue = this.isPlaceHolder() ? "" : this.element.html();
+        this.display_value = to_display;
+        jQuery(this.activator).unbind("click", this.clickHandler);
+        this.activateForm();
+        this.element.trigger(jQuery.Event("best_in_place:activate"));
+    },
 
-    if (!self.element.attr("data-use-confirm")) {
-      self.useConfirm = true;
-    } else {
-      self.useConfirm = (self.element.attr("data-use-confirm") != "false");
-    }
+    abort: function () {
+        'use strict';
+        this.activateText(this.oldValue);
+        jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
+        this.element.trigger(jQuery.Event("best_in_place:abort"));
+        this.element.trigger(jQuery.Event("best_in_place:deactivate"));
+    },
 
-    if ((self.formType == "select" || self.formType == "checkbox") && self.collection !== null)
-    {
-      self.values = jQuery.parseJSON(self.collection);
-    }
+    abortIfConfirm: function () {
+        'use strict';
+        if (!this.useConfirm) {
+            this.abort();
+            return;
+        }
 
-  },
+        if (confirm(BestInPlaceEditor.defaults.locales[''].confirmMessage)) {
+            this.abort();
+        }
+    },
 
-  bindForm : function() {
-    this.activateForm = BestInPlaceEditor.forms[this.formType].activateForm;
-    this.getValue     = BestInPlaceEditor.forms[this.formType].getValue;
-  },
+    update: function () {
+        'use strict';
+        var editor = this,
+            value = this.getValue();
 
-  initNil: function() {
-    if (this.element.html() === "")
-    {
-      this.element.html(this.nil);
-    }
-  },
-
-  isNil: function() {
-    // TODO: It only work when form is deactivated.
-    //       Condition will fail when form is activated
-    return this.element.html() === "" || this.element.html() === this.nil;
-  },
-
-  getValue : function() {
-    alert("The form was not properly initialized. getValue is unbound");
-  },
-
-  // Trim and Strips HTML from text
-  sanitizeValue : function(s) {
-   return jQuery.trim(s);
-  },
-
-  /* Generate the data sent in the POST request */
-  requestData : function() {
-    // To prevent xss attacks, a csrf token must be defined as a meta attribute
-    csrf_token = jQuery('meta[name=csrf-token]').attr('content');
-    csrf_param = jQuery('meta[name=csrf-param]').attr('content');
-
-    var data = "_method=put";
-    data += "&" + this.objectName + '[' + this.attributeName + ']=' + encodeURIComponent(this.getValue());
-
-    if (csrf_param !== undefined && csrf_token !== undefined) {
-      data += "&" + csrf_param + "=" + encodeURIComponent(csrf_token);
-    }
-    return data;
-  },
-
-  ajax : function(options) {
-    options.url = this.url;
-    options.beforeSend = function(xhr){ xhr.setRequestHeader("Accept", "application/json"); };
-    return jQuery.ajax(options);
-  },
-
-  // Handlers ////////////////////////////////////////////////////////////////
-
-  loadSuccessCallback : function(data) {
-    data = jQuery.trim(data);
-
-    if(data && data!=""){
-      var response = jQuery.parseJSON(jQuery.trim(data));
-      if (response !== null && response.hasOwnProperty("display_as")) {
-        this.element.attr("data-original-content", this.element.text());
-        this.original_content = this.element.text();
-        this.element.html(response["display_as"]);
-      }
-
-      this.element.trigger(jQuery.Event("best_in_place:success"), data);
-      this.element.trigger(jQuery.Event("ajax:success"), data);
-    } else {
-      this.element.trigger(jQuery.Event("best_in_place:success"));
-      this.element.trigger(jQuery.Event("ajax:success"));
-    }
+        // Avoid request if no change is made
+        if (this.formType in {"input": 1, "textarea": 1} && value === this.oldValue) {
+            this.abort();
+            return true;
+        }
 
-    // Binding back after being clicked
-    jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
-    this.element.trigger(jQuery.Event("best_in_place:deactivate"));
+        editor.ajax({
+            "type": BestInPlaceEditor.defaults.ajaxMethod,
+            "dataType": BestInPlaceEditor.defaults.ajaxDataType,
+            "data": editor.requestData(),
+            "success": function (data) {
+                editor.loadSuccessCallback(data);
+            },
+            "error": function (request, error) {
+                editor.loadErrorCallback(request, error);
+            }
+        });
 
-    if (this.collectionValue !== null && this.formType == "select") {
-      this.collectionValue = this.previousCollectionValue;
-      this.previousCollectionValue = null;
-    }
-  },
 
-  loadErrorCallback : function(request, error) {
-    this.activateText(this.oldValue);
+        switch (this.formType) {
+            case "select":
+                this.previousCollectionValue = value;
+
+                // search for the text for the span
+                jQuery.each(this.values, function (i, v) {
+                        if (String(value) === String(i)) {
+                            editor.element.html(v);
+                        }
+                    }
+                );
+                break;
+
+            case "checkbox":
+                editor.element.html(this.values[value]);
+                break;
+
+            default:
+                if (value !== "") {
+                    if (this.display_raw) {
+                        editor.element.html(value);
+                    } else {
+                        editor.element.text(value);
+                    }
+                } else {
+                    editor.element.html(this.placeHolder);
+                }
+        }
 
-    this.element.trigger(jQuery.Event("best_in_place:error"), [request, error]);
-    this.element.trigger(jQuery.Event("ajax:error"), request, error);
+        editor.element.data('bipValue', value);
 
-    // Binding back after being clicked
-    jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
-    this.element.trigger(jQuery.Event("best_in_place:deactivate"));
-  },
-
-  clickHandler : function(event) {
-    event.preventDefault();
-    event.data.editor.activate();
-  },
-
-  setHtmlAttributes : function() {
-    var formField = this.element.find(this.formType);
-
-    if(this.html_attrs){
-      var attrs = jQuery.parseJSON(this.html_attrs);
-      for(var key in attrs){
-        formField.attr(key, attrs[key]);
-      }
-    }
-  }
-};
+        editor.element.trigger(jQuery.Event("best_in_place:update"));
 
 
-// Button cases:
-// If no buttons, then blur saves, ESC cancels
-// If just Cancel button, then blur saves, ESC or clicking Cancel cancels (careful of blur event!)
-// If just OK button, then clicking OK saves (careful of blur event!), ESC or blur cancels
-// If both buttons, then clicking OK saves, ESC or clicking Cancel or blur cancels
-BestInPlaceEditor.forms = {
-  "input" : {
-    activateForm : function() {
-      var output = jQuery(document.createElement('form'))
-                   .addClass('form_in_place')
-                   .attr('action', 'javascript:void(0);')
-                   .attr('style', 'display:inline');
-      var input_elt = jQuery(document.createElement('input'))
-                      .attr('type', 'text')
-                      .attr('name', this.attributeName)
-                      .val(this.display_value);
-      if(this.inner_class !== null) {
-        input_elt.addClass(this.inner_class);
-      }
-      output.append(input_elt);
-      if(this.okButton) {
-        output.append(
-          jQuery(document.createElement('input'))
-          .attr('type', 'submit')
-          .attr('class', this.okButtonClass)
-          .attr('value', this.okButton)
-        )
-      }
-      if(this.cancelButton) {
-        output.append(
-          jQuery(document.createElement('input'))
-          .attr('type', 'button')
-          .attr('class', this.cancelButtonClass)
-          .attr('value', this.cancelButton)
-        )
-      }
-
-      this.element.html(output);
-      this.setHtmlAttributes();
-      this.element.find("input[type='text']")[0].select();
-      this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.input.submitHandler);
-      if (this.cancelButton) {
-        this.element.find("input[type='button']").bind('click', {editor: this}, BestInPlaceEditor.forms.input.cancelButtonHandler);
-      }
-      this.element.find("input[type='text']").bind('blur', {editor: this}, BestInPlaceEditor.forms.input.inputBlurHandler);
-      this.element.find("input[type='text']").bind('keyup', {editor: this}, BestInPlaceEditor.forms.input.keyupHandler);
-      this.blurTimer = null;
-      this.userClicked = false;
     },
 
-    getValue : function() {
-      return this.sanitizeValue(this.element.find("input").val());
+    activateForm: function () {
+        'use strict';
+        alert(BestInPlaceEditor.defaults.locales[''].uninitializedForm);
     },
 
-    // When buttons are present, use a timer on the blur event to give precedence to clicks
-    inputBlurHandler : function(event) {
-      if (event.data.editor.okButton) {
-        event.data.editor.blurTimer = setTimeout(function () {
-          if (!event.data.editor.userClicked) {
-            event.data.editor.abort();
-          }
-        }, 500);
-      } else {
-        if (event.data.editor.cancelButton) {
-          event.data.editor.blurTimer = setTimeout(function () {
-            if (!event.data.editor.userClicked) {
-              event.data.editor.update();
-            }
-          }, 500);
-        } else {
-          event.data.editor.update();
+    activateText: function (value) {
+        'use strict';
+        this.element.html(value);
+        if (this.isPlaceHolder()) {
+            this.element.html(this.placeHolder);
         }
-      }
     },
 
-    submitHandler : function(event) {
-      event.data.editor.userClicked = true;
-      clearTimeout(event.data.editor.blurTimer);
-      event.data.editor.update();
-    },
+    // Helper Functions ////////////////////////////////////////////////////////
+
+    initOptions: function () {
+        // Try parent supplied info
+        'use strict';
+        var self = this;
+        self.element.parents().each(function () {
+            var $parent = jQuery(this);
+            self.url = self.url || $parent.data("bipUrl");
+            self.activator = self.activator || $parent.data("bipActivator");
+            self.okButton = self.okButton || $parent.data("bipOkButton");
+            self.okButtonClass = self.okButtonClass || $parent.data("bipOkButtonClass");
+            self.cancelButton = self.cancelButton || $parent.data("bipCancelButton");
+            self.cancelButtonClass = self.cancelButtonClass || $parent.data("bipCancelButtonClass");
+        });
 
-    cancelButtonHandler : function(event) {
-      event.data.editor.userClicked = true;
-      clearTimeout(event.data.editor.blurTimer);
-      event.data.editor.abort();
-      event.stopPropagation(); // Without this, click isn't handled
+        // Load own attributes (overrides all others)
+        self.url = self.element.data("bipUrl") || self.url || document.location.pathname;
+        self.collection = self.element.data("bipCollection") || self.collection;
+        self.formType = self.element.data("bipType") || "input";
+        self.objectName = self.element.data("bipObject") || self.objectName;
+        self.attributeName = self.element.data("bipAttribute") || self.attributeName;
+        self.activator = self.element.data("bipActivator") || self.element;
+        self.okButton = self.element.data("bipOkButton") || self.okButton;
+        self.okButtonClass = self.element.data("bipOkButtonClass") || self.okButtonClass || BestInPlaceEditor.defaults.okButtonClass;
+        self.cancelButton = self.element.data("bipCancelButton") || self.cancelButton;
+        self.cancelButtonClass = self.element.data("bipCancelButtonClass") || self.cancelButtonClass || BestInPlaceEditor.defaults.cancelButtonClass;
+        self.placeHolder = self.element.data("bipPlaceholder") || BestInPlaceEditor.defaults.locales[''].placeHolder;
+        self.inner_class = self.element.data("bipInnerClass");
+        self.html_attrs = self.element.data("bipHtmlAttrs");
+        self.original_content = self.element.data("bipOriginalContent") || self.original_content;
+
+        // if set the input won't be satinized
+        self.display_raw = self.element.data("bip-raw");
+
+        self.useConfirm = self.element.data("bip-confirm");
+
+
+        if (self.formType === "select" || self.formType === "checkbox") {
+            self.values = self.collection;
+            self.collectionValue = self.element.data("bipValue") || self.collectionValue;
+        }
     },
 
-    keyupHandler : function(event) {
-      if (event.keyCode == 27) {
-        event.data.editor.abort();
-      }
-    }
-  },
-
-  "date" : {
-    activateForm : function() {
-      var that      = this,
-          output    = jQuery(document.createElement('form'))
-                      .addClass('form_in_place')
-                      .attr('action', 'javascript:void(0);')
-                      .attr('style', 'display:inline'),
-          input_elt = jQuery(document.createElement('input'))
-                      .attr('type', 'text')
-                      .attr('name', this.attributeName)
-                      .attr('value', this.sanitizeValue(this.display_value));
-      if(this.inner_class !== null) {
-        input_elt.addClass(this.inner_class);
-      }
-      output.append(input_elt)
-
-      this.element.html(output);
-      this.setHtmlAttributes();
-      this.element.find('input')[0].select();
-      this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.input.submitHandler);
-      this.element.find("input").bind('keyup', {editor: this}, BestInPlaceEditor.forms.input.keyupHandler);
-
-      this.element.find('input')
-        .datepicker({
-            onClose: function() {
-              that.update();
-            }
-          })
-        .datepicker('show');
+    bindForm: function () {
+        'use strict';
+        this.activateForm = BestInPlaceEditor.forms[this.formType].activateForm;
+        this.getValue = BestInPlaceEditor.forms[this.formType].getValue;
     },
 
-    getValue :  function() {
-      return this.sanitizeValue(this.element.find("input").val());
-    },
 
-    submitHandler : function(event) {
-      event.data.editor.update();
+    initPlaceHolder: function () {
+        'use strict';
+        // TODO add placeholder for select and checkbox
+        if (this.element.html() === "") {
+            this.element.html(this.placeHolder);
+        }
     },
 
-    keyupHandler : function(event) {
-      if (event.keyCode == 27) {
-        event.data.editor.abort();
-      }
-    }
-  },
-
-  "select" : {
-    activateForm : function() {
-      var output     = jQuery(document.createElement('form'))
-                       .attr('action', 'javascript:void(0)')
-                       .attr('style', 'display:inline');
-          selected   = '',
-          oldValue   = this.oldValue,
-          select_elt = jQuery(document.createElement('select'))
-                      .attr('class', this.inned_class !== null ? this.inner_class : '' ),
-          currentCollectionValue = this.collectionValue;
-
-      jQuery.each(this.values, function (index, value) {
-        var option_elt = jQuery(document.createElement('option'))
-                         // .attr('value', value[0])
-                         .val(value[0])
-                         .html(value[1]);
-        if(value[0] == currentCollectionValue) {
-          option_elt.attr('selected', 'selected');
-        }
-        select_elt.append(option_elt);
-      });
-      output.append(select_elt);
-
-      this.element.html(output);
-      this.setHtmlAttributes();
-      this.element.find("select").bind('change', {editor: this}, BestInPlaceEditor.forms.select.blurHandler);
-      this.element.find("select").bind('blur', {editor: this}, BestInPlaceEditor.forms.select.blurHandler);
-      this.element.find("select").bind('keyup', {editor: this}, BestInPlaceEditor.forms.select.keyupHandler);
-      this.element.find("select")[0].focus();
+    isPlaceHolder: function () {
+        'use strict';
+        // TODO: It only work when form is deactivated.
+        // Condition will fail when form is activated
+        return this.element.html() === "" || this.element.html() === this.placeHolder;
     },
 
-    getValue : function() {
-      return this.sanitizeValue(this.element.find("select").val());
-      // return this.element.find("select").val();
+    getValue: function () {
+        'use strict';
+        alert(BestInPlaceEditor.defaults.locales[''].uninitializedForm);
     },
 
-    blurHandler : function(event) {
-      event.data.editor.update();
+    // Trim and Strips HTML from text
+    sanitizeValue: function (s) {
+        'use strict';
+        return jQuery.trim(s);
     },
 
-    keyupHandler : function(event) {
-      if (event.keyCode == 27) event.data.editor.abort();
-    }
-  },
+    /* Generate the data sent in the POST request */
+    requestData: function () {
+        'use strict';
+        // To prevent xss attacks, a csrf token must be defined as a meta attribute
+        var csrf_token = jQuery('meta[name=csrf-token]').attr('content'),
+            csrf_param = jQuery('meta[name=csrf-param]').attr('content');
 
-  "checkbox" : {
-    activateForm : function() {
-      this.collectionValue = !this.getValue();
-      this.setHtmlAttributes();
-      this.update();
-    },
+        var data = "_method=" + BestInPlaceEditor.defaults.ajaxMethod;
+        data += "&" + this.objectName + '[' + this.attributeName + ']=' + encodeURIComponent(this.getValue());
 
-    getValue : function() {
-      return this.collectionValue;
-    }
-  },
-
-  "textarea" : {
-    activateForm : function() {
-      // grab width and height of text
-      width = this.element.css('width');
-      height = this.element.css('height');
-
-      // construct form
-      var output   = jQuery(document.createElement('form'))
-                     .attr('action', 'javascript:void(0)')
-                     .attr('style', 'display:inline')
-                     .append(jQuery(document.createElement('textarea'))
-                             .val(this.sanitizeValue(this.display_value)));
-      if(this.okButton) {
-        output.append(
-          jQuery(document.createElement('input'))
-          .attr('type', 'submit')
-          .attr('value', this.okButton)
-        );
-      }
-      if(this.cancelButton) {
-        output.append(
-          jQuery(document.createElement('input'))
-          .attr('type', 'button')
-          .attr('value', this.cancelButton)
-        )
-      }
-
-      this.element.html(output);
-      this.setHtmlAttributes();
-
-      // set width and height of textarea
-      jQuery(this.element.find("textarea")[0]).css({ 'min-width': width, 'min-height': height });
-      jQuery(this.element.find("textarea")[0]).elastic();
-
-      this.element.find("textarea")[0].focus();
-      this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.textarea.submitHandler);
-      if (this.cancelButton) {
-        this.element.find("input[type='button']").bind('click', {editor: this}, BestInPlaceEditor.forms.textarea.cancelButtonHandler);
-      }
-      this.element.find("textarea").bind('blur', {editor: this}, BestInPlaceEditor.forms.textarea.blurHandler);
-      this.element.find("textarea").bind('keyup', {editor: this}, BestInPlaceEditor.forms.textarea.keyupHandler);
-      this.blurTimer = null;
-      this.userClicked = false;
+        if (csrf_param !== undefined && csrf_token !== undefined) {
+            data += "&" + csrf_param + "=" + encodeURIComponent(csrf_token);
+        }
+        return data;
     },
 
-    getValue :  function() {
-      return this.sanitizeValue(this.element.find("textarea").val());
+    ajax: function (options) {
+        'use strict';
+        options.url = this.url;
+        options.beforeSend = function (xhr) {
+            xhr.setRequestHeader("Accept", "application/json");
+        };
+        return jQuery.ajax(options);
     },
 
-    // When buttons are present, use a timer on the blur event to give precedence to clicks
-    blurHandler : function(event) {
-      if (event.data.editor.okButton) {
-        event.data.editor.blurTimer = setTimeout(function () {
-          if (!event.data.editor.userClicked) {
-            event.data.editor.abortIfConfirm();
-          }
-        }, 500);
-      } else {
-        if (event.data.editor.cancelButton) {
-          event.data.editor.blurTimer = setTimeout(function () {
-            if (!event.data.editor.userClicked) {
-              event.data.editor.update();
+    // Handlers ////////////////////////////////////////////////////////////////
+
+    loadSuccessCallback: function (data) {
+        'use strict';
+        data = jQuery.trim(data);
+        //Update original content with current text.
+        if (this.display_raw) {
+          this.original_content = this.element.html();
+        } else {
+          this.original_content = this.element.text();
+        }
+
+        if (data && data !== "") {
+            var response = jQuery.parseJSON(data);
+            if (response !== null && response.hasOwnProperty("display_as")) {
+                this.element.data('bip-original-content', this.element.text());
+                this.element.html(response.display_as);
             }
-          }, 500);
+
+            this.element.trigger(jQuery.Event("best_in_place:success"), data);
+            this.element.trigger(jQuery.Event("ajax:success"), data);
         } else {
-          event.data.editor.update();
+            this.element.trigger(jQuery.Event("best_in_place:success"));
+            this.element.trigger(jQuery.Event("ajax:success"));
+        }
+        // Binding back after being clicked
+        jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
+        this.element.trigger(jQuery.Event("best_in_place:deactivate"));
+
+        if (this.collectionValue !== null && this.formType === "select") {
+            this.collectionValue = this.previousCollectionValue;
+            this.previousCollectionValue = null;
         }
-      }
     },
 
-    submitHandler : function(event) {
-      event.data.editor.userClicked = true;
-      clearTimeout(event.data.editor.blurTimer);
-      event.data.editor.update();
+    loadErrorCallback: function (request, error) {
+        'use strict';
+        this.activateText(this.oldValue);
+
+        this.element.trigger(jQuery.Event("best_in_place:error"), [request, error]);
+        this.element.trigger(jQuery.Event("ajax:error"), request, error);
+
+        // Binding back after being clicked
+        jQuery(this.activator).bind('click', {editor: this}, this.clickHandler);
+        this.element.trigger(jQuery.Event("best_in_place:deactivate"));
     },
 
-    cancelButtonHandler : function(event) {
-      event.data.editor.userClicked = true;
-      clearTimeout(event.data.editor.blurTimer);
-      event.data.editor.abortIfConfirm();
-      event.stopPropagation(); // Without this, click isn't handled
+    clickHandler: function (event) {
+        'use strict';
+        event.preventDefault();
+        event.data.editor.activate();
     },
 
-    keyupHandler : function(event) {
-      if (event.keyCode == 27) {
-        event.data.editor.abortIfConfirm();
-      }
-    }
-  }
-};
+    setHtmlAttributes: function () {
+        'use strict';
+        var formField = this.element.find(this.formType);
 
-jQuery.fn.best_in_place = function() {
+        if (this.html_attrs) {
+            var attrs = this.html_attrs;
+            $.each(attrs, function (key, val) {
+                formField.attr(key, val);
+            });
+        }
+    },
 
-  function setBestInPlace(element) {
-    if (!element.data('bestInPlaceEditor')) {
-      element.data('bestInPlaceEditor', new BestInPlaceEditor(element));
-      return true;
+    placeButtons: function (output, field) {
+        'use strict';
+        if (field.okButton) {
+            output.append(
+                jQuery(document.createElement('input'))
+                    .attr('type', 'submit')
+                    .attr('class', field.okButtonClass)
+                    .attr('value', field.okButton)
+            );
+        }
+        if (field.cancelButton) {
+            output.append(
+                jQuery(document.createElement('input'))
+                    .attr('type', 'button')
+                    .attr('class', field.cancelButtonClass)
+                    .attr('value', field.cancelButton)
+            );
+        }
     }
-  }
+};
 
-  jQuery(this.context).delegate(this.selector, 'click', function () {
-    var el = jQuery(this);
-    if (setBestInPlace(el))
-      el.click();
-  });
 
-  this.each(function () {
-    setBestInPlace(jQuery(this));
-  });
+// Button cases:
+// If no buttons, then blur saves, ESC cancels
+// If just Cancel button, then blur saves, ESC or clicking Cancel cancels (careful of blur event!)
+// If just OK button, then clicking OK saves (careful of blur event!), ESC or blur cancels
+// If both buttons, then clicking OK saves, ESC or clicking Cancel or blur cancels
+BestInPlaceEditor.forms = {
+    "input": {
+        activateForm: function () {
+            'use strict';
+            var output = jQuery(document.createElement('form'))
+                .addClass('form_in_place')
+                .attr('action', 'javascript:void(0);')
+                .attr('style', 'display:inline');
+            var input_elt = jQuery(document.createElement('input'))
+                .attr('type', 'text')
+                .attr('name', this.attributeName)
+                .val(this.display_value);
+
+            // Add class to form input
+            if (this.inner_class) {
+                input_elt.addClass(this.inner_class);
+            }
 
-  return this;
-};
+            output.append(input_elt);
+            this.placeButtons(output, this);
 
+            this.element.html(output);
+            this.setHtmlAttributes();
 
+            this.element.find("input[type='text']")[0].select();
+            this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.input.submitHandler);
+            if (this.cancelButton) {
+                this.element.find("input[type='button']").bind('click', {editor: this}, BestInPlaceEditor.forms.input.cancelButtonHandler);
+            }
+            this.element.find("input[type='text']").bind('blur', {editor: this}, BestInPlaceEditor.forms.input.inputBlurHandler);
+            this.element.find("input[type='text']").bind('keyup', {editor: this}, BestInPlaceEditor.forms.input.keyupHandler);
+            this.blurTimer = null;
+            this.userClicked = false;
+        },
+
+        getValue: function () {
+            'use strict';
+            return this.sanitizeValue(this.element.find("input").val());
+        },
+
+        // When buttons are present, use a timer on the blur event to give precedence to clicks
+        inputBlurHandler: function (event) {
+            'use strict';
+            if (event.data.editor.okButton) {
+                event.data.editor.blurTimer = setTimeout(function () {
+                    if (!event.data.editor.userClicked) {
+                        event.data.editor.abort();
+                    }
+                }, 500);
+            } else {
+                if (event.data.editor.cancelButton) {
+                    event.data.editor.blurTimer = setTimeout(function () {
+                        if (!event.data.editor.userClicked) {
+                            event.data.editor.update();
+                        }
+                    }, 500);
+                } else {
+                    event.data.editor.update();
+                }
+            }
+        },
+
+        submitHandler: function (event) {
+            'use strict';
+            event.data.editor.userClicked = true;
+            clearTimeout(event.data.editor.blurTimer);
+            event.data.editor.update();
+        },
+
+        cancelButtonHandler: function (event) {
+            'use strict';
+            event.data.editor.userClicked = true;
+            clearTimeout(event.data.editor.blurTimer);
+            event.data.editor.abort();
+            event.stopPropagation(); // Without this, click isn't handled
+        },
 
-/**
-* @name             Elastic
-* @descripton           Elastic is Jquery plugin that grow and shrink your textareas automaticliy
-* @version            1.6.5
-* @requires           Jquery 1.2.6+
-*
-* @author             Jan Jarfalk
-* @author-email         jan.jarfalk@unwrongest.com
-* @author-website         http://www.unwrongest.com
-*
-* @licens             MIT License - http://www.opensource.org/licenses/mit-license.php
-*/
-
-(function(jQuery){
-  if (typeof jQuery.fn.elastic !== 'undefined') return;
-
-  jQuery.fn.extend({
-    elastic: function() {
-      //  We will create a div clone of the textarea
-      //  by copying these attributes from the textarea to the div.
-      var mimics = [
-        'paddingTop',
-        'paddingRight',
-        'paddingBottom',
-        'paddingLeft',
-        'fontSize',
-        'lineHeight',
-        'fontFamily',
-        'width',
-        'fontWeight'];
-
-      return this.each( function() {
-
-        // Elastic only works on textareas
-        if ( this.type != 'textarea' ) {
-          return false;
+        keyupHandler: function (event) {
+            'use strict';
+            if (event.keyCode === 27) {
+                event.data.editor.abort();
+            }
         }
+    },
 
-        var $textarea = jQuery(this),
-          $twin   = jQuery('<div />').css({'position': 'absolute','display':'none','word-wrap':'break-word'}),
-          lineHeight  = parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10'),
-          minheight = parseInt($textarea.css('height'),10) || lineHeight*3,
-          maxheight = parseInt($textarea.css('max-height'),10) || Number.MAX_VALUE,
-          goalheight  = 0,
-          i       = 0;
-
-        // Opera returns max-height of -1 if not set
-        if (maxheight < 0) { maxheight = Number.MAX_VALUE; }
-
-        // Append the twin to the DOM
-        // We are going to meassure the height of this, not the textarea.
-        $twin.appendTo($textarea.parent());
-
-        // Copy the essential styles (mimics) from the textarea to the twin
-        i = mimics.length;
-        while(i--){
-          $twin.css(mimics[i].toString(),$textarea.css(mimics[i].toString()));
+    "select": {
+        activateForm: function () {
+            'use strict';
+            var output = jQuery(document.createElement('form'))
+                    .attr('action', 'javascript:void(0)')
+                    .attr('style', 'display:inline'),
+                selected = '',
+                select_elt = jQuery(document.createElement('select'))
+                    .attr('class', this.inner_class !== null ? this.inner_class : ''),
+                currentCollectionValue = this.collectionValue;
+
+            jQuery.each(this.values, function (key, value) {
+                var option_elt = jQuery(document.createElement('option'))
+                    .val(key)
+                    .html(value);
+                if (key === String(currentCollectionValue)) {
+                    option_elt.attr('selected', 'selected');
+                }
+                select_elt.append(option_elt);
+            });
+            output.append(select_elt);
+
+            this.element.html(output);
+            this.setHtmlAttributes();
+            this.element.find("select").bind('change', {editor: this}, BestInPlaceEditor.forms.select.blurHandler);
+            this.element.find("select").bind('blur', {editor: this}, BestInPlaceEditor.forms.select.blurHandler);
+            this.element.find("select").bind('keyup', {editor: this}, BestInPlaceEditor.forms.select.keyupHandler);
+            this.element.find("select")[0].focus();
+        },
+
+        getValue: function () {
+            'use strict';
+            return this.sanitizeValue(this.element.find("select").val());
+        },
+
+        blurHandler: function (event) {
+            'use strict';
+            event.data.editor.update();
+        },
+
+        keyupHandler: function (event) {
+            'use strict';
+            if (event.keyCode === 27) {
+                event.data.editor.abort();
+            }
         }
+    },
 
-
-        // Sets a given height and overflow state on the textarea
-        function setHeightAndOverflow(height, overflow){
-          curratedHeight = Math.floor(parseInt(height,10));
-          if($textarea.height() != curratedHeight){
-            $textarea.css({'height': curratedHeight + 'px','overflow':overflow});
-
-          }
+    "checkbox": {
+        activateForm: function () {
+            'use strict';
+            this.collectionValue = !this.getValue();
+            this.setHtmlAttributes();
+            this.update();
+        },
+
+        getValue: function () {
+            'use strict';
+            return this.collectionValue;
         }
+    },
 
+    "textarea": {
+        activateForm: function () {
+            'use strict';
+            // grab width and height of text
+            var width = this.element.css('width');
+            var height = this.element.css('height');
+
+            // construct form
+            var output = jQuery(document.createElement('form'))
+                .addClass('form_in_place')
+                .attr('action', 'javascript:void(0);')
+                .attr('style', 'display:inline');
+            var textarea_elt = jQuery(document.createElement('textarea'))
+                .val(this.sanitizeValue(this.display_value));
+
+            if (this.inner_class !== null) {
+                textarea_elt.addClass(this.inner_class);
+            }
 
-        // This function will update the height of the textarea if necessary
-        function update() {
+            output.append(textarea_elt);
 
-          // Get curated content from the textarea.
-          var textareaContent = $textarea.val().replace(/&/g,'&amp;').replace(/  /g, '&nbsp;').replace(/<|>/g, '&gt;').replace(/\n/g, '<br />');
+            this.placeButtons(output, this);
 
-          // Compare curated content with curated twin.
-          var twinContent = $twin.html().replace(/<br>/ig,'<br />');
+            this.element.html(output);
+            this.setHtmlAttributes();
 
-          if(textareaContent+'&nbsp;' != twinContent){
+            // set width and height of textarea
+            jQuery(this.element.find("textarea")[0]).css({'min-width': width, 'min-height': height});
+            jQuery(this.element.find("textarea")[0]).autosize();
 
-            // Add an extra white space so new rows are added when you are at the end of a row.
-            $twin.html(textareaContent+'&nbsp;');
+            this.element.find("textarea")[0].focus();
+            this.element.find("form").bind('submit', {editor: this}, BestInPlaceEditor.forms.textarea.submitHandler);
 
-            // Change textarea height if twin plus the height of one line differs more than 3 pixel from textarea height
-            if(Math.abs($twin.height() + lineHeight - $textarea.height()) > 3){
+            if (this.cancelButton) {
+                this.element.find("input[type='button']").bind('click', {editor: this}, BestInPlaceEditor.forms.textarea.cancelButtonHandler);
+            }
 
-              var goalheight = $twin.height()+lineHeight;
-              if(goalheight >= maxheight) {
-                setHeightAndOverflow(maxheight,'auto');
-              } else if(goalheight <= minheight) {
-                setHeightAndOverflow(minheight,'hidden');
-              } else {
-                setHeightAndOverflow(goalheight,'hidden');
-              }
+            this.element.find("textarea").bind('blur', {editor: this}, BestInPlaceEditor.forms.textarea.blurHandler);
+            this.element.find("textarea").bind('keyup', {editor: this}, BestInPlaceEditor.forms.textarea.keyupHandler);
+            this.blurTimer = null;
+            this.userClicked = false;
+        },
+
+        getValue: function () {
+            'use strict';
+            return this.sanitizeValue(this.element.find("textarea").val());
+        },
+
+        // When buttons are present, use a timer on the blur event to give precedence to clicks
+        blurHandler: function (event) {
+            'use strict';
+            if (event.data.editor.okButton) {
+                event.data.editor.blurTimer = setTimeout(function () {
+                    if (!event.data.editor.userClicked) {
+                        event.data.editor.abortIfConfirm();
+                    }
+                }, 500);
+            } else {
+                if (event.data.editor.cancelButton) {
+                    event.data.editor.blurTimer = setTimeout(function () {
+                        if (!event.data.editor.userClicked) {
+                            event.data.editor.update();
+                        }
+                    }, 500);
+                } else {
+                    event.data.editor.update();
+                }
+            }
+        },
+
+        submitHandler: function (event) {
+            'use strict';
+            event.data.editor.userClicked = true;
+            clearTimeout(event.data.editor.blurTimer);
+            event.data.editor.update();
+        },
+
+        cancelButtonHandler: function (event) {
+            'use strict';
+            event.data.editor.userClicked = true;
+            clearTimeout(event.data.editor.blurTimer);
+            event.data.editor.abortIfConfirm();
+            event.stopPropagation(); // Without this, click isn't handled
+        },
 
+        keyupHandler: function (event) {
+            'use strict';
+            if (event.keyCode === 27) {
+                event.data.editor.abortIfConfirm();
             }
+        }
+    }
+};
 
-          }
+BestInPlaceEditor.defaults = {
+    locales: {},
+    ajaxMethod: "put",  //TODO Change to patch when support to 3.2 is dropped
+    ajaxDataType: 'text',
+    okButtonClass: '',
+    cancelButtonClass: ''
+};
 
-        }
+// Default locale
+BestInPlaceEditor.defaults.locales[''] = {
+    confirmMessage: "Are you sure you want to discard your changes?",
+    uninitializedForm: "The form was not properly initialized. getValue is unbound",
+    placeHolder: '-'
+};
 
-        // Hide scrollbars
-        $textarea.css({'overflow':'hidden'});
+jQuery.fn.best_in_place = function () {
+    'use strict';
+    function setBestInPlace(element) {
+        if (!element.data('bestInPlaceEditor')) {
+            element.data('bestInPlaceEditor', new BestInPlaceEditor(element));
+            return true;
+        }
+    }
 
-        // Update textarea size on keyup, change, cut and paste
-        $textarea.bind('keyup change cut paste', function(){
-          update();
-        });
+    jQuery(this.context).delegate(this.selector, 'click', function () {
+        var el = jQuery(this);
+        if (setBestInPlace(el)) {
+            el.click();
+        }
+    });
 
-        // Compact textarea on blur
-        // Lets animate this....
-        $textarea.bind('blur',function(){
-          if($twin.height() < maxheight){
-            if($twin.height() > minheight) {
-              $textarea.height($twin.height());
-            } else {
-              $textarea.height(minheight);
-            }
-          }
-        });
+    this.each(function () {
+        setBestInPlace(jQuery(this));
+    });
 
-        // And this line is to catch the browser paste event
-        $textarea.on("input paste", function(e){ setTimeout( update, 250); });
+    return this;
+};
 
-        // Run update once when elastic is initialized
-        update();
 
-      });
 
-        }
-    });
-})(jQuery);