@if(!defined('LOAD_FANCYTREE'))

	@push('css')
		<link rel="stylesheet" href="/modules/fancytree/skin-bootstrap/ui.fancytree.min.css">
	@endpush 

	<script src="/modules/fancytree/jquery.fancytree-all-deps.min.js"></script>

	<script>
		$(function() {
			// Initialize Fancytree
			$("#tree").fancytree({
				extensions: ["childcounter", "dnd5", "edit", "glyph", "wide"],
				autoScroll: true,
				checkbox: false,
				selectMode: 3,
				dnd5: {
					dragStart: function(node, data) {
						return true;
					},
					dragEnter: function(node, data) {
						return true;
					},
					dragDrop: function(node, data) {
						alert("Drop on " + node + ":\n"
          + "source:" + JSON.stringify(data.otherNodeData) + "\n"
          + "hitMode:" + data.hitMode
          + ", dropEffect:" + data.dropEffect
          + ", effectAllowed:" + data.effectAllowed);


						console.log(node);
						console.log(data); 
						data.otherNode.copyTo(node, data.hitMode);
					}
				},
				glyph: glyph_opts,
				// source: {url: "ajax-tree-taxonomy.json", debugDelay: 1000},
				source: {
					url: "ajax-tree-products.json",
					debugDelay: 1000
				},
				// toggleEffect: { effect: "drop", options: {direction: "left"}, duration: 400 },
				wide: {
					iconWidth: "1em",       // Adjust this if @fancy-icon-width != "16px"
					iconSpacing: "0.5em",   // Adjust this if @fancy-icon-spacing != "3px"
					labelSpacing: "0.1em",  // Adjust this if padding between icon and label != "3px"
					levelOfs: "1.5em"       // Adjust this if ul padding != "16px"
				},
				childcounter: {
        			deep: true,
        			hideZeros: true,
        			hideExpanded: true
      			},
				icon: function(event, data){
					// if( data.node.isFolder() ) {
					//   return "glyphicon glyphicon-book";
					// }
				},
				lazyLoad: function(event, data) {
					data.result = {
						url: "ajax-sub2.json",
						debugDelay: 1000
					};
				}
			});
		};
	</script>

	@php(define('LOAD_FANCYTREE', true))

@endif