#set($rootcategory = $mediaarchive.getData("pdfbookmark", "index"))
#set($children = $rootcategory.children)
<ul   class="navbar-nav flex-column" id="nav_bookmark_accordion" >
	<li id="$rootcategory.id"><ins>&nbsp;&nbsp;</ins> <a href="#">$rootcategory.name</a>
			<ul>#showtree($children)
			</ul></li>
	</ul>

#macro(showtree $categories) 
		#foreach($cat in $categories)
			
			#if($cat.hasChildren())
				<li class="nav-item"><a class="nav-link" onclick="scrollToImage($cat.pagenumber);" href="#" #if($cat.hasChildren()) data-bs-toggle="collapse" data-bs-target="#bookmark-${cat.getId()}" #end >$cat.name</a>
			
					<ul  class="navbar-nav collapse px-2" id="bookmark-${cat.getId()}" data-bookmarkpagenumber=${cat.pagenumber} >#showtree($cat.children)
					</ul> </li>
			
			#else 
			<li class="nav-item"><a onclick="scrollToImage($cat.pagenumber); return false;"  class="nav-link" href="#" >$cat.name</a>
			
					 </li>
			
			#end
		
		#end 

#end




<script type="text/javascript">
			
		
			
			
			jumpToClosestBookmark = function (inPage){
				var bookmarks = Array.from(document.querySelectorAll("ul[data-bookmarkpagenumber]"))
				  .sort(({dataset: {bookmarkpagenumber: a}}, {dataset: {bookmarkpagenumber: b}}) =>a-b); // To reverse it, use `b.localeCompare(a)`.
				  
				  var closest= bookmarks[0];
				  
				  for (let i = 0; i < bookmarks.length; i++) {
					var hit = bookmarks[i];
					var current = closest.dataset.bookmarkpagenumber;
					var next = hit.dataset.bookmarkpagenumber;
					if(current == inPage){
						closest = hit;
						break;
					}
					
					if(current < inPage) {
						if(next < inPage){
							closest = hit;
						} else{
							break;
						}
					} else{
						break;
					}
					
					
					
					
					
					}
					console.log("Closest was" + closest.dataset.bookmarkpagenumber);

			}
			
</script>