$(document).ready(function(){
    $(".editable-click").click(editableBind);
});

function editableBind(){
        var elem = $(this);
        var id = $(this).attr('id');
        var postURL = $(this).attr('data-url');
        var textboxID = "Textfeld_"+id;
        var areaID = "EditableArea_"+id;
        var text = elem.text();
        text = text.replace(/"/g, '&quot;');
        console.log(text);
        var width = parseFloat(elem.outerWidth()) - 50;
        console.log(document.getElementById(id).outerHTML);
        var originalHTML = btoa(unescape(encodeURIComponent(document.getElementById(id).outerHTML)));
       
        $(this).replaceWith(`<div id="`+areaID+`" style="display: inline-block; min-width: `+width+`px;">
        <div class="input-group">
        <input type="text" id="`+textboxID+`" class="form-control" style="min-width: `+width+`px" value="`+text+`">
        <div clas="btn-group" style="margin-left: 2px;">
        <button type="submit" class="btn btn-outline-primary" onclick="editablePOST('`+postURL+`', '`+textboxID+`', '`+areaID+`', '`+originalHTML+`', '`+id+`'); return false;">  <div id="`+textboxID+`_Spinner" class="spinner-border spinner-border-sm"  style="display:none;" role="status"></div><span id="`+textboxID+`_Check" class="fa fa-check"></span></button>
        <button type="button" class="btn btn-outline-danger" onclick="editableSwitchBack('`+areaID+`', '`+originalHTML+`')"><span class="fa fa-xmark"></span></button>
        
        </div>
        
        </div>
      
        </div>`);
        
    }
/**
 * Comment
 */
function editablePOST(postURL, textboxID, areaID, originalHTML, elementID) {
    var value = $("#"+textboxID).val();
    var spinner = $("#"+textboxID+"_Spinner");
     var check = $("#"+textboxID+"_Check");
     spinner.toggle();
     check.toggle();
    $.post(postURL, {value:value}, function(result){
         editableSwitchBack(areaID, originalHTML);
         $("#"+elementID).text(value);
          spinner.toggle();
         check.toggle();  
         
    });
}

/**
 * Comment
 */
function editableSwitchBack(areaID, originalHTML) {
    $("#"+areaID).replaceWith(atob(originalHTML));
    $(".editable-click").click(editableBind);
}
