<script>
(function(){
	

	// For any of this to work, "FancyIndexing" has to be turned on in the htaccess file (by mentioning it in the IndexOptions), because if it's turned off there's no way to tell which items are folders and which ones are files.
	
	
	
	// hide default file-listing if this JavaScript is able to run
	// ... if JavaScript is disabled, display the default file-list like normal
	var listingTags_ary = document.getElementsByTagName("pre");
	var listingTag = listingTags_ary[ listingTags_ary.length-1 ];		// get the last <pre> tag
	
	var defaultList_ary = document.getElementsByTagName("pre");
	var defaultList_elm = defaultList_ary[ defaultList_ary.length-1 ];
	defaultList_elm.classList.add("hidden");
	
	// un-hide the gallery if this JavaScript is able to run
	// ... if JavaScript is disabled, the fancy-gallery tag remains hidden
	var gallery_elm = document.getElementById("gallery");
	gallery_elm.classList.remove("hidden");
	
	
	// read file listing
	var imgTag_ary = defaultList_elm.getElementsByTagName("img");
	var linkTag_ary = defaultList_elm.getElementsByTagName("a");
	// FancyIndexing can include 4 links for changing the file-list order. If these sorting links are present, this will skip past them.  The rest of the links will correspond to each file or folder.
	var firstLinkText = linkTag_ary[0].childNodes[0].textContent;
	if( firstLinkText === "Name" ){
		var linkTag_ary_tmp = [];
		for(var i=4; i<linkTag_ary.length; i++){
			linkTag_ary_tmp.push( linkTag_ary[i] );
		}
		linkTag_ary = linkTag_ary_tmp;
		delete linkTag_ary_tmp;
	}//if:  the first few links are for re-sorting the file-list, then omit them
	
	
	// sort items into folders and image files  (ignore other files)
	// this is accomplished by looking at the img tags because their "alt" tag will differ depending on whether that line in the list refers to a folder or a file.
	var fileList_ary = [];
	var folderList_ary = [];
	for(var f=0; f<imgTag_ary.length; f++){
		var link_url = linkTag_ary[f].attributes.href.value;
		var linkText = linkTag_ary[f].childNodes[0].textContent;
		if( linkText === "Parent Directory" )		continue;		// don't show links to the parent folder  (disable this line of code to display them)
		var isFolder = (imgTag_ary[f].attributes.alt.value === "[DIR]");
		if( isFolder ){
			// folder
			folderList_ary.push( link_url );
		}else{
			// file
			var allowFile = false;
			if( link_url.indexOf(".jpg") > -1 ) 		allowFile = true;
			if( link_url.indexOf(".jpeg") > -1 )		allowFile = true;
			if( link_url.indexOf(".png") > -1 ) 		allowFile = true;
			if( link_url.indexOf(".gif") > -1 ) 		allowFile = true;
			if( allowFile )                     		fileList_ary.push( link_url );
		}
	}// for each item
	
	
	generateHtml();
	
	
	
	
	// call this after "fileList_ary" and "folderList_ary" are populated
	function generateHtml(){
		// generate thumbs
		var innerHtml_str = '';
		
		
		// add folders
		for(var i=0; i<folderList_ary.length; i++){
			var folderName = folderList_ary[i];

			// create HTML
			var thumbHtml_str = '';
			thumbHtml_str += '<li class="thumb">';
			thumbHtml_str += '   	<a href="' + folderName + '" target="_blank">';
			thumbHtml_str += '   			<div class="folderImage"></div>';
			// thumbHtml_str += '		</div>';
			thumbHtml_str += '   		<p class="folderName">' + folderName + '</p>';
			thumbHtml_str += '   	</a>';
			thumbHtml_str += '</li>';

			// add this thumbnail to the new html
			innerHtml_str += thumbHtml_str;
		}// for each folder
		
		
		
		// add files
		for(var i=0; i<fileList_ary.length; i++){
			var fileName = fileList_ary[i];
			var thumbPath = fileName;

			// create HTML
			var thumbHtml_str = '';
			thumbHtml_str += '<li class="thumb">';
			thumbHtml_str += '	<a href="' + fileName + '" target="_blank">';
			thumbHtml_str += '		<div class="thumbImageCrop">';
			thumbHtml_str += '			<img class="thumbImage" src="' + thumbPath + '">';
			thumbHtml_str += '		</div>';
			thumbHtml_str += '	</a>';
			thumbHtml_str += '	<a href="' + fileName + '" download>';
			thumbHtml_str += '		<p class="fileName">' + fileName + '</p>';
			thumbHtml_str += '	</a>';
			thumbHtml_str += '</li>';

			// add this thumbnail to the new html
			innerHtml_str += thumbHtml_str;
		}// for each file
	
		
		
		// populate the gallery
		gallery_elm.innerHTML = innerHtml_str;
	}// generateHtml()
	
	
	
	
}());
</script>
</body></html>