From b8fba3ac8e1707a8401c9b2f68085a7f66a8da54 Mon Sep 17 00:00:00 2001
From: Lars Jung <lrsjng@gmail.com>
Date: Mon, 4 Jul 2011 02:18:27 +0200
Subject: [PATCH] Added basic options support. Refactored js.

---
 README.md                   |   9 +-
 build.properties            |   2 +-
 src/h5ai/footer.html        |   3 +-
 src/h5ai/js/inc/file.js     |  99 ++++++
 src/h5ai/js/inc/h5ai.js     | 629 ++++++++++++++++++------------------
 src/h5ai/js/inc/h5aitree.js | 312 ------------------
 src/h5ai/js/inc/tree.js     | 183 +++++++++++
 src/h5ai/js/inc/utils.js    |  15 +
 src/h5ai/js/main.js         |  40 ++-
 src/h5ai/options.js         |   8 +
 target/dot.htaccess         |   4 +-
 target/h5ai/footer.html     |   5 +-
 target/h5ai/header.html     |   2 +-
 target/h5ai/js/main.js      |   2 +-
 target/h5ai/options.js      |   8 +
 15 files changed, 682 insertions(+), 639 deletions(-)
 create mode 100644 src/h5ai/js/inc/file.js
 delete mode 100644 src/h5ai/js/inc/h5aitree.js
 create mode 100644 src/h5ai/js/inc/tree.js
 create mode 100644 src/h5ai/js/inc/utils.js
 create mode 100644 src/h5ai/options.js
 create mode 100644 target/h5ai/options.js

diff --git a/README.md b/README.md
index 104ae1d8..be6c59e7 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# h5ai v0.5.2 &#160; · &#160; a beautified Apache index
+# h5ai v0.5.3 &#160; · &#160; a beautified Apache index
 
 
 ## Screenshots
@@ -47,6 +47,13 @@ please respect their rights.
 
 ## Changelog
 
+### v0.5.3
+*2011-07-04*
+
+* refactored js
+* added basic options support
+
+
 ### v0.5.2
 *2011-07-02*
 
diff --git a/build.properties b/build.properties
index 4643659e..5c8790e2 100644
--- a/build.properties
+++ b/build.properties
@@ -3,7 +3,7 @@ custom                           = true
 
 # project
 project.name                     = h5ai
-project.version                  = 0.5.2
+project.version                  = 0.5.3
 
 
 # src
diff --git a/src/h5ai/footer.html b/src/h5ai/footer.html
index f864ab22..5f5025b7 100644
--- a/src/h5ai/footer.html
+++ b/src/h5ai/footer.html
@@ -15,8 +15,9 @@
 		using
 		<a href="http://tiheum.deviantart.com/art/Faenza-Icons-173323228" target="_blank" title="icon theme for Gnome">Faenza icons</a>
 	</footer>
-	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
 	<script>window.jQuery || document.write( '<script src="/h5ai/js/lib/jquery.min.js"><\/script>' )</script>
+	<script src="/h5ai/options.js"></script>
 	<script src="/h5ai/js/main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/h5ai/js/inc/file.js b/src/h5ai/js/inc/file.js
new file mode 100644
index 00000000..58d6ab33
--- /dev/null
+++ b/src/h5ai/js/inc/file.js
@@ -0,0 +1,99 @@
+
+var File = function ( utils, folder, tableRow ) {
+
+	if ( ! /\/$/.test( folder ) ) {
+		folder += "/";
+	};
+
+	if ( tableRow !== undefined ) {
+		var $tds = $( tableRow ).find( "td" );
+		var $img = $( $tds.get( 0 ) ).find( "img" );
+		var $a= $( $tds.get( 1 ) ).find( "a" );
+
+		this.parentFolder = folder;
+		this.icon16 = $img.attr( "src" );
+		this.alt = $img.attr( "alt" );
+		this.label = $a.text();
+		this.href = $a.attr("href");
+		this.date = $( $tds.get(2) ).text();
+		this.size = $( $tds.get(3) ).text();
+	} else {
+		var splits = utils.splitPathname( folder );
+
+		this.parentFolder = splits[0];
+		this.label = splits[1];
+		this.icon16 = "/h5ai/icons/16x16/folder.png";
+		this.alt = "[DIR]";
+		this.href = this.label;
+		this.date = "";
+		this.size = "";			
+		if ( this.label === "/" ) {
+			this.label = document.domain + "/";
+		};
+	};
+
+	this.icon48 = this.icon16.replace( "16x16", "48x48" );
+	this.isFolder = ( this.alt === "[DIR]" );
+	this.isParentFolder = ( this.isFolder && this.label === "Parent Directory" );
+	this.absHref = this.isParentFolder ? this.href : this.parentFolder + this.href;			
+	this.content = undefined;
+
+
+	this.isComplete = function () {
+
+		if ( this.isFolder ) {
+			if ( this.content === undefined ) {
+				return false;
+			} else if ( this.content instanceof Array  ) {
+				for ( idx in this.content ) {
+					if ( !this.content[idx].isComplete() ) {
+						return false;
+					};
+				};
+			};
+		};
+		return true;
+	};
+
+
+	this.toHtml = function () {
+
+		var $entry = $( "<div class='entry' />" );
+
+		try {
+			var $a = $( "<a href='" + this.absHref + "' />" )
+				.appendTo( $entry )
+				.append( $( "<span class='icon'><img src='" + this.icon16 + "' /></span>" ) )
+				.append( $( "<span class='label'>" + this.label + "</span>" ) );
+
+			if ( this.isFolder ) {
+				$entry.addClass( "folder" );
+				if ( this.absHref === document.location.pathname ) {
+					$a.find( ".icon img" ).attr( "src", "/h5ai/images/folder-open.png" );
+					$entry.addClass( "current" );
+				};
+				if ( this.content instanceof Array ) {
+					var $ul = $( "<ul class='content' />" ).appendTo( $entry );
+					for ( idx in this.content ) {
+						$( "<li />" ).append( this.content[idx].toHtml() ).appendTo( $ul );
+					};
+				} else if ( this.content === undefined ) {
+					$a.append( $( "<span class='hint'><img src='/h5ai/images/loading.png' /></span>" ) );
+				} else if ( this.content === 200 ) {
+					$a.find( ".icon img" ).attr( "src", "/h5ai/images/folder-page.png" );
+					$a.append( $( "<span class='hint'><img src='/h5ai/images/page.png' /></span>" ) );
+				} else {
+					$a.append( $( "<span class='hint error'>" + this.content + "</span>" ) );
+					$entry.addClass( "notListable" );
+				};
+			} else {
+				$entry.addClass( "file" );
+			};
+
+		} catch( err ) {
+			$( "<span class='fail'>fail</span>" ).appendTo( $entry );
+		};
+
+		return $entry;
+	};
+};
diff --git a/src/h5ai/js/inc/h5ai.js b/src/h5ai/js/inc/h5ai.js
index 0f468136..7117d07e 100644
--- a/src/h5ai/js/inc/h5ai.js
+++ b/src/h5ai/js/inc/h5ai.js
@@ -1,324 +1,323 @@
-( function( $ ) {
+
+var H5ai = function ( options ) {
+
+	/*******************************
+	 * config
+	 *******************************/
+
+	var defaults = {
+		columnClasses: [ "icon", "name", "date", "size" ],
+		defaultSortOrder: "C=N;O=A",
+		store: {
+			viewmode: "h5ai.viewmode"
+		},
+		icons: {
+			crumb: "/h5ai/images/crumb.png",
+			ascending: "/h5ai/images/ascending.png",
+			descending: "/h5ai/images/descending.png"
+		},
+		customHeader: "h5ai.header.html",
+		customFooter: "h5ai.footer.html",
+		callbacks: {
+			folderClick: [],
+			fileClick: []			
+		},
+
+		viewmodes: [ "details", "icons" ],
+		showTree: false,
+		folderStatus: {
+		}
+	};
+	this.config = $.extend( {}, defaults, options );
 
 
 
 	/*******************************
-	 * init after dom load
+	 * public api
 	 *******************************/
+	
+	this.folderClick = function ( fn ) {
 
-	$( function() {
-
-		$.h5ai = new H5ai();
-	} );
-
-
-
-	H5ai = function ( options ) {
-
-		/*******************************
-		 * config
-		 *******************************/
-
-		var config = {
-			columnClasses: [ "icon", "name", "date", "size" ],
-			defaultSortOrder: "C=N;O=A",
-			viewmodes: [ "details", "icons" ],
-			store: {
-				viewmode: "h5ai.viewmode"
-			},
-			icons: {
-				crumb: "/h5ai/images/crumb.png",
-				ascending: "/h5ai/images/ascending.png",
-				descending: "/h5ai/images/descending.png"
-			},
-			customHeader: "h5ai.header.html",
-			customFooter: "h5ai.footer.html",
-			callbacks: {
-				folderClick: [],
-				fileClick: []			
-			}
+		if ( typeof fn === "function" ) {
+			this.config.callbacks.folderClick.push( fn );
 		};
-
-
-
-		/*******************************
-		 * public api
-		 *******************************/
-		
-		this.folderClick = function ( fn ) {
-
-			if ( typeof fn === "function" ) {
-				config.callbacks.folderClick.push( fn );
-			};
-			return this;
-		};
-
-
-		this.fileClick = function ( fn ) {
-
-			if ( typeof fn === "function" ) {
-				config.callbacks.fileClick.push( fn );
-			};
-			return this;
-		};
-
-
-
-		/*******************************
-		 * init (will be called at the bottom)
-		 *******************************/
-
-		var init = function () {
-
-			applyViewmode();
-			initBreadcrumb();
-			initViews();
-			customize();
-		};
-
-
-
-		/*******************************
-		 * callback triggers
-		 *******************************/
-
-		var triggerFolderClick = function ( label ) {
-
-			for ( idx in config.callbacks.folderClick ) {
-				config.callbacks.folderClick[idx].call( window, label );
-			};
-		};
-
-
-		var triggerFileClick = function ( label ) {
-
-			for ( idx in config.callbacks.fileClick ) {
-				config.callbacks.fileClick[idx].call( window, label );
-			};
-		};
-
-
-
-		/*******************************
-		 * local stored viewmode
-		 *******************************/
-
-		var getViewmode = function () {
-		
-			var viewmode = localStorage.getItem( config.store.viewmode );
-			if ( $.inArray( viewmode, config.viewmodes ) ) {
-				return viewmode;
-			};
-			return config.viewmodes[0];
-		};
-
-
-		var applyViewmode = function ( viewmode ) {
-
-			$( "#table" ).hide();
-			if ( viewmode !== undefined ) {
-				localStorage.setItem( config.store.viewmode, viewmode );
-			};
-			$( "body > nav li.view" ).removeClass( "current" );
-			if ( getViewmode() === "icons" ) {
-				$( "#viewicons" ).closest( "li" ).addClass( "current" );
-				$( "#extended" ).removeClass( "details-view" ).addClass( "icons-view" ).show();
-			} else {
-				$( "#viewdetails" ).closest( "li" ).addClass( "current" );
-				$( "#extended" ).addClass( "details-view" ).removeClass( "icons-view" ).show();
-			};
-		};
-
-		
-		
-		/*******************************
-		 * breadcrumb and doc title
-		 *******************************/
-
-		var initBreadcrumb = function () {
-
-			$( "#domain span" ).text( document.domain );
-			var pathname = decodeURI( document.location.pathname );
-			var parts = pathname.split( "/" );
-			var path = "/";
-			var $ul = $( "nav ul" );
-			for ( idx in parts ) {
-				var part = parts[idx];
-				if ( part !== "" ) {
-					path += part + "/";
-					$ul.append( $( "<li class='crumb'><a href='" +  path + "'><img src='" + config.icons.crumb + "' alt='>' />" + part + "</a></li>" ) );
-				};
-			};
-			$( "body > nav .crumb:last" ).addClass( "current" );
-
-			document.title = document.domain + pathname;
-		};
-
-
-
-		/*******************************
-		 * table view
-		 *******************************/
-
-		var initTableView = function () {
-
-			function getColumnClass( idx ) {
-
-				if ( idx >= 0 && idx < config.columnClasses.length ) {
-					return config.columnClasses[idx];
-				};
-				return "unknown";
-			};
-			
-			$( "#table td" ).removeAttr( "align" ).removeAttr( "valign" );
-			$( "#table tr" ).each( function () {
-				var colIdx = 0;
-				$( this ).find( "th,td" ).each( function () {
-					$( this ).addClass( getColumnClass( colIdx++ ) );
-				} );
-			} );
-		};
-
-
-
-		/*******************************
-		 * extended view
-		 *******************************/
-
-		var initExtendedView = function () {
-
-			var $ul = $( "<ul/>" );
-
-			// headers
-			var $li = $( "<li class='header' />" ).appendTo( $ul );
-			$( "<a class='icon'></a>" ).appendTo( $li );
-			var $label = $( "th.name a" );
-			var $date = $( "th.date a" );
-			var $size = $( "th.size a" );
-			$( "<a class='label' href='" + $label.attr( "href" ) + "'>" + $label.text() + "</a>" ).appendTo( $li );
-			$( "<a class='date' href='" + $date.attr( "href" ) + "'>" + $date.text() + "</a>" ).appendTo( $li );
-			$( "<a class='size' href='" + $size.attr( "href" ) + "'>" + $size.text() + "</a>" ).appendTo( $li );
-
-			// header sort icons
-			var order = document.location.search;
-			if ( order === "" ) {
-				order = config.defaultSortOrder;
-			};
-			var $icon;
-			if ( order.indexOf( "O=A" ) >= 0 ) {
-				$icon = $( "<img src='" + config.icons.ascending + "' class='sort' alt='ascending' />" );
-			} else {
-				$icon = $( "<img src='" + config.icons.descending + "' class='sort' alt='descending' />" );
-			};
-			if ( order.indexOf( "C=N" ) >= 0 ) {
-				$li.find( "a.label" ).append( $icon );
-			} else if ( order.indexOf( "C=M" ) >= 0 ) {
-				$li.find( "a.date" ).prepend( $icon );
-			} else if ( order.indexOf( "C=S" ) >= 0 ) {
-				$li.find( "a.size" ).prepend( $icon );
-			};
-			
-			// entries
-			$( "#table td.name a" ).closest( "tr" ).each( function () {
-				var $tr = $( this );
-				var $img = $tr.find( "td.icon img" );
-				var iconsmall = $img.attr( "src" );
-				var iconbig = iconsmall.replace( "16x16", "48x48" );
-				var alt = $img.attr( "alt" );
-				var $link = $tr.find( "td.name a" );
-				var label = $link.text();
-				var href = $link.attr( "href" );
-				var date = $tr.find( "td.date" ).text();
-				var size = $tr.find( "td.size" ).text();
-
-				var $li = $( "<li class='entry' />" ).appendTo( $ul );
-				if ( alt === "[DIR]" ) {
-					$li.addClass( "folder" );
-				} else {
-					$li.addClass( "file" );					
-				}
-				var $a = $( "<a href='" + href + "' />" ).appendTo( $li );
-				$( "<span class='icon small'><img src='" + iconsmall + "' alt='" + alt + "' /></span>" ).appendTo( $a );
-				$( "<span class='icon big'><img src='" + iconbig + "' alt='" + alt + "' /></span>" ).appendTo( $a );
-				$( "<span class='label'>" + label + "</span>" ).appendTo( $a );
-				$( "<span class='date'>" + date + "</span>" ).appendTo( $a );
-				$( "<span class='size'>" + size + "</span>" ).appendTo( $a );
-			} );
-
-			$( "#extended" ).append( $ul );
-
-			// empty
-			$entries = $( "#extended .entry" );
-			if ( $entries.size() === 0 || $entries.size() === 1 && $entries.find( ".label" ).text() === "Parent Directory" ) {
-				$( "#extended" ).append( $( "<div class='empty'>empty</div>" ) );
-			};
-
-			// in case of floats
-			$( "#extended" ).append( $( "<div class='clearfix' />" ) );
-
-			// click callbacks
-			$( "#extended .entry.folder" )
-				.click( function() {
-					triggerFolderClick( $( this ).find( ".label" ).text() );
-				} );
-			$( "#extended .entry.file" )
-				.click( function() {
-					triggerFileClick( $( this ).find( ".label" ).text() );
-				} );
-		};
-
-
-		/*******************************
-		 * init views
-		 *******************************/
-
-		var initViews = function () {
-
-			initTableView();
-			initExtendedView();
-
-			$( "#viewdetails" ).closest( "li" )
-				.click( function () {
-					applyViewmode( "details" );
-				} );
-			$( "#viewicons" ).closest( "li" )
-				.click( function () {
-					applyViewmode( "icons" );
-				} );
-		};
-
-
-
-		/*******************************
-		 * customize
-		 *******************************/
-
-		var customize = function () {
-
-			$.ajax( {
-				url: config.customHeader,
-				dataType: "html",
-				success: function ( data ) {
-					$( "#content > header" ).append( $( data ) ).show();
-				}
-			} );
-
-			$.ajax( {
-				url: config.customFooter,
-				dataType: "html",
-				success: function ( data ) {
-					$( "#content > footer" ).prepend( $( data ) ).show();
-				}
-			} );
-		};
-
-
-
-		/*******************************
-		 * finally run init
-		 *******************************/
-
-		init();
+		return this;
 	};
 
-} )( jQuery );
+
+	this.fileClick = function ( fn ) {
+
+		if ( typeof fn === "function" ) {
+			this.config.callbacks.fileClick.push( fn );
+		};
+		return this;
+	};
+
+
+
+	/*******************************
+	 * init
+	 *******************************/
+
+	this.init = function () {
+
+		this.applyViewmode();
+		this.initBreadcrumb();
+		this.initViews();
+		this.customize();
+	};
+
+
+
+	/*******************************
+	 * callback triggers
+	 *******************************/
+
+	this.triggerFolderClick = function ( label ) {
+
+		for ( idx in this.config.callbacks.folderClick ) {
+			this.config.callbacks.folderClick[idx].call( window, label );
+		};
+	};
+
+
+	this.triggerFileClick = function ( label ) {
+
+		for ( idx in this.config.callbacks.fileClick ) {
+			this.config.callbacks.fileClick[idx].call( window, label );
+		};
+	};
+
+
+
+	/*******************************
+	 * local stored viewmode
+	 *******************************/
+
+	this.getViewmode = function () {
+	
+		var viewmode = localStorage.getItem( this.config.store.viewmode );
+		if ( $.inArray( viewmode, this.config.viewmodes ) >= 0 ) {
+			return viewmode;
+		};
+		return this.config.viewmodes[0];
+	};
+
+
+	this.applyViewmode = function ( viewmode ) {
+
+		if ( viewmode !== undefined ) {
+			localStorage.setItem( this.config.store.viewmode, viewmode );
+		};
+
+		$( "body > nav li.view" ).hide();
+		if ( this.config.viewmodes.length > 1 ) {
+			if ( $.inArray( "details", this.config.viewmodes ) >= 0 ) {
+				$( "#viewdetails" ).show();
+			};
+			if ( $.inArray( "icons", this.config.viewmodes ) >= 0 ) {
+				$( "#viewicons" ).show();
+			};
+		};
+
+		$( "body > nav li.view" ).removeClass( "current" );
+		if ( this.getViewmode() === "details" ) {
+			$( "#viewdetails" ).closest( "li" ).addClass( "current" );
+			$( "#table" ).hide();
+			$( "#extended" ).addClass( "details-view" ).removeClass( "icons-view" ).show();
+		} else if ( this.getViewmode() === "icons" ) {
+			$( "#viewicons" ).closest( "li" ).addClass( "current" );
+			$( "#table" ).hide();
+			$( "#extended" ).removeClass( "details-view" ).addClass( "icons-view" ).show();
+		} else {
+			$( "#table" ).show();
+			$( "#extended" ).hide();
+		};
+	};
+
+	
+
+	/*******************************
+	 * breadcrumb and doc title
+	 *******************************/
+
+	this.initBreadcrumb = function () {
+
+		$( "#domain span" ).text( document.domain );
+		var pathname = decodeURI( document.location.pathname );
+		var parts = pathname.split( "/" );
+		var path = "/";
+		var $ul = $( "nav ul" );
+		for ( idx in parts ) {
+			var part = parts[idx];
+			if ( part !== "" ) {
+				path += part + "/";
+				$ul.append( $( "<li class='crumb'><a href='" +  path + "'><img src='" + this.config.icons.crumb + "' alt='>' />" + part + "</a></li>" ) );
+			};
+		};
+		$( "body > nav .crumb:last" ).addClass( "current" );
+
+		document.title = document.domain + pathname;
+	};
+
+
+
+	/*******************************
+	 * table view
+	 *******************************/
+
+	this.initTableView = function () {
+
+		var ref = this;
+		function getColumnClass( idx ) {
+
+			if ( idx >= 0 && idx < ref.config.columnClasses.length ) {
+				return ref.config.columnClasses[idx];
+			};
+			return "unknown";
+		};
+		
+		$( "#table td" ).removeAttr( "align" ).removeAttr( "valign" );
+		$( "#table tr" ).each( function () {
+			var colIdx = 0;
+			$( this ).find( "th,td" ).each( function () {
+				$( this ).addClass( getColumnClass( colIdx++ ) );
+			} );
+		} );
+	};
+
+
+
+	/*******************************
+	 * extended view
+	 *******************************/
+
+	this.initExtendedView = function () {
+
+		var $ul = $( "<ul/>" );
+
+		// headers
+		var $li = $( "<li class='header' />" ).appendTo( $ul );
+		$( "<a class='icon'></a>" ).appendTo( $li );
+		var $label = $( "th.name a" );
+		var $date = $( "th.date a" );
+		var $size = $( "th.size a" );
+		$( "<a class='label' href='" + $label.attr( "href" ) + "'>" + $label.text() + "</a>" ).appendTo( $li );
+		$( "<a class='date' href='" + $date.attr( "href" ) + "'>" + $date.text() + "</a>" ).appendTo( $li );
+		$( "<a class='size' href='" + $size.attr( "href" ) + "'>" + $size.text() + "</a>" ).appendTo( $li );
+
+		// header sort icons
+		var order = document.location.search;
+		if ( order === "" ) {
+			order = this.config.defaultSortOrder;
+		};
+		var $icon;
+		if ( order.indexOf( "O=A" ) >= 0 ) {
+			$icon = $( "<img src='" + this.config.icons.ascending + "' class='sort' alt='ascending' />" );
+		} else {
+			$icon = $( "<img src='" + this.config.icons.descending + "' class='sort' alt='descending' />" );
+		};
+		if ( order.indexOf( "C=N" ) >= 0 ) {
+			$li.find( "a.label" ).append( $icon );
+		} else if ( order.indexOf( "C=M" ) >= 0 ) {
+			$li.find( "a.date" ).prepend( $icon );
+		} else if ( order.indexOf( "C=S" ) >= 0 ) {
+			$li.find( "a.size" ).prepend( $icon );
+		};
+		
+		// entries
+		$( "#table td.name a" ).closest( "tr" ).each( function () {
+			var $tr = $( this );
+			var $img = $tr.find( "td.icon img" );
+			var iconsmall = $img.attr( "src" );
+			var iconbig = iconsmall.replace( "16x16", "48x48" );
+			var alt = $img.attr( "alt" );
+			var $link = $tr.find( "td.name a" );
+			var label = $link.text();
+			var href = $link.attr( "href" );
+			var date = $tr.find( "td.date" ).text();
+			var size = $tr.find( "td.size" ).text();
+
+			var $li = $( "<li class='entry' />" ).appendTo( $ul );
+			if ( alt === "[DIR]" ) {
+				$li.addClass( "folder" );
+			} else {
+				$li.addClass( "file" );					
+			}
+			var $a = $( "<a href='" + href + "' />" ).appendTo( $li );
+			$( "<span class='icon small'><img src='" + iconsmall + "' alt='" + alt + "' /></span>" ).appendTo( $a );
+			$( "<span class='icon big'><img src='" + iconbig + "' alt='" + alt + "' /></span>" ).appendTo( $a );
+			$( "<span class='label'>" + label + "</span>" ).appendTo( $a );
+			$( "<span class='date'>" + date + "</span>" ).appendTo( $a );
+			$( "<span class='size'>" + size + "</span>" ).appendTo( $a );
+		} );
+
+		$( "#extended" ).append( $ul );
+
+		// empty
+		$entries = $( "#extended .entry" );
+		if ( $entries.size() === 0 || $entries.size() === 1 && $entries.find( ".label" ).text() === "Parent Directory" ) {
+			$( "#extended" ).append( $( "<div class='empty'>empty</div>" ) );
+		};
+
+		// in case of floats
+		$( "#extended" ).append( $( "<div class='clearfix' />" ) );
+
+		// click callbacks
+		var ref = this;
+		$( "#extended .entry.folder" )
+			.click( function() {
+				ref.triggerFolderClick( $( this ).find( ".label" ).text() );
+			} );
+		$( "#extended .entry.file" )
+			.click( function() {
+				ref.triggerFileClick( $( this ).find( ".label" ).text() );
+			} );
+	};
+
+
+	/*******************************
+	 * init views
+	 *******************************/
+
+	this.initViews = function () {
+
+		this.initTableView();
+		this.initExtendedView();
+
+		var ref = this;
+		$( "#viewdetails" ).closest( "li" )
+			.click( function () {
+				ref.applyViewmode( "details" );
+			} );
+		$( "#viewicons" ).closest( "li" )
+			.click( function () {
+				ref.applyViewmode( "icons" );
+			} );
+	};
+
+
+
+	/*******************************
+	 * customize
+	 *******************************/
+
+	this.customize = function () {
+
+		$.ajax( {
+			url: this.config.customHeader,
+			dataType: "html",
+			success: function ( data ) {
+				$( "#content > header" ).append( $( data ) ).show();
+			}
+		} );
+
+		$.ajax( {
+			url: this.config.customFooter,
+			dataType: "html",
+			success: function ( data ) {
+				$( "#content > footer" ).prepend( $( data ) ).show();
+			}
+		} );
+	};
+};
diff --git a/src/h5ai/js/inc/h5aitree.js b/src/h5ai/js/inc/h5aitree.js
deleted file mode 100644
index 7faed0c4..00000000
--- a/src/h5ai/js/inc/h5aitree.js
+++ /dev/null
@@ -1,312 +0,0 @@
-
-( function( $ ) {
-
-
-
-	/*******************************
-	 * init after dom load
-	 *******************************/
-
-	$( function() {
-	
-		window.setTimeout( function() {
-			$.h5aiTree = new H5aiTree();
-		}, 1 );
-	} );
-
-
-	H5aiTree = function ( options ) {
-
-		
-		var folderRegEx = /\/$/;
-		var pathnameRegEx = /^(\/(.*\/)*)([^\/]+\/?)$/;
-		var contentTypeRegEx = /^text\/html;h5ai=/;
-
-
-		function init() {
-
-			checkCrumb();
-			initShifting();
-			populateTree();
-		};
-
-
-		function splitPathname( pathname ) {
-			
-			if ( pathname === "/"  ) {
-				return [ "", "/" ];
-			};
-			var match = pathnameRegEx.exec( pathname );
-			return [ match[1], match[3] ];
-		};
-
-
-		function checkCrumb() {
-
-			$( "li.crumb a" ).each( function() {
-				
-				var $a = $( this );
-				var pathname = $a.attr( "href" );
-				checkPathname( pathname, function ( status ) {
-					if ( status !== 0 ) {
-						$( "<img class='hint' src='/h5ai/images/page.png' alt='not listable' />" ).appendTo( $a );
-						if ( status !== 200 ) {
-							$( "<span class='hint'>(" + status + ")</span>" ).appendTo( $a );
-						};
-					};
-				} );
-			} );
-		};
-
-
-		function shiftTree( show ) {
-			
-			var $tree = $( "#tree" );
-			var $extended = $( "#extended" );
-			var show = show || false;
-
-			if ( $tree.outerWidth() < $extended.offset().left || show ) {
-				$tree.stop().animate( { left: 0 } );										
-			} else {
-				//var left = Math.max( 24 - $tree.outerWidth(), $extended.offset().left - $tree.outerWidth() - 16 );
-				var left = 24 - $tree.outerWidth();
-				$tree.stop().animate( { left: left } );					
-			};
-		};
-		
-
-		function initShifting() {
-			
-			$( "#tree" ).hover(
-				function () {
-					shiftTree( true );
-				},
-				function () {
-					shiftTree();
-				}
-			);
-			$( window ).resize( function() {
-				 shiftTree();	
-			} );
-		};
-
-		
-		function populateTree() {
-
-			var $tree = $( "#tree" );
-			$tree.css( { left: -400 } ).show();
-			shiftTree();
-			var pathname = decodeURI( document.location.pathname );
-			fetchTree( pathname, function( entry ) {
-				$tree.empty().append( entry.toHtml() );
-				shiftTree();
-			} );
-		};
-
-		
-		function fetchTree( pathname, callback ) {
-			
-			walkBack( pathname, function( walkbackedPathname ) {
-				var entry = new Entry( walkbackedPathname );
-				fetchEntriesRecursive( walkbackedPathname, function ( content ) {
-					entry.content = content;
-					callback( entry );
-				} );
-			} );
-		};
-
-
-		function walkBack( pathname, callback ) {
-
-			var splits = splitPathname( pathname );
-			var parent = splits[0];
-			if ( parent === "" ) {
-				callback( pathname );
-			} else {
-				checkPathname( parent, function( state ) {
-					if ( state === 0 ) {
-						walkBack( parent, callback );
-					} else {
-						callback( pathname );
-					};
-				} );
-			};
-		};
-
-
-		function fetchEntriesRecursive( pathname, callback ) {
-
-			fetchEntries( pathname, false, function ( entries ) {
-				if ( entries instanceof Array ) {
-					for ( idx in entries ) {
-						( function ( entry ) {
-							if ( entry.isFolder ) {
-								fetchEntriesRecursive( entry.absHref, function( content ) {
-									entry.content = content;
-									callback( entries );
-								} );
-							};
-						} ) ( entries[idx] );
-					};
-				};
-				callback( entries );
-			} );
-		};
-
-
-		function fetchEntries( pathname, includeParent, callback ) {
-
-			checkPathname( pathname, function ( status ) {
-				console.log( "checkPathname", pathname, status );
-				if ( status !== 0 ) {
-					callback( status );
-				} else {
-					$.ajax( {
-						url: pathname,
-						type: "GET",
-						dataType: "html",
-						error: function ( xhr ) {
-							// since it was checked before this should never happen
-							callback( xhr.status );
-						},
-						success: function ( html, status, xhr ) {
-							if ( !contentTypeRegEx.test( xhr.getResponseHeader( "Content-Type" ) ) ) {
-								// since it was checked before this should never happen
-								callback( xhr.status );
-							} else {
-								var entries = [];
-								$( html ).find( "#table table td" ).closest( "tr" ).each( function () { 
-									var entry = new Entry( pathname, this );
-									if ( !entry.isParentFolder || includeParent ) {
-										entries.push( entry );
-									};
-								} );
-								callback( entries );
-							};
-						}
-					} );
-				};
-			} );
-		};
-
-
-		function checkPathname( pathname, callback ) {
-
-			$.ajax( {
-				url: pathname,
-				type: "HEAD",
-				complete: function ( xhr ) {
-					if ( xhr.status === 200 && contentTypeRegEx.test( xhr.getResponseHeader( "Content-Type" ) ) ) {
-						callback( 0 );
-					} else {
-						callback( xhr.status );
-					};
-				}
-			} );
-		};
-
-
-		Entry = function ( folder, tableRow ) {
-
-			if ( !folderRegEx.test( folder ) ) {
-				folder += "/";
-			};
-
-			if ( tableRow !== undefined ) {
-				var $tds = $( tableRow ).find( "td" );
-				var $img = $( $tds.get( 0 ) ).find( "img" );
-				var $a= $( $tds.get( 1 ) ).find( "a" );
-
-				this.parentFolder = folder;
-				this.icon16 = $img.attr( "src" );
-				this.alt = $img.attr( "alt" );
-				this.label = $a.text();
-				this.href = $a.attr("href");
-				this.date = $( $tds.get(2) ).text();
-				this.size = $( $tds.get(3) ).text();
-			} else {
-				var splits = splitPathname( folder );
-
-				this.parentFolder = splits[0];
-				this.label = splits[1];
-				this.icon16 = "/h5ai/icons/16x16/folder.png";
-				this.alt = "[DIR]";
-				this.href = this.label;
-				this.date = "";
-				this.size = "";			
-				if ( this.label === "/" ) {
-					this.label = document.domain + "/";
-				};
-			};
-
-			this.icon48 = this.icon16.replace( "16x16", "48x48" );
-			this.isFolder = ( this.alt === "[DIR]" );
-			this.isParentFolder = ( this.isFolder && this.label === "Parent Directory" );
-			this.absHref = this.isParentFolder ? this.href : this.parentFolder + this.href;			
-			this.content = undefined;
-
-
-			this.isComplete = function () {
-
-				if ( this.isFolder ) {
-					if ( this.content === undefined ) {
-						return false;
-					} else if ( this.content instanceof Array  ) {
-						for ( idx in this.content ) {
-							if ( !this.content[idx].isComplete() ) {
-								return false;
-							};
-						};
-					};
-				};
-				return true;
-			};
-
-
-			this.toHtml = function () {
-
-				var $entry = $( "<div class='entry' />" );
-
-				try {
-					var $a = $( "<a href='" + this.absHref + "' />" )
-						.appendTo( $entry )
-						.append( $( "<span class='icon'><img src='" + this.icon16 + "' /></span>" ) )
-						.append( $( "<span class='label'>" + this.label + "</span>" ) );
-
-					if ( this.isFolder ) {
-						$entry.addClass( "folder" );
-						if ( this.absHref === document.location.pathname ) {
-							$a.find( ".icon img" ).attr( "src", "/h5ai/images/folder-open.png" );
-							$entry.addClass( "current" );
-						};
-						if ( this.content instanceof Array ) {
-							var $ul = $( "<ul class='content' />" ).appendTo( $entry );
-							for ( idx in this.content ) {
-								$( "<li />" ).append( this.content[idx].toHtml() ).appendTo( $ul );
-							};
-						} else if ( this.content === undefined ) {
-							$a.append( $( "<span class='hint'><img src='/h5ai/images/loading.png' /></span>" ) );
-						} else if ( this.content === 200 ) {
-							$a.find( ".icon img" ).attr( "src", "/h5ai/images/folder-page.png" );
-							$a.append( $( "<span class='hint'><img src='/h5ai/images/page.png' /></span>" ) );
-						} else {
-							$a.append( $( "<span class='hint error'>" + this.content + "</span>" ) );
-							$entry.addClass( "notListable" );
-						};
-					} else {
-						$entry.addClass( "file" );
-					};
-
-				} catch( err ) {
-					$( "<span class='fail'>fail</span>" ).appendTo( $entry );
-				};
-
-				return $entry;
-			};
-		};
-
-
-		init()
-	};
-
-} )( jQuery );
\ No newline at end of file
diff --git a/src/h5ai/js/inc/tree.js b/src/h5ai/js/inc/tree.js
new file mode 100644
index 00000000..a916bff6
--- /dev/null
+++ b/src/h5ai/js/inc/tree.js
@@ -0,0 +1,183 @@
+
+var Tree = function ( utils, h5ai ) {
+
+	var thistree = this;
+	var contentTypeRegEx = /^text\/html;h5ai=/;
+
+	this.init = function () {
+
+		if ( h5ai.config.showTree ) {
+			this.checkCrumb();
+			this.initShifting();
+			this.populateTree();
+		};
+	};
+
+
+	this.checkCrumb = function () {
+
+		$( "li.crumb a" ).each( function() {
+			
+			var $a = $( this );
+			var pathname = $a.attr( "href" );
+			thistree.checkPathname( pathname, function ( status ) {
+				if ( status !== 0 ) {
+					$( "<img class='hint' src='/h5ai/images/page.png' alt='not listable' />" ).appendTo( $a );
+					if ( status !== 200 ) {
+						$( "<span class='hint'>(" + status + ")</span>" ).appendTo( $a );
+					};
+				};
+			} );
+		} );
+	};
+
+
+	this.shiftTree = function ( show ) {
+		
+		var $tree = $( "#tree" );
+		var $extended = $( "#extended" );
+		var show = show || false;
+
+		if ( $tree.outerWidth() < $extended.offset().left || show ) {
+			$tree.stop().animate( { left: 0 } );										
+		} else {
+			$tree.stop().animate( { left: 24 - $tree.outerWidth() } );					
+		};
+	};
+	
+
+	this.initShifting = function () {
+		
+		$( "#tree" ).hover(
+			function () {
+				thistree.shiftTree( true );
+			},
+			function () {
+				thistree.shiftTree();
+			}
+		);
+		$( window ).resize( function() {
+			thistree.shiftTree();	
+		} );
+	};
+
+	
+	this.populateTree = function () {
+
+		var $tree = $( "#tree" );
+		$tree.css( { left: -400 } ).show();
+
+		this.shiftTree();
+		
+		this.fetchTree( decodeURI( document.location.pathname ), function( entry ) {
+			$tree.empty().append( entry.toHtml() );
+			thistree.shiftTree();
+		} );
+	};
+
+	
+	this.fetchTree = function ( pathname, callback ) {
+		
+		this.walkBack( pathname, function( walkbackedPathname ) {
+			var entry = new File( utils, walkbackedPathname );
+			thistree.fetchEntriesRecursive( walkbackedPathname, function ( content ) {
+				entry.content = content;
+				callback( entry );
+			} );
+		} );
+	};
+
+
+	this.walkBack = function ( pathname, callback ) {
+
+		var splits = utils.splitPathname( pathname );
+		var parent = splits[0];
+		if ( parent === "" ) {
+			callback( pathname );
+		} else {
+			this.checkPathname( parent, function( state ) {
+				if ( state === 0 ) {
+					thistree.walkBack( parent, callback );
+				} else {
+					callback( pathname );
+				};
+			} );
+		};
+	};
+
+
+	this.fetchEntriesRecursive = function ( pathname, callback ) {
+
+		this.fetchEntries( pathname, false, function ( entries ) {
+			if ( entries instanceof Array ) {
+				for ( idx in entries ) {
+					( function ( entry ) {
+						if ( entry.isFolder ) {
+							thistree.fetchEntriesRecursive( entry.absHref, function( content ) {
+								entry.content = content;
+								callback( entries );
+							} );
+						};
+					} ) ( entries[idx] );
+				};
+			};
+			callback( entries );
+		} );
+	};
+
+
+	this.fetchEntries = function ( pathname, includeParent, callback ) {
+
+		this.checkPathname( pathname, function ( status ) {
+			console.log( "checkPathname", pathname, status );
+			if ( status !== 0 ) {
+				callback( status );
+			} else {
+				$.ajax( {
+					url: pathname,
+					type: "GET",
+					dataType: "html",
+					error: function ( xhr ) {
+						// since it was checked before this should never happen
+						callback( xhr.status );
+					},
+					success: function ( html, status, xhr ) {
+						if ( !contentTypeRegEx.test( xhr.getResponseHeader( "Content-Type" ) ) ) {
+							// since it was checked before this should never happen
+							callback( xhr.status );
+						} else {
+							var entries = [];
+							$( html ).find( "#table table td" ).closest( "tr" ).each( function () { 
+								var entry = new File( utils, pathname, this );
+								if ( !entry.isParentFolder || includeParent ) {
+									entries.push( entry );
+								};
+							} );
+							callback( entries );
+						};
+					}
+				} );
+			};
+		} );
+	};
+
+
+	this.checkPathname = function ( pathname, callback ) {
+
+		if ( h5ai.config.folderStatus[ pathname ] !== undefined ) {
+			callback( h5ai.config.folderStatus[ pathname ] );
+		} else {
+			$.ajax( {
+				url: pathname,
+				type: "HEAD",
+				complete: function ( xhr ) {
+					if ( xhr.status === 200 && contentTypeRegEx.test( xhr.getResponseHeader( "Content-Type" ) ) ) {
+						callback( 0 );
+					} else {
+						callback( xhr.status );
+					};
+				}
+			} );
+		};
+	};
+};
diff --git a/src/h5ai/js/inc/utils.js b/src/h5ai/js/inc/utils.js
new file mode 100644
index 00000000..21a54526
--- /dev/null
+++ b/src/h5ai/js/inc/utils.js
@@ -0,0 +1,15 @@
+
+var Utils = function () {
+
+	var pathnameRegEx = /^(\/(.*\/)*)([^\/]+\/?)$/;
+
+	this.splitPathname = function ( pathname ) {
+		
+		if ( pathname === "/"  ) {
+			return [ "", "/" ];
+		};
+		var match = pathnameRegEx.exec( pathname );
+		return [ match[1], match[3] ];
+	};
+
+};
\ No newline at end of file
diff --git a/src/h5ai/js/main.js b/src/h5ai/js/main.js
index 014f40c4..136ea766 100644
--- a/src/h5ai/js/main.js
+++ b/src/h5ai/js/main.js
@@ -1,3 +1,37 @@
-// @include "inc/jquery.json.min.js"
-// @include "inc/h5ai.js"
-// #not#include "inc/h5aitree.js"
+( function( $ ) {
+
+	// @include "inc/utils.js"
+	// @include "inc/h5ai.js"
+	// @include "inc/file.js"
+	// @include "inc/tree.js"
+
+
+	/*******************************
+	 * create
+	 *******************************/
+
+	var utils = new Utils();
+	var h5ai = new H5ai( h5aiOptions );
+	var tree = new Tree( utils, h5ai );
+
+
+	/*******************************
+	 * register public api
+	 *******************************/
+
+	$.h5ai = {
+		folderClick: h5ai.folderClick,
+		fileClick: h5ai.fileClick
+	};
+
+
+	/*******************************
+	 * init after dom load
+	 *******************************/
+
+	$( function() {
+		h5ai.init();
+		tree.init();
+	} );
+
+} )( jQuery );
\ No newline at end of file
diff --git a/src/h5ai/options.js b/src/h5ai/options.js
new file mode 100644
index 00000000..2136cf85
--- /dev/null
+++ b/src/h5ai/options.js
@@ -0,0 +1,8 @@
+
+h5aiOptions = {
+	viewmodes: [ "icons", "details" ],
+	showTree: true,
+	folderStatus: {
+		"/develop/folder-types/phpsite/": 200
+	}
+};
diff --git a/target/dot.htaccess b/target/dot.htaccess
index b51c88e4..84c89b1e 100644
--- a/target/dot.htaccess
+++ b/target/dot.htaccess
@@ -1,5 +1,5 @@
 ################################
-# h5ai 0.5.2
+# h5ai 0.5.3
 # customized .htaccess
 ################################
 
@@ -56,7 +56,7 @@
 
 	IndexOrderDefault    Ascending Name
 
-	IndexOptions         Type=text/html;h5ai=0.5.2
+	IndexOptions         Type=text/html;h5ai=0.5.3
 	IndexOptions         Charset=UTF-8
 	IndexOptions         FancyIndexing
 	IndexOptions         HTMLTable
diff --git a/target/h5ai/footer.html b/target/h5ai/footer.html
index cecdee51..18324b98 100644
--- a/target/h5ai/footer.html
+++ b/target/h5ai/footer.html
@@ -11,12 +11,13 @@
 			<img class="techclass" src="/h5ai/images/html5-storage.png" alt="html5-storage" />
 			<img class="techclass" src="/h5ai/images/html5-css3.png" alt="html5-css3" />
 		</a>
-		<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai 0.5.2">h5ai</a>
+		<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai 0.5.3">h5ai</a>
 		using
 		<a href="http://tiheum.deviantart.com/art/Faenza-Icons-173323228" target="_blank" title="icon theme for Gnome">Faenza icons</a>
 	</footer>
-	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
 	<script>window.jQuery || document.write( '<script src="/h5ai/js/lib/jquery.min.js"><\/script>' )</script>
+	<script src="/h5ai/options.js"></script>
 	<script src="/h5ai/js/main.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/target/h5ai/header.html b/target/h5ai/header.html
index e9465ba9..2b002613 100644
--- a/target/h5ai/header.html
+++ b/target/h5ai/header.html
@@ -3,7 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<title>Directory index · styled with h5ai</title>
-	<meta name="h5ai-version" content="h5ai 0.5.2">
+	<meta name="h5ai-version" content="h5ai 0.5.3">
 	<meta name="description" content="Directory index styled with h5ai (http://larsjung.de/h5ai)">
 	<meta name="keywords" content="directory, index, autoindex, h5ai">
 	<link rel="shortcut icon" type="image/png" href="/h5ai/images/h5ai-16x16.png">
diff --git a/target/h5ai/js/main.js b/target/h5ai/js/main.js
index 769426f1..c029ad06 100644
--- a/target/h5ai/js/main.js
+++ b/target/h5ai/js/main.js
@@ -1 +1 @@
-(function($){$.toJSON=function(o){if(typeof(JSON)=="object"&&JSON.stringify){return JSON.stringify(o)}var type=typeof(o);if(o===null){return"null"}if(type=="undefined"){return undefined}if(type=="number"||type=="boolean"){return o+""}if(type=="string"){return $.quoteString(o)}if(type=="object"){if(typeof o.toJSON=="function"){return $.toJSON(o.toJSON())}if(o.constructor===Date){var month=o.getUTCMonth()+1;if(month<10){month="0"+month}var day=o.getUTCDate();if(day<10){day="0"+day}var year=o.getUTCFullYear();var hours=o.getUTCHours();if(hours<10){hours="0"+hours}var minutes=o.getUTCMinutes();if(minutes<10){minutes="0"+minutes}var seconds=o.getUTCSeconds();if(seconds<10){seconds="0"+seconds}var milli=o.getUTCMilliseconds();if(milli<100){milli="0"+milli}if(milli<10){milli="0"+milli}return'"'+year+"-"+month+"-"+day+"T"+hours+":"+minutes+":"+seconds+"."+milli+'Z"'}if(o.constructor===Array){var ret=[];for(var i=0;i<o.length;i++){ret.push($.toJSON(o[i])||"null")}return"["+ret.join(",")+"]"}var pairs=[];for(var k in o){var name;var type=typeof k;if(type=="number"){name='"'+k+'"'}else{if(type=="string"){name=$.quoteString(k)}else{continue}}if(typeof o[k]=="function"){continue}var val=$.toJSON(o[k]);pairs.push(name+":"+val)}return"{"+pairs.join(", ")+"}"}};$.evalJSON=function(src){if(typeof(JSON)=="object"&&JSON.parse){return JSON.parse(src)}return eval("("+src+")")};$.secureEvalJSON=function(src){if(typeof(JSON)=="object"&&JSON.parse){return JSON.parse(src)}var filtered=src;filtered=filtered.replace(/\\["\\\/bfnrtu]/g,"@");filtered=filtered.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,"]");filtered=filtered.replace(/(?:^|:|,)(?:\s*\[)+/g,"");if(/^[\],:{}\s]*$/.test(filtered)){return eval("("+src+")")}else{throw new SyntaxError("Error parsing JSON, source is not valid.")}};$.quoteString=function(string){if(string.match(_escapeable)){return'"'+string.replace(_escapeable,function(a){var c=_meta[a];if(typeof c==="string"){return c}c=a.charCodeAt();return"\\u00"+Math.floor(c/16).toString(16)+(c%16).toString(16)})+'"'}return'"'+string+'"'};var _escapeable=/["\\\x00-\x1f\x7f-\x9f]/g;var _meta={"\b":"\\b","\t":"\\t","\n":"\\n","\f":"\\f","\r":"\\r",'"':'\\"',"\\":"\\\\"}})(jQuery);(function(a){a(function(){a.h5ai=new H5ai()});H5ai=function(m){var c={columnClasses:["icon","name","date","size"],defaultSortOrder:"C=N;O=A",viewmodes:["details","icons"],store:{viewmode:"h5ai.viewmode"},icons:{crumb:"/h5ai/images/crumb.png",ascending:"/h5ai/images/ascending.png",descending:"/h5ai/images/descending.png"},customHeader:"h5ai.header.html",customFooter:"h5ai.footer.html",callbacks:{folderClick:[],fileClick:[]}};this.folderClick=function(n){if(typeof n==="function"){c.callbacks.folderClick.push(n)}return this};this.fileClick=function(n){if(typeof n==="function"){c.callbacks.fileClick.push(n)}return this};var l=function(){b();f();j();i()};var k=function(n){for(idx in c.callbacks.folderClick){c.callbacks.folderClick[idx].call(window,n)}};var e=function(n){for(idx in c.callbacks.fileClick){c.callbacks.fileClick[idx].call(window,n)}};var g=function(){var n=localStorage.getItem(c.store.viewmode);if(a.inArray(n,c.viewmodes)){return n}return c.viewmodes[0]};var b=function(n){a("#table").hide();if(n!==undefined){localStorage.setItem(c.store.viewmode,n)}a("body > nav li.view").removeClass("current");if(g()==="icons"){a("#viewicons").closest("li").addClass("current");a("#extended").removeClass("details-view").addClass("icons-view").show()}else{a("#viewdetails").closest("li").addClass("current");a("#extended").addClass("details-view").removeClass("icons-view").show()}};var f=function(){a("#domain span").text(document.domain);var r=decodeURI(document.location.pathname);var q=r.split("/");var p="/";var o=a("nav ul");for(idx in q){var n=q[idx];if(n!==""){p+=n+"/";o.append(a("<li class='crumb'><a href='"+p+"'><img src='"+c.icons.crumb+"' alt='>' />"+n+"</a></li>"))}}a("body > nav .crumb:last").addClass("current");document.title=document.domain+r};var h=function(){function n(o){if(o>=0&&o<c.columnClasses.length){return c.columnClasses[o]}return"unknown"}a("#table td").removeAttr("align").removeAttr("valign");a("#table tr").each(function(){var o=0;a(this).find("th,td").each(function(){a(this).addClass(n(o++))})})};var d=function(){var r=a("<ul/>");var t=a("<li class='header' />").appendTo(r);a("<a class='icon'></a>").appendTo(t);var p=a("th.name a");var s=a("th.date a");var o=a("th.size a");a("<a class='label' href='"+p.attr("href")+"'>"+p.text()+"</a>").appendTo(t);a("<a class='date' href='"+s.attr("href")+"'>"+s.text()+"</a>").appendTo(t);a("<a class='size' href='"+o.attr("href")+"'>"+o.text()+"</a>").appendTo(t);var n=document.location.search;if(n===""){n=c.defaultSortOrder}var q;if(n.indexOf("O=A")>=0){q=a("<img src='"+c.icons.ascending+"' class='sort' alt='ascending' />")}else{q=a("<img src='"+c.icons.descending+"' class='sort' alt='descending' />")}if(n.indexOf("C=N")>=0){t.find("a.label").append(q)}else{if(n.indexOf("C=M")>=0){t.find("a.date").prepend(q)}else{if(n.indexOf("C=S")>=0){t.find("a.size").prepend(q)}}}a("#table td.name a").closest("tr").each(function(){var B=a(this);var u=B.find("td.icon img");var v=u.attr("src");var x=v.replace("16x16","48x48");var A=u.attr("alt");var C=B.find("td.name a");var E=C.text();var w=C.attr("href");var z=B.find("td.date").text();var F=B.find("td.size").text();var D=a("<li class='entry' />").appendTo(r);if(A==="[DIR]"){D.addClass("folder")}else{D.addClass("file")}var y=a("<a href='"+w+"' />").appendTo(D);a("<span class='icon small'><img src='"+v+"' alt='"+A+"' /></span>").appendTo(y);a("<span class='icon big'><img src='"+x+"' alt='"+A+"' /></span>").appendTo(y);a("<span class='label'>"+E+"</span>").appendTo(y);a("<span class='date'>"+z+"</span>").appendTo(y);a("<span class='size'>"+F+"</span>").appendTo(y)});a("#extended").append(r);$entries=a("#extended .entry");if($entries.size()===0||$entries.size()===1&&$entries.find(".label").text()==="Parent Directory"){a("#extended").append(a("<div class='empty'>empty</div>"))}a("#extended").append(a("<div class='clearfix' />"));a("#extended .entry.folder").click(function(){k(a(this).find(".label").text())});a("#extended .entry.file").click(function(){e(a(this).find(".label").text())})};var j=function(){h();d();a("#viewdetails").closest("li").click(function(){b("details")});a("#viewicons").closest("li").click(function(){b("icons")})};var i=function(){a.ajax({url:c.customHeader,dataType:"html",success:function(n){a("#content > header").append(a(n)).show()}});a.ajax({url:c.customFooter,dataType:"html",success:function(n){a("#content > footer").prepend(a(n)).show()}})};l()}})(jQuery);
\ No newline at end of file
+(function(g){var f=function(){var i=/^(\/(.*\/)*)([^\/]+\/?)$/;this.splitPathname=function(k){if(k==="/"){return["","/"]}var j=i.exec(k);return[j[1],j[3]]}};var d=function(i){var j={columnClasses:["icon","name","date","size"],defaultSortOrder:"C=N;O=A",store:{viewmode:"h5ai.viewmode"},icons:{crumb:"/h5ai/images/crumb.png",ascending:"/h5ai/images/ascending.png",descending:"/h5ai/images/descending.png"},customHeader:"h5ai.header.html",customFooter:"h5ai.footer.html",callbacks:{folderClick:[],fileClick:[]},viewmodes:["details","icons"],showTree:false,folderStatus:{}};this.config=g.extend({},j,i);this.folderClick=function(k){if(typeof k==="function"){this.config.callbacks.folderClick.push(k)}return this};this.fileClick=function(k){if(typeof k==="function"){this.config.callbacks.fileClick.push(k)}return this};this.init=function(){this.applyViewmode();this.initBreadcrumb();this.initViews();this.customize()};this.triggerFolderClick=function(k){for(idx in this.config.callbacks.folderClick){this.config.callbacks.folderClick[idx].call(window,k)}};this.triggerFileClick=function(k){for(idx in this.config.callbacks.fileClick){this.config.callbacks.fileClick[idx].call(window,k)}};this.getViewmode=function(){var k=localStorage.getItem(this.config.store.viewmode);if(g.inArray(k,this.config.viewmodes)>=0){return k}return this.config.viewmodes[0]};this.applyViewmode=function(k){if(k!==undefined){localStorage.setItem(this.config.store.viewmode,k)}g("body > nav li.view").hide();if(this.config.viewmodes.length>1){if(g.inArray("details",this.config.viewmodes)>=0){g("#viewdetails").show()}if(g.inArray("icons",this.config.viewmodes)>=0){g("#viewicons").show()}}g("body > nav li.view").removeClass("current");if(this.getViewmode()==="details"){g("#viewdetails").closest("li").addClass("current");g("#table").hide();g("#extended").addClass("details-view").removeClass("icons-view").show()}else{if(this.getViewmode()==="icons"){g("#viewicons").closest("li").addClass("current");g("#table").hide();g("#extended").removeClass("details-view").addClass("icons-view").show()}else{g("#table").show();g("#extended").hide()}}};this.initBreadcrumb=function(){g("#domain span").text(document.domain);var o=decodeURI(document.location.pathname);var n=o.split("/");var m="/";var l=g("nav ul");for(idx in n){var k=n[idx];if(k!==""){m+=k+"/";l.append(g("<li class='crumb'><a href='"+m+"'><img src='"+this.config.icons.crumb+"' alt='>' />"+k+"</a></li>"))}}g("body > nav .crumb:last").addClass("current");document.title=document.domain+o};this.initTableView=function(){var l=this;function k(m){if(m>=0&&m<l.config.columnClasses.length){return l.config.columnClasses[m]}return"unknown"}g("#table td").removeAttr("align").removeAttr("valign");g("#table tr").each(function(){var m=0;g(this).find("th,td").each(function(){g(this).addClass(k(m++))})})};this.initExtendedView=function(){var o=g("<ul/>");var r=g("<li class='header' />").appendTo(o);g("<a class='icon'></a>").appendTo(r);var m=g("th.name a");var q=g("th.date a");var l=g("th.size a");g("<a class='label' href='"+m.attr("href")+"'>"+m.text()+"</a>").appendTo(r);g("<a class='date' href='"+q.attr("href")+"'>"+q.text()+"</a>").appendTo(r);g("<a class='size' href='"+l.attr("href")+"'>"+l.text()+"</a>").appendTo(r);var k=document.location.search;if(k===""){k=this.config.defaultSortOrder}var n;if(k.indexOf("O=A")>=0){n=g("<img src='"+this.config.icons.ascending+"' class='sort' alt='ascending' />")}else{n=g("<img src='"+this.config.icons.descending+"' class='sort' alt='descending' />")}if(k.indexOf("C=N")>=0){r.find("a.label").append(n)}else{if(k.indexOf("C=M")>=0){r.find("a.date").prepend(n)}else{if(k.indexOf("C=S")>=0){r.find("a.size").prepend(n)}}}g("#table td.name a").closest("tr").each(function(){var z=g(this);var s=z.find("td.icon img");var t=s.attr("src");var v=t.replace("16x16","48x48");var y=s.attr("alt");var A=z.find("td.name a");var C=A.text();var u=A.attr("href");var x=z.find("td.date").text();var D=z.find("td.size").text();var B=g("<li class='entry' />").appendTo(o);if(y==="[DIR]"){B.addClass("folder")}else{B.addClass("file")}var w=g("<a href='"+u+"' />").appendTo(B);g("<span class='icon small'><img src='"+t+"' alt='"+y+"' /></span>").appendTo(w);g("<span class='icon big'><img src='"+v+"' alt='"+y+"' /></span>").appendTo(w);g("<span class='label'>"+C+"</span>").appendTo(w);g("<span class='date'>"+x+"</span>").appendTo(w);g("<span class='size'>"+D+"</span>").appendTo(w)});g("#extended").append(o);$entries=g("#extended .entry");if($entries.size()===0||$entries.size()===1&&$entries.find(".label").text()==="Parent Directory"){g("#extended").append(g("<div class='empty'>empty</div>"))}g("#extended").append(g("<div class='clearfix' />"));var p=this;g("#extended .entry.folder").click(function(){p.triggerFolderClick(g(this).find(".label").text())});g("#extended .entry.file").click(function(){p.triggerFileClick(g(this).find(".label").text())})};this.initViews=function(){this.initTableView();this.initExtendedView();var k=this;g("#viewdetails").closest("li").click(function(){k.applyViewmode("details")});g("#viewicons").closest("li").click(function(){k.applyViewmode("icons")})};this.customize=function(){g.ajax({url:this.config.customHeader,dataType:"html",success:function(k){g("#content > header").append(g(k)).show()}});g.ajax({url:this.config.customFooter,dataType:"html",success:function(k){g("#content > footer").prepend(g(k)).show()}})}};var c=function(j,l,i){if(!/\/$/.test(l)){l+="/"}if(i!==undefined){var n=g(i).find("td");var k=g(n.get(0)).find("img");var m=g(n.get(1)).find("a");this.parentFolder=l;this.icon16=k.attr("src");this.alt=k.attr("alt");this.label=m.text();this.href=m.attr("href");this.date=g(n.get(2)).text();this.size=g(n.get(3)).text()}else{var o=j.splitPathname(l);this.parentFolder=o[0];this.label=o[1];this.icon16="/h5ai/icons/16x16/folder.png";this.alt="[DIR]";this.href=this.label;this.date="";this.size="";if(this.label==="/"){this.label=document.domain+"/"}}this.icon48=this.icon16.replace("16x16","48x48");this.isFolder=(this.alt==="[DIR]");this.isParentFolder=(this.isFolder&&this.label==="Parent Directory");this.absHref=this.isParentFolder?this.href:this.parentFolder+this.href;this.content=undefined;this.isComplete=function(){if(this.isFolder){if(this.content===undefined){return false}else{if(this.content instanceof Array){for(idx in this.content){if(!this.content[idx].isComplete()){return false}}}}}return true};this.toHtml=function(){var q=g("<div class='entry' />");try{var s=g("<a href='"+this.absHref+"' />").appendTo(q).append(g("<span class='icon'><img src='"+this.icon16+"' /></span>")).append(g("<span class='label'>"+this.label+"</span>"));if(this.isFolder){q.addClass("folder");if(this.absHref===document.location.pathname){s.find(".icon img").attr("src","/h5ai/images/folder-open.png");q.addClass("current")}if(this.content instanceof Array){var p=g("<ul class='content' />").appendTo(q);for(idx in this.content){g("<li />").append(this.content[idx].toHtml()).appendTo(p)}}else{if(this.content===undefined){s.append(g("<span class='hint'><img src='/h5ai/images/loading.png' /></span>"))}else{if(this.content===200){s.find(".icon img").attr("src","/h5ai/images/folder-page.png");s.append(g("<span class='hint'><img src='/h5ai/images/page.png' /></span>"))}else{s.append(g("<span class='hint error'>"+this.content+"</span>"));q.addClass("notListable")}}}}else{q.addClass("file")}}catch(r){g("<span class='fail'>fail</span>").appendTo(q)}return q}};var h=function(k,l){var j=this;var i=/^text\/html;h5ai=/;this.init=function(){if(l.config.showTree){this.checkCrumb();this.initShifting();this.populateTree()}};this.checkCrumb=function(){g("li.crumb a").each(function(){var m=g(this);var n=m.attr("href");j.checkPathname(n,function(o){if(o!==0){g("<img class='hint' src='/h5ai/images/page.png' alt='not listable' />").appendTo(m);if(o!==200){g("<span class='hint'>("+o+")</span>").appendTo(m)}}})})};this.shiftTree=function(m){var o=g("#tree");var n=g("#extended");var m=m||false;if(o.outerWidth()<n.offset().left||m){o.stop().animate({left:0})}else{o.stop().animate({left:24-o.outerWidth()})}};this.initShifting=function(){g("#tree").hover(function(){j.shiftTree(true)},function(){j.shiftTree()});g(window).resize(function(){j.shiftTree()})};this.populateTree=function(){var m=g("#tree");m.css({left:-400}).show();this.shiftTree();this.fetchTree(decodeURI(document.location.pathname),function(n){m.empty().append(n.toHtml());j.shiftTree()})};this.fetchTree=function(m,n){this.walkBack(m,function(o){var p=new c(k,o);j.fetchEntriesRecursive(o,function(q){p.content=q;n(p)})})};this.walkBack=function(o,p){var n=k.splitPathname(o);var m=n[0];if(m===""){p(o)}else{this.checkPathname(m,function(q){if(q===0){j.walkBack(m,p)}else{p(o)}})}};this.fetchEntriesRecursive=function(m,n){this.fetchEntries(m,false,function(o){if(o instanceof Array){for(idx in o){(function(p){if(p.isFolder){j.fetchEntriesRecursive(p.absHref,function(q){p.content=q;n(o)})}})(o[idx])}}n(o)})};this.fetchEntries=function(n,m,o){this.checkPathname(n,function(p){console.log("checkPathname",n,p);if(p!==0){o(p)}else{g.ajax({url:n,type:"GET",dataType:"html",error:function(q){o(q.status)},success:function(s,r,t){if(!i.test(t.getResponseHeader("Content-Type"))){o(t.status)}else{var q=[];g(s).find("#table table td").closest("tr").each(function(){var u=new c(k,n,this);if(!u.isParentFolder||m){q.push(u)}});o(q)}}})}})};this.checkPathname=function(m,n){if(l.config.folderStatus[m]!==undefined){n(l.config.folderStatus[m])}else{g.ajax({url:m,type:"HEAD",complete:function(o){if(o.status===200&&i.test(o.getResponseHeader("Content-Type"))){n(0)}else{n(o.status)}}})}}};var b=new f();var e=new d(h5aiOptions);var a=new h(b,e);g.h5ai={folderClick:e.folderClick,fileClick:e.fileClick};g(function(){e.init();a.init()})})(jQuery);
\ No newline at end of file
diff --git a/target/h5ai/options.js b/target/h5ai/options.js
new file mode 100644
index 00000000..2136cf85
--- /dev/null
+++ b/target/h5ai/options.js
@@ -0,0 +1,8 @@
+
+h5aiOptions = {
+	viewmodes: [ "icons", "details" ],
+	showTree: true,
+	folderStatus: {
+		"/develop/folder-types/phpsite/": 200
+	}
+};