var text = 'Click here to edit';
  
function setClickable(obj, i, url) {
  $(obj).click(function() {
    var html = $(this).html() == text ? '' : $(this).html();
    var textarea = '<div class="editable"><textarea rows="6" cols="117">' + html + '</textarea>';
    var button = '<div class="eip buttons"><input type="button" value="Save" class="saveButton" /> OR <input type="button" value="Cancel" class="cancelButton" /></div></div>';
    var revert = $(obj).html();

    $(obj).after(textarea+button).remove();
    $('.saveButton').click(function(){saveChanges(this, false, i, url);});
    $('.cancelButton').click(function(){saveChanges(this, revert, i, url);});
    
    $('div.editable textarea').focus();
  })
  .mouseover(function() {
    $(obj).addClass("editable");
  })
  .mouseout(function() {
    $(obj).removeClass("editable");
  });

  $(document).keydown(function(e) {
    if (e.which == 27) {
      $($(obj).attr('id') + ' .cancelButton').click();
    }
  });
} //end of function setClickable

function saveChanges(obj, cancel, n, url) {
  if (!cancel) {
    var t = $(obj).parent().siblings(0).val();

    $.post(url,{
      content: t,
      n: n
    },function(txt){
    });
  }
  else {
    var t = cancel;
  }

  if (t=='') t = text;

  $(obj).parent().parent().after('<p class="editable">' + t + '</p>').remove();
  setClickable($("p.editable").get(n), n);
}