#set($rootcategory = $mediaarchive.getData("pdfbookmark", "index")) #set($children = $rootcategory.children)

<div class="dynamictree" style="overflow: auto; height: 2000px;">

 <ul>
  <li id="$rootcategory.id"><ins>&nbsp;&nbsp;</ins> <a href="$rootcategory.id">$rootcategory.name</a>
   <ul>#showtree($children)
   </ul></li>
 </ul>

</div>


#macro(showtree $categories) #foreach($cat in $categories)
<li id="$cat.id" data-pagenumber="$cat.pagenumber" data-other="blah"><ins>&nbsp;&nbsp;</ins><a href="cat.id">$cat.pagenumber - $cat.name </a> #if($cat.hasChildren())
 <ul>#showtree($cat.children)
 </ul> #end</li>

#end #end
<script type="text/javascript">
	var first = false;

	jQuery(document)
			.ready(
					function() {

						jQuery(".dynamictree")
								.on(
										'select_node.jstree',
										function(e, data) {
											var node = data.node;
											var pagenumber = node.data["pagenumber"];

											if (first != false) {
												console.log("Loading page "
														+ pagenumber);

												var currentimage = jQuery("#page-"
														+ pagenumber);

												if (currentimage.length > 0) {
													console
															.log("Found  page "
																	+ currentimage.length);

													scrollToImage(pagenumber);
												} else {

													var url = "$home$content.searchhome/edit/pdfviewer/index.html?oemaxlevel=1&assetid=${pdf.id}&pagenumber="
															+ pagenumber;

													//https://stackoverflow.com/questions/4774746/jquery-ajax-wait-until-all-images-are-loaded
												    loading=true;

													jQuery
															.ajax({
																cache : false,
																url : url,
																success : function(
																		data) {
																	$(
																			'#pdf-page-scroller')
																			.html(
																					data)
																			.imagesLoaded()
																			.then(
																					function() {
																						scrollToImage(pagenumber);
																						loading = false;
																					});
																}
															});

													
												}

											} else {
												first = true;

											}

										})

								.jstree(
										{
											"core" : {
												"animation" : 0,
												"check_callback" : true,
												"themes" : {
													"stripes" : true
												},

											},
											"types" : {
												"#" : {
													"max_children" : 1,
													"max_depth" : 4,
													"valid_children" : [ "root" ]
												},
												"root" : {
													"icon" : "/static/3.0.9/assets/images/tree_icon.png",
													"valid_children" : [ "default" ]
												},
												"default" : {
													"valid_children" : [
															"default", "file" ]
												},
												"file" : {
													"icon" : "glyphicon glyphicon-file",
													"valid_children" : []
												}
											},
											"plugins" : [ "contextmenu", "dnd",
													"search", "state", "types",
													"wholerow" ]
										});
					});
</script>