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

 //function init(){
 //    makeEditable('desc');
 //}
 
 function makeEditable(id, fullText, imgId) {
     Event.observe(id, 'click', function(){getImage($(id), imgId)}, false);
     Event.observe(id, 'mouseover', function(){showAsEditable($(id))}, false);
     Event.observe(id, 'mouseout', function(){showAsEditable($(id), true)}, false);
 }

 function showAsEditable(obj, clear){
     if (!clear){
          Element.addClassName(obj, 'editable');
     }else{
          Element.removeClassName(obj, 'editable');
     }
 }
 
 function getImage(obj, imageId) {
    new Ajax.Request('getImage.json', {
        method: 'post',
        parameters: {'imageId': imageId},
        onSuccess: function(transport) {
            var json = transport.responseText.evalJSON();
            var fullText = json.image.imageName;
            edit(obj, fullText , imageId);
        }
     });
 }
 
 function edit(obj, fullText, imgId){
     Element.hide(obj);
     
     var textarea ='<div align="left" id="'+obj.id+'_editor"><input style="width: 80px;" align="left" id="'+obj.id+'_edit" name="'+obj.id+'_edit" value="' + fullText + '" />';
     var button = '<br/><img width="40px" id="'+obj.id+'_ok" src="css/images/ok_btn.png"/><img width="50px" height="20px" id="'+obj.id+'_cancel" src="css/images/cancel_btn.png"/></div>';

     new Insertion.After(obj, textarea + button);
     
     $(obj.id+'_ok').observe('mouseover', function(){
                                $(obj.id+'_ok').src="css/images/ok_btn_over.png";
                            });
     $(obj.id+'_ok').observe('mouseout', function(){
                                $(obj.id+'_ok').src="css/images/ok_btn.png";
                            });
                            
     $(obj.id+'_cancel').observe('mouseover', function(){
                                $(obj.id+'_cancel').src="css/images/cancel_btn_over.png";
                            });
     $(obj.id+'_cancel').observe('mouseout', function(){
                                $(obj.id+'_cancel').src="css/images/cancel_btn.png";
                            });
                            
     Event.observe(obj.id+'_ok', 'click', function(){saveChanges(obj, imgId)}, false);
     Event.observe(obj.id+'_cancel', 'click', function(){cleanUp(obj)}, false);
 }
 
 function cleanUp(obj, keepEditable){
     Element.remove(obj.id+'_editor');
     Element.show(obj);
     if (!keepEditable) {
        showAsEditable(obj, true);
     }
 }
 
 function saveChanges(obj, imgId){
     var new_content = escape($F(obj.id+'_edit'));

     var newName = document.getElementById(obj.id+'_edit');
     obj.innerHTML = "Saving…";     
     cleanUp(obj, true);

     new Ajax.Request('editfilename.json', {
        method: 'post',
        parameters: {'imageId': imgId,
                     'newName': newName.value},
        onSuccess: function(transport) {
            var json = transport.responseText.evalJSON();
            editComplete(json, obj);
        },
        
        onFail: function(transport) {
            editFailed(obj);
        }
    });
 }

 function editComplete(t, obj) {
	 var imageName = t.newImageName;
	 if (imageName.length > 15) {
		 imageName = imageName.substring(0, 12) + "...";
	 } 
     obj.innerHTML = imageName;
     showAsEditable(obj, true);
 }

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