<div class="tab-content">
    <form method="post" name="filtre_Bibliotheque" id="filtre_Bibliotheque" style="margin-top:20px;">

        <div class="colonne3">
            	{% if canEdit %}
                <a class="ajouter_blanc_v2 button_v2 white-tooltip" id="btnAddHierarchy" onclick="generateTab('{{ path('ProjetAchat.Hierarchy.create', {typeObject: typeObjet, idObject: idObjet}) }}', '{{ 'Ajout catégorie de tâche' | trad }}', 'div_categorie_externe')" style="float:right;">
                			<span class="infos_tooltip left">
                				{{ 'Ajouter une catégorie de tâche' | trad }}
                            </span>
                </a>
            {% endif %}
            <div id="treeviewH" class="treeviewH" style="margin-top:30px;">
            </div>
        </div>
        <div id="zoneDonneeH" class="colonneComplement">
        </div>
    </form>
</div>

<script>

    $(document).on('click', '#treeviewH .jstree-anchor', function(e) {

        var anchorId = $(this).parent().attr('id');
        var id = anchorId.substring(anchorId.indexOf('_') + 1, anchorId.length);
        
        activeLoader();
        $.ajax({
            dataType : 'html',
            url: '{{ baseUrl() }}ProjetAchat/ajaxHierarchy/{{ typeObjet }}/{{ idObjet }}/'+id,
            type: "POST",
            success: function(result){
                $("#zoneDonneeH").html(result);
                desactiveLoader();
            }
        });
    });

	$('#treeviewH').jstree({
		'core' : {
			'check_callback' : function(operation, node, node_parent, node_position, more){
				return true;
			},
			"themes":{
				"theme" : "default",
				"dots" : false,
				"icons":false,
				"variant" : "large"
			},
			'data' :  {{ treeHierarchy | json }}
		},

		{% if canEdit %}"plugins" : ["dnd"]{% endif %}
	})
	.bind("loaded.jstree", function(event, data) {$(this).jstree("open_all");})
	.bind("move_node.jstree", function(e, data) {
            $.ajax({
                dataType : 'html',
                url: '{{ path('ProjetAchat.Hierarchy.ajaxReOrder', {typeObject:typeObjet, idObject: idObjet}) }}',
                data : {idHierarchy:data.node.id, oldParent : data.old_parent, parent : data.parent,old_position : data.old_position,position : data.position},
                type: "POST",
                success: function(result){
                    desactiveLoader();
                }
            });
	});
	
    function AfficheMenuH(objet)
    {
        event.stopPropagation();
        var id = $(objet).parent().parent().attr('id');

        $.ajax({
            dataType : 'html',
            url: '{{ baseUrl() }}ProjetAchat/ajaxMenuContextuelH/'+id, // TODO : use path
            type: "POST",
            success: function(result){
                $(objet).parent().find('.ss_parametres').html(result);
            }
        });
    }

</script>
<style>
    .list-group-item {
        border: 0px solid #ddd;
    }
    
    .divMenuContextuel{
		width: 50px;
		height: 32px;
		float: right;
		position: absolute;
		top: 0px;
		right: 0px;
    }
    
    .divMenuContextuel .imagePoint{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -6px;
    }
    
</style>