Event.observe(window, 'load', function(){	
	var editables = $A($$('.inputs'));
	
	//below 'n' is each entry in the 'editables' array
	editables.each(function(n){
		n.observe('click', function() {
			//make it a text area now
			Element.hide(n);
			var orig = n.innerHTML;
			var edit_area = '<div id="eip_editor_'  + n.id + '"><textarea id="eip_edit_'  + n.id + '" name="eip" rows="4" cols="40">' + orig + '</textarea>';
			var buttons	 = '<div><input id="eip_save_'  + n.id + '" type="button" value="save" />  <input id="eip_cancel_' + n.id + '" type="button" value="cancel" /></div></div>';
			$('status_' + n.id).innerHTML = edit_area + buttons;
			Event.observe('eip_save_' + n.id, 'click', function(){
				//make the changes
				//here you could make your Ajax.Request() to commit to your DB
				var changes = $('eip_edit_' + n.id).value;
				n.innerHTML = changes;
				Element.show(n);
				$('status_' + n.id).innerHTML = "Saved!";
			}, false);
			Event.observe('eip_cancel_' + n.id, 'click', function(){
				//revert the changes
				Element.show(n);
				$('status_' + n.id).innerHTML = "Canceled!";
			}, false);
		}, false);	
	});
});