function makeEditable(id) {
    var obj = document.getElementById(id);
    edit(obj);			
    //editMode(obj,false);
}

function edit(obj) {			 
	editor = '<input type="text" class="editable" name="' + obj.id + '_edit" value="' + obj.innerHTML + '" id="' + obj.id + '_edit" /><br />';
	editor += '<input type="image" src="/static/images/bt_salvar.png" name="' + obj.id + '_save" value="SALVAR" onClick="save(\'' + obj.id + '\')" />';
	//&nbsp;&nbsp;<input type="image" src="/static/images/bt_cancelar.png" />';	
    obj.innerHTML = editor;
	obj.className = null;
	disconnectAll(obj.id);
}


function save(id) {
    new_content = document.getElementById(id+'_edit').value;
    doc = loadJSONDoc("/mediaUpdate?" +
                        queryString({"id" : id,
                                     "title" : new_content 
                                    }));
    doc.addCallback(displayChange);
}

function displayChange(result) {
    replaceChildNodes(result['id'], result['title']);
	connect(result['id'], 'onclick', function () { makeEditable(result['id']); });
	connect(result['id'], 'onmouseenter', function () { editHighlight(result['id'], false) });
	connect(result['id'], 'onmouseleave', function () { editHighlight(result['id'], true) });
}

/*function editMode(obj,go) {
    if(!go) {
        obj.onclick = null;
        obj.onmouseover = null;    
    } else {
        obj.onclick = 'makeEditable(' + obj.id + ')';
        obj.onmouseover = 'editHighlight(' + obj.id + ',false)';     
    }
}*/

function editHighlight(id, clear) {
    elem = document.getElementById(id);
    if(!clear) {
        elem.className = 'editable';
    } else {
        elem.className = null;
    }
}