<script>

$(function () {
	var $navigation = $('#navigation');
	$navigation.bind ('move_node.jstree', function (evt, data) {
		if (data.rslt.p == 'inside') {
			$navigation.jstree ('open_node', data.rslt.r[0]);
		}
		$.post ('/navigation/api/move', {page: data.rslt.o[0].id, ref: data.rslt.r[0].id, pos: data.rslt.p}, function (res) {
			//console.log (res.data.msg);
			//TODO: error handling
			return true;
		});
	}).jstree ({
		plugins: ['themes', 'json_data', 'sort', 'dnd', 'crrm'],
		themes: {
			theme: 'classic',
			dots: false,
			icons: false
		},
		json_data: {
			ajax: {
				url: '/navigation/json'
			}
		},
		dnd: {
			'drag_finish': function (data) {
				var new_node = {
						attr: {
							id: $(data.o).attr ('id'),
							sort: $(data.r).find ('> ul > li').length
						},
						data: $(data.o).text ()
					},
					last = $(data.r).find ('> ul > li').last ();

				if (last.length > 0) {
					// add after last
					$navigation.jstree ('create_node', last, 'after', new_node);
				} else {
					// first child
					$navigation.jstree ('create_node', data.r, 'inside', new_node);
				}
				$navigation.jstree ('open_node', data.r);

				// remove from other
				$(data.o).remove ();

				// save to database
				var parent = $(data.r);
				if (parent.is ('div')) {
					parent = false;
				} else {
					parent = parent.attr ('id');
				}
				$.post ('/navigation/api/add', {page: $(data.o).attr('id'), parent: parent}, function (res) {
					//console.log (res.data.msg);
					//TODO: error handling
					return true;
				});
			}
		},
		sort: function (a, b) {
			if ($(a).attr ('sort') > $(b).attr ('sort')) {
				1;
			}
			return -1;
		}
	});
	$(document).bind ('drag_stop.vakata', function (evt, data) {
		if (data.data.jstree && data.event.target.id == 'garbage') {
			var id = $(data.data.obj).attr ('id');
			$.jstree._reference (data.data.obj).remove (data.data.obj);
			$.post ('/navigation/api/remove', {page: id}, function (res) {
				// update other pages from res.other
				//TODO: error handling
				$('#other-pages li').remove ();
				for (var p in res.data.other) {
					$('#other-pages').append (
						'<li class="jstree-draggable" id="' + p + '">' + res.data.other[p] + '</li>'
					);
				}
				return true;
			});
		}
	});
});

</script>
<style>

#pages ul {
	margin-left: 0;
	padding-left: 0;
}

#pages ul li {
	margin-left: 3px;
	padding-left: 0;
	list-style-type: square;
	list-style-position: inside;
}

#pages ul li:hover {
	cursor: pointer;
}

#navigation {
	min-height: 60px;
}

#garbage {
	background: url(/apps/navigation/pix/trash.png);
	background-repeat: no-repeat;
	background-position: 0px 16px;
	padding: 16px 10px 10px 24px;
	margin-top: 5px;
	border-top: 1px solid #ccc;
}

.jstree-classic.jstree-focused {
	background: inherit !important;
}

</style>

<div style="width: 48%; float: left">
<h4>{"Site tree"}</h4>
<p>{"Drag and drop pages to organize your navigation."}</p>
<div id="navigation"></div>

<p id="garbage">{"Drag pages here to remove them from the tree."}</p>
</div>

<div style="width: 48%; float: right">
<h4>{"Other pages"}</h4>
<p>{"Drag these pages to the site tree to include them in your navigation."}</p>
<div id="pages">
<ul id="other-pages">
{% foreach pages %}
	<li class="jstree-draggable" id="{{ loop_index }}">{{ loop_value }}</li>
{% end %}
</ul>
<p><em>{"Note: Pages that are not publicly visible will not be listed here."}</em></p>
</div>
</div>
