var fieldsOnScreen = [];

var EditableField = Class.create({

  initialize: function(id, options) {
  	
	$(id).observe('mouseover', function(){$(id).addClassName('editableField'); });
	$(id).observe('mouseout', function(){$(id).removeClassName('editableField');});
	$(id).observe('click', function(){showEditArea($(id), options)});	
	
	fieldsOnScreen.push(id);
  }

});

function showEditArea(originalTextArea, options) {
  	
	var uniqueSelected = true;
	var defaultOptions = {
		size: '50',
		type: 'text',
		rows: '5',
		cssClass: ''
	}
	
	if(options == null)
		options = Object.clone(defaultOptions)
				
	fieldsOnScreen.each(function(item) {
		var obj = $(item+ '_EditableField');
		if(obj != null) {
			obj.select();
			uniqueSelected = false;
		}
	});
		
	if(!uniqueSelected)
		return false;
	
	originalTextArea.hide();
		
	var eipId = originalTextArea.id;	
	var eipField = originalTextArea.id + '_EditableField';
	var eip_bt_CANCEL = originalTextArea.id + '_bt_CANCEL';
	var eip_bt_SAVE = originalTextArea.id + '_bt_SAVE';
	var eip_original_value = $(originalTextArea.id).innerHTML;

	var buttonsHTML = '<br/><input type="button" value="Save" id=\"#{id_save}\"> <small>or <a id=\"#{id_cancel}\" href="#">Cancel</a></small>'.interpolate({id_save: eip_bt_SAVE, id_cancel: eip_bt_CANCEL});
	var textFieldHTML = '<div id=\"editableArea\"><input size=\"#{size}\" type=\"text\" id=\"#{field}\" value=\"#{value}\" class=\"#{css}\"></div>'.interpolate({size: options.size, field: eipField, value: eip_original_value, css: options.cssClass});
	var textAreaHTML = '<div id=\"editableArea\"><textarea cols=\"#{size}\" id=\"#{field}\" rows=\"#{rows}\">#{value}</textarea></div>'.interpolate({size:options.size, field: eipField, rows: options.rows, value: eip_original_value});

	new Insertion.After(eipId, (options.type == 'text'? textFieldHTML : textAreaHTML));	
	new Insertion.After(eipField, buttonsHTML);
	
	$(eipId+'_EditableField').select();	
		
	$(eip_bt_CANCEL).observe('click', function(){ cancel(eipId) });
	$(eip_bt_SAVE).observe('click', function(){ save(eipId)});
	
  }
  
  
function save(id){
	status('status_success','Save - Field: ' + id);
	$(id).innerHTML = $F(id+'_EditableField');
	$('editableArea').remove();
	$(id).show();
}

function cancel(id){
	status('status_error','Cancel - Field: ' + id);
	$('editableArea').remove();
	$(id).show();
}


function status(selector, msg)
{
	$('statusbar').removeClassName('status_error','status_error');
	$('statusbar').addClassName(selector); 
	$('statusbar').innerHTML = msg;
}