Event.observe(window, 'load', init, false);

function makeEditable(id){
	Event.observe(id, 'dblclick', function(){edit($(id))}, false);
	Event.observe(id, 'mouseover', function(){showAsEditable($(id));}, false);
	Event.observe(id, 'mouseout', function(){showAsEditable($(id), true)}, false);
}

function edit(obj){
	Element.hide(obj);

	var textarea = '<td id="'+obj.id+'_editor"><input id="'+obj.id+'_edit" type="text" name="edit" value="' + obj.innerHTML + '" />';
	var button	 = '<a id="' + obj.id + '_save" href="#"><img src="./images/save.png" style="border:none;" /></a> | <a id="' + obj.id + '_cancel" href="#"><img src="./images/close.png" style="border:none;" alt="Close" /></a></td>';
	
	new Insertion.After(obj, textarea+button);	
	Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj)}, false);
	Event.observe(obj.id+'_cancel', 'click', function(){cleanUp(obj)}, false);
	
}

function showAsEditable(obj, clear){
	if (!clear){
		Element.addClassName(obj, 'editable');
	}else{
		Element.removeClassName(obj, 'editable');
	}
}

function saveChanges(obj){
	
	var new_content	=  escape($F(obj.id+'_edit'));
	var se = Form.serialize('edit');
	alert(se);
    var pars = $(obj.id + '_edit').value;
	cleanUp(obj, true);

	var success	= function(t){editComplete(t, obj);}
	var failure	= function(t){editFailed(t, obj);}
	new Ajax.Request("ajax_control.php", {
		onSuccess : success,
 		onFailure : failure,
 		parameters : "m=save&password=dietcoke&n="+ pars
	}); //end ajax 

}

function cleanUp(obj, keepEditable){
	Element.remove(obj.id+'_editor');
	Element.show(obj);
	if (!keepEditable) showAsEditable(obj, true);
}

function editComplete(t, obj){
	cleanUp(obj, true);
	$(obj).value = t.responseText;
}

function editFailed(t, obj){
	///alert(t.responseText);
	cleanUp(obj);
}