Added localization.

.gitignore

@@ -3,7 +3,9 @@
 bin
 build
 #target
-build.local.xml
+
+build.local.*
+
 
 # Eclipse
 .classpath

README.md

@@ -1,14 +1,14 @@
-# h5ai v0.5.1   ·   a beautified Apache index
+# h5ai v0.6   ·   a beautified Apache index
 
 
 ## Screenshots
 
-<a href="http://github.com/lrsjng/h5ai/raw/master/resources/h5ai-v0.4-details.png" target="_blank">
+<a href="http://larsjung.de/h5ai/sample/screenshots/h5ai-v0.5.2-details.png" target="_blank">
-	<img src="http://github.com/lrsjng/h5ai/raw/master/resources/h5ai-v0.4-details.png" width="400px" alt="screenshot" title="screenshot" style="display: inline" />
+	<img src="http://larsjung.de/h5ai/sample/screenshots/h5ai-v0.5.2-details.png" width="400px" alt="screenshot" title="details view" style="display: inline" />
 </a>
 &#160; &#160; &#160;
-<a href="http://github.com/lrsjng/h5ai/raw/master/resources/h5ai-v0.4-icons.png" target="_blank">
+<a href="http://larsjung.de/h5ai/sample/screenshots/h5ai-v0.5.2-icons.png" target="_blank">
-	<img src="http://github.com/lrsjng/h5ai/raw/master/resources/h5ai-v0.4-icons.png" width="400px" alt="screenshot" title="screenshot" style="display: inline" />
+	<img src="http://larsjung.de/h5ai/sample/screenshots/h5ai-v0.5.2-icons.png" width="400px" alt="screenshot" title="icons view" style="display: inline" />
 </a>
 
 
@@ -24,9 +24,9 @@ Everything you need is located in folder `target`.
 
 * Copy folder `h5ai` to the web-root directory of your server or alternativly set an alias `/h5ai/` to
   this folder.
-* Add the content of file `dot.htaccess` to the `.htaccess` file inside the directory
+* Add the content of file `dot.htaccess` to the `.htaccess` file inside the directory you want to be
-  you want to be styled (you might have to create this file). This directory and any subdirectories will be
+  styled (you might have to create this file). This directory and any subdirectories will be styled by h5ai.
-  styled by h5ai.
+* Adjust `options.js` inside the `h5ai` folder to your needs. Defaults will be fine for a start.
 
 Optionally add `h5ai.header.html` and/or `h5ai.footer.html` files to any of the styled folders to [display
 custom top or bottom sections](http://larsjung.de/h5ai/sample/customize). The content of those files
@@ -47,6 +47,29 @@ please respect their rights.
 
 ## Changelog
 
+### v0.6
+*2011-07-05*
+
+* refactored js
+* added localization, see options.js
+
+
+### v0.5.3
+*2011-07-04*
+
+* refactored js
+* added basic options support
+* commented options.js
+* optional tree sidebar
+
+
+### v0.5.2
+*2011-07-02*
+
+* details view adjusts to window width
+* linked icon for *.gz and *.bz2
+
+
 ### v0.5.1
 *2011-07-01*
 

build.properties

@@ -3,7 +3,7 @@ custom                           = true
 
 # project
 project.name                     = h5ai
-project.version                  = 0.5.1
+project.version                  = 0.6
 
 
 # src

src/dot.htaccess

@@ -8,14 +8,16 @@
 # Options  +FollowSymLinks
 
 
-################################
-# cache images for 52 weeks
-################################
-
 <IfModule mod_headers.c>
+
+	################################
+	# cache images for 52 weeks
+	################################
+
 	<FilesMatch "\.png$">
 		Header set Cache-Control "max-age=31449600, public"
 	</FilesMatch>
+
 </IfModule>
 
 
@@ -54,6 +56,7 @@
 
 	IndexOrderDefault    Ascending Name
 
+	IndexOptions         Type=text/html;h5ai=%BUILD_VERSION%
 	IndexOptions         Charset=UTF-8
 	IndexOptions         FancyIndexing
 	IndexOptions         HTMLTable
@@ -87,9 +90,9 @@
 	AddIcon              /h5ai/icons/16x16/makefile.png    .pom  pom.xml  build.xml
 	AddIcon              /h5ai/icons/16x16/bin.png         .so  .o
 
-	AddIcon              /h5ai/icons/16x16/zip.png         .zip  .Z  .z  .jar  .war
-	AddIcon              /h5ai/icons/16x16/tar.png         .tar
 	AddIcon              /h5ai/icons/16x16/archive.png     .tar.gz  .tgz  .tar.bz2
+	AddIcon              /h5ai/icons/16x16/zip.png         .zip  .Z  .z  .jar  .war  .gz  .bz2
+	AddIcon              /h5ai/icons/16x16/tar.png         .tar
 	AddIcon              /h5ai/icons/16x16/pdf.png         .pdf
 	AddIcon              /h5ai/icons/16x16/deb.png         .deb
 	AddIcon              /h5ai/icons/16x16/rpm.png         .rpm

src/h5ai/css/inc/extended.less

@@ -8,6 +8,7 @@
 		list-style: none;
 
 		li {
+			position: relative;
 			white-space: nowrap;
 			clear: both;
 
@@ -43,19 +44,24 @@
 						color: #e80;
 					}
 				}
