function newCat(){
    $('#editor').removeClass('d-none');
    $("#id").val(0);
    tree = document.getElementById('tree');
    editor = document.getElementById("editor");
    var elementTop = $('#editor').offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    
    if (!(elementBottom > viewportTop && elementTop < viewportBottom))
        editor.scrollIntoView( {behavior: "smooth" });
}

$(function () {
    $('.tree li:has(ul)').addClass('parent_li').find(' > span');
    $('.tree li.parent_li > span').on('click', function (e) {
        var children = $(this).parent('li.parent_li').find(' > ul > li');
        if (children.is(":visible")) {
            children.hide('fast');
          //  $(this).find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
        } else {
            children.show('fast');
          //  $(this).find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
        e.stopPropagation();
    });
    $("span").on('click', function(e){
        $('#editor').removeClass('d-none');
        bookable = ($(this).attr('data-bookable') == 0)?false:true;
        lkz = ($(this).attr('data-lkz') == 0)?false:true;
        type = $(this).attr('data-type');
        pid = $(this).attr('data-pid');
        id = $(this).attr('data-id');
        description = $(this).attr('data-description');
        typeAccount = (type === "account") ? true : false;
        typeInput = (type === "input") ? true : false;
        typeOutput = (type === "output") ? true : false;
        $('#bookable').prop('checked', bookable);
        $('#typeInput').prop('checked', typeInput);
        $('#typeOutput').prop('checked', typeOutput);
        $('#typeAccount').prop('checked', typeAccount);
        $('#lkz').prop('checked', lkz);
        $("#parent").val(pid).change();
        $("#id").val(id);
        $("#description").val(description).change();
        tree = document.getElementById('tree');
        editor = document.getElementById("editor");
        var elementTop = $('#editor').offset().top;
        var elementBottom = elementTop + $(this).outerHeight();
    
        var viewportTop = $(window).scrollTop();
        var viewportBottom = viewportTop + $(window).height();
    
        
        if (!(elementBottom > viewportTop && elementTop < viewportBottom))
            editor.scrollIntoView( {behavior: "smooth" });
        //$('#parent').prop('selected', pid);

    //     title: "Edit Account",
    //     placement: 'bottom',
    //     html: true, 
    //     content: $('[data-name="popover-content"]')
    });
});