function rgbToHex(value){
	var rgb = value.match(new RegExp('^[rgba]{3,4}\\(([\\d]{0,3}),[\\s]*([\\d]{0,3}),[\\s]*([\\d]{0,3})\\)$'));
	var hex = [];
	for (var i = 1; i < rgb.length; i++) 
	  hex.push((rgb[i]-0).toString(16));
	var hexText = '#'+hex.join('');
  return hexText;
}

Ajax.InPlaceEditor.prototype.old_createEditField = Ajax.InPlaceEditor.prototype.createEditField;
Ajax.InPlaceEditor.prototype.old_initialize = Ajax.InPlaceEditor.prototype.initialize;

Ajax.InPlaceEditor.prototype.old_enterEditMode = Ajax.InPlaceEditor.prototype.enterEditMode;
Ajax.InPlaceEditor.prototype.old_onSubmit = Ajax.InPlaceEditor.prototype.onSubmit;


Object.extend(Ajax.InPlaceEditor.prototype, {
  initialize: function(element, url, options) {
    this.old_initialize(element, url, options);
    
    // Add a new option for the label of the Edit Button
    this.options = Object.extend({
        editButtonText: 'Edit',
        showCancelButton: true
        }, this.options||{});

    
    
    var id =  element +"_tmp";
    new Insertion.After(element, "<span id='" + id +"' class='inplace_editor' style='display:none'></span>");
    var tmp = $(id);
		if (this.options.highlightcolor == Ajax.InPlaceEditor.defaultHighlightColor) {
	    if (tmp.getStyle("background-color").indexOf("rgb") == 0) 
	      this.options.highlightcolor = rgbToHex(tmp.getStyle("background-color"));
	    else
	     this.options.highlightcolor =tmp.getStyle("background-color");
		}
     
    // Disable the editing by the click on div section
    Event.stopObserving(this.element, 'click', this.onclickListener);
    Event.stopObserving(this.element, 'mouseover', this.mouseoverListener);
    Event.stopObserving(this.element, 'mouseout', this.mouseoutListener);
  },
  enterEditMode: function(evt) {
   	this.old_enterEditMode(evt);
    
		if(this.options.showCancelButton) {
		   this.options.externalControl.innerHTML = this.options.cancelText;
		   this.options.externalControl.onclick = this.onclickCancel.bind(this);
		   Element.show(this.options.externalControl);
		} else {
		   Element.hide(this.options.externalControl);
		}
		
		if (this.options.afterEnteringEditMode)
			this.options.afterEnteringEditMode();
	},

	onLeaveEditMode: function() {		
		if (this.options.onLeaveEditMode)
			this.options.onLeaveEditMode();
	},

  createEditField: function() {
    this.old_createEditField();
    Event.observe(this.editField, "keyup", this._keydown.bindAsEventListener(this));
  },
  
  onclickCancel : function() {
    this.onComplete();
    this.leaveEditMode();
    
    if(this.options.showCancelButton) {
        this.options.externalControl.innerHTML = this.options.editButtonText;
        this.options.externalControl.onclick = null;
    } else {
        this.options.externalControl.show();
    }
    
    return false;
  },
  
  onSubmit: function() {
    if(this.options.showCancelButton) {
        this.options.externalControl.innerHTML = this.options.editButtonText;
        this.options.externalControl.onclick = null;
    }
    this.old_onSubmit();
  },
  
  _keydown: function(event) {
    if (this.options.length && this.editField.value.length > this.options.length) {
      this.editField.value = this.editField.value.substring(0, this.options.length);
    }
  }
})