+				&.notListable {
+					> a, > a:visited {
+						opacity: 0.7;
+						color: #999;
+					}
+				}
 			}
 			.icon, .label, .date, .size {
-				display: inline-block;
+				padding: 6px;
-				padding: 3px 6px 6px 6px;
-				text-align: left;
 			}
 			.icon {
-				text-align: center;
+				display: inline-block;
+				position: absolute;
+				left: 0;
+				top: 2px;
 				width: 16px;
-				//float: left;
 
 				img {
-					padding-top: 4px;
 					width: 16px;
 					height: 16px;
 				}
@@ -64,22 +70,32 @@
 				display: none;
 			}
 			.label {
-				width: 682px;
+				display: block;
+				margin: 0 270px 0 24px;
+				overflow: hidden;
 				white-space: nowrap;
-				//word-wrap: break-word;
+				text-align: left;
-				//float: left;
+				.error {
+					font-size: 0.9em;
+					font-style: italic;
+					color: #c55;
+				}
 			}
 			.date {
+				position: absolute;
+				right: 100px;
+				top: 0;
 				text-align: right;
 				width: 160px;
 				white-space: nowrap;
-				//float: right;
 			}
 			.size {
+				position: absolute;
+				right: 0;
+				top: 0;
 				text-align: right;
-				width: 70px;
+				width: 80px;
 				white-space: nowrap;
-				//float: right;
 			}
 		}
 	}
@@ -145,11 +161,22 @@
 					.label {
 						display: block;
 						word-wrap: break-word;
+						.error {
+							font-size: 0.9em;
+							font-style: italic;
+							color: #c55;
+						}
 					}
 					.date, .size {
 						display: none;
 					}
 				}
+				&.notListable {
+					> a, > a:visited {
+						opacity: 0.7;
+						color: #999;
+					}
+				}
 			}
 		}
 	}

src/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="%BUILD_NAME% %BUILD_VERSION%">h5ai</a>
+		<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai %BUILD_VERSION%">h5ai</a>
-		using
+		<span class="l10n-footerUsing">using</span>
 		<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>

src/h5ai/header.html

@@ -3,7 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<title>Directory index · styled with h5ai</title>
-	<meta name="h5ai-version" content="%BUILD_NAME% %BUILD_VERSION%">
+	<meta name="h5ai-version" content="h5ai %BUILD_VERSION%">
 	<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">
@@ -16,9 +16,15 @@
 	<nav>
 		<span class="jsDisabledFallback">Directory index · JavaScript is disabled</span>
 		<ul>
