var mooipe = new Class({
  initialize: function(el, url, options, ajaxOptions) {
    this.el = ($type(el) == "string" ? $(el) : el);
    this.elid = el;
    this.url = url;

    this.pictureid = this.el.get('id').substr(5);
        
    this.options = Object.extend({
      hlColor: "#dEfFfF",
      restoreColor: "#FFFFFF",
      rows: 3,
      cols: 20,
      okText: 'save',
      cancelText: 'cancel',
      savingText: 'saving...',
      emptyText: 'click here to describe...'
    }, options || {});
    
    this.ajaxOptions = Object.extend({
      url: 'describe',
      method: 'post',
      onFailure: this.ipeFailure.bind(this),
      onSuccess: this.ipeSuccess.bind(this),
      data: ''
    }, ajaxOptions || {});
    
    this.displayStyle = this.el.getStyle('display');
    
    text = this.el.get('text');
    text.trim();
    if (text.length == 0) {
      this.el.set('text', this.options.emptyText);
    }
    this.text = text
    
    this.hlEffect = new Fx.Tween(this.el, {property: 'background-color', duration: 800});
    
    //Add the mouseover event to my element
    this.el.addEvents({
      'mouseenter': function(e) {
        e.stop();
        this.el.setStyle('background-color', this.options.hlColor);
      }.bind(this),
      
      'mouseleave': function() {
        //this.el.setStyle('background-color', this.options.restoreColor);
        this.hlEffect.start(this.options.hlColor, this.options.restoreColor);
      }.bind(this),
      
      'click': this.enterEditMode.bind(this)
    });
    
    this.editForm = new Element('form', {
      'name': this.elid + '-form',
      'events': {
        'submit': function(e) {
          this.exitEditMode(true);
          e.preventDefault();
        }.bind(this)
      }
    });
    
    if(this.options.rows != 1) {
      this.editField = new Element('textarea', {
        'name': 'fieldValue',
        'value': this.el.innerHTML,
        'cols': this.options.cols,
        'rows': this.options.rows
      });
    }
    else {
      this.editField = new Element('input', {
        'type': 'text',
        'name': 'fieldValue',
        'value': this.el.innerHTML,
        'size': this.options.cols
      });
    }
    
    this.okButton = new Element('input', {
      'type': 'button', 
      'value': this.options.okText,
      'events' : {
        'click': this.exitEditMode.bind(this, true)
      }
    });
    this.cancelButton = new Element('input', {
      'id': this.elid + '-cancel',
      'type': 'button',
      'value': this.options.cancelText,
      'events': {
        'click': this.exitEditMode.bind(this)
      }
    });
    this.editField.injectInside(this.editForm);
    if(this.options.rows > 1) {
      lb = new Element('br');
      lb.injectInside(this.editForm);
    }
    this.okButton.injectInside(this.editForm);
    this.cancelButton.injectInside(this.editForm);
  },
  
  enterEditMode: function() {
    this.el.setStyle('display', 'none');
    this.editField.value = this.text;
    this.editForm.injectAfter(this.el);
    this.editField.focus();
    this.editField.select();
  },
  
  exitEditMode: function(save) {
    var save = save == null || save == "" || $type(save) != 'boolean' ? false : true;
    if (save) {
      data = "value=" + this.editForm.fieldValue.value + "&i=" + this.pictureid;
      ipeRequest = new Request.HTML({
        url: 'describe',
        method: 'post',
        onFailure: this.ipeFailure.bind(this),
        onSuccess: this.ipeSuccess.bind(this),
        data: data
      }).send();
      this.editForm.dispose();
      this.el.setStyle('display', this.displayStyle);
      this.el.adopt(this.options.savingText);
      this.el.fireEvent('mouseleave');
    }
    else {
      this.editForm.dispose();
      this.el.setStyle('display', this.displayStyle);
      this.el.fireEvent('mouseleave');
    }
  },
  
  ipeSuccess: function(responseTree, resposeElement, html) {
    html = html.trim();
    this.text = html;
    if (html.length == 0) {
      this.el.set('text', this.options.emptyText);
    } else {
      this.el.set('text', '');
      this.el.adopt(responseTree);
    }
  },
  
  ipeFailure: function(resp) {
    this.el.set('text', "Error! Code: " + resp.status + " Text: " + resp.statusText);
  }
  
});