<script>
{var $extensions = []}
    $(function(){

		var uqs = {$uniqid};

		var treeData = {$categoryData};


		var ctgLoadFn = function(el){

			$(el).fancytree({

				source: 		treeData,
				checkbox:		{$isSelectable ? 'true' : 'false' |noescape},
				selectMode:		{$hasThreeStates ? '3' : '2' |noescape},
				create:			function() {
					var container = $(this).find('.fancytree-container');
					{if $width}container.css({ width: {$width} });{/if}
					{if $height}container.css({ height: {$height} });{/if}
				},

				activate: function(evt, data) {

					var node = data.node;
					if(typeof node != 'undefined'){
						var itemId = node.key || 0;
						$.nette.ajax({
							url: {link itemSelected!},
							data: {
								{$control->getParameterId('id')}	:	itemId
							}
						});
					}
				}
{if $hasDnD}
	{php $extensions[] = 'dnd'}
				, dnd: {
					autoExpandMS: 400,
					focusOnClick: true,
					preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
					preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
					dragStart: function(node, data) {
						return true;
					},
					dragEnter: function(node, data) {
						// data.otherNode ~ src
						// node ~ dest

						if(data.otherNode.parent.parent == null)
							return ['over'];
						else if(node.parent.parent == null) return true;

						return ['over'];
					},
					dragDrop: function(node, data) {
						var parentId = null;
						if(data.hitMode == 'over')
							parentId = node.key
						else {
							if(node.parent.parent == null) {	// root element
								parentId = null;
							} else {
								parentId = node.parent.key;
							}
						}

						$.nette.ajax({
							url: {link moveCategory!},
							data: {
								{$control->getParameterId('id')}			:	data.otherNode.key || 0,
								{$control->getParameterId('newParentId')}	:	parentId
							},
							success: function(payload) {
								if(payload.success) data.otherNode.moveTo(node, data.hitMode);
							}
						});
					}
				}
{/if}
{if count($extensions)}
				, extensions: [{$extensions|implode, ','}]
{/if}
			});

		};

		ctgLoadFn($('#categoryTree'+uqs + ' .tree'));

	});
</script>


<div class="form-group">
	{*<label for="jqxTree" class="col-sm-2 control-label"></label>*}
	<div class="col-sm-8">
		<div id="categoryTree{$uniqid}"><div class="tree form-control"></div></div>
	</div>
</div>

<div class="form-group">
	<div class="col-sm-offset-0 col-sm-8" style="margin-top: 10px;">
		{snippet categoryControls}
			{if $hasControls}
				{control crud-addButton}
				{if $categoryId}
					{control crud-controls-$categoryId}&nbsp;
				{/if}
			{/if}
		{/snippet}
	</div>
</div>


{snippet categoryDeleted}
	{if $categoryDeleted}
		<script>
			var node = $('#categoryTree{$uniqid|noescape} .tree').fancytree("getTree").getNodeByKey({$categoryDeleted['key']});

			// unselect (because of use in form)
			node.visit(function(n){ n.setSelected(false); });
			node.setSelected(false);

			// remove children
			node.removeChildren();
			node.remove();
		</script>
	{/if}
{/snippet}
{snippet categoryEdited}
	{if $categoryEdited}
		<script>
			var node = $('#categoryTree{$uniqid|noescape} .tree').fancytree("getTree").getNodeByKey({$categoryEdited['key']});
			node.setTitle({$categoryEdited['title']});
		</script>
	{/if}
{/snippet}
{snippet categoryAdded}
	{if $categoryAdded}
		<script>
			var newNodeData = {$categoryAdded};
			$('#categoryTree{$uniqid|noescape} .tree').fancytree("getRootNode").addChildren(newNodeData);
		</script>
	{/if}
{/snippet}
{snippet subcategoryAdded}
	{if $subcategoryAdded}
		<script>
			var newNodeData = {$subcategoryAdded};

			var parentId = {$subcategoryAdded['parent_id']};
			var node = $('#categoryTree{$uniqid|noescape} .tree').fancytree("getTree").getNodeByKey(parentId.toString());

			node.addChildren(newNodeData);
		</script>
	{/if}
{/snippet}
