// JavaScript Document

var inlineEditor = Class.create();

inlineEditor.prototype = {
  initialize: function(editOptions) {
    this.updateUrl  = editOptions.updateUrl?editOptions.updateUrl:null;
  },
 
  editElement: function (oEl, varName, lnId) {
	  	this.editableEl = $(oEl);
	  	if (this.editableEl.editMode == true) {
			return false;
		}
		
		this.editableEl.editMode = true;
		this.varName = varName;
		this.innerHTML = oEl.innerHTML;
		this.lnId = lnId;
		
		var dm = $(this.editableEl).getDimensions();
		Element.setStyle(this.editableEl, {'width' : dm.width + 'px', 'height' : dm.height + 'px'});
		
		this.makeEditable();
	
  },
  
  makeEditable: function() {
	  this.txtArea = document.createElement('textarea');
	  this.txtArea.name = this.varName;
	  var dm = $(this.editableEl).getDimensions();
	  Element.setStyle(this.txtArea, {'width' : dm.width + 'px', 'height' : dm.height + 'px', 'border' :'1px solid #000000'});
	  this.txtArea.value =  this.innerHTML;
	  this.editableEl.innerHTML = '';
	  this.editableEl.appendChild(this.txtArea);
	  
	  this.txtArea.focus();
	  
	  Element.observe(this.txtArea, 'blur', function(){
		  this.updateEditable();
	  }.bind(this));
  },
  
  updateEditable: function () {
	  var oSelf = this;
	  
	  var vName = $(this.txtArea).name;
	  	  
	  new Ajax.Request(this.updateUrl , {
		  method: 'post',
		  //parameters: Form.Element.serialize(this.txtArea, hashParams),
		  parameters: {id:this.lnId, value:$(this.txtArea).getValue(), varName:$(this.txtArea).name},
		  onLoading: function (){
			  
			  $(oSelf.editableEl).update('<span style="color: red;">Сохраняем ...</span>')
		  },
		 
		  onSuccess: function(transport) {
			  $(oSelf.editableEl).update(oSelf.txtArea.value);
			  oSelf.editableEl.editMode = false;
		  },
		  
		  onFailure: function (){
			  $(oSelf.editableEl).update(oSelf.txtArea.value);
			  oSelf.editableEl.editMode = false;
		  }
	 });

  }
  
};