Ajax.InPlaceTextarea = Class.create();
Ajax.InPlaceTextarea.prototype = {
  initialize:function(element,url,options) {
  	//element es el id del elemento a editar principal (el que se está viendo)
    this.element = $(element);
    this.url = url;
    this.options = Object.extend({
      onChange: false,
      okButton: true,
      okText: "  ",
      cancelText: "  ",
      highlightcolor: "lightgreen", //"#00D200",
      highlightendcolor: "lightgreen",
      actualizar: '',
      ancho:100,
      titulo:'',
      titulo1:'',
      rows: 5,
      cols: 50,
      loadText:'',
      loadText1:'',
      onComplete: function(transport, element) {
        new Effect.Highlight(element, {startcolor: this.options.highlightcolor});
      },
      onFailure: function(transport) {
        alert("Error de comunicacion con el servidor: " + transport.responseText.stripTags());
      },
       callback: function(value, text) {
        return 'newval='+value+'&newval1='+text;
      },
      savingText: "<img src='"+miWebRoot+"img/indicator.gif'  alt='guardando...' />",//"<b>Guardando...</b>",
      savingClassName: 'inplaceeditor-saving',
      clickToEditText: '',//"Click para editar",
      cancelLink: true
    }, options || {} );

    this.originalBackground = Element.getStyle(this.element, 'background-color');
    if (!this.originalBackground) {
      this.originalBackground = "transparent";
    }

    this.element.title = this.options.clickToEditText;
    this.element.className = 'clase_editor';

    this.ondblclickListener = this.enterEditMode.bindAsEventListener(this);
    this.mouseoverListener = this.enterHover.bindAsEventListener(this);
    this.mouseoutListener = this.leaveHover.bindAsEventListener(this);

    Event.observe(this.element, 'click', this.ondblclickListener);
    Event.observe(this.element, 'mouseover', this.mouseoverListener);
    Event.observe(this.element, 'mouseout', this.mouseoutListener);
  },
  enterEditMode: function(evt) {
    if (this.saving) return;
    if (this.editing) return;
    this.editing = true;
    Element.hide(this.element);
    
    mostrar_fade();
    contenedor = document.createElement('div'); 
	  contenedor.id = 'div_textareaEditor'; 
	  contenedor.style.position = 'absolute';
	  contenedor.style.zIndex = 40000;
	  contenedor.style.border="2px solid black";
	  contenedor.style.paddingLeft=10+'px';
	  contenedor.style.paddingRight=10+'px';
	  contenedor.style.paddingTop=10+'px';
	  contenedor.style.paddingBottom=10+'px';
	  contenedor.style.backgroundColor='#C8D6FB'
	  contenedor.style.left = Event.pointerX(evt)+'px';
	  contenedor.style.top = Event.pointerY(evt)+'px';
	  contenedor.className = 'textareaEditor';
	  $('cuerpo').parentNode.appendChild(contenedor); 
  
    this.createControls();
    if(this.options.titulo)	
    {
    	var span1 = Builder.node('span');
    	span1.innerHTML = '<b>'+this.options.titulo+'</b>';
    	contenedor.appendChild(span1);
	}
    this.menu.style.width = this.options.ancho+'px';
    this.menu.value = (this.options.loadText ? this.options.loadText : this.getText());		
    contenedor.appendChild(this.menu);
    
    
    if(this.options.loadText1)
    {
    	if(this.options.titulo1)
    	{
    		var span2 = Builder.node('span');
	    	span2.innerHTML = '<b>'+this.options.titulo1+'</b>';
	    	contenedor.appendChild(span2);
    	}	
    	contenedor.appendChild(this.menu1);
	    this.menu1.rows = this.options.rows;
	    this.menu1.cols = this.options.cols;
	    this.menu1.style.width = this.options.ancho+'px';
	    this.menu1.value = str_replace('<br />', '\n', this.options.loadText1);
    }	
    
    if (this.options.okButton) {
    	contenedor.appendChild(this.submitButton);
    }

    if (this.options.cancelLink) {
		  contenedor.appendChild(this.cancelButton);
    }
    return false;
  },
  createControls: function() {
    var options = new Array();

	this.menu = Builder.node('input', {className:'inplaceselect'});	
	if(this.options.loadText1)
    {
    	this.menu1 = Builder.node('textarea', {className:'inplaceselect'});	
   	}
  
    if (this.options.onChange) {
	    this.menu.onchange = this.onChange.bind(this);
    }
		
		var value = this.element.innerHTML.replace(/\s*$/, ''); 
		
    if (this.options.okButton) {
     this.submitButton = Builder.node('button', this.options.okText);
     this.submitButton.onclick = this.onChange.bind(this);
     this.submitButton.className = 'editor_ok_button';
    }
    
    if (this.options.cancelLink) {
     this.cancelButton = Builder.node('button', this.options.cancelText);
     this.cancelButton.onclick = this.onCancel.bind(this);
     this.cancelButton.className = 'editor_cancel';
    }
  },
  onCancel: function() {
  	
/*		var el = $('div_selectMultiple');
		var padre = el.parentNode;
		// Eliminamos el hijo (el) del elemento padre
		padre.removeChild(el);
*/
  	ocultar_fade();
    this.onComplete();
    this.leaveEditMode();
    return false;
  },
  onChange: function() {
  	var el = $('div_textareaEditor');
	var padre = el.parentNode;
	// Eliminamos el hijo (el) del elemento padre
	padre.removeChild(el);
  	ocultar_fade();

  	var value = this.menu.value;
    var value1 = this.menu1.value;
    
    this.onLoading();
    if(this.options.actualizar == '')
    {
    	value = base64_encode(value);
    	value1 = base64_encode(value1);
	    new Ajax.Updater(
	    	{
	    		success:this.element
	    	}, 
	    	this.url, 
	      Object.extend({
	      	evalScripts: true,
	        parameters: this.options.callback(value, value1),
	        onComplete: this.onComplete.bind(this),
	        onFailure: this.onFailure.bind(this)
	      }, this.options.ajaxOptions)
	    );
    }
    else
    {
    	value = base64_encode(value);
    	value1 = base64_encode(value1);
    	new Ajax.Updater(
	    	{
	    		success:this.options.actualizar
	    	}, 
	    	this.url, 
	      Object.extend({
	      	evalScripts: true,
	        parameters: this.options.callback(value, value1),
	        onComplete: this.onComplete.bind(this),
	        onFailure: this.onFailure.bind(this)
	      }, this.options.ajaxOptions)
	    );
    }
  },
  onLoading: function() {
    this.saving = true;
    this.removeControls();
    this.leaveHover();
    this.showSaving();
  },
  removeControls:function() {
    if(this.menu) {
      if (this.menu.parentNode) Element.remove(this.menu);
      this.menu = null;
    }
    if (this.cancelButton) {
      if (this.cancelButton.parentNode) Element.remove(this.cancelButton);
      this.cancelButton = null;
    }
    if (this.submitButton) {
      if (this.submitButton.parentNode) Element.remove(this.submitButton);
      this.submitButton = null;
    }
  },
  showSaving:function() {
    this.oldInnerHTML = this.element.innerHTML;
    this.element.innerHTML = this.options.savingText;
    Element.addClassName(this.element, this.options.savingClassName);
    this.element.style.backgroundColor = this.originalBackground;
    Element.show(this.element);
  },
  onComplete: function(transport) {
    this.leaveEditMode();
    this.options.onComplete(transport, this.element);
  },
  onFailure: function(transport) {
    this.options.onFailure(transport);
    if (this.oldInnerHTML) {
      this.element.innerHTML = this.oldInnerHTML;
      this.oldInnerHTML = null;
    }
    return false;
  },
  enterHover: function() {
  	if (this.saving) return;
  	
  	if(typeof(this.element.parentNode.parentNode.currentStyle) != 'undefined')
		this.color_anterior = this.element.parentNode.currentStyle.backgroundColor;
	else
		this.color_anterior = this.element.parentNode.getStyle('backgroundColor');
  	this.element.parentNode.style.backgroundColor = this.options.highlightcolor;
	  	
  	this.element.style.backgroundColor = this.options.highlightcolor;
    
    if (this.effect) { this.effect.cancel(); }
    Element.addClassName(this.element, this.options.hoverClassName)
  },
  getText: function() {
    return this.element.innerHTML.unescapeHTML();
  },
  leaveHover: function() {
    if (this.options.backgroundColor) {
      this.element.style.backgroundColor = this.oldBackground;
    }
    
    this.element.parentNode.style.backgroundColor = this.color_anterior;
    
    Element.removeClassName(this.element, this.options.hoverClassName)
    if (this.saving) return;
    this.element.style.backgroundColor = this.originalBackground;
    /*this.effect = new Effect.Highlight(this.element, {
      startcolor: this.options.highlightcolor,
      endcolor: this.options.highlightendcolor,
      restorecolor: this.originalBackground,
      duration: 0.2
    });*/
  },
  leaveEditMode:function(transport) {
  	var el = $('div_textareaEditor');
	var padre = el.parentNode;
	// Eliminamos el hijo (el) del elemento padre
	padre.removeChild(el);
    Element.removeClassName(this.element, this.options.savingClassName);
    this.removeControls();
    this.leaveHover();
    this.element.style.backgroundColor = this.originalBackground;
    Element.show(this.element);
    this.editing = false;
    this.saving = false;
    this.oldInnerHTML = null;
  }
}