-			<li id="domain" class="crumb"><a href="/"><img src="/h5ai/images/home.png" alt="domain" /><span>domain</span></a></li>
+			<li id="domain" class="crumb">
-			<li id="viewicons" class="view"><a href="#"><img src="/h5ai/images/view-icons.png" alt="view-icons" />icons</a></li>
+				<a href="/"><img src="/h5ai/images/home.png" alt="domain" /><span>domain</span></a>
-			<li id="viewdetails" class="view" ><a href="#"><img src="/h5ai/images/view-details.png" alt="view-details" />details</a></li>
+			</li>
+			<li id="viewicons" class="view">
+				<a href="#"><img src="/h5ai/images/view-icons.png" alt="view-icons" /><span class="l10n-viewIcons">icons</span></a>
+			</li>
+			<li id="viewdetails" class="view" >
+				<a href="#"><img src="/h5ai/images/view-details.png" alt="view-details" /><span class="l10n-viewDetails">details</span></a>
+			</li>
 		</ul>
 		<div class="clearfix"></div>
 	</nav>

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/icons/16x16/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/icons/16x16/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;
+	};
+};

src/h5ai/js/inc/h5ai.js

@@ -1,28 +1,13 @@
-( function( $ ) {
 
-
+var H5ai = function ( options ) {
-
-	/*******************************
-	 * init after dom load
-	 *******************************/
-
-	$( function() {
-
-		$.h5ai = new H5ai();
-	} );
-
-
-
-	H5ai = function ( options ) {
 
 	/*******************************
 	 * config
 	 *******************************/
 
-		var config = {
+	var defaults = {
 		columnClasses: [ "icon", "name", "date", "size" ],
 		defaultSortOrder: "C=N;O=A",
-			viewmodes: [ "details", "icons" ],
 		store: {
 			viewmode: "h5ai.viewmode"
 		},
@@ -36,8 +21,16 @@
 		callbacks: {
 			folderClick: [],
 			fileClick: []			
-			}
+		},
+
+		viewmodes: [ "details", "icons" ],
+		showTree: false,
+		folderStatus: {
+		},
+		lang: undefined,
+		useBrowserLang: true
 	};
+	this.config = $.extend( {}, defaults, options );
 
 
 
@@ -48,7 +41,7 @@
 	this.folderClick = function ( fn ) {
 
 		if ( typeof fn === "function" ) {
-				config.callbacks.folderClick.push( fn );
+			this.config.callbacks.folderClick.push( fn );
 		};
 		return this;
 	};
@@ -57,7 +50,7 @@
 	this.fileClick = function ( fn ) {
 
 		if ( typeof fn === "function" ) {
-				config.callbacks.fileClick.push( fn );
+			this.config.callbacks.fileClick.push( fn );
 		};
 		return this;
 	};
@@ -65,15 +58,16 @@
 
 
 	/*******************************
-		 * init (will be called at the bottom)
+	 * init
 	 *******************************/
 
-		var init = function () {
+	this.init = function () {
 
-			applyViewmode();
+		this.applyViewmode();
-			initBreadcrumb();
+		this.initBreadcrumb();
-			initViews();
+		this.initViews();
-			customize();
+		this.customize();
+		this.localize( h5aiLangs, this.config.lang, this.config.useBrowserLang );
 	};
 
 
@@ -82,18 +76,18 @@
 	 * callback triggers
 	 *******************************/
 
-		var triggerFolderClick = function ( label ) {
+	this.triggerFolderClick = function ( label ) {
 
-			for ( idx in config.callbacks.folderClick ) {
+		for ( idx in this.config.callbacks.folderClick ) {
-				config.callbacks.folderClick[idx].call( window, label );
+			this.config.callbacks.folderClick[idx].call( window, label );
 		};
 	};
 
 
-		var triggerFileClick = function ( label ) {
+	this.triggerFileClick = function ( label ) {
 
-			for ( idx in config.callbacks.fileClick ) {
+		for ( idx in this.config.callbacks.fileClick ) {
-				config.callbacks.fileClick[idx].call( window, label );
+			this.config.callbacks.fileClick[idx].call( window, label );
 		};
 	};
 
@@ -103,29 +97,44 @@
 	 * local stored viewmode
 	 *******************************/
 
-		var getViewmode = function () {
+	this.getViewmode = function () {
 	
-			var viewmode = localStorage.getItem( config.store.viewmode );
+		var viewmode = localStorage.getItem( this.config.store.viewmode );
-			if ( $.inArray( viewmode, config.viewmodes ) ) {
+		if ( $.inArray( viewmode, this.config.viewmodes ) >= 0 ) {
 			return viewmode;
 		};
-			return config.viewmodes[0];
+		return this.config.viewmodes[0];
 	};
 
 
-		var applyViewmode = function ( viewmode ) {
+	this.applyViewmode = function ( viewmode ) {
 
-			$( "#table" ).hide();
 		if ( viewmode !== undefined ) {
-				localStorage.setItem( config.store.viewmode, viewmode );
+			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 ( getViewmode() === "icons" ) {
+		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 {
-				$( "#viewdetails" ).closest( "li" ).addClass( "current" );
+			$( "#table" ).show();
-				$( "#extended" ).addClass( "details-view" ).removeClass( "icons-view" ).show();
+			$( "#extended" ).hide();
 		};
 	};
 
@@ -135,7 +144,7 @@
 	 * breadcrumb and doc title
 	 *******************************/
 
-		var initBreadcrumb = function () {
+	this.initBreadcrumb = function () {
 
 		$( "#domain span" ).text( document.domain );
 		var pathname = decodeURI( document.location.pathname );
@@ -146,7 +155,7 @@
 			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>" ) );
+				$ul.append( $( "<li class='crumb'><a href='" +  path + "'><img src='" + this.config.icons.crumb + "' alt='>' />" + part + "</a></li>" ) );
 			};
 		};
 		$( "body > nav .crumb:last" ).addClass( "current" );
@@ -160,12 +169,13 @@
 	 * table view
 	 *******************************/
 
-		var initTableView = function () {
+	this.initTableView = function () {
 
+		var ref = this;
 		function getColumnClass( idx ) {
 
-				if ( idx >= 0 && idx < config.columnClasses.length ) {
+			if ( idx >= 0 && idx < ref.config.columnClasses.length ) {
-					return config.columnClasses[idx];
+				return ref.config.columnClasses[idx];
 			};
 			return "unknown";
 		};
@@ -185,7 +195,7 @@
 	 * extended view
 	 *******************************/
 
-		var initExtendedView = function () {
+	this.initExtendedView = function () {
 
 		var $ul = $( "<ul/>" );
 
@@ -195,20 +205,20 @@
 		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='label' href='" + $label.attr( "href" ) + "'><span class='l10n-columnName'>" + $label.text() + "</span></a>" ).appendTo( $li );
-			$( "<a class='date' href='" + $date.attr( "href" ) + "'>" + $date.text() + "</a>" ).appendTo( $li );
+		$( "<a class='date' href='" + $date.attr( "href" ) + "'><span class='l10n-columnLastModified'>" + $date.text() + "</span></a>" ).appendTo( $li );
-			$( "<a class='size' href='" + $size.attr( "href" ) + "'>" + $size.text() + "</a>" ).appendTo( $li );
+		$( "<a class='size' href='" + $size.attr( "href" ) + "'><span class='l10n-columnSize'>" + $size.text() + "</span></a>" ).appendTo( $li );
 
 		// header sort icons
 		var order = document.location.search;
 		if ( order === "" ) {
-				order = config.defaultSortOrder;
+			order = this.config.defaultSortOrder;
 		};
 		var $icon;
 		if ( order.indexOf( "O=A" ) >= 0 ) {
-				$icon = $( "<img src='" + config.icons.ascending + "' class='sort' alt='ascending' />" );
+			$icon = $( "<img src='" + this.config.icons.ascending + "' class='sort' alt='ascending' />" );
 		} else {
-				$icon = $( "<img src='" + config.icons.descending + "' class='sort' alt='descending' />" );
+			$icon = $( "<img src='" + this.config.icons.descending + "' class='sort' alt='descending' />" );
 		};
 		if ( order.indexOf( "C=N" ) >= 0 ) {
 			$li.find( "a.label" ).append( $icon );
@@ -247,45 +257,55 @@
 
 		$( "#extended" ).append( $ul );
 
-			// empty
 		$entries = $( "#extended .entry" );
+
+		// empty
 		if ( $entries.size() === 0 || $entries.size() === 1 && $entries.find( ".label" ).text() === "Parent Directory" ) {
 			$( "#extended" ).append( $( "<div class='empty'>empty</div>" ) );
 		};
 
+		// parent folder
+		if ( $entries.size() > 0 ) {
+			$entry0 = $( $entries.get(0) );
+			if ( $entry0.find( ".label" ).text() === "Parent Directory" ) {
+				$entry0.find( ".label" ).addClass( "l10n-parentDirectory" );
+				$entry0.addClass( "parentfolder" );
+			};
+		};
+
 		// in case of floats
 		$( "#extended" ).append( $( "<div class='clearfix' />" ) );
 
-		
 		// click callbacks
+		var ref = this;
 		$( "#extended .entry.folder" )
 			.click( function() {
-					triggerFolderClick( $( this ).find( ".label" ).text() );
+				ref.triggerFolderClick( $( this ).find( ".label" ).text() );
 			} );
 		$( "#extended .entry.file" )
 			.click( function() {
-					triggerFileClick( $( this ).find( ".label" ).text() );
+				ref.triggerFileClick( $( this ).find( ".label" ).text() );
 			} );
 	};
 
 
-
 	/*******************************
 	 * init views
 	 *******************************/
 
-		var initViews = function () {
+	this.initViews = function () {
 
-			initTableView();
+		this.initTableView();
-			initExtendedView();
+		this.initExtendedView();
 
+		var ref = this;
 		$( "#viewdetails" ).closest( "li" )
 			.click( function () {
-					applyViewmode( "details" );
+				ref.applyViewmode( "details" );
 			} );
 		$( "#viewicons" ).closest( "li" )
 			.click( function () {
-					applyViewmode( "icons" );
+				ref.applyViewmode( "icons" );
 			} );
 	};
 
@@ -295,10 +315,10 @@
 	 * customize
 	 *******************************/
 
-		var customize = function () {
+	this.customize = function () {
 
 		$.ajax( {
-				url: config.customHeader,
+			url: this.config.customHeader,
 			dataType: "html",
 			success: function ( data ) {
 				$( "#content > header" ).append( $( data ) ).show();
@@ -306,7 +326,7 @@
 		} );
 
 		$.ajax( {
-				url: config.customFooter,
+			url: this.config.customFooter,
 			dataType: "html",
 			success: function ( data ) {
 				$( "#content > footer" ).prepend( $( data ) ).show();
@@ -317,10 +337,28 @@
 
 
 	/*******************************
-		 * finally run init
+	 * localization
 	 *******************************/
 
-		init();
+	this.localize = function ( data, lang, useBrowserLang ) {
+
+		if ( useBrowserLang === true ) {
+			var browserLang = navigator.language;
+			if ( data[ browserLang ] !== undefined ) {
+				lang = browserLang;
+			} else if ( browserLang.length > 2 &&  data[ browserLang.substr( 0, 2 ) ] !== undefined  ) {
+				lang = browserLang.substr( 0, 2 );
+			};
+			if ( lang === "en" ) {
+				lang = undefined;
+			};
 		};
 
-} )( jQuery );
+		if ( data[ lang ] !== undefined ) {
+			var selected = data[ lang ];
+			for ( key in selected ) {
+				$( ".l10n-" + key ).text( selected[key] );
+			};
+		};
+	};
+};

src/h5ai/js/inc/h5aitree.js

@@ -1,316 +0,0 @@
-
-( function( $ ) {
-
-
-
-	/*******************************
-	 * init after dom load
-	 *******************************/
-
-	$( function() {
-	
-		window.setTimeout( function() {
-//			$.h5aiTree = new H5aiTree();
-		}, 1 );
-	} );
-
-
-	H5aiTree = function ( options ) {
-
-		
-		var h5aiMetaRegEx = /<meta name="h5ai-version"/;
-		var folderRegEx = /\/$/;
-		var pathnameRegEx = /^(\/(.*\/)*)([^\/]+\/?)$/;
-
-
-		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 ) {
-
-			$.ajax( {
-				url: pathname,
-				type: "GET",
-				dataType: "html",
-				error: function ( xhr ) {
-
-					callback( xhr.status );
-				},
-				success: function ( html ) {
-
-					if ( ! h5aiMetaRegEx.test( html ) ) {
-						callback( 200 );
-					} 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 );
-					};
-				}
-			} );
-		};
-
-
-		/*
-		 * Checks pathname for accessibility.
-		 * Calls callback with argument 0 if pathname is a h5ai styled directory.
-		 * Otherwise it returns the http response status. 
-		 */
-		function checkPathname( pathname, callback ) {
-
-			$.ajax( {
-				url: pathname,
-				type: "GET",
-				dataType: "html",
-				error: function ( xhr ) {
-
-					callback( xhr.status );
-				},
-				success: function ( html ) {
-
-					if ( h5aiMetaRegEx.test( html ) ) {
-						callback( 0 );
-					} else {
-						callback( 200 );
-					};
-				}
-			} );
-		};
-
-
-		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 );

src/h5ai/js/inc/tree.js

@@ -0,0 +1,219 @@
+
+var Tree = function ( utils, h5ai ) {
+
+	var thistree = this;
+	var contentTypeRegEx = /^text\/html;h5ai=/;
+
+	this.init = function () {
+
+		if ( h5ai.config.showTree ) {
+			this.checkCrumb();
+			this.checkCurrentFolder();
+			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.checkCurrentFolder = function () {
+
+		$( "#extended li.entry.folder" ).each( function() {
+			
+			var $entry = $( this );
+			if ( $entry.hasClass( "parentfolder" ) ) {
+				return;
+			};
+
+			var $a = $entry.find( "a" );
+			var pathname = decodeURI( document.location.pathname ) + $a.attr( "href" );
+			thistree.checkPathname( pathname, function ( status ) {
+				if ( status === 200 ) {
+					$a.find( ".icon.small img" ).attr( "src", "/h5ai/icons/16x16/folder-page.png" );
+					$a.find( ".icon.big img" ).attr( "src", "/h5ai/icons/48x48/folder-page.png" );
+				} else if ( status !== 0 ) {
+					$entry.addClass( "notListable" );
+					$a.find( ".label" )
+						.append( " " )
+						.append(  $( "<span class='error'>" + status + "</span>" ) );
+				};
+			} );
+		} );
+	};
+
+
+	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 );
+				return;
+			};
+
+			$.ajax( {
+				url: pathname,
+				type: "GET",
+				dataType: "html",
+				error: function ( xhr ) {
+					callback( xhr.status ); // since it was checked before this should never happen
+				},
+				success: function ( html, status, xhr ) {
+					if ( !contentTypeRegEx.test( xhr.getResponseHeader( "Content-Type" ) ) ) {
+						callback( xhr.status ); // since it was checked before this should never happen
+						return;
+					};
+
+					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 );
+				}
+			} );
+		} );
+	};
+
+	
+	var pathnameCache = {};
+
+	this.checkPathname = function ( pathname, callback ) {
+
+		if ( h5ai.config.folderStatus[ pathname ] !== undefined ) {
+			callback( h5ai.config.folderStatus[ pathname ] );
+			return;
+		};
+
+		if ( pathnameCache[ pathname ] !== undefined ) {
+			callback( pathnameCache[ pathname ] );
+			return;
+		}; 
+
+		$.ajax( {
+			url: pathname,
+			type: "HEAD",
+			complete: function ( xhr ) {
+				var status = xhr.status;
+				if ( xhr.status === 200 && contentTypeRegEx.test( xhr.getResponseHeader( "Content-Type" ) ) ) {
+					status = 0;
+				};
+				pathnameCache[ pathname ] = status;
+				callback( status );
+			}
+		} );
+	};
+};

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] ];
+	};
+
+};

src/h5ai/js/main.js

@@ -1,3 +1,37 @@
-// @include "inc/jquery.json.min.js"
+( function( $ ) {
-// @include "inc/h5ai.js"
+
-// @include "inc/h5aitree.js"
+	// @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 );

src/h5ai/options.js

@@ -0,0 +1,82 @@
+
+h5aiOptions = {
+
+	/*
+	 * An array of view modes the user may choose from. Currently there
+	 * are two possible values: "details" and "icons". The first value
+	 * indicates the default view mode. If only one value is given the
+	 * view mode is fixed and the selector buttons are hidden.
+	 * The user selected view mode is also stored local in modern browsers
+	 * so that it will be persistent.
+	 */
+	viewmodes: [ "details", "icons" ],
+
+	/*
+	 * Show a folder tree, boolean.
+	 * Note that this tree might have side effects as it sends HEAD requests
+	 * to the folders, and therefore will invoke index.php scripts. Use
+	 * folderStatus below to avoid such requests.
+	 * It might also affect performance significantly.
+	 */
+	showTree: false,
+
+	/*
+	 * Associative array of folders and their HTTP status codes to
+	 * avoid HEAD requests to that folders. The key (folder) must start
+	 * and end with a slash (/).
+	 * For example:
+	 *   "/some/folder/": 200
+	 * will always return HTTP status 200 (OK), which will be interpreted
+	 * as a non auto indexed folder, that means a folder containing an
+	 * appropriate default index file.
+	 */
+	folderStatus: {
+		/*
+		 * for example:
+		 * "/some/folder/": 200
+		 */
+	},
+
+	/*
+	 * Localization, for example "en", "de" etc. - see h5aiLangs below for
+	 * possible values. Adjust it to your needs. If lang is not found in
+	 * h5aiLangs the displayed labels stay unchanged.
+	 */
+	lang: undefined,
+
+	/*
+	 * Try to use browser language, falls back to previous specified lang. 
+	 */
+	useBrowserLang: true
+};
+
+
+
+/*
+ * Available translations.
+ * "en" is just an example - see it as a reference. Those values
+ * are "hardcoded" and will be displayed if all labels stay unchanged. 
+ */
+h5aiLangs = {
+
+	"en": {
+		viewDetails: "details",
+		viewIcons: "icons",
+		columnName: "Name",
+		columnLastModified: "Last modified",
+		columnSize: "Size",
+		footerUsing: "using",
+		parentDirectory: "Parent Directory"
+	},
+
+	"de": {
+		viewDetails: "Details",
+		viewIcons: "Icons",
+		columnName: "Name",
+		columnLastModified: "Geändert",
+		columnSize: "Größe",
+		footerUsing: "nutzt",
+		parentDirectory: "Übergeordnetes Verzeichnis"
+	}
+
+};

target/dot.htaccess

@@ -1,5 +1,5 @@
 ################################
-# h5ai 0.5.1
+# h5ai 0.6
 # customized .htaccess
 ################################
 
@@ -8,14 +8,16 @@
 # Options  +FollowSymLinks
 
 
-################################
-# cache images for 52 weeks
-################################
-
 <IfModule mod_headers.c>
+
+	################################
+	# cache images for 52 weeks
+	################################
+
 	<FilesMatch "\.png$">
 		Header set Cache-Control "max-age=31449600, public"
 	</FilesMatch>
+
 </IfModule>
 
 
@@ -54,6 +56,7 @@
 
 	IndexOrderDefault    Ascending Name
 
+	IndexOptions         Type=text/html;h5ai=0.6
 	IndexOptions         Charset=UTF-8
 	IndexOptions         FancyIndexing
 	IndexOptions         HTMLTable
@@ -87,9 +90,9 @@
 	AddIcon              /h5ai/icons/16x16/makefile.png    .pom  pom.xml  build.xml
 	AddIcon              /h5ai/icons/16x16/bin.png         .so  .o
 
-	AddIcon              /h5ai/icons/16x16/zip.png         .zip  .Z  .z  .jar  .war
-	AddIcon              /h5ai/icons/16x16/tar.png         .tar
 	AddIcon              /h5ai/icons/16x16/archive.png     .tar.gz  .tgz  .tar.bz2
+	AddIcon              /h5ai/icons/16x16/zip.png         .zip  .Z  .z  .jar  .war  .gz  .bz2
+	AddIcon              /h5ai/icons/16x16/tar.png         .tar
 	AddIcon              /h5ai/icons/16x16/pdf.png         .pdf
 	AddIcon              /h5ai/icons/16x16/deb.png         .deb
 	AddIcon              /h5ai/icons/16x16/rpm.png         .rpm

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.1">h5ai</a>
+		<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai 0.6">h5ai</a>
-		using
+		<span class="l10n-footerUsing">using</span>
 		<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>

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.1">
+	<meta name="h5ai-version" content="h5ai 0.6">
 	<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">
@@ -16,9 +16,15 @@
 	<nav>
 		<span class="jsDisabledFallback">Directory index · JavaScript is disabled</span>
 		<ul>
-			<li id="domain" class="crumb"><a href="/"><img src="/h5ai/images/home.png" alt="domain" /><span>domain</span></a></li>
+			<li id="domain" class="crumb">
-			<li id="viewicons" class="view"><a href="#"><img src="/h5ai/images/view-icons.png" alt="view-icons" />icons</a></li>
+				<a href="/"><img src="/h5ai/images/home.png" alt="domain" /><span>domain</span></a>
-			<li id="viewdetails" class="view" ><a href="#"><img src="/h5ai/images/view-details.png" alt="view-details" />details</a></li>
+			</li>
+			<li id="viewicons" class="view">
+				<a href="#"><img src="/h5ai/images/view-icons.png" alt="view-icons" /><span class="l10n-viewIcons">icons</span></a>
+			</li>
+			<li id="viewdetails" class="view" >
+				<a href="#"><img src="/h5ai/images/view-details.png" alt="view-details" /><span class="l10n-viewDetails">details</span></a>
+			</li>
 		</ul>
 		<div class="clearfix"></div>
 	</nav>

target/h5ai/options.js

@@ -0,0 +1,82 @@
+
+h5aiOptions = {
+
+	/*
+	 * An array of view modes the user may choose from. Currently there
+	 * are two possible values: "details" and "icons". The first value
+	 * indicates the default view mode. If only one value is given the
+	 * view mode is fixed and the selector buttons are hidden.
+	 * The user selected view mode is also stored local in modern browsers
+	 * so that it will be persistent.
+	 */
+	viewmodes: [ "details", "icons" ],
+
+	/*
+	 * Show a folder tree, boolean.
+	 * Note that this tree might have side effects as it sends HEAD requests
+	 * to the folders, and therefore will invoke index.php scripts. Use
+	 * folderStatus below to avoid such requests.
+	 * It might also affect performance significantly.
+	 */
+	showTree: false,
+
+	/*
+	 * Associative array of folders and their HTTP status codes to
+	 * avoid HEAD requests to that folders. The key (folder) must start
+	 * and end with a slash (/).
+	 * For example:
+	 *   "/some/folder/": 200
+	 * will always return HTTP status 200 (OK), which will be interpreted
+	 * as a non auto indexed folder, that means a folder containing an
+	 * appropriate default index file.
+	 */
+	folderStatus: {
+		/*
+		 * for example:
+		 * "/some/folder/": 200
+		 */
+	},
+
+	/*
+	 * Localization, for example "en", "de" etc. - see h5aiLangs below for
+	 * possible values. Adjust it to your needs. If lang is not found in
+	 * h5aiLangs the displayed labels stay unchanged.
+	 */
+	lang: undefined,
+
+	/*
+	 * Try to use browser language, falls back to previous specified lang. 
+	 */
+	useBrowserLang: true
+};
+
+
+
+/*
+ * Available translations.
+ * "en" is just an example - see it as a reference. Those values
+ * are "hardcoded" and will be displayed if all labels stay unchanged. 
+ */
+h5aiLangs = {
+
+	"en": {
+		viewDetails: "details",
+		viewIcons: "icons",
+		columnName: "Name",
+		columnLastModified: "Last modified",
+		columnSize: "Size",
+		footerUsing: "using",
+		parentDirectory: "Parent Directory"
+	},
+
+	"de": {
+		viewDetails: "Details",
+		viewIcons: "Icons",
+		columnName: "Name",
+		columnLastModified: "Geändert",
+		columnSize: "Größe",
+		footerUsing: "nutzt",
+		parentDirectory: "Übergeordnetes Verzeichnis"
+	}
+
+};