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

// Initialize all div object that got the className of makeEditable
function init(){
var doc = document.getElementsByTagName('div');
for (var i = 0; i < doc.length; i++){
   if(doc[i].className == "makeEditable" )
   {
		makeEditable(doc[i]);
	}
}
	
}

function makeEditable(id){
	Event.observe(id, 'click', 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);
	if (obj.innerHTML.length > 100)
		{
		newrows=obj.innerHTML.length/50;
		var textarea = '<div id="'+obj.id+'_editor"><textarea id="'+obj.id+'_edit" name="'+obj.id+'" rows="'+newrows+'" cols="50" style="background:white;">'+obj.innerHTML+'</textarea>';
		}
	else
		var textarea = '<div id="'+obj.id+'_editor"><input class="inputbox" type="text" size="100" name="'+obj.id+'" value="'+obj.innerHTML+'" id="'+obj.id+'_edit" name="'+obj.id+'" rows="4" cols="35" style="background:white;">';
	var button	 = '<div><input id="'+obj.id+'_save" type="button" value="SAVE" /> OR <input id="'+obj.id+'_cancel" type="button" value="CANCEL" /></div></div>';
	
	/**************************************************************************
	 * To enable special cases such as dropdown box, customize the part below 
	 * See 2 examples below for State and Country!
	 **************************************************************************/
	if(obj.getAttribute('eip_field') == 'dealer_state')
	{
		var currentState = obj.innerHTML;
		var stateDropdown = '<div id="'+ obj.id + '_editor"><select id="'+obj.id+'_edit"><option selected="selected">'+ currentState +'</option><option value="Alabama">Alabama</option><option value="Alaska">Alaska</option><option value="Arizona">Arizona</option><option value="Arkansas">Arkansas</option><option value="California">California</option><option value="Colorado">Colorado</option><option value="Connecticut">Connecticut</option><option value="Delaware">Delaware</option><option value="Florida">Florida</option><option value="Georgia">Georgia</option><option value="Hawaii">Hawaii</option><option value="Idaho">Idaho</option><option value="Illinois">Illinois</option><option value="Indiana">Indiana</option><option value="Iowa">Iowa</option><option value="Kansas">Kansas</option><option value="Kentucky">Kentucky</option><option value="Louisiana">Louisiana</option><option value="Maine">Maine</option><option value="Maryland">Maryland</option><option value="Massachusetts">Massachusetts</option><option value="Michigan">Michigan</option><option value="Minnesota">Minnesota</option><option value="Mississippi">Mississippi</option><option value="Missouri">Missouri</option><option value="Montana">Montana</option><option value="Nebraska">Nebraska</option><option value="Nevada">Nevada</option><option value="New Hampshire">New Hampshire</option><option value="New Jersey">New Jersey</option><option value="New Mexico">New Mexico</option><option value="New York">New York</option><option value="North Carolina">North Carolina</option><option value="North Dakota">North Dakota</option><option value="Ohio">Ohio</option><option value="Oklahoma">Oklahoma</option><option value="Oregon">Oregon</option><option value="Pennsylvania">Pensylvania</option><option value="Rhode Island">Rhode Island</option><option value="South Carolina">South Carolina</option><option value="South Dakota">South Dakota</option><option value="Tennessee">Tennessee</option><option value="Texas">Texas</option><option value="Utah">Utah</option><option value="Vermont">Vermont</option><option value="Virginia">Virginia</option><option value="Washington">Washington</option><option value="West Virginia">West Virginia</option><option value="Wisconsin">Wisconsin</option><option value="Wyoming">Wyoming</option></select>';
		new Insertion.After(obj, stateDropdown+button);	
	}
	else if (obj.getAttribute('eip_field') == 'dealer_country')
	{
		var currentValue = obj.innerHTML;
		var dealerTypeDropdown = '<div id="'+ obj.id + '_editor"><select id="'+obj.id+'_edit"><option selected="selected">'+ currentValue +'</option><option>USA</option><option>Canada</option>';
		new Insertion.After(obj, dealerTypeDropdown+button);
	}	
	else
	{
		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 saveChanges(obj){
	// Update this to point to your component!
	var componentName = 'index2.php?option=com_jomres&task=editinplace&no_html=1';


	/**************************************************************************
	 * Can leave the part below in tact...
	 **************************************************************************/
	var url = './' + componentName;	
	
	var new_content	=  escape($F(obj.id+'_edit'));
	obj.innerHTML	= "Saving...";
	cleanUp(obj, true);

	var success	= function(t){editComplete(t, obj);}
	var failure	= function(t){editFailed(t, obj);}

	var pars = 'id='+obj.id+'&eip_content='+new_content+'&eip_id_column='+obj.getAttribute('eip_id_column')+'&eip_id='+obj.getAttribute('eip_id')+'&eip_field='+obj.getAttribute('eip_field')+'&eip_table='+obj.getAttribute('eip_table')+'&eip_lang='+obj.getAttribute('eip_lang');
	var myAjax = new Ajax.Request(url, {method:'post', postBody:pars, onSuccess:success, onFailure:failure});
}

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



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

function editComplete(t, obj){
	obj.innerHTML	= t.responseText;
	showAsEditable(obj, true);
}

function editFailed(t, obj){
	obj.innerHTML	= 'Sorry, the update failed.';
	cleanUp(obj);
}