/* this is the old-school way of extending classes in prototype. superceded by the following block
var InPlaceEditorStyled = {}
InPlaceEditorStyled = Class.create();
Object.extend(InPlaceEditorStyled.prototype, Ajax.InPlaceEditor.prototype);
Object.extend(InPlaceEditorStyled.prototype, {
	_postProcessEditField: Ajax.InPlaceEditor.prototype.postProcessEditField,
	_initialize: Ajax.InPlaceEditor.prototype.initialize,
	element_ht: 0, 
	element_wd: 0,
	initialize: function(element, url, options) {
		this.element_ht = element.getHeight();
		this.element_wd = element.getWidth();
		this._initialize(element, url, options);
	},
	postProcessEditField: function() {
		this._postProcessEditField();
		$$('.editor_field')[0].setStyle({fontSize: this.element.getStyle('fontSize'), width: this.element_wd + 'px', height: this.element_ht + 'px'});
  }
});
*/

var last_editor = undefined;

Ajax.InPlaceEditorStyled = Class.create(Ajax.InPlaceEditor, {
  initialize: function($super, element, url, options) {
	this.element_ht = element.getHeight();
	this.element_wd = element.getWidth() - 90;
	this.element_val = element.innerHTML;
	
	// set some default inner contents for IPEs with empty start values
	if(element.innerHTML == '')
		element.innerHTML = "(blank)";
		
		 
	var editLink = document.createElement('span');
	editLink.innerHTML = '[ edit ]';
	editLink.id = element.id+'_editlink';

	// extend! EXTEND.
	editLink = $(editLink);
	element = $(element);
	editLink.setStyle({
  		width: '60px',
		marginLeft: '5px',
		marginTop: element.getStyle('marginTop'),
		cursor: 'pointer'
	});
	
	element.insert({ after: editLink });
	editLink.insert({ after: '<br />' });
	
	element.setStyle({
		display: 'inline'
	});
	
	options.externalControl = editLink.id;
    $super(element, url, options);
	
  },
  
  promptSave: function() {
	  if($$('.editor_field')[0].value != this.element_val) {
	  	if(confirm("This field has been changed. Would you like to save the changes?"))
			this.handleFormSubmission();
		else
			this.handleFormCancellation();
	  } else {
		  	this.handleFormCancellation();
	  }
  },
  
  leaveEditMode: function($super) {
	  $super();
	  this.element.setStyle({
			display: 'inline'
	  });
  },
  
  postProcessEditField: function($super) {
	  $super();
	  Element.observe($$('.editor_field')[0], 'keydown', this.checkForEscapeOrReturn.bindAsEventListener(this));
	  $$('.editor_field')[0].setStyle({fontSize: '12px', width: (this.element_wd < 80) ? 80 : this.element_wd + 'px', height: this.element_ht + 'px'});
	  // another request. make room for the cancellation UI.
	  
	  
	  // put it in, take it out. put it in, take it out.
	  //$$('.editor_field')[0].onblur = this.promptSave.bind(this);
  },
  
  enterEditMode: function($super) {
	  if(last_editor != undefined) {
	  	last_editor.handleFormCancellation();
		last_editor = undefined;
	  } 
	  last_editor = this;
	  $super();
  }
});