Minor additions.

* fixed tree fade-in-fade-out effect for small displays ([issue #6](http://github.com/lrsjng/h5ai/issues/6))
* added custom scrollbar to tree ([issue #6](http://github.com/lrsjng/h5ai/issues/6))
* fixed broken links caused by URI encoding/decoding ([issue #9](http://github.com/lrsjng/h5ai/issues/9))
* added "empty" to localization (hope Google Translate did a good job here)

.gitignore

@@ -2,8 +2,10 @@
 # Build folders to ignore
 bin
 build
-#target
-build.local.xml
+target
+
+build.local.*
+
 
 # Eclipse
 .classpath

LICENSE.txt

@@ -0,0 +1,19 @@
+Copyright (c) 2011 Lars Jung, http://larsjung.de
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,61 +1,159 @@
-# h5ai v0.5   ·   a beautified Apache index
+# h5ai
 
+* Website with download, docs and demo: <http://larsjung.de/h5ai>
+* Sources: <http://github.com/lrsjng/h5ai>
 
-## Screenshots
-
-<a href="http://github.com/lrsjng/h5ai/raw/master/resources/h5ai-v0.4-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" />
-</a>
-&#160; &#160; &#160;
-<a href="http://github.com/lrsjng/h5ai/raw/master/resources/h5ai-v0.4-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" />
-</a>
-
-
-## Live example
-
-View a [sample folder](http://larsjung.de/h5ai/sample)  
-*(the files are all empty to save webspace)*
-
-
-## Install
-
-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
-  you want to be styled (you might have to create this file). This directory and any subdirectories will be
-  styled by h5ai.
-
-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
-will be wrapped by `<header>` and `<footer>` tags.
-
-
-## License and References
-
-<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png" /></a>  
-[h5ai](http://larsjung.de/h5ai) is provided under the terms of the [CC BY-SA 3.0 License](http://creativecommons.org/licenses/by-sa/3.0/).  
-It is based on
-[HTML5 Boilerplate](http://html5boilerplate.com),
-[jQuery](http://jquery.com),
-[Modernizr](http://www.modernizr.com) and
-[Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-173323228),
-please respect their rights.
+h5ai is provided under the terms of the [MIT License](http://github.com/lrsjng/h5ai/blob/master/LICENSE.txt).  
+It uses the [Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-173323228) (GPL license).
 
 
 ## Changelog
 
-### v0.5
-*2011-07-01*
+
+### v0.14.1 · *2011-09-01*
+
+* display meta information in bottom bar (icon view)
+* added zh-cn translation by [Dongsheng Cai](http://github.com/dongsheng)
+* added pl translation by Radosław Zając
+* added ru translation by Богдан Илюхин
+
+
+### v0.14 · *2011-08-16*
+
+* added image thumbnails for PHP version
+* new option `slideTree` to turn off auto slide in
+
+
+### v0.13.2 · *2011-08-12*
+
+* changes in `/h5ai/.htaccess` ... PHP configuration ...
+
+
+### v0.13.1 · *2011-08-12*
+
+* ~~hopefully fixed that PHP doesn't get interpreted~~ :/
+* fixed initial tree display
+* added sort order option
+* added/fixed some translations
+* added lv translation by Sandis Veinbergs
+
+
+### v0.13 · *2011-08-06*
+
+* added PHP implementation! (should work with PHP 5.2+)
+* added new options
+* changed layout of the bottom bar to display status information
+* added language selector to the bottom bar
+* quoted keys in `options.js` to make it valid json
+* changed value of option `lang` from `undefined` to `null`
+* added some new keys to `h5aiLangs`
+* added browser caching rules for css and js
+* added pt translation by [Jonnathan](http://github.com/jonnsl)
+* added bg translation by George Andonov
+
+
+### v0.12.3 · *2011-07-30*
+
+* added tr translation by [Batuhan Icoz](http://github.com/batuhanicoz)
+
+
+### v0.12.2 · *2011-07-30*
+
+* added es translation by Jose David Calderon Serrano
+
+
+### v0.12.1 · *2011-07-29*
+
+* fixed unchecked use of console.log
+
+
+### v0.12 · *2011-07-28*
+
+* improved performance
+
+
+### v0.11 · *2011-07-27*
+
+* changed license to MIT license, see `LICENSE.txt`
+
+
+### v0.10.2 · *2011-07-26*
+
+* improved tree scrollbar
+
+
+### v0.10.1 · *2011-07-24*
+
+* fixed problems with ' in links
+
+
+### v0.10 · *2011-07-24*
+
+* fixed problems with XAMPP on Windows (see `dot.htaccess` comments for instructions)
+* fixed tree fade-in-fade-out effect for small displays ([issue #6](http://github.com/lrsjng/h5ai/issues/6))
+* added custom scrollbar to tree ([issue #6](http://github.com/lrsjng/h5ai/issues/6))
+* fixed broken links caused by URI encoding/decoding ([issue #9](http://github.com/lrsjng/h5ai/issues/9))
+* added "empty" to localization (hope Google Translate did a good job here)
+
+
+### v0.9 · *2011-07-18*
+
+* linked hover states between crumb, extended view and tree
+* fixed size of tree view (now there's a ugly scrollbar, hopefully will be fixed)
+* refactored js to improve performance and cleaned code
+* added caching for folder status codes and content
+* added fr translation by [Nicolas](http://github.com/Nicosmos)
+* added nl translation by [Stefan de Konink](http://github.com/skinkie)
+* added sv translation by Oscar Carlsson
+
+
+### v0.8 · *2011-07-08*
+
+* removed slashes from folder labels
+* optionally rename parent folder entries to real folder names, see `options.js`
+* long breadcrumbs (multiple rows) no longer hide content 
+* error folder icons are opaque now
+* refactored js a lot (again...)
+
+
+### v0.7 · *2011-07-07*
+
+* removed shadows
+* smarter tree side bar
+
+
+### v0.6 · *2011-07-05*
+
+* refactored js
+* added localization, see `options.js`
+
+
+### v0.5.3 · *2011-07-04*
+
+* refactored js
+* added basic options support via `options.js`
+* 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*
+
+* disabled tree sidebar for now, since it had unwanted side effects
+
+
+### v0.5 · *2011-07-01*
 
 * added tree sidebar
 * some refactorings
 
 
-### v0.4
-*2011-06-27*
+### v0.4 · *2011-06-27*
 
 * added better fallback, in case JavaScript is disabled
 * rewrote js, fixed middle-button click etc. problems
@@ -64,23 +162,20 @@ please respect their rights.
 * updated dot.access
 
 
-### v0.3.2
-*2011-06-24*
+### v0.3.2 · *2011-06-24*
 
 * removed lib versions from file names
 * added 'empty' indicator for icons view
 
 
-### v0.3.1
-*2011-06-24*
+### v0.3.1 · *2011-06-24*
 
 * refactored js
 * added `folderClick` and `fileClick` callback hooks
 * fixed .emtpy style
 
 
-### v0.3
-*2011-06-23*
+### v0.3 · *2011-06-23*
 
 * included build stuff, files previously found in the base directory are now located in folder `target`
 * styles and scripts are now minified
@@ -88,23 +183,20 @@ please respect their rights.
 * updated jQuery to version 1.6.1
 
 
-### v0.2.3
-*2011-06-17*
+### v0.2.3 · *2011-06-17*
 
 * more refactoring in main.js
 * ~~added custom js support, and global includes~~ *removed, only custom top and bottom sections supported*
 
 
-### v0.2.2
-*2011-06-16*
+### v0.2.2 · *2011-06-16*
 
 * refactored a lot, added some comments
-* included fixes from [NumEricR](http://github.com/NumEricR/h5ai)
+* included fixes from [NumEricR](http://github.com/NumEricR)
 * added top/bottom message support, only basicly styled
 
 
-### v0.2.1
-*2011-06-16*
+### v0.2.1 · *2011-06-16*
 
 * fixed croped filenames
 * fixed missing .png extension in header
@@ -112,8 +204,7 @@ please respect their rights.
 * added changelog
 
 
-### v0.2
-*2011-06-15*
+### v0.2 · *2011-06-15*
 
 * added icon view
 

build.properties

@@ -3,7 +3,7 @@ custom                           = true
 
 # project
 project.name                     = h5ai
-project.version                  = 0.5
+project.version                  = 0.14.1
 
 
 # src
@@ -11,7 +11,8 @@ src.dir                          = src
 
 
 # build
-build.dir                        = target
+build.dir                        = build
+release.dir                      = release
 
 
 # libs

build.xml

@@ -2,6 +2,7 @@
 <project
 	name="h5ai"
 	basedir="."
+	default="release"
 	xmlns:scripp="antlib:de.larsjung.scripp.ant"
 >
 	<target name="init">
@@ -21,13 +22,16 @@
 
 	<target name="clean" depends="init">
 		<delete dir="${build.dir}" />
+		<delete dir="${release.dir}" />
 	</target>
 
 
-	<target name="build" depends="clean">
+	<target name="build-prepare" depends="clean">
 		<mkdir dir="${build.dir}" />
 		<copy todir="${build.dir}">
 		    <fileset dir="${src.dir}" />
+			<fileset file="LICENSE.txt" />
+			<fileset file="README.md" />
 		</copy>
 		<replace dir="${build.dir}">
 			<replacefilter token="%BUILD%" value="${build.label}" />
@@ -35,16 +39,35 @@
 			<replacefilter token="%BUILD_VERSION%" value="${project.version}" />
 			<replacefilter token="%BUILD_STAMP%" value="${build.stamp}" />
 		</replace>
+	</target>
 
+	
+	<target name="build" depends="build-prepare">
 		<scripp.dir dir="${build.dir}/h5ai/css" />
 		<scripp.dir dir="${build.dir}/h5ai/js" />
 	</target>
 
 
+	<target name="build-uncompressed" depends="build-prepare">
+		<scripp.dir dir="${build.dir}/h5ai/css" compress="false" />
+		<scripp.dir dir="${build.dir}/h5ai/js" compress="false" />
+	</target>
+
+
+	<target name="release" depends="build">
+		<mkdir dir="${release.dir}" />
+		<zip destfile="${release.dir}/${project.name}-${project.version}.zip" basedir="${build.dir}" />
+		<tar destfile="${release.dir}/${project.name}-${project.version}.tar" basedir="${build.dir}"/>
+		<gzip destfile="${release.dir}/${project.name}-${project.version}.tar.gz" src="${release.dir}/${project.name}-${project.version}.tar"/>
+		<delete file="${release.dir}/${project.name}-${project.version}.tar" />
+	</target>
+
+
 	<macrodef name="scripp.dir">
 		<attribute name="dir" />
+		<attribute name="compress" default="true" />
 		<sequential>
-			<scripp:process>
+			<scripp:process compress="@{compress}">
 		        <fileset dir="@{dir}" includes="**/*.less,**/*.css,**/*.js" excludes="inc/**/*,**/*.min.css,**/*.min.js" />
 				<globmapper from="*.less" to="*.css" />
 		        <globmapper from="*.css" to="*.css" />

src/dot.htaccess

@@ -1,137 +0,0 @@
-################################
-# %BUILD_NAME% %BUILD_VERSION%
-# customized .htaccess
-################################
-
-
-# Options  +Indexes
-# Options  +FollowSymLinks
-
-
-################################
-# cache images for 52 weeks
-################################
-
-<IfModule mod_headers.c>
-	<FilesMatch "\.png$">
-		Header set Cache-Control "max-age=31449600, public"
-	</FilesMatch>
-</IfModule>
-
-
-################################
-# style auto index
-################################
-
-<IfModule mod_autoindex.c>
-
-	################################
-	# uncomment the following line to force directory listing
-	# even for directories with valid index files
-	################################
-
-	# DirectoryIndex       IGNORE-DEFAULT-INDEX-FILES
-
-
-	################################
-	# h5ai header and footer
-	################################
-
-	HeaderName           /h5ai/header.html
-	ReadmeName           /h5ai/footer.html
-
-
-	################################
-	# hide h5ai folder and config files from index
-	################################
-
-	IndexIgnore          h5ai  h5ai.header.html  h5ai.footer.html
-
-
-	################################
-	# table options
-	################################
-
-	IndexOrderDefault    Ascending Name
-
-	IndexOptions         Charset=UTF-8
-	IndexOptions         FancyIndexing
-	IndexOptions         HTMLTable
-	IndexOptions         XHTML
-	IndexOptions         SuppressHTMLPreamble
-	IndexOptions         SuppressRules
-	IndexOptions         SuppressDescription
-	IndexOptions         FoldersFirst
-	IndexOptions         IgnoreCase
-	IndexOptions         IconsAreLinks
-	IndexOptions         VersionSort
-	IndexOptions         NameWidth=*
-
-
-	################################
-	# icon mapping
-	################################
-
-	AddIcon              /h5ai/icons/16x16/parent.png      ..
-	AddIcon              /h5ai/icons/16x16/folder.png      ^^DIRECTORY^^
-	AddIcon              /h5ai/icons/16x16/blank.png       ^^BLANKICON^^
-
-	AddIcon              /h5ai/icons/16x16/readme.png      README
-	AddIcon              /h5ai/icons/16x16/copying.png     COPYING  LICENSE
-	AddIcon              /h5ai/icons/16x16/install.png     INSTALL
-	AddIcon              /h5ai/icons/16x16/authors.png     AUTHORS
-	AddIcon              /h5ai/icons/16x16/log.png         LOG  Log  log
-
-	AddIcon              /h5ai/icons/16x16/css.png         .less
-	AddIcon              /h5ai/icons/16x16/script.png      .conf  .ini  .sh  .shar  .csh  .ksh  .tcl
-	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/pdf.png         .pdf
-	AddIcon              /h5ai/icons/16x16/deb.png         .deb
-	AddIcon              /h5ai/icons/16x16/rpm.png         .rpm
-	AddIcon              /h5ai/icons/16x16/cd.png          .iso  .cue
-
-	AddIconByType        /h5ai/icons/16x16/png.png         image/png
-	AddIconByType        /h5ai/icons/16x16/jpg.png         image/jpeg
-	AddIconByType        /h5ai/icons/16x16/gif.png         image/gif
-	AddIconByType        /h5ai/icons/16x16/ico.png         image/x-icon
-	AddIconByType        /h5ai/icons/16x16/bmp.png         image/x-ms-bmp
-
-	AddIconByType        /h5ai/icons/16x16/html.png        text/html
-	AddIconByType        /h5ai/icons/16x16/css.png         text/css
-	AddIconByType        /h5ai/icons/16x16/xml.png         application/xml
-	AddIconByType        /h5ai/icons/16x16/js.png          application/javascript  application/json
-	AddIconByType        /h5ai/icons/16x16/php.png         application/x-httpd-php
-
-	AddIconByType        /h5ai/icons/16x16/py.png          text/x-python
-	AddIconByType        /h5ai/icons/16x16/rb.png          application/x-ruby
-	AddIconByType        /h5ai/icons/16x16/java.png        text/x-java
-	AddIconByType        /h5ai/icons/16x16/cpp.png         text/x-c++src
-	AddIconByType        /h5ai/icons/16x16/hpp.png         text/x-c++hdr
-	AddIconByType        /h5ai/icons/16x16/c.png           text/x-csrc
-	AddIconByType        /h5ai/icons/16x16/h.png           text/x-chdr
-
-	AddIconByType        /h5ai/icons/16x16/pdf.png         application/pdf
-
-	AddIconByType        /h5ai/icons/16x16/rtf.png         text/rtf  application/rtf
-	AddIconByType        /h5ai/icons/16x16/tex.png         text/x-tex
-	AddIconByType        /h5ai/icons/16x16/makefile.png    text/x-makefile
-
-	AddIconByType        /h5ai/icons/16x16/bin.png         application/java-vm
-	AddIconByType        /h5ai/icons/16x16/exe.png         application/x-executable application/x-msdos-program
-
-	AddIconByType        /h5ai/icons/16x16/text.png        text/*
-	AddIconByType        /h5ai/icons/16x16/image.png       image/*
-	AddIconByType        /h5ai/icons/16x16/audio.png       audio/*
-	AddIconByType        /h5ai/icons/16x16/video.png       video/*
-
-	AddIconByEncoding    /h5ai/icons/16x16/zip.png         x-compress  x-gzip  x-bzip2
-
-	DefaultIcon          /h5ai/icons/16x16/unknown.png
-
-</IfModule>
-

src/h5ai/.htaccess

@@ -0,0 +1,35 @@
+
+
+AddType  text/html  .php
+
+
+###########################################
+# if php doesn't get interpreted try to
+# uncomment one of the following lines
+###########################################
+#AddHandler  application/x-httpd-php  .php
+#AddHandler  application/x-httpd-php5  .php
+#AddHandler  application/x-httpd-php52  .php
+#AddHandler  application/x-httpd-php53  .php
+#AddHandler  php-script  .php
+#AddHandler  php5-script  .php
+#AddHandler  php52-script  .php
+#AddHandler  php53-script  .php
+
+
+# cache images, css and js for 52 weeks
+<IfModule headers_module>
+	<FilesMatch "\.png$">
+		Header set Cache-Control "max-age=31449600, public"
+	</FilesMatch>
+	<FilesMatch "\.css$">
+		Header set Cache-Control "max-age=31449600, public"
+	</FilesMatch>
+	<FilesMatch "\.js$">
+		Header set Cache-Control "max-age=31449600, public"
+	</FilesMatch>
+	<FilesMatch "thumb-.*\.jpg$">
+		Header set Cache-Control "max-age=31449600, public"
+	</FilesMatch>
+</IfModule>
+

src/h5ai/cache/readme.md

@@ -0,0 +1,7 @@
+# Cache
+
+This directory is used for server side caching. To use caching make this
+directory writable for Apache.
+
+There is no critical data in here. You can savely remove any content. This
+will clear the cache.

src/h5ai/css/inc/extended.less

@@ -8,52 +8,84 @@
 		list-style: none;
 
 		li {
+			position: relative;
 			white-space: nowrap;
+			clear: both;
 
-			&.header a {
-				padding-bottom: 18px;
-				color: #555;
-				opacity: 0.4;
-				cursor: pointer;
-				.transition( all 0.2s ease-in-out );
-
-				&:visited {
+			&.header {
+				a, a:active, a:visited {
+					padding-bottom: 18px;
 					color: #555;
-				}
-				&:hover {
-					color: #555;
-					opacity: 0.9;
-				}
-				img {
-					width: 12px;
-					height: 12px;
-					padding: 0 8px;
+					text-decoration: none;
+					opacity: 0.4;
+					cursor: pointer;
+					.transition( all 0.2s ease-in-out );
+	
+					&:hover {
+						color: #555;
+						opacity: 0.9;
+					}
+					img {
+						width: 12px;
+						height: 12px;
+						padding: 0 8px;
+					}
 				}
 			}
 			&.entry {
 				border-bottom: 1px solid #ddd;
 
-				a {
+				a, a:active, a:visited {
 					display: block;
+					color: #555;
+					text-decoration: none;
 					cursor: pointer;
-
-					&:hover {
+					
+					&:hover, &.hover {
 						background-color: #f6f6f6;
 						color: #e80;
 					}
 				}
+				&.error {
+					a, a:active, a:visited {
+						color: #aaa;
+					
+						.label {
+							.hint {
+								margin-left: 12px;
+								font-size: 0.9em;
+								color: #c55;
+							}
+						}
+						&:hover, &.hover {
+							opacity: 1;
+							background-color: #f6f6f6;
+							color: #e80;
+						}
+					}
+				}
+				&.folder-parent {
+					.date, .size {
+						display: none;
+					}
+				}
+				&.folder {
+					.size {
+						display: none;
+					}
+				}
 			}
 			.icon, .label, .date, .size {
-				display: inline-block;
-				padding: 3px 6px 6px 6px;
-				text-align: left;
+				padding: 6px;
 			}
 			.icon {
-				text-align: center;
+				display: inline-block;
+				position: absolute;
+				left: 0;
+				top: 2px;
 				width: 16px;
 
 				img {
-					padding-top: 4px;
 					width: 16px;
 					height: 16px;
 				}
@@ -62,19 +94,40 @@
 				display: none;
 			}
 			.label {
-				width: 682px;
+				display: block;
+				margin: 0 270px 0 24px;
+				overflow: hidden;
 				white-space: nowrap;
+				text-align: left;
 			}
 			.date {
+				position: absolute;
+				right: 100px;
+				top: 0;
 				text-align: right;
 				width: 160px;
 				white-space: nowrap;
 			}
 			.size {
+				position: absolute;
+				right: 0;
+				top: 0;
 				text-align: right;
-				width: 70px;
+				width: 80px;
 				white-space: nowrap;
 			}
+			&.entry.thumb .icon.small {
+				overflow: hidden;
+				padding: 5px;
+
+				img {
+					background-color: #eee;
+					width: 16px;
+					height: 16px;
+					border: 1px solid #ddd;
+					overflow: hidden;
+				}
+			}
 		}
 	}
 	.empty {
@@ -89,7 +142,7 @@
 
 #extended.icons-view {
 	display: none;
-	padding: 10px;
+	padding: 3px;
 	border: 1px solid #eee;
 	border-radius: 15px;
 
@@ -105,7 +158,7 @@
 			&.entry {
 				float: left;
 
-				a {
+				a, a:active, a:visited {
 					display: block;
 					margin: 8px;
 					padding: 8px;
@@ -113,23 +166,24 @@
 					height: 120px;
 					float: left;
 					text-align: center;
+					text-decoration: none;
 					overflow: hidden;
 					border-radius: 5px;
+					color: #555;
 					cursor: pointer;
 					border: 2px solid rgba(0,0,0,0);
 			
-					&:hover {
+					&:hover, &.hover {
 						color: #e80;
 						border-color: #eee;
 						background-color: #f6f6f6;
-						//.box-shadow( 0, 0, 20px, #999 );
 					}
 					.icon {
 						display: block;
 
 						img {
-							width: 48px;
-							height: 48px;
+							min-width: 48px;
+							min-height: 48px;
 							margin-bottom: 8px;
 						}
 					}
@@ -144,6 +198,40 @@
 						display: none;
 					}
 				}
+				&.error {
+					a, a:active, a:visited {
+						color: #aaa;
+						text-decoration: none;
+					
+						.label {
+							.hint {
+								padding: 0 6px;
+								font-size: 0.9em;
+								color: #c55;
+							}
+						}
+						&:hover, &.hover {
+							color: #e80;
+							border-color: #eee;
+							background-color: #f6f6f6;
+						}
+					}
+				}
+			}
+			&.entry.thumb .icon.big {
+				width: 100px;
+				height: 58px;
+				overflow: hidden;
+
+				img {
+					background-color: #eee;
+					min-width: 46px;
+					min-height: 46px;
+					min-width: 12px;
+					min-height: 12px;
+					border: 1px solid #ddd;
+					overflow: hidden;
+				}
 			}
 		}
 	}

src/h5ai/css/inc/main.less

@@ -0,0 +1,205 @@
+
+@import "html5reset";
+@import "mixins";
+
+
+html.js {
+	.hideOnJs {
+		display: none;
+	}
+}
+html.no-js {
+	.hideOnNoJs {
+		display: none;
+	}
+}
+
+
+body {
+	font-family: Ubuntu, sans-serif;
+	font-size: 16px;
+	color: #555;
+	margin: 80px 30px;
+}
+
+
+body > nav {
+	position: fixed;
+	z-index: 1;
+	width: 100%;
+	left: 0;
+	top: 0;
+	font-size: 0.85em;
+	background-color: rgb(241,241,241);
+	border-bottom: 2px solid rgb(210,210,210);
+
+	span.jsDisabledFallback {
+		display: block;
+		height: 30px;
+		line-height: 30px;
+		padding: 0 10px;
+		color: #999;
+	}
+	a, a:active, a:visited {
+		color: #555;
+		cursor: pointer;
+		text-decoration: none;
+		opacity: 0.7;
+		.transition( all 0.2s ease-in-out );
+		
+		display: block;
+		height: 30px;
+		line-height: 30px;
+		padding: 0 10px;
+
+		&:hover, &.hover {
+			color: #e80;
+			background-color: rgba(255,255,255,0.5);
+			opacity: 1.0;
+		}
+	}
+	.current a {
+		background-color: rgba(255,255,255,0.5);
+		opacity: 1.0;
+	}
+	img {
+		width: 16px;
+		height: 16px;
+		vertical-align: bottom;
+		padding: 0 6px 6px 0;
+	}
+	.crumb {
+		float: left;
+		border-right: 1px solid rgb(231,231,231);
+		.hint {
+			margin-left: 8px;
+			font-style: italic;
+			color: #999;
+		}
+		img.hint {
+			width: 10px;
+			height: 10px;
+			vertical-align: baseline;
+			padding: 0px;
+		}
+	}
+	.view {
+		float: right;
+		border-left: 1px solid rgb(231,231,231);
+	}
+}
+
+
+#content {
+	max-width: 960px;
+	margin: 0 auto;
+
+	> header {
+		display: none;
+		padding-bottom: 10px;
+		margin-bottom: 80px;
+		border-bottom: 2px dashed #ddd;
+	}
+	> footer {
+		display: none;
+		padding-top: 10px;
+		margin-top: 80px;
+		border-top: 2px dashed #ddd;
+	}
+}
+
+
+@import "table";
+@import "extended";
+@import "tree";
+
+
+body > footer {
+	position: fixed;
+	z-index: 1;
+	width: 100%;
+	left: 0;
+	bottom: 0;
+	padding: 6px 0 8px 0;
+	background-color: rgb(241,241,241);
+	border-top: 2px solid rgb(210,210,210);
+	
+	color: #999;
+	font-size: 0.85em;
+	text-align: center;
+
+	a, a:active, a:visited {
+		color: #555;
+		text-decoration: none;
+		.transition( all 0.2s ease-in-out );
+		opacity: 0.7;
+		
+		&:hover {
+			color: #e80;
+			opacity: 1;
+		}
+	}
+	.left {
+		display: block;
+		padding: 0 8px;
+		float: left
+	}
+	.center {
+		display: block;
+		margin: 0 300px;
+	}
+	.right {
+		display: block;
+		padding: 0 8px;
+		float: right
+	}
+	.status {
+		&.default {
+		}
+		&.dynamic {
+			display: none;
+			span {
+				display: inline-block;
+				padding: 0 6px;
+			}
+		}
+	}
+	#langSelector {
+		position: relative;
+		cursor: pointer;
+		
+		.langOptions {
+			position: absolute;
+			z-index: 2;
+			display: none;
+			right: 0;
+			top: 0;
+			background-color: rgb(241,241,241);
+			border: 1px solid rgb(210,210,210);
+			                 			
+			ul {
+				margin: 0;
+				padding: 0;
+				list-style: none;
+				text-align: left;
+				
+				li {
+					padding: 8px 24px 10px 24px;
+					white-space: nowrap;
+					border-top: 1px solid rgb(231,231,231);
+					.transition( all 0.2s ease-in-out );
+					
+					&.current {
+						color: #333;
+						background-color: rgba(255,255,255,0.8);
+					}
+					&:hover {
+						color: #e80;
+						background-color: rgba(255,255,255,0.8);
+					}
+				}
+			}
+		}
+	}
+}
+

src/h5ai/css/inc/mixins.less

@@ -1,32 +1,32 @@
 
-.border-radius ( @radius: 5px ) {
+.border-radius ( @radius ) {
 	-moz-border-radius: @radius;
 	-webkit-border-radius: @radius;
 	border-radius: @radius;
 }
 
 
-.box-shadow ( @x: 10px, @y: 10px, @blur: 5px, @color: #ccc ) {
-	-moz-box-shadow: @x @y @blur @color;
-	-webkit-box-shadow: @x @y @blur @color;
-	box-shadow: @x @y @blur @color;
+.box-shadow ( @shadow ) {
+	-moz-box-shadow: @shadow;
+	-webkit-box-shadow: @shadow;
+	box-shadow: @shadow;
 }
 
 
-.transition ( @transitions ) {
-	-moz-transition: @transitions;
-	-ms-transition: @transitions;
-	-o-transition: @transitions;
-	-webkit-transition: @transitions;
-	transition: @transitions;
+.transition ( @transition ) {
+	-moz-transition: @transition;
+	-ms-transition: @transition;
+	-o-transition: @transition;
+	-webkit-transition: @transition;
+	transition: @transition;
 }
 
 
-.transform ( @transforms ) {
-	-moz-transform: @transforms;
-	-o-transform: @transforms;
-	-webkit-transform: @transforms;
-	transform: @transforms;
+.transform ( @transform ) {
+	-moz-transform: @transform;
+	-o-transform: @transform;
+	-webkit-transform: @transform;
+	transform: @transform;
 }
 
 

src/h5ai/css/inc/tree.less

@@ -3,24 +3,76 @@
 	display: none;
 	position: fixed;
 	left: 0;
-	top: 80px;
+	top:  82px;
+	z-index: 1;
+	overflow: auto;
 	font-size: 0.85em;
-	padding: 16px 32px 16px 16px;
-	background-color: rgb(240,240,240);
-	border: 1px solid rgb(225,225,225);
+	padding: 16px 16px 16px 16px;
+	background-color: rgb(241,241,241);
+	border: 2px solid rgb(210,210,210);
 	border-left: none;
 	.border-radius ( 0 15px 15px 0 );
-	.box-shadow( 0, 0, 30px, #999 );
 
+	> .scrollbar {
+		margin: 12px 12px 12px 0;
+		width: 6px;
+		background-color: rgb(210,210,210);
+		.border-radius( 3px );
+	
+		.drag {
+			background-color: rgb(180,180,180);
+			.border-radius( 3px );
+		}
+		&.dragOn .drag {
+			background-color: rgb(150,150,150);
+		}
+	}
+	
 	.entry {
-		> a, > a.visited {
+		.blank, .indicator {
+			display: inline-block;
+			width: 16px;
+			height: 25px;
+			float: left;
+		}
+		.indicator {
+			opacity: 0.7;
+			.transition( all 0.2s ease-in-out );
+			cursor: pointer;
+			
+			&:hover {
+				opacity: 1;
+			}
+			img {
+				position: relative;
+				left: 0;
+				top: 3px;
+				width: 12px;
+				height: 12px;
+				vertical-align: bottom;
+				.transition( all 0.2s ease-in-out );
+			}
+			&.open {
+				img {
+					.transform( rotate(90deg) );
+				}
+			}
+			&.unknown {
+				opacity: 0.3;
+			}
+		}
+		> a, > a:active, > a.visited {
+			margin-left: 16px;
 			padding: 4px 6px;
 			border: 1px solid rgba(0,0,0,0);
 			.border-radius( 5px );
 			display: block;
+			color: #555;
+			text-decoration: none;
 			opacity: 0.7;
 
-			&:hover {
+			&:hover, &.hover {
+				color: #e80;
 				background-color: rgba(255,255,255,0.5);
 				opacity: 1;
 			}
@@ -39,7 +91,7 @@
 			.hint {
 				display: inline-block;
 				margin-left: 12px;
-				font-style: italic;
+				font-size: 0.9em;
 				color: #ccc;
 				img {
 					width: 10px;
@@ -47,23 +99,29 @@
 					vertical-align: baseline;
 				}
 			}
-			.error {
-				color: #c55;
-			}
+		}
+		&.file {
+			display: none;
 		}
 		&.current {
-			> a, > a:visited {
-				border: 1px solid rgba(0,0,0,0.1);
+			> a, > a:active, > a:visited {
+				border: 1px solid rgb(221,221,221);
 				background-color: rgba(255,255,255,0.5);
 				opacity: 1;
 			}
 		}
-		&.notListable {
-			> a, > a:visited {
+		&.error {
+			> a, > a:active, > a:visited {
 				color: #999;
+				&:hover, &.hover {
+					color: #e80;
+				}
+			}
+			.hint {
+				color: #c55;
 			}
 		}
-		ul {
+		.content {
 			list-style: none;
 			margin-left: 20px;
 		}

src/h5ai/css/main-js.less

@@ -0,0 +1,3 @@
+
+@import "inc/main";
+

src/h5ai/css/main-php.less

@@ -0,0 +1,15 @@
+
+@import "inc/main";
+
+
+#table {
+	display: none;
+}
+#tree, #content > header, #content > footer {
+	display: block;
+}
+html.no-js {
+	#extended.details-view, #extended.icons-view {
+		display: block;
+	}
+}

src/h5ai/css/main.less

@@ -1,167 +0,0 @@
-
-@import "inc/html5reset";
-@import "inc/mixins";
-
-
-html.js {
-	.jsDisabledFallback {
-		display: none;
-	}
-}
-html.no-js {
-	body > nav ul {
-		display: none;
-	}
-}
-
-body {
-	font-family: Ubuntu, sans-serif;
-	font-size: 16px;
-	color: #555;
-	margin: 80px 30px;
-}
-
-
-a, a:visited {
-	color: #555;
-	text-decoration: none;
-
-	&:hover {
-		color: #e80;
-	}
-}
-
-
-body > nav {
-	position: fixed;
-	z-index: 1;
-	width: 100%;
-	left: 0;
-	top: 0;
-	font-size: 0.85em;
-	background-color: rgb(240,240,240);
-	border-bottom: 1px solid rgb(225,225,225);
-	.box-shadow( 0, 0, 30px, #555 );
-
-	span.jsDisabledFallback {
-		display: block;
-		height: 30px;
-		line-height: 30px;
-		padding: 0 10px;
-		color: #999;
-	}
-	li {
-		cursor: pointer;
-		opacity: 0.7;
-		.transition( all 0.2s ease-in-out );
-		
-		&.crumb {
-			float: left;
-			border-right: 1px dotted rgb(225,225,225);
-			.hint {
-				margin-left: 8px;
-				font-style: italic;
-				color: #999;
-			}
-			img.hint {
-				width: 10px;
-				height: 10px;
-				vertical-align: baseline;
-				padding: 0px;
-			}
-		}
-		&.current {
-			background-color: rgba(255,255,255,0.5);
-			opacity: 1.0;
-		}
-		&.view {
-			float: right;
-			border-left: 1px dotted rgb(225,225,225);
-		}
-		&:hover, &:hover a {
-			background-color: rgba(255,255,255,0.5);
-			color: #e80;
-			opacity: 1.0;
-		}
-	}
-	a {
-		display: block;
-		height: 30px;
-		line-height: 30px;
-		padding: 0 10px;
-	}
-	img {
-		width: 16px;
-		height: 16px;
-		vertical-align: bottom;
-		padding: 0 6px 6px 0;
-	}
-}
-
-
-#content {
-	max-width: 980px;
-	margin: 0 auto;
-
-	> header {
-		display: none;
-		padding-bottom: 10px;
-		margin-bottom: 80px;
-		border-bottom: 2px dashed #ddd;
-	}
-	> footer {
-		display: none;
-		padding-top: 10px;
-		margin-top: 80px;
-		border-top: 2px dashed #ddd;
-	}
-}
-
-
-@import "inc/table";
-@import "inc/extended";
-@import "inc/tree";
-
-
-body > footer {
-	position: fixed;
-	z-index: 1;
-	width: 100%;
-	left: 0;
-	bottom: 0;
-	padding: 10px 0;
-	border-top: 1px solid rgb(225,225,225);
-	background-color: rgb(240,240,240);
-	color: #999;
-	font-size: 0.85em;
-	text-align: center;
-	.box-shadow( 0, 0, 30px, #555 );
-
-	a, a:visited {
-		color: #555;
-		.transition( all 0.2s ease-in-out );
-
-		&:hover {
-			color: #e80;
-		}
-	}
-}
-
-
-#html5 {
-	position: absolute;
-	left: 6px;
-	bottom: 6px;
-	float: left;
-
-	img {
-		width: 20px;
-		height: 20px;
-		opacity: 0.4;
-		.transition( all 0.2s ease-in-out );
-	}
-	&:hover img {
-		opacity: 0.8;
-	}
-}
-

src/h5ai/footer.html

@@ -4,19 +4,31 @@
 		<footer></footer>
 	</section>
 	<section id="tree"></section>
-	<footer>
-		<a id="html5" href="http://www.w3.org/html/logo/" target="_blank" title="HTML5 semantics, storage & CSS3">
-			<img class="logo" src="/h5ai/images/html5.png" alt="html5" />
-			<img class="techclass" src="/h5ai/images/html5-semantics.png" alt="html5-semantics" />
-			<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>
-		using
-		<a href="http://tiheum.deviantart.com/art/Faenza-Icons-173323228" target="_blank" title="icon theme for Gnome">Faenza icons</a>
+	<footer class="clearfix">
+		<span class="left">
+			<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai project page">h5ai %BUILD_VERSION% (js)</a>
+		</span>
+		<span class="right">
+			<span class="hideOnJs">JavaScript is disabled!</span>
+			<span id="langSelector">
+				<span class="lang">en</span> - <span class="l10n-lang">english</span>
+				<span class="langOptions"></span>
+			</span>
+		</span>
+		<span class="center">
+			<span class="hideOnNoJs">
+				<span class="status default">
+					<span class="folderCount"></span> <span class="l10n-folders">folders</span>
+					 · 
+					<span class="fileCount"></span> <span class="l10n-files">files</span>
+				</span>
+				<span class="status dynamic">
+				</span>
+			</span>
+		</span>
 	</footer>
-	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
-	<script>window.jQuery || document.write( '<script src="/h5ai/js/lib/jquery.min.js"><\/script>' )</script>
-	<script src="/h5ai/js/main.js"></script>
+	<script src="/h5ai/js/lib/jquery.min.js"></script>
+	<script src="/h5ai/options.js"></script>
+	<script src="/h5ai/js/main-js.js"></script>
 </body>
 </html>

src/h5ai/footer.php

@@ -0,0 +1,4 @@
+		<!-- generated code ends here -->
+	</section>
+</body>
+</html>

src/h5ai/header.html

@@ -3,28 +3,29 @@
 <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% (js)">
 	<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">
 	<link rel="apple-touch-icon" type="image/png" href="/h5ai/images/h5ai-48x48.png">
 	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold">
-	<link rel="stylesheet" type="text/css" href="/h5ai/css/main.css">
+	<link rel="stylesheet" type="text/css" href="/h5ai/css/main-js.css">
 	<script src="/h5ai/js/lib/modernizr.min.js"></script>
 </head>
 <body>
-	<nav>
-		<span class="jsDisabledFallback">Directory index · JavaScript is disabled</span>
+	<nav class="clearfix">
 		<ul>
-			<li id="domain" class="crumb"><a href="/"><img src="/h5ai/images/home.png" alt="domain" /><span>domain</span></a></li>
-			<li id="viewicons" class="view"><a href="#"><img src="/h5ai/images/view-icons.png" alt="view-icons" />icons</a></li>
-			<li id="viewdetails" class="view" ><a href="#"><img src="/h5ai/images/view-details.png" alt="view-details" />details</a></li>
+			<li id="viewicons" class="view hideOnNoJs">
+				<a href="#"><img src="/h5ai/images/view-icons.png" alt="view-icons" /><span class="l10n-icons">icons</span></a>
+			</li>
+			<li id="viewdetails" class="view hideOnNoJs" >
+				<a href="#"><img src="/h5ai/images/view-details.png" alt="view-details" /><span class="l10n-details">details</span></a>
+			</li>
 		</ul>
-		<div class="clearfix"></div>
 	</nav>
 	<section id="content">
 		<header></header>
-		<section id="table" class="jsDisabledFallback">
+		<section id="table" class="hideOnJs">
 			<!--
 				The following code was generated by apache's autoindex module. It is not valid HTML 5 for the
 				reason, that 'align' and 'valign' attributes on the td element are obsolete. Both of them are

src/h5ai/header.php

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html class="no-js">
+<?php include "php/main.php"; ?>
+<head>
+	<meta charset="utf-8">
+	<title><?php echo $h5ai->getTitle(); ?></title>
+	<meta name="h5ai-version" content="h5ai %BUILD_VERSION% (php)">
+	<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">
+	<link rel="apple-touch-icon" type="image/png" href="/h5ai/images/h5ai-48x48.png">
+	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold">
+	<link rel="stylesheet" type="text/css" href="/h5ai/css/main-php.css">
+	<script src="/h5ai/js/lib/modernizr.min.js"></script>
+</head>
+<body>
+	<nav class="clearfix">
+		<ul>
+			<?php echo $crumb->toHtml(); ?>
+			<li id="viewicons" class="view hideOnNoJs">
+				<a href="#"><img src="/h5ai/images/view-icons.png" alt="view-icons" /><span class="l10n-icons">icons</span></a>
+			</li>
+			<li id="viewdetails" class="view hideOnNoJs" >
+				<a href="#"><img src="/h5ai/images/view-details.png" alt="view-details" /><span class="l10n-details">details</span></a>
+			</li>
+		</ul>
+	</nav>
+	<?php echo $tree->toHtml(); ?>
+	<section id="content">
+		<?php echo $customize->getHeader(); ?>
+		<?php echo $extended->toHtml(); ?>
+		<?php echo $customize->getFooter(); ?>
+	</section>
+	<footer class="clearfix">
+		<span class="left">
+			<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai project page">h5ai %BUILD_VERSION% (php)</a>
+		</span>
+		<span class="right">
+			<span class="hideOnJs">JavaScript is disabled!</span>
+			<span id="langSelector">
+				<span class="lang">en</span> - <span class="l10n-lang">english</span>
+				<span class="langOptions"></span>
+			</span>
+		</span>
+		<span class="center">
+			<span class="status default">
+				<?php echo $extended->getFolderCount(); ?> <span class="l10n-folders">folders</span>
+				 · 
+				<?php echo $extended->getFileCount(); ?> <span class="l10n-files">files</span>
+			</span>
+			<span class="status dynamic">
+			</span>
+		</span>
+	</footer>
+	<script src="/h5ai/js/lib/jquery.min.js"></script>
+	<script src="/h5ai/options.js"></script>
+	<script src="/h5ai/js/main-php.js"></script>
+	<section id="table">
+		<!-- the following code was generated by apache's autoindex module and gets ignored -->

src/h5ai/js/inc/extended.js

@@ -0,0 +1,153 @@
+
+var Extended = function ( pathCache, h5ai ) {
+
+
+	/*******************************
+	 * config
+	 *******************************/
+
+	this.config = {
+		customHeader: "h5ai.header.html",
+		customFooter: "h5ai.footer.html"
+	};
+
+
+	/*******************************
+	 * init
+	 *******************************/
+
+	this.init = function () {
+
+		try {
+			document.title = decodeURI( document.domain + document.location.pathname );
+		} catch ( err ) {
+			document.title = document.domain + document.location.pathname;
+		};
+
+		this.initBreadcrumb();
+		this.initExtendedView();
+		this.customize();
+		this.initCounts();
+	};
+
+
+
+	/*******************************
+	 * breadcrumb
+	 *******************************/
+
+	this.initBreadcrumb = function () {
+
+		var $ul = $( "body > nav ul" );
+
+		var pathname = "/";
+		var path = pathCache.getPathForFolder( pathname );
+		$ul.append( path.updateCrumbHtml() );
+
+		var pathnameParts = document.location.pathname.split( "/" );
+		for ( idx in pathnameParts ) {
+			var part = pathnameParts[idx];
+			if ( part !== "" ) {
+				pathname += part + "/";
+				var path = pathCache.getPathForFolder( pathname );
+				$ul.append( path.updateCrumbHtml() );
+			};
+		};
+	};
+
+
+
+	/*******************************
+	 * extended view
+	 *******************************/
+
+	this.initExtendedView = function () {
+
+		var $ul = $( "<ul/>" );
+
+		// headers
+		var $ths = $( "#table th" );
+		var $label = $ths.eq( 1 ).find( "a" );
+		var $date = $ths.eq( 2 ).find( "a" );
+		var $size = $ths.eq( 3 ).find( "a" );
+		var $li = $( "<li class='header' />" ).appendTo( $ul );
+		$( "<a class='icon'></a>" ).appendTo( $li );
+		$( "<a class='label' href='" + $label.attr( "href" ) + "'><span class='l10n-name'>" + $label.text() + "</span></a>" ).appendTo( $li );
+		$( "<a class='date' href='" + $date.attr( "href" ) + "'><span class='l10n-lastModified'>" + $date.text() + "</span></a>" ).appendTo( $li );
+		$( "<a class='size' href='" + $size.attr( "href" ) + "'><span class='l10n-size'>" + $size.text() + "</span></a>" ).appendTo( $li );
+
+		// header sort icons
+		var sortquery = document.location.search;
+		var order = {
+			column: ( sortquery.indexOf( "C=N" ) >= 0 ) ? "name" : ( sortquery.indexOf( "C=M" ) >= 0 ) ? "date" : ( sortquery.indexOf( "C=S" ) >= 0 ) ? "size" : h5ai.config.sortorder.column,
+			ascending: ( sortquery.indexOf( "O=A" ) >= 0 ) ? true : ( sortquery.indexOf( "O=D" ) >= 0 ) ? false : h5ai.config.sortorder.ascending
+		};
+		var $icon;
+		if ( order.ascending ) {
+			$icon = $( "<img src='/h5ai/images/ascending.png' class='sort' alt='ascending' />" );
+		} else {
+			$icon = $( "<img src='/h5ai/images/descending.png' class='sort' alt='descending' />" );
+		};
+		if ( order.column === "date" ) {
+			$li.find( "a.date" ).prepend( $icon );
+		} else if ( order.column === "size" ) {
+			$li.find( "a.size" ).prepend( $icon );
+		} else {
+			$li.find( "a.label" ).append( $icon );
+		};
+
+		// entries
+		$( "#table td" ).closest( "tr" ).each( function () {
+			var path = pathCache.getPathForTableRow( document.location.pathname, this );
+			$ul.append( path.updateExtendedHtml() );
+		} );
+
+		$( "#extended" ).append( $ul );
+		$.log( document.location.pathname, "folders:", $( "#extended .folder" ).size() , "files:", $( "#extended .file" ).size() );
+
+		// empty
+		if ( $ul.children( ".entry:not(.parentfolder)" ).size() === 0 ) {
+			$( "#extended" ).append( $( "<div class='empty l10n-empty'>empty</div>" ) );
+		};
+
+		// in case of floats
+		$( "#extended" ).addClass( "clearfix" );
+	};
+
+
+
+	/*******************************
+	 * 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();
+			}
+		} );
+	};
+
+
+
+	/*******************************
+	 * init counts
+	 *******************************/
+
+	this.initCounts = function () {
+
+		$( ".folderCount" ).text( $( "#extended .entry.folder:not(.parentfolder)" ).size() );
+		$( ".fileCount" ).text( $( "#extended .entry.file" ).size() );
+	};
+};

src/h5ai/js/inc/h5ai.js

@@ -1,326 +1,379 @@
-( function( $ ) {
+
+var H5ai = function ( options, langs ) {
+
+
+	/*******************************
+	 * config
+	 *******************************/
+
+	var defaults = {
+		store: {
+			viewmode: "h5ai.viewmode",
+			lang: "h5ai.lang"
+		},
+		callbacks: {
+			pathClick: []
+		},
+
+		viewmodes: [ "details", "icons" ],
+		sortorder: {
+			column: "name",
+			ascending: true
+		},
+		showTree: true,
+		slideTree: true,
+		folderStatus: {
+		},
+		lang: null,
+		useBrowserLang: true,
+		setParentFolderLabels: true,
+		linkHoverStates: true
+	};
+	this.config = $.extend( {}, defaults, options );
 
 
 
 	/*******************************
-	 * init after dom load
+	 * public api
 	 *******************************/
 
-	$( function() {
+	this.pathClick = function ( fn ) {
 
-		$.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 ( $.isFunction( fn ) ) {
+			this.config.callbacks.pathClick.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 );
+
+
+	/*******************************
+	 * init
+	 *******************************/
+
+	this.init = function () {
+
+		this.applyViewmode();
+		this.initTopSpace();
+		this.initViews();
+		this.initTree();
+		this.linkHoverStates();
+		this.initLangSelector( langs );
+		this.localize( langs, this.config.lang, this.config.useBrowserLang );
+		this.initIndicators();
+	};
+
+
+
+	/*******************************
+	 * callback triggers
+	 *******************************/
+
+	this.triggerPathClick = function ( path, context ) {
+
+		for ( idx in this.config.callbacks.pathClick ) {
+			this.config.callbacks.pathClick[idx].call( window, path, context );
+		};
+	};
+
+
+
+	/*******************************
+	 * local stored viewmode
+	 *******************************/
+
+	this.getViewmode = function () {
+	
+		var viewmode = localStorage.getItem( this.config.store.viewmode );
+		return $.inArray( viewmode, this.config.viewmodes ) >= 0 ? viewmode : this.config.viewmodes[0];
+	};
+
+
+	this.applyViewmode = function ( viewmode ) {
+
+		if ( viewmode !== undefined ) {
+			localStorage.setItem( this.config.store.viewmode, viewmode );
+		};
+		viewmode = this.getViewmode();
+
+		$( "#viewdetails,#viewicons" ).hide().removeClass( "current" );
+
+		if ( this.config.viewmodes.length > 1 ) {
+			if ( $.inArray( "details", this.config.viewmodes ) >= 0 ) {
+				$( "#viewdetails" ).show();
+			};
+			if ( $.inArray( "icons", this.config.viewmodes ) >= 0 ) {
+				$( "#viewicons" ).show();
+			};
+		};
+
+		if ( viewmode === "details" ) {
+			$( "#viewdetails" ).closest( "li" ).addClass( "current" );
+			$( "#extended" ).addClass( "details-view" ).removeClass( "icons-view" ).show();
+		} else if ( viewmode === "icons" ) {
+			$( "#viewicons" ).closest( "li" ).addClass( "current" );
+			$( "#extended" ).removeClass( "details-view" ).addClass( "icons-view" ).show();
+		} else {
+			$( "#extended" ).hide();
+		};
+	};
+
+
+
+	/*******************************
+	 * top space, depending on nav height
+	 *******************************/
+
+	this.initTopSpace = function () {
+
+		function adjustTopSpace() {
+			
+			var winHeight = $( window ).height();
+			var navHeight = $( "body > nav" ).outerHeight();
+			var footerHeight = $( "body > footer" ).outerHeight();
+			var contentSpacing = 50;
+			var treeSpacing = 50;
+
+			$( "body" )
+				.css( "margin-top", "" + ( navHeight + contentSpacing ) + "px" )
+				.css( "margin-bottom", "" + ( footerHeight + contentSpacing ) + "px" );
+			
+			$( "#tree" )
+				.css( "top", "" + ( navHeight + treeSpacing ) + "px" )
+				.css( "height", "" + ( winHeight - navHeight - footerHeight - 36 - 2 * treeSpacing ) + "px" );
+			try {
+				$( "#tree" ).get( 0 ).updateScrollbar();
+			} catch ( err ) {};
+		};
+
+		$( window ).resize( function () {
+			adjustTopSpace();
+		} );
+		adjustTopSpace();
+	};
+
+
+
+	/*******************************
+	 * init views
+	 *******************************/
+
+	this.initViews = function () {
+
+		$( "#table" ).remove();
+
+		$( "#viewdetails" ).closest( "li" )
+			.click( $.proxy( function () {
+				this.applyViewmode( "details" );
+			}, this ) );
+		$( "#viewicons" ).closest( "li" )
+			.click( $.proxy( function () {
+				this.applyViewmode( "icons" );
+			}, this ) );
+		
+		$( "#extended .entry" ).hover(
+			function () {
+				if ( $( "#extended" ).hasClass( "icons-view" ) ) {
+					$this = $( this );
+					$( ".status.default" ).hide();
+					$( ".status.dynamic" )
+						.empty()
+						.append( $this.find( ".label" ).clone() )
+						.append( " · " )
+						.append( $this.find( ".date" ).clone() )
+						.show();
+					
+					if ( ! $this.hasClass( "folder" ) ) {
+						$( ".status.dynamic" )
+							.append( " · " )
+							.append( $this.find( ".size" ).clone() );
+					}
+				};
+			},
+			function () {
+				$( ".status.default" ).show();
+				$( ".status.dynamic" )
+					.empty()
+					.hide();
+			}
+		);
+	};
+
+
+
+	/*******************************
+	 * init tree
+	 *******************************/
+
+	this.shiftTree = function ( forceVisible, dontAnimate ) {
+
+		var $tree = $( "#tree" );
+		var $extended = $( "#extended" );
+
+		if ( this.config.slideTree && $tree.outerWidth() < $extended.offset().left || forceVisible === true ) {
+			if ( dontAnimate === true ) {
+				$tree.stop().css( { left: 0 } );															
+			} else {
+				$tree.stop().animate( { left: 0 } );										
+			};
+		} else {
+			if ( dontAnimate === true ) {
+				$tree.stop().css( { left: 18 - $tree.outerWidth() } );					
+			} else {
+				$tree.stop().animate( { left: 18 - $tree.outerWidth() } );					
+			};
+		};
+	};
+
+
+	this.initTree = function () {
+
+		$( "#tree" ).hover(
+			$.proxy( function () { this.shiftTree( true ); }, this ),
+			$.proxy( function () { this.shiftTree(); }, this )
+		);
+		$( window ).resize( $.proxy( function () { this.shiftTree(); }, this ) );
+		this.shiftTree( false, true );
+	};
+
+
+
+	/*******************************
+	 * link hover states
+	 *******************************/
+
+	this.linkHoverStates = function () {
+
+		if ( !this.config.linkHoverStates ) {
+			return;
+		};
+
+		$( "a[href^='/']:not(.linkedHoverStates)" ).each( function () {
+			
+			var $a = $( this ).addClass( "linkedHoverStates" );
+			var href = $a.attr( "href" );
+			$a.hover(
+					function () {
+						$( "a[href='" + href + "']" ).addClass( "hover" );
+					},
+					function () {
+						$( "a[href='" + href + "']" ).removeClass( "hover" );					
+					}
+			);
+		} );
+	};
+
+
+
+	/*******************************
+	 * localization
+	 *******************************/
+
+	this.initLangSelector = function ( langs ) {
+	
+		var sortedLangsKeys = [];
+		for ( lang in langs ) {
+			sortedLangsKeys.push( lang );
+		};
+		sortedLangsKeys.sort();
+
+		var THIS = this;
+		var $ul = $( "<ul />" );
+		for ( idx in sortedLangsKeys ) {
+			( function ( lang ) {
+				$( "<li class='langOption' />" )
+					.addClass( lang )
+					.text( lang + " - " + langs[lang]["lang"] )
+					.appendTo( $ul )
+					.click( function () {
+						localStorage.setItem( THIS.config.store.lang, lang );
+						THIS.localize( langs, lang, false );
+					} );
+			} )( sortedLangsKeys[idx] );
+		};
+		$( "#langSelector .langOptions" )
+			.append( $ul );
+		$( "#langSelector" ).hover(
+			function () {
+				var $ele = $( ".langOptions" );
+				$ele.css( "top", "-" + $ele.outerHeight() + "px" ).stop( true, true ).fadeIn();
+			},
+			function () {
+				$( ".langOptions" ).stop( true, true ).fadeOut();
+			}
+		);
+	};
+
+	this.localize = function ( langs, lang, useBrowserLang ) {
+
+		if ( useBrowserLang === true ) {
+			var browserLang = navigator.language;
+			if ( langs[ browserLang ] !== undefined ) {
+				lang = browserLang;
+			} else if ( browserLang.length > 2 &&  langs[ browserLang.substr( 0, 2 ) ] !== undefined  ) {
+				lang = browserLang.substr( 0, 2 );
+			};
+		};
+
+		if ( langs[ lang ] === undefined ) {
+			lang = "en";
+		};
+
+		var storedLang = localStorage.getItem( this.config.store.lang );
+		if ( langs[ storedLang ] !== undefined ) {
+			lang = storedLang;
+		};
+
+		var selected = langs[ lang ];
+		for ( key in selected ) {
+			$( ".l10n-" + key ).text( selected[key] );
+		};
+		$( ".lang" ).text( lang );
+		$( ".langOption" ).removeClass( "current" );
+		$( ".langOption." + lang ).addClass( "current" );
+	};
+
+
+
+	/*******************************
+	 * initiate tree indicators
+	 *******************************/
+
+	this.initIndicators = function () {
+
+		var THIS = this;
+		$( "#tree .entry.folder:not(.initiatedIndicator)" ).each( function () {
+
+			var $entry = $( this ).addClass( "initiatedIndicator" );
+			var $indicator = $entry.find( "> .indicator" );
+			$indicator.click( function( event ) {
+				if ( $indicator.hasClass( "unknown" ) ) { 
+					$.get( "/h5ai/php/treecontent.php", { "href": $entry.find( "> a" ).attr( "href" ) }, function ( html ) {
+						$content = $( html );
+						$indicator.removeClass( "unknown" );
+						if ( $content.find( "> li" ).size() === 0 ) {
+							$indicator.replaceWith( $( "<span class='blank' />" ) );
+						} else {
+							$indicator.addClass( "open" );
+							$entry.find( "> .content" ).replaceWith( $content );
+							$( "#tree" ).get( 0 ).updateScrollbar();
+							THIS.initIndicators();
+						};
+					} );
+				} else if ( $indicator.hasClass( "open" ) ) {
+					$indicator.removeClass( "open" );
+					$( "#tree" ).get( 0 ).updateScrollbar( true );
+					$entry.find( "> .content" ).slideUp( function() {
+						$( "#tree" ).get( 0 ).updateScrollbar();
+					} );
+				} else {
+					$indicator.addClass( "open" );
+					$( "#tree" ).get( 0 ).updateScrollbar( true );
+					$entry.find( "> .content" ).slideDown( function() {
+						$( "#tree" ).get( 0 ).updateScrollbar();
+					} );				
+				};
+			} );
+		} );
+	};
+};

src/h5ai/js/inc/h5aitree.js

@@ -1,332 +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 );
-				fetchFoldersRecursive( 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 fetchFoldersRecursive( pathname, callback ) {
-
-			fetchFolders( pathname, false, function ( folders ) {
-				if ( folders instanceof Array ) {
-					for ( idx in folders ) {
-						( function ( entry ) {
-							if ( entry.isFolder ) {
-								fetchFoldersRecursive( entry.absHref, function( content ) {
-									entry.content = content;
-									callback( folders );
-								} );
-							};
-						} ) ( folders[idx] );
-					};
-				};
-				callback( folders );
-			} );
-		};
-
-
-		function fetchFolders( pathname, includeParent, callback ) {
-
-			fetchEntries( pathname, includeParent, function ( entries ) {
-				
-				if ( entries instanceof Array ) {
-					var folders = [];
-					for ( idx in entries ) {
-						var entry = entries[idx];
-						if ( entry.isFolder ) {
-							folders.push( entry );
-						};
-					};
-					callback( folders );
-				} else {
-					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.content === undefined ) {
-					return false;
-				};
-				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 ) {
-						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" );
-						};
-					};
-
-				} catch( err ) {
-					$( "<span class='fail'>fail</span>" ).appendTo( $entry );
-				};
-
-				return $entry;
-			};
-		};
-
-
-		init()
-	};
-
-} )( jQuery );

src/h5ai/js/inc/jquery.mousewheel.min.js

@@ -0,0 +1,11 @@
+/* Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ *
+ * Version: 3.0.2
+ * 
+ * Requires: 1.2.2+
+ */
+(function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(f){var d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return c.event.handle.apply(this,d)}})(jQuery);

src/h5ai/js/inc/jquery.scrollpanel.js

@@ -0,0 +1,133 @@
+( function ( $ ) {
+
+	var init = function ( htmlElement ) {
+
+		var $element = $( htmlElement );
+		
+		if ( $element.css( "position" ) === undefined || $element.css( "position" ) === "static" ) {
+			$element.css( "position", "relative" );
+		};
+
+		var $scrollbar = $( "<div class='scrollbar' />" );
+		var $drag = $( "<div class='drag' />" ).appendTo( $scrollbar );
+		$element
+			.wrapInner( "<div class='wrapper'><div class='content' /></div>" )
+			.append( $scrollbar );
+		var $wrapper = $element.find( "> .wrapper" );
+		var $content = $wrapper.find( "> .content" );
+		var mouseOffsetY = 0;
+		var updateId = undefined;
+
+		var update = function ( repeat ) {
+			if ( updateId !== undefined && !repeat ) {
+				clearInterval( updateId );
+				updateId = undefined;
+			} else if ( updateId === undefined && repeat ) {
+				updateId = setInterval( function() { update( true ); }, 50 );
+			};
+
+			$wrapper.css( "height", $element.height() );
+			var visibleHeight = $element.height();
+			var contentHeight = $content.outerHeight();
+			var scrollTop = $wrapper.scrollTop();
+			var scrollTopFrac = scrollTop / contentHeight;
+			var visVertFrac = Math.min( visibleHeight / contentHeight, 1 );
+			
+			if ( visVertFrac < 1 ) {
+				$scrollbar
+					.fadeIn( 50 )
+					.css( {
+						height: $element.innerHeight() + $scrollbar.height() - $scrollbar.outerHeight( true )
+					} );
+				$drag
+					.css( {
+						top: $scrollbar.height() * scrollTopFrac,
+						height: $scrollbar.height() * visVertFrac
+					} );
+			} else {
+				$scrollbar.fadeOut( 50 );
+			};
+		};
+		var scroll = function ( event ) {
+			event.preventDefault();
+			var clickFrac = ( event.pageY - $scrollbar.offset().top - mouseOffsetY ) / $scrollbar.height();
+			$wrapper.scrollTop( $content.outerHeight() * clickFrac );
+			update();
+		};
+
+		$element
+			.mousewheel( function ( event, delta) {
+				$wrapper.scrollTop( $wrapper.scrollTop() - 50 * delta );
+				update();
+				event.stopPropagation();
+				event.preventDefault();
+			} )
+			.scroll( update );
+		$element.get( 0 ).updateScrollbar = update;
+		$wrapper
+			.css( {
+				"padding-right": $scrollbar.outerWidth( true ),
+				height: $element.height(),
+				overflow: "hidden"
+			} );
+		$scrollbar
+			.css( {
+				position: "absolute",
+				top: 0,
+				right: 0,
+				overflow: "hidden",
+				cursor: "pointer"
+			} )
+			.mousedown( function ( event ) {
+				mouseOffsetY = $drag.outerHeight() / 2;
+				scroll( event );
+				$scrollbar.addClass( "dragOn" );
+				$( window )
+					.bind( "mousemove", scroll )
+					.one( "mouseup", function ( event ) {
+						$scrollbar.removeClass( "dragOn" );
+						$( window ).unbind( "mousemove", scroll );
+						scroll( event );
+						event.stopPropagation();
+					} );
+				event.preventDefault();
+			} )
+			.each( function () { 
+				this.onselectstart = function () {
+					return false;
+				};
+			} );
+		$drag
+			.css( {
+				position: "absolute",
+				left: 0,
+				width: "100%"
+			} )
+			.mousedown( function ( event ) {
+				mouseOffsetY = event.pageY - $drag.offset().top;
+				scroll( event );
+				$scrollbar.addClass( "dragOn" );
+				$( window )
+					.bind( "mousemove", scroll )
+					.one( "mouseup", function ( event ) {
+						$scrollbar.removeClass( "dragOn" );
+						$( window ).unbind( "mousemove", scroll );
+						scroll( event );
+						event.stopPropagation();
+					} );
+				event.stopPropagation();
+			} );
+
+		update();
+	};
+
+	
+	$.fn.scrollpanel = function () {
+		
+		return this.each( function () {
+
+			init( this );
+		} );
+	};
+
+} )( jQuery );

src/h5ai/js/inc/jquery.utils.js

@@ -0,0 +1,24 @@
+( function( $ ) {
+
+	// http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
+	// modified
+	$.log = function () {
+		$.log.history = $.log.history || [];
+		$.log.history.push( arguments );
+		if ( window.console ) {
+			window.console.log( Array.prototype.slice.call( arguments ) );
+		};
+	};
+
+	var Timer = function () {
+		this.start = new Date().getTime();;
+		this.last = this.start;
+		this.log = function ( label ) {
+			var now = new Date().getTime();
+			$.log( "timer", label, "+" + (now - this.last), "=" + (now - this.start) );
+			this.last = now;
+		};
+	};
+	$.timer = new Timer();
+	
+} )( jQuery );

src/h5ai/js/inc/path.js

@@ -0,0 +1,465 @@
+
+var pathnameSplitRegEx = /^(\/(.*\/)*)([^\/]+\/?)$/;
+var pathEndsWithSlashRegEx = /\/$/;
+
+var PathCache = function () {
+
+
+	this.cache = {};
+	this.objectCache = {};
+
+
+	this.splitPathname = function ( pathname ) {
+		
+		if ( pathname === "/"  ) {
+			return [ "", "/" ];
+		};
+		var match = pathnameSplitRegEx.exec( pathname );
+		return [ match[1], match[3] ];
+	};
+	
+	
+	this.loadCache = function () {
+
+		var json = localStorage.getItem( "h5ai.cache" );
+		var objs = $.evalJSON( json );
+		var objectCache = {};
+		for ( idx in objs ) {
+			var obj = objs[idx];
+			objectCache[obj.r] = obj;
+		};
+		return objectCache;
+	};
+
+
+	this.storeCache = function () {
+
+		var objs = [];
+		for ( ref in this.objectCache ) {
+			objs.push( this.objectCache[ref] );
+		};
+		var json = $.toJSON( objs ); 
+		localStorage.setItem( "h5ai.cache", json );
+	};
+
+
+	this.pathToObject = function ( path ) {
+
+		var object = {
+			r: path.absHref,
+			s: path.status,
+			c: [],
+			o: path.treeOpen
+		};
+
+		if ( path.content !== undefined ) {
+			for ( ref in path.content ) {
+				object.c.push( ref );
+			};
+		};
+
+		return object;
+	};
+
+
+	this.objectToPath = function ( obj ) {
+		
+		var path = this.getPathForFolder( obj.r );
+		path.status = obj.s;
+		path.content = {};
+		path.treeOpen = obj.o;
+		for ( idx in obj.c ) {
+			var href = obj.c[idx];
+			path.content[href] = this.getPathForFolder( href );
+		};
+		return path;
+	};
+
+
+	this.getAbsHref = function ( folder, tableRow ) {
+		
+		if ( ! pathEndsWithSlashRegEx.test( folder ) ) {
+			folder += "/";
+		};
+		
+		if ( tableRow === undefined ) {
+			return folder;
+		};
+		
+		var $a = $( tableRow ).find( "td" ).eq( 1 ).find( "a" );
+		var isParentFolder = ( $a.text() === "Parent Directory" );
+		var href = $a.attr( "href" );
+		return isParentFolder ? undefined : folder + href;
+	};
+
+
+	this.getPathForFolder = function ( folder ) {
+
+		var absHref = this.getAbsHref( folder );
+		
+		var cachedPath = this.cache[absHref];
+		if ( cachedPath !== undefined ) {
+			return cachedPath;
+		};
+
+		var path = new Path( this, folder );
+		this.cache[path.absHref] = path;
+
+		var obj = this.objectCache[absHref];
+		if ( obj !== undefined ) {
+			path.status = obj.s;
+			path.content = {};
+			path.treeOpen = obj.o;
+			for ( idx in obj.c ) {
+				var href = obj.c[idx];
+				path.content[href] = this.getPathForFolder( href );
+			};
+		} else {
+			var obj = this.pathToObject( path );
+			this.objectCache[obj.r] = obj;
+			this.storeCache();
+		};
+
+		return path;
+	};
+
+
+	this.getPathForTableRow = function ( parentFolder, tableRow ) {
+
+		var absHref = this.getAbsHref( parentFolder, tableRow );
+		
+		var cachedPath = this.cache[absHref];
+		if ( cachedPath !== undefined ) {
+			return cachedPath;
+		};
+		
+		var path = new Path( this, parentFolder, tableRow );
+		if ( ! path.isParentFolder ) {
+			this.cache[path.absHref] = path;
+
+			var obj = this.objectCache[absHref];
+			if ( obj !== undefined ) {
+				path.status = obj.s;
+				path.content = {};
+				path.treeOpen = obj.o;
+				for ( idx in obj.c ) {
+					var href = obj.c[idx];
+					path.content[href] = this.getPathForFolder( href );
+				};
+			} else {
+				if ( path.isFolder && path.status !== undefined ) {
+					var obj = this.pathToObject( path );
+					this.objectCache[obj.r] = obj;
+					this.storeCache();
+				};
+			};
+		};
+
+		return path;
+	};
+
+
+	this.objectCache = this.loadCache();
+
+};
+
+
+
+
+
+
+var Path = function ( pathCache, folder, tableRow ) {
+
+	this.checkedDecodeUri = function ( uri ) {
+		try {
+			return decodeURI( uri );
+		} catch ( err ) {
+		};
+		return uri;
+	}
+	
+	if ( ! pathEndsWithSlashRegEx.test( folder ) ) {
+		folder += "/";
+	};
+
+	if ( tableRow !== undefined ) {
+		var $tds = $( tableRow ).find( "td" );
+		var $img = $tds.eq( 0 ).find( "img" );
+		var $a= $tds.eq( 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.eq( 2 ).text();
+		this.size = $tds.eq( 3 ).text();
+	} else {
+		var splits = pathCache.splitPathname( folder );
+
+		this.parentFolder = splits[0];
+		this.href = splits[1];
+		this.label = this.checkedDecodeUri( splits[1] );
+		this.icon16 = "/h5ai/icons/16x16/folder.png";
+		this.alt = "[DIR]";
+		this.date = "";
+		this.size = "";			
+		if ( this.label === "/" ) {
+			this.label = this.checkedDecodeUri( document.domain ) + "/";
+		};
+	};
+
+	if ( pathEndsWithSlashRegEx.test( this.label ) ) {
+		this.label = this.label.slice( 0, -1 );
+	};
+
+	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.isCurrentFolder = ( this.absHref === document.location.pathname );
+	this.isDomain = ( this.absHref === "/" );
+
+	if ( this.isParentFolder && h5ai.config.setParentFolderLabels ) {
+		if ( this.isDomain ) {
+			this.label = this.checkedDecodeUri( document.domain );
+		} else {
+			this.label = this.checkedDecodeUri( pathCache.splitPathname( pathCache.splitPathname( this.parentFolder )[0] )[1].slice( 0, -1 ) );
+		};
+	};
+
+	this.status = undefined;  // undefined, "h5ai" or HTTP response code
+	this.content = undefined;  // associative array path.absHref -> path
+	this.html = {
+		$crumb: undefined,
+		$extended: undefined,
+		$tree: undefined
+	};
+	this.treeOpen = false;
+
+	this.isEmpty = function() {
+
+		return this.content === undefined || $.isEmptyObject( this.content );
+	};
+
+
+	this.onClick = function ( context ) {
+
+		h5ai.triggerPathClick( this, context );
+	};
+
+
+	this.updateHtml = function () {
+
+		this.updateCrumbHtml();
+		this.updateExtendedHtml();
+		this.updateTreeHtml();
+	};
+
+
+	this.updateCrumbHtml = function () {
+
+		if ( this.html.$crumb !== undefined && this.html.$crumb.data( "status" ) === this.status ) {
+			return this.html.$crumb;
+		};
+
+		var $html = $( "<li class='crumb' />" ).data( "path", this );
+		if ( this.status !== undefined ) {
+			$html.data( "status", this.status );
+		};
+
+		try {
+			$html.addClass( this.isFolder ? "folder" : "file" );
+			var $a = $( "<a><img src='/h5ai/images/crumb.png' alt='>' />" + this.label + "</a>" );
+			$a.attr( "href", this.absHref );
+			$a.click( $.proxy( function() { this.onClick( "crumb" ); }, this ) );
+			$html.append( $a );
+
+			if ( this.isDomain ) {
+				$html.addClass( "domain" );
+				$a.find( "img" ).attr( "src", "/h5ai/images/home.png" );
+			};
+
+			if ( this.isCurrentFolder ) {
+				$html.addClass( "current" );
+			};
+
+			if ( !isNaN( this.status ) ) {
+				if ( this.status === 200 ) {
+					$( "<img class='hint' src='/h5ai/images/page.png' alt='not listable' />" ).appendTo( $a );
+				} else {
+					$( "<span class='hint'>(" + this.status + ")</span>" ).appendTo( $a );
+				};
+			};
+		} catch( err ) {
+			$( "<span class='fail'>failed</span>" ).appendTo( $html );
+		};
+
+		if ( this.html.$crumb !== undefined ) {
+			this.html.$crumb.replaceWith( $html );
+		};
+		this.html.$crumb = $html;
+
+		return $html;
+	};
+
+
+	this.updateExtendedHtml = function () {
+
+		if ( this.html.$extended !== undefined && this.html.$extended.data( "status" ) === this.status ) {
+			return this.html.$extended;
+		};
+		
+		var $html = $( "<li class='entry' />" ).data( "path", this );
+		if ( this.status !== undefined ) {
+			$html.data( "status", this.status );
+		};
+
+		try {
+			$html.addClass( this.isFolder ? "folder" : "file" );
+			var $a = $( "<a />" ).appendTo( $html );
+			$a.attr( "href", this.absHref );
+			$a.click( $.proxy( function() { this.onClick( "extended" ); }, this ) );
+
+			$( "<span class='icon small'><img src='" + this.icon16 + "' alt='" + this.alt + "' /></span>" ).appendTo( $a );
+			$( "<span class='icon big'><img src='" + this.icon48 + "' alt='" + this.alt + "' /></span>" ).appendTo( $a );
+			var $label = $( "<span class='label'>" + this.label + "</span>" ).appendTo( $a );
+			$( "<span class='date'>" + this.date + "</span>" ).appendTo( $a );
+			$( "<span class='size'>" + this.size + "</span>" ).appendTo( $a );
+
+			if ( this.isParentFolder ) {
+				if ( !h5ai.config.setParentFolderLabels ) {
+					$label.addClass( "l10n-parentDirectory" );
+				};
+				$html.addClass( "parentfolder" );
+			};
+
+			if ( !isNaN( this.status ) ) {
+				if ( this.status === 200 ) {
+					$html.addClass( "page" );
+					$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 {
+					$html.addClass( "error" );
+					$label.append(  $( "<span class='hint'> " + this.status + " </span>" ) );
+				};
+			};
+		} catch( err ) {
+			$( "<span class='fail'>failed</span>" ).appendTo( $html );
+		};
+
+		if ( this.html.$extended !== undefined ) {
+			this.html.$extended.replaceWith( $html );
+		};
+		this.html.$extended = $html;
+
+		return $html;
+	};
+
+
+	this.updateTreeHtml = function () {
+
+		var $html = $( "<div class='entry' />" ).data( "path", this );
+		var $blank = $( "<span class='blank' />" ).appendTo( $html );
+
+		try {
+			$html.addClass( this.isFolder ? "folder" : "file" );
+			var $a = $( "<a />" )
+				.appendTo( $html )
+				.append( $( "<span class='icon'><img src='" + this.icon16 + "' /></span>" ) )
+				.append( $( "<span class='label'>" + this.label + "</span>" ) );
+			$a.attr( "href", this.absHref );
+			$a.click( $.proxy( function() { this.onClick( "tree" ); }, this ) );
+
+			if ( this.isFolder ) {
+				// indicator
+				if ( this.status === undefined || !this.isEmpty() ) {
+					var $indicator = $( "<span class='indicator'><img src='/h5ai/images/tree.png' /></span>" );
+					if ( this.status === undefined ) {
+						$indicator.addClass( "unknown" );
+					} else if ( this.treeOpen ) {
+						$indicator.addClass( "open" );
+					};
+					$indicator.click( $.proxy( function( event ) {
+						if ( $indicator.hasClass( "unknown" ) ) { 
+							tree.fetchStatusAndContent( this.absHref, false, $.proxy( function ( status, content ) {
+								this.status = status;
+								this.content = content;
+								this.treeOpen = true;
+								pathCache.objectCache[this.absHref] = pathCache.pathToObject( this );
+								pathCache.storeCache();
+								$( "#tree" ).get( 0 ).updateScrollbar( true );
+								this.updateTreeHtml( function() {
+									$( "#tree" ).get( 0 ).updateScrollbar();
+								} );
+							}, this ) );
+						} else if ( $indicator.hasClass( "open" ) ) {
+							this.treeOpen = false;
+							pathCache.objectCache[this.absHref] = pathCache.pathToObject( this );
+							pathCache.storeCache();
+							$indicator.removeClass( "open" );
+							$( "#tree" ).get( 0 ).updateScrollbar( true );
+							$html.find( "> ul.content" ).slideUp( function() {
+								$( "#tree" ).get( 0 ).updateScrollbar();
+							} );
+						} else {
+							this.treeOpen = true;
+							pathCache.objectCache[this.absHref] = pathCache.pathToObject( this );
+							pathCache.storeCache();
+							$indicator.addClass( "open" );
+							$( "#tree" ).get( 0 ).updateScrollbar( true );
+							$html.find( "> ul.content" ).slideDown( function() {
+								$( "#tree" ).get( 0 ).updateScrollbar();
+							} );				
+						};
+					}, this ) );
+					$html.addClass( "initiatedIndicator" );
+					$blank.replaceWith( $indicator );
+				};
+
+				// is this the domain?
+				if ( this.isDomain ) {
+					$html.addClass( "domain" );
+					$a.find( ".icon img" ).attr( "src", "/h5ai/icons/16x16/folder-home.png" );
+				};
+
+				// is this the current folder?
+				if ( this.isCurrentFolder ) {
+					$html.addClass( "current" );
+					$a.find( ".icon img" ).attr( "src", "/h5ai/icons/16x16/folder-open.png" );
+				};
+
+				// does it have subfolders?
+				if ( !this.isEmpty() ) {
+					var $ul = $( "<ul class='content' />" ).appendTo( $html );
+					for ( idx in this.content ) {
+						$( "<li />" ).append( this.content[idx].updateTreeHtml() ).appendTo( $ul );
+					};
+					if ( this.status === undefined || !this.treeOpen ) {
+						$ul.hide();
+					};
+				};
+
+				// reflect folder status
+				if ( !isNaN( this.status ) ) {
+					if ( this.status === 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 {
+						$html.addClass( "error" );
+						$a.append( $( "<span class='hint'>" + this.status + "</span>" ) );
+					};
+				};
+			};
+		} catch( err ) {
+			$( "<span class='fail'>failed</span>" ).appendTo( $html );
+		};
+
+		if ( this.html.$tree !== undefined ) {
+			this.html.$tree.replaceWith( $html );
+		};
+		this.html.$tree = $html;
+
+		return $html;
+	};
+};

src/h5ai/js/inc/tree.js

@@ -0,0 +1,149 @@
+
+var Tree = function ( pathCache, h5ai ) {
+
+
+	this.init = function () {
+
+		if ( h5ai.config.showTree ) {
+			this.updatePaths();
+			this.populateTree();
+		};
+	};
+
+
+	this.updatePath = function ( path ) {
+
+		if ( path.isFolder && !path.isParentFolder && path.status === undefined ) {
+			this.fetchStatus( path.absHref, function ( status ) {
+				if ( status !== "h5ai" ) {
+					path.status = status;
+				};
+				path.updateHtml();
+				h5ai.linkHoverStates();
+			} );
+		};
+	};
+
+
+	this.updatePaths = function () {
+
+		for ( var ref in pathCache.cache ) {
+			this.updatePath( pathCache.cache[ref] );
+		};
+	};
+
+
+	this.populateTree = function () {
+
+		this.fetchTree( document.location.pathname, function( path ) {
+			$( "#tree" )
+				.append( path.updateTreeHtml() )
+				.scrollpanel()
+				.show();
+			h5ai.shiftTree( false, true );
+			h5ai.linkHoverStates();
+			pathCache.storeCache();
+			setTimeout( function () {
+				$( "#tree" ).get( 0 ).updateScrollbar();
+			}, 1 );
+		} );
+	};
+
+
+	this.fetchTree = function ( pathname, callback, childPath ) {
+
+		this.fetchPath( pathname, $.proxy( function ( path ) {
+			
+			path.treeOpen = true;
+			
+			if ( childPath !== undefined ) {
+				path.content[ childPath.absHref ] = childPath;
+			};
+
+			var parent = pathCache.splitPathname( pathname )[0];
+			if ( parent === "" ) {
+				callback( path );
+			} else {
+				this.fetchTree( parent, callback, path );				
+			};
+		}, this ) );
+	};
+
+
+	this.fetchPath = function ( pathname, callback ) {
+
+		this.fetchStatusAndContent( pathname, false, function ( status, content ) {
+			var path = pathCache.getPathForFolder( pathname );
+			path.status = status;
+			path.content = content;
+			callback( path );
+		} );
+	};
+
+
+
+	var THIS = this;
+	var contentTypeRegEx = /^text\/html;h5ai=/;
+	var pathnameStatusCache = {};
+
+	this.fetchStatusAndContent = function ( pathname, includeParent, callback ) {
+
+		this.fetchStatus( pathname, function ( status ) {
+
+			if ( status !== "h5ai" ) {
+				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 content =  {};
+					$( html ).find( "#table td" ).closest( "tr" ).each( function () { 
+						var path = pathCache.getPathForTableRow( pathname, this );
+						if ( path.isFolder && ( !path.isParentFolder || includeParent ) ) {
+							content[path.absHref] = path;
+							THIS.updatePath( path );
+						};
+					} );
+					callback( "h5ai", content );
+				}
+			} );
+		} );
+	};
+
+
+	this.fetchStatus = function ( pathname, callback ) {
+
+		if ( h5ai.config.folderStatus[ pathname ] !== undefined ) {
+			callback( h5ai.config.folderStatus[ pathname ] );
+			return;
+		} else if ( pathnameStatusCache[ pathname ] !== undefined ) {
+			callback( pathnameStatusCache[ pathname ] );
+			return;
+		};
+
+		$.ajax( {
+			url: pathname,
+			type: "HEAD",
+			complete: function ( xhr ) {
+				var status = xhr.status;
+				if ( status === 200 && contentTypeRegEx.test( xhr.getResponseHeader( "Content-Type" ) ) ) {
+					status = "h5ai";
+				};
+				pathnameStatusCache[ pathname ] = status;
+				callback( status );
+			}
+		} );
+	};
+};

src/h5ai/js/main-js.js

@@ -0,0 +1,42 @@
+( function( $ ) {
+
+	// @include "inc/jquery.json.min.js"
+	// @include "inc/jquery.mousewheel.min.js"
+	// @include "inc/jquery.scrollpanel.js"
+	// @include "inc/jquery.utils.js"
+	// @include "inc/path.js"
+	// @include "inc/extended.js"
+	// @include "inc/h5ai.js"
+	// @include "inc/tree.js"
+
+
+	/*******************************
+	 * create
+	 *******************************/
+
+	var pathCache = new PathCache();
+	var h5ai = new H5ai( h5aiOptions, h5aiLangs );
+	var extended = new Extended( pathCache, h5ai );
+	var tree = new Tree( pathCache, h5ai );
+
+
+	/*******************************
+	 * register public api
+	 *******************************/
+
+	$.h5ai = {
+		click: $.proxy( h5ai.pathClick, h5ai )
+	};
+
+	/*******************************
+	 * init after dom load
+	 *******************************/
+
+	$( function() {
+
+		extended.init();
+		tree.init();	
+		h5ai.init();
+	} );
+	
+} )( jQuery );

src/h5ai/js/main-php.js

@@ -0,0 +1,37 @@
+( function( $ ) {
+
+	// @include "inc/jquery.json.min.js"
+	// @include "inc/jquery.mousewheel.min.js"
+	// @include "inc/jquery.scrollpanel.js"
+	// @include "inc/jquery.utils.js"
+	// @include "inc/h5ai.js"
+
+
+	/*******************************
+	 * create
+	 *******************************/
+
+	var h5ai = new H5ai( h5aiOptions, h5aiLangs );
+
+
+	/*******************************
+	 * register public api
+	 *******************************/
+
+	$.h5ai = {
+		click: $.proxy( h5ai.pathClick, h5ai )
+	};
+
+
+	/*******************************
+	 * init after dom load
+	 *******************************/
+
+	$( function() {
+
+		h5ai.init();
+		$( "#tree" ).scrollpanel();
+		h5ai.shiftTree( false, true );
+	} );
+	
+} )( jQuery );

src/h5ai/js/main.js

@@ -1,3 +0,0 @@
-// @include "inc/jquery.json.min.js"
-// @include "inc/h5ai.js"
-// @include "inc/h5aitree.js"

src/h5ai/options.js

@@ -0,0 +1,309 @@
+/*
+ * h5ai %BUILD_VERSION%
+ * Options and localization
+ */
+
+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" ],
+
+    /*
+     * Default sort order. Valid values for column are "name", "date" and
+     * "size".
+     * If you are using the JavaScript version please make sure to change
+     * IndexOrderDefault in js.htaccess as well.
+     */
+    "sortorder": {
+        "column": "name",
+        "ascending": true
+    },
+
+    /*
+     * 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": true,
+
+    /*
+     * Slide tree bar into viewport if there is enough space, boolean.
+     */
+    "slideTree": true,
+
+    /*
+     * 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 it defaults to "en".
+     */
+    "lang": null,
+
+    /*
+     * Try to use browser language, falls back to previous specified lang.
+     */
+    "useBrowserLang": true,
+
+    /*
+     * Set parent folder labels to real folder names.
+     */
+    "setParentFolderLabels": true,
+
+    /*
+     * Link the hover effects between crumb, extended view and tree.
+     */
+    "linkHoverStates": true,
+
+    /*
+     * Only used in PHP implementation.
+     * Date format in PHP syntax, for example: "Y-m-d H:i:s"
+     * http://www.php.net/manual/en/function.date.php
+     */
+    "dateFormat": "Y-m-d H:i",
+
+    /*
+     * IMPORTANT: PHP implementation doesn't care about Apache's
+     * ignores, so you have to specify this here.
+     *
+     * Only used in PHP implementation.
+     * Files/folders that should never be listed. Specified
+     * by the complete filename or by a regular expression.
+     * http://www.php.net/manual/en/function.preg-match.php
+     */
+    "ignore": [ "h5ai", "h5ai.header.html", "h5ai.footer.html" ],
+    "ignoreRE": [ "/^\\./" ],
+
+    /*
+     * Only used in PHP implementation.
+     * Show thumbnails in Icons view.
+     */
+    "showThumbs": true
+};
+
+
+
+/*
+ * Available translations.
+*/
+h5aiLangs = {
+
+    "en": {
+        "lang": "english",
+        "details": "details",
+        "icons": "icons",
+        "name": "Name",
+        "lastModified": "Last modified",
+        "size": "Size",
+        "parentDirectory": "Parent Directory",
+        "empty": "empty",
+        "folders": "folders",
+        "files": "files"
+    },
+
+    "de": {
+        "lang": "deutsch",
+        "details": "Details",
+        "icons": "Icons",
+        "name": "Name",
+        "lastModified": "Geändert",
+        "size": "Größe",
+        "parentDirectory": "Übergeordnetes Verzeichnis",
+        "empty": "leer",
+        "folders": "Ordner",
+        "files": "Dateien"
+    },
+
+    "fr": {
+        "lang": "français",
+        "details": "détails",
+        "icons": "icônes",
+        "name": "Nom",
+        "lastModified": "Dernière modification",
+        "size": "Taille",
+        "parentDirectory": "Dossier parent",
+        "empty": "vide",
+        "folders": "Répertoires",
+        "files": "Fichiers"
+    },
+
+    "nl": {
+        "lang": "nederlands",
+        "details": "details",
+        "icons": "iconen",
+        "name": "Naam",
+        "lastModified": "Laatste wijziging",
+        "size": "Grootte",
+        "parentDirectory": "Bovenliggende map",
+        "empty": "lege",
+        "folders": "[?folders?]",
+        "files": "[?files?]"
+    },
+
+    "sv": {
+        "lang": "svenska",
+        "details": "detaljerad",
+        "icons": "ikoner",
+        "name": "Filnamn",
+        "lastModified": "Senast ändrad",
+        "size": "Filstorlek",
+        "parentDirectory": "Till överordnad mapp",
+        "empty": "tom",
+        "folders": "[?folders?]",
+        "files": "[?files?]"
+    },
+
+    "cs": {
+        "lang": "čeština",
+        "details": "podrobnosti",
+        "icons": "ikony",
+        "name": "Název",
+        "lastModified": "Upraveno",
+        "size": "Velikost",
+        "parentDirectory": "Nadřazený adresář",
+        "empty": "prázdný",
+        "folders": "složek",
+        "files": "souborů"
+    },
+
+    "sk": {
+        "lang": "slovenčina",
+        "details": "podrobnosti",
+        "icons": "ikony",
+        "name": "Názov",
+        "lastModified": "Upravené",
+        "size": "Velkosť",
+        "parentDirectory": "Nadriadený priečinok",
+        "empty": "prázdny",
+        "folders": "priečinkov",
+        "files": "súborov"
+    },
+
+    "es": {
+        "lang": "español",
+        "details": "Detalles",
+        "icons": "Íconos",
+        "name": "Nombre",
+        "lastModified": "Última modificación",
+        "size": "Tamaño",
+        "parentDirectory": "Directorio superior",
+        "empty": "vacío",
+        "folders": "[?folders?]",
+        "files": "[?files?]"
+    },
+
+    "tr": {
+        "lang": "türkçe",
+        "details": "detaylar",
+        "icons": "ikonlar",
+        "name": "İsim",
+        "lastModified": "Son Düzenleme",
+        "size": "Boyut",
+        "parentDirectory": "Üst Dizin",
+        "empty": "boş",
+        "folders": "[?folders?]",
+        "files": "[?files?]"
+    },
+
+    "pt": {
+        "lang": "português",
+        "details": "detalhes",
+        "icons": "ícones",
+        "name": "Nome",
+        "lastModified": "Última modificação",
+        "size": "Tamanho",
+        "parentDirectory": "Diretório superior",
+        "empty": "vazio",
+        "folders": "pastas",
+        "files": "arquivos"
+    },
+
+    "bg": {
+        "lang": "български",
+        "details": "детайли",
+        "icons": "икони",
+        "name": "Име",
+        "lastModified": "Последна промяна",
+        "size": "Размер",
+        "parentDirectory": "Предходна директория",
+        "empty": "празно",
+        "folders": "папки",
+        "files": "файлове"
+    },
+
+    "lv": {
+        "lang": "latviešu",
+        "details": "detaļas",
+        "icons": "ikonas",
+        "name": "Nosaukums",
+        "lastModified": "Pēdējoreiz modificēts",
+        "size": "Izmērs",
+        "parentDirectory": "Vecākdirektorijs",
+        "empty": "tukšs",
+        "folders": "mapes",
+        "files": "faili"
+    },
+
+    "zh-cn": {
+        "lang": "简体中文",
+        "details": "详情",
+        "icons": "图标",
+        "name": "文件名",
+        "lastModified": "上次修改",
+        "size": "大小",
+        "parentDirectory": "上层文件夹",
+        "empty": "空文件夹",
+        "folders": "文件夹",
+        "files": "文件"
+    },
+    
+    "pl": {
+        "lang": "polski",
+        "details": "szczegóły",
+        "icons": "ikony",
+        "name": "Nazwa",
+        "lastModified": "Ostatnia modyfikacja",
+        "size": "Rozmiar",
+        "parentDirectory": "Katalog nadrzędny",
+        "empty": "pusty",
+        "folders": "foldery",
+        "files": "pliki"
+    },
+    
+    "ru": {
+        "lang": "русский",
+        "details": "детали",
+        "icons": "иконки",
+        "name": "Имя",
+        "lastModified": "Последние изменения",
+        "size": "Размер",
+        "parentDirectory": "Главная директория",
+        "empty": "пусто",
+        "folders": "папки",
+        "files": "файлы"
+    }
+};

src/h5ai/php/cache.php

@@ -0,0 +1,93 @@
+<?php
+
+##############################################
+# taken from here:
+# http://www.jongales.com/blog/2009/02/18/simple-file-based-php-cache-class/
+# with minor modifications
+##############################################
+
+class Cache {
+	private $dir;
+	
+	function __construct( $dir ) {
+
+		$this->dir = $dir;
+	}
+
+	private function _name( $key ) {
+
+		return $this->dir . "/" . sha1( $key );
+	}
+
+	public function get( $key, $expiration = 3600 ) {
+
+		if ( !is_dir( $this->dir ) || !is_writable( $this->dir ) ) {
+			return false;
+		}
+
+		$cache_path = $this->_name( $key );
+
+		if ( !@file_exists( $cache_path ) ) {
+			return false;
+		}
+
+		if ( filemtime( $cache_path ) < ( time() - $expiration ) ) {
+			$this->clear( $key );
+			return false;
+		}
+
+		if ( !$fp = @fopen( $cache_path, "rb" ) ) {
+			return false;
+		}
+
+		flock( $fp, LOCK_SH );
+		$cache = "";
+
+		if ( filesize( $cache_path ) > 0 ) {
+			$cache = unserialize( fread( $fp, filesize( $cache_path ) ) );
+		} else {
+			$cache = null;
+		}
+
+		flock( $fp, LOCK_UN );
+		fclose( $fp );
+
+		return $cache;
+	}
+
+	public function set( $key, $data ) {
+
+		if ( !is_dir( $this->dir ) || !is_writable( $this->dir ) ) {
+			return false;
+		}
+
+		$cache_path = $this->_name( $key );
+
+		if ( ! $fp = fopen( $cache_path, "wb" ) ) {
+			return false;
+		}
+
+		if ( flock( $fp, LOCK_EX ) ) {
+			fwrite( $fp, serialize( $data ) );
+			flock( $fp, LOCK_UN );
+		} else {
+			return false;
+		}
+		fclose( $fp );
+		@chmod( $cache_path, 0777 );
+		return true;
+	}
+
+	public function clear( $key ) {
+
+		$cache_path = $this->_name( $key );
+
+		if ( file_exists( $cache_path ) ) {
+			unlink( $cache_path );
+			return true;
+		}
+		return false;
+	}
+}
+
+?>

src/h5ai/php/crumb.php

@@ -0,0 +1,52 @@
+<?php
+
+class Crumb {
+	private $h5ai, $parts;
+
+	public function __construct( $h5ai ) {
+
+		$this->h5ai = $h5ai;
+		$this->parts = array();
+
+		$href = $h5ai->getAbsHref();
+		while ( $href !== "/" && $href !== "//" ) {
+			$this->parts[] = $href;
+			$href = dirname( $href ) . "/";
+		}
+		$this->parts[] = "/";
+
+		$this->parts = array_reverse( $this->parts );
+	}
+
+	public function toHtml() {
+
+		$html = "";
+		$idx = 0;
+		foreach( $this->parts as $href ) {
+			$idx++;
+			$classes = "crumb folder" . ( $idx === 1 ? " domain" : "" ) . ( $idx === count( $this->parts ) ? " current" : "" );
+			$image = "/h5ai/images/" . ( $idx === 1 ? "home.png" : "crumb.png" );
+			$label = $this->h5ai->getLabel( $href );
+			$hint = "";
+
+			$code = $this->h5ai->getHttpCode( $href );
+			$classes .= " checkedHttpCode";
+			if ( $code !== "h5ai" ) {
+				if ( $code === 200 ) {
+					$hint = "<img class='hint' src='/h5ai/images/page.png' alt='page' />";
+				} else {
+					$hint = "<span class='hint'>(" . $code . ")</span>";
+				}
+			}
+			
+			$html .= "<li class='$classes'>\n";
+			$html .= "\t<a href='$href'>\n";
+			$html .= "\t\t<img src='$image' alt='>' />" . $label . $hint . "\n";
+			$html .= "\t</a>\n";
+			$html .= "</li>\n";
+		}
+		return $html;
+	}
+}
+
+?>

src/h5ai/php/customize.php

@@ -0,0 +1,27 @@
+<?php
+
+class Customize {
+	private $h5ai;
+
+	public function __construct( $h5ai ) {
+
+		$this->h5ai = $h5ai;
+	}
+
+	public function getHeader() {
+
+		return $this->getContent( $this->h5ai->getAbsPath() . "/" . "h5ai.header.html", "header" );
+	}
+
+	public function getFooter() {
+
+		return $this->getContent( $this->h5ai->getAbsPath() . "/" . "h5ai.footer.html", "footer" );
+	}
+
+	private function getContent( $file, $tag ) {
+
+		return file_exists( $file ) ? ( "<" . $tag . ">" . file_get_contents( $file ) . "</" . $tag . ">" ) : "";
+	}
+}
+
+?>

src/h5ai/php/extended.php

@@ -0,0 +1,223 @@
+<?php
+
+require_once "thumbnail.php";
+
+
+class Entry {
+	private $h5ai, $label, $absPath, $absHref, $date, $isFolder, $type, $size, $thumbTypes;
+
+	public function __construct( $h5ai, $absPath, $absHref, $type = null, $label = null ) {
+
+		$this->h5ai = $h5ai;
+		$this->label = $label !== null ? $label : $this->h5ai->getLabel( $absHref );
+		$this->absPath = $this->h5ai->normalizePath( $absPath, false );
+		$this->isFolder = is_dir( $this->absPath );
+		$this->absHref = $this->h5ai->normalizePath( $absHref, $this->isFolder );
+		
+		$this->date = filemtime( $this->absPath );
+
+		if ( $this->isFolder ) {
+			$this->type = $type !== null ? $type : "folder";
+			$this->size = "";
+		} else {
+			$this->type = $type !== null ? $type : $this->h5ai->getType( $this->absPath );
+			$this->size = filesize( $this->absPath );
+		}
+		
+		$this->thumbTypes = array( "bmp", "gif", "ico", "image", "jpg", "png", "tiff" );
+	}
+
+	public function isFolder() {
+
+		return $this->isFolder;
+	}
+
+	function compare( $that, $sortOrder ) {
+
+		if ( $this->isFolder && !$that->isFolder ) {
+			return -1;
+		}
+		if ( !$this->isFolder && $that->isFolder ) {
+			return 1;
+		}
+
+		$res = 0;
+		if ( $sortOrder[ "column" ] === "name" ) {
+			$res = strcasecmp( $this->absPath, $that->absPath );
+		} else if ( $sortOrder[ "column" ] === "date" ) {
+			$res = $this->date - $that->date;
+		} else if ( $sortOrder[ "column" ] === "size" ) {
+			$res = $this->size - $that->size;
+		}
+		if ( ! $sortOrder[ "ascending" ] ) {
+			$res = -$res;
+		}
+		return $res;
+	}
+
+	public function toHtml( $dateFormat ) {
+
+		$classes = "entry " . $this->type;
+		$img = $this->type;
+		$smallImg = "/h5ai/icons/16x16/" . $this->type . ".png";
+		$bigImg = "/h5ai/icons/48x48/" . $this->type . ".png";
+		$hint = "";
+		$dateLabel = date( $dateFormat, $this->date );
+
+		if ( $this->isFolder && $this->type !== "folder-parent" ) {
+			$code = $this->h5ai->getHttpCode( $this->absHref );
+			$classes .= " checkedHttpCode";
+			if ( $code !== "h5ai" ) {
+				if ( $code === 200 ) {
+					$img = "folder-page";
+					$smallImg = "/h5ai/icons/16x16/folder-page.png";
+					$bigImg = "/h5ai/icons/48x48/folder-page.png";
+				} else {
+					$classes .= " error";
+					$hint = "<span class='hint'> " . $code . " </span>";
+				}
+			}
+		}
+		if ( $this->h5ai->showThumbs() && in_array( $this->type, $this->thumbTypes ) ) {
+			$classes .= " thumb";
+			$thumbnail = new Thumbnail( $this->absPath, "square", 16, 16 );
+			$thumbnail->create();
+			$smallImg = file_exists( $thumbnail->getPath() ) ? $thumbnail->getHref() : $thumbnail->getLiveHref();
+			$thumbnail = new Thumbnail( $this->absPath, "rational", 96, 46 );
+			$thumbnail->create();
+			$bigImg = file_exists( $thumbnail->getPath() ) ? $thumbnail->getHref() : $thumbnail->getLiveHref();
+		}
+
+		$html = "\t<li class='" . $classes . "'>\n";
+		$html .= "\t\t<a href='" . $this->absHref . "'>\n";
+		$html .= "\t\t\t<span class='icon small'><img src='" . $smallImg . "' alt='" . $img . "' /></span>\n";
+		$html .= "\t\t\t<span class='icon big'><img src='" . $bigImg . "' alt='" . $img . "' /></span>\n";
+		$html .= "\t\t\t<span class='label'>" . $this->label . $hint . "</span>\n";
+		$html .= "\t\t\t<span class='date'>" . $dateLabel . "</span>\n";
+		$html .= "\t\t\t<span class='size'>" . $this->formatSize( $this->size ) . "</span>\n";
+		$html .= "\t\t</a>\n";
+		$html .= "\t</li>\n";
+		return $html;
+	}
+
+	
+	private function formatSize( $size ) {
+
+		$units = array( 'B', 'KB', 'MB', 'GB', 'TB' );
+	    for ( $i = 0; $size >= 1024 && $i < 4; $i++ ) {
+	    	$size /= 1024;
+	    }
+	    return round( $size, 0 ) . " " . $units[$i];
+	}
+}
+
+
+class Extended {
+	private $h5ai, $parent, $content;
+
+	public function __construct( $h5ai ) {
+
+		$this->h5ai = $h5ai;
+		$this->parent = null;
+		$this->content = array();
+		$this->loadContent();
+	}
+
+	private function loadContent() {
+
+		if ( $this->h5ai->getAbsHref() !== "/" ) {
+			$options = $this->h5ai->getOptions();
+			$parentPath = dirname( $this->h5ai->getAbsPath() );
+			$parentHref = dirname( $this->h5ai->getAbsHref() );
+			$label = $options["setParentFolderLabels"] === true ? $this->h5ai->getLabel( $parentHref ) : "<span class='l10n-parentDirectory'>Parent Directory</span>";
+			$this->parent = new Entry( $this->h5ai, $parentPath, $parentHref, "folder-parent", $label );
+		}
+
+		$this->content = array();
+
+		$files = $this->h5ai->readDir( $this->h5ai->getAbsPath() );
+		foreach ( $files as $file ) {
+			$absPath = $this->h5ai->getAbsPath() . "/" . $file;
+			$absHref = $this->h5ai->getAbsHref() . rawurlencode( $file );
+			$this->content[$absPath] = new Entry( $this->h5ai, $absPath, $absHref );
+		}
+
+		$this->sort();
+	}
+
+	public function cmpEntries( $p1, $p2 ) {
+
+		return $p1->compare( $p2, $this->h5ai->getSortOrder() );
+	}
+
+	public function sort() {
+
+		uasort( $this->content, array( $this, "cmpEntries" ) );
+	}
+
+	public function getFolderCount() {
+
+		$count = 0;
+		foreach( $this->content as $entry ) {
+			if ( $entry->isFolder() ) {
+				$count++;
+			}
+		}
+		return $count;
+	}
+
+	public function getFileCount() {
+
+		$count = 0;
+		foreach( $this->content as $entry ) {
+			if ( !$entry->isFolder() ) {
+				$count++;
+			}
+		}
+		return $count;
+	}
+
+	public function toHtml() {
+
+		$html = "<section id='extended' class='" . $this->h5ai->getView() . "-view clearfix'>\n";
+		$html .= "<ul>\n";
+		$html .= $this->generateHeaders();
+		if ( $this->parent !== null ) {
+			$html .= $this->parent->toHtml( $this->h5ai->getDateFormat() );
+		}
+		foreach( $this->content as $entry ) {
+			$html .= $entry->toHtml( $this->h5ai->getDateFormat() );
+		}
+		$html .= "</ul>\n";
+		if ( count( $this->content ) === 0 ) {
+			$html .= "<div class='empty l10n-empty'>empty</div>";
+		}
+		$html .="</section>";
+		return $html;
+	}
+
+	public function generateHeaders() {
+
+		$asc = "<img src='/h5ai/images/ascending.png' class='sort' alt='ascending' />";
+		$desc = "<img src='/h5ai/images/descending.png' class='sort' alt='descending' />";
+
+		$so = $this->h5ai->getSortOrder();
+		$order = $so["ascending"] ? $asc : $desc;
+		$nameHref = "?col=name" . ( $so["column"] === "name" && $so["ascending"] ? "&asc=false" : "&asc=true" );
+		$dateHref = "?col=date" . ( $so["column"] === "date" && $so["ascending"] ? "&asc=false" : "&asc=true" );
+		$sizeHref = "?col=size" . ( $so["column"] === "size" && $so["ascending"] ? "&asc=false" : "&asc=true" );
+		$nameSort = $so["column"] === "name" ? $order : "";
+		$dateSort = $so["column"] === "date" ? $order : "";
+		$sizeSort = $so["column"] === "size" ? $order : "";
+
+		$html = "\t<li class='header'>\n";
+		$html .= "\t\t<a class='icon'></a>\n";
+		$html .= "\t\t<a class='label' href='$nameHref'><span class='l10n-name'>Name</span>$nameSort</a>\n";
+		$html .= "\t\t<a class='date' href='$dateHref'>$dateSort<span class='l10n-lastModified'>Last modified</span></a>\n";
+		$html .= "\t\t<a class='size' href='$sizeHref'>$sizeSort<span class='l10n-size'>Size</span></a>\n";
+		$html .= "\t</li>\n";
+		return $html;
+	}
+}
+
+?>

src/h5ai/php/h5ai.php

@@ -0,0 +1,270 @@
+<?php
+
+require_once "cache.php";
+
+class H5ai {
+	private static $SORT_ORDER = array( "column" => "name", "ascending" => true );
+	private static $VIEWMODES = array( "details", "icons" );
+
+	private $docRoot, $domain, $options, $types, $cache, $absHref, $absPath, $ignore, $ignoreRE, $sortOrder, $dateFormat, $view;
+
+	public function __construct() {
+
+		$this->docRoot = getenv( "DOCUMENT_ROOT" );
+		$this->domain = getenv( "HTTP_HOST" );
+
+		$this->options = $this->loadOptions( $this->docRoot . "/h5ai/options.js" );
+		$this->types = $this->loadTypes( $this->docRoot . "/h5ai/types.txt" );
+		$this->cache = new Cache( $this->docRoot . "/h5ai/cache" );
+
+		$this->absHref = $this->normalizePath( preg_replace( '/\\?.*/', '', getenv( "REQUEST_URI" ) ), true );
+		$this->absPath = $this->normalizePath( $this->docRoot . rawurldecode( $this->absHref ), false );
+
+		$this->ignore = $this->options["options"]["ignore"];
+		$this->ignoreRE = $this->options["options"]["ignoreRE"];
+
+		$defaultSortOrder = $this->options["options"]["sortorder"];
+		$this->sortOrder = array(
+			"column" => array_key_exists( "col", $_REQUEST ) ? $_REQUEST["col"] : $defaultSortOrder["column"],
+			"ascending" => array_key_exists( "asc", $_REQUEST ) ? $_REQUEST["asc"] !== "false" : $defaultSortOrder["ascending"]
+		);
+		$this->dateFormat = $this->options["options"]["dateFormat"];
+		$this->view = array_key_exists( "view", $_REQUEST ) ? $_REQUEST["view"] : $this->options["options"]["viewmodes"][0];
+		if ( !in_array( $this->view, H5ai::$VIEWMODES ) ) {
+			$this->view = H5ai::$VIEWMODES[0];
+		}
+	}
+
+	
+	private function loadOptions( $file ) {
+	
+		$str = file_exists( $file ) ? file_get_contents( $file ) : "";
+		$str = preg_replace( "/\/\*.*?\*\//s", "", $str );
+		
+		$optstr = preg_replace( "/^.*h5aiOptions\s*=\s*/s", "", $str );
+		$optstr = preg_replace( "/;.*/s", "", $optstr );
+		$options = json_decode( $optstr, true );
+		
+		$langstr = preg_replace( "/^.*h5aiLangs\s*=\s*/s", "", $str );
+		$langstr = preg_replace( "/;.*/s", "", $langstr );
+		$langs = json_decode( $langstr, true );
+
+		return array( "options" => $options, "langs" => $langs );
+	}
+	
+	
+	private function loadTypes( $file ) {
+		
+		$lines = file( $file );
+		$types = array();
+		foreach( $lines as $line ) { 
+			if ( substr( $line, 0, 1 ) === '#' ) {
+				continue;
+			}
+			$types[] = preg_split( "/\s+/", $line );
+		}
+		return $types;
+	}
+	
+	public function getDocRoot() {
+
+		return $this->docRoot;
+	}
+	
+	public function getDomain() {
+
+		return $this->domain;
+	}
+	
+	public function getView() {
+
+		return $this->view;
+	}
+	
+	public function getOptions() {
+
+		return $this->options["options"];
+	}
+	
+	public function getLangs() {
+
+		return $this->options["langs"];
+	}
+
+	public function getAbsHref( $absPath = null, $endWithSlash = true ) {
+
+		if ( $absPath === null ) {
+			return $this->absHref;
+		}
+		return $this->normalizePath( rawurlencode( preg_replace( "!^" . $this->docRoot . "!", "", $absPath ) ), $endWithSlash );
+	}
+	
+	public function getAbsPath( $absHref = null ) {
+
+		if ( $absHref === null ) {
+			return $this->absPath;
+		}
+		return $this->normalizePath( $this->docRoot . rawurldecode( $absHref ), false );
+	}
+	
+	public function getSortOrder() {
+
+		return $this->sortOrder;
+	}
+
+	public function getDateFormat() {
+
+		return $this->dateFormat;
+	}
+	
+	public function showThumbs() {
+
+		return $this->options["options"]["showThumbs"] === true;
+	}
+	
+	public function getTitle() {
+
+		$title = $this->domain . rawurldecode( $this->absHref );
+		$title = preg_replace( "/\/$/", "", $title );
+		$title = preg_replace( "/\//", " > ", $title );
+		if ( $this->absHref !== "/" ) {
+			$title = basename( $this->absPath ) . " - " . $title;
+		}
+		return $title;
+	}
+
+	public function getType( $absPath ) {
+
+		foreach( $this->types as $type ) { 
+			foreach( array_slice( $type, 1 ) as $pattern ) {
+				if ( $this->endsWith( $absPath, $pattern ) ) {
+					return $type[0];
+				}
+			}
+		}
+		return "unknown";
+	}
+
+	public function ignoreThisFile( $file ) {
+
+		# always ignore
+		if ( $file === "." || $file === ".." || $this->startsWith( $file, '.ht' ) ) {
+			return true;
+		}
+
+		if ( in_array( $file, $this->ignore ) ) {
+			return true;
+		}
+		foreach ( $this->ignoreRE as $re ) {
+			if ( preg_match( $re, $file ) ) {
+				return true;
+			}
+		}
+
+		return false;
+	}
+
+	public function readDir( $path ) {
+
+		$content = array();
+		if ( is_dir( $path ) ) {
+			if ( $dir = opendir( $path ) ) {
+				while ( ( $file = readdir( $dir ) ) !== false ) {
+					if ( ! $this->ignoreThisFile( $file ) ) {
+						$content[] = $file;
+					}
+				}
+				closedir( $dir );
+			}
+		}
+		return $content;
+	}
+
+	public function getLabel( $absHref ) {
+
+		return $absHref === "/" ? $this->domain : rawurldecode( basename( $absHref ) );
+	}
+
+	public function normalizePath( $path, $endWithSlash ) {
+
+		return ( $path === "/" ) ? "/" : ( preg_replace( '#/$#', '', $path ) . ( $endWithSlash ? "/" : "" ) );
+	}
+	
+	public function startsWith( $sequence, $start ) {
+	
+		return strcasecmp( substr( $sequence, 0, strlen( $start ) ), $start ) === 0;
+	}
+
+	public function endsWith( $sequence, $end ) {
+
+		return strcasecmp( substr( $sequence, -strlen( $end ) ), $end ) === 0;
+	}
+
+	public function getHttpCode( $absHref ) {
+
+		return $this->cachedHttpCode( $absHref );
+		#return $this->fetchHttpCode( $absHref );
+		#return $this->guessHttpCode( $absHref );
+	}
+
+	public function cachedHttpCode( $absHref ) {
+
+		$cached = $this->cache->get( $absHref );
+		if ( $cached === false ) {
+			$folderStatus = $this->options["options"]["folderStatus"];
+			if ( array_key_exists( $absHref, $folderStatus ) ) {
+				$code = $folderStatus[$absHref];
+			} else {
+				$code = $this->fetchHttpCode( $absHref );
+			}
+			$cached = array( "href" => $absHref, "code" => $code );
+			$this->cache->set( $absHref, $cached );
+		}
+		return $cached["code"];
+	}
+
+	public function fetchHttpCode( $absHref ) {
+
+		$contentType = "Content-Type:";
+		$h5aiContentType = "Content-Type: text/html;h5ai=";
+		$host = getenv( "HTTP_HOST" );
+		$port = getenv( "SERVER_PORT" );
+		$msg = "HEAD $absHref HTTP/1.1\r\nHost: $host\r\nConnection: Close\r\n\r\n";
+	
+		$errno = "";
+		$errstr = "";
+		$socket = fsockopen( $host, $port, $errno, $errstr, 30 );
+		if( $socket === 0 ) {
+			return null;
+		}
+
+		fwrite( $socket, $msg );
+		$content = fgets( $socket );
+		$code = intval( trim( substr( $content, 9, 4 ) ) );
+		if ( $code === 200 ) {
+			while ( ! $this->startsWith( $content, $contentType ) ) {
+				$content = fgets( $socket );
+			}
+			if ( $this->startsWith( $content, $h5aiContentType ) ) {
+				$code = "h5ai";
+			}
+		}
+		fclose( $socket );
+		return $code;
+	}
+
+	public function guessHttpCode( $absHref ) {
+
+		$indexFiles = array( "index.html", "index.cgi", "index.pl", "index.php", "index.xhtml", "index.htm" );
+		$absPath = $this->getAbsPath( $absHref );
+		$files = $this->readDir( $absPath );
+		foreach ( $files as $file ) {
+			if ( in_array( $file, $indexFiles ) ) {
+				return 200;
+			}
+		}
+		return "h5ai";
+	}
+}
+
+?>

src/h5ai/php/httpcode.php

@@ -0,0 +1,23 @@
+<?php
+
+require_once "h5ai.php";
+
+function getHttpCodes( $h5ai, $hrefs ) {
+
+	$codes = array();
+	foreach ( $hrefs as $href ) {
+		$href = trim( $href );
+		if ( strlen( $href ) > 0 ) {
+			$codes[$href] = $h5ai->getHttpCode( $href );
+		}
+	}
+	return $codes;
+}
+
+$h5ai = new H5ai();
+$hrefs = preg_split( "/;/", array_key_exists( "hrefs", $_REQUEST ) ? $_REQUEST[ "hrefs" ] : "" );
+$codes = getHttpCodes( $h5ai, $hrefs );
+
+echo count( $codes ) === 0 ? "{}" : json_encode( $codes );
+
+?>

src/h5ai/php/image.php

@@ -0,0 +1,202 @@
+<?php
+
+class Image {
+
+	private $sourceFile;
+	private $source;
+	private $width;
+	private $height;
+	private $type;
+
+	private $dest;
+
+
+	public static function isUsable() {
+
+		return GD_VERSION != "GD_VERSION";
+	}
+
+
+	public function __construct( $filename = null ) {
+	
+		$this->sourceFile = null;
+		$this->source = null;
+		$this->width = null;
+		$this->height = null;
+		$this->type = null;
+		
+		$this->dest = null;
+		
+		$this->setSource( $filename );
+	}
+
+
+	public function __destruct() {
+	
+		$this->releaseSource();
+		$this->releaseDest();
+	}
+	
+
+	public function setSource( $filename ) {
+
+		$this->releaseSource();
+		$this->releaseDest();
+
+		if ( is_null( $filename ) )
+			return;
+
+		$this->sourceFile = $filename;
+
+		list( $this->width, $this->height, $this->type ) = getimagesize( $this->sourceFile );
+
+		$this->source = imagecreatefromstring( file_get_contents( $this->sourceFile ) );
+	}
+
+
+	public function showDest() {
+	
+		if ( !is_null( $this->dest ) ) {
+			header( "Content-type: image/jpeg" );
+			imagejpeg( $this->dest, null, 100 );
+		}
+	}
+
+
+	public function saveDest( $filename ) {
+	
+		if ( !is_null( $this->dest ) ) {
+			@imagejpeg( $this->dest, $filename, 90 );
+			@chmod( $filename, 0775 );
+		}
+	}
+
+
+	public function releaseDest() {
+
+		if ( !is_null( $this->dest ) ) {		
+			imagedestroy( $this->dest );
+			$this->dest = null;
+		}
+	}
+
+
+	public function releaseSource() {
+
+		if ( !is_null( $this->source ) ) {		
+			imagedestroy( $this->source );
+			$this->sourceFile = null;
+			$this->source = null;
+			$this->width = null;
+			$this->height = null;
+			$this->type = null;
+		}
+	}
+
+
+	public static function showImage( $filename ) {
+
+		$image = file_get_contents( $filename ); 
+		header( "content-type: image" ); 
+		echo $image;
+	}
+
+
+	private function magic( $destX, $destY, $srcX, $srcY, $destWidth, $destHeight, $srcWidth, $srcHeight, $canWidth = null, $canHeight = null, $color = null ) {
+	
+		if ( !is_null( $canWidth ) && !is_null( $canHeight ) ) {
+			$this->dest = imagecreatetruecolor( $canWidth, $canHeight );
+		} else {
+			$this->dest = imagecreatetruecolor( $destWidth, $destHeight );
+		}
+
+		if ( is_null( $color ) ) {
+			$color = array( 255, 255, 255 );
+		}
+		$icol = imagecolorallocate( $this->dest, $color[0], $color[1], $color[2] );
+		imagefill( $this->dest, 0, 0, $icol );
+
+		imagecopyresampled( $this->dest, $this->source, $destX, $destY, $srcX, $srcY, $destWidth, $destHeight, $srcWidth, $srcHeight ); 
+	}
+
+
+	public function thumb( $mode, $width, $height = null, $color = null ) {
+
+		if ( $height === null ) {
+			$height = $width;
+		}
+		if ( $mode === "square" ) {
+			$this->squareThumb( $width );
+		} elseif ( $mode === "rational" ) {
+			$this->rationalThumb( $width, $height );
+		} elseif ( $mode === "center" ) {
+			$this->centerThumb( $width, $height, $color );
+		} else {
+			$this->freeThumb( $width, $height );
+		}
+	}
+
+
+	public function squareThumb( $width ) {
+	
+		$a = min( $this->width, $this->height );
+		$x = intval( ( $this->width - $a ) / 2 );
+		$y = intval( ( $this->height - $a ) / 2 );
+		
+		$this->magic( 0, 0, $x, $y, $width, $width, $a, $a );
+	}
+
+
+	public function rationalThumb( $width, $height ) {
+
+		$r = 1.0 * $this->width / $this->height;
+		
+		$h = $height;
+		$w = $r * $h;
+		
+		if ( $w > $width ) {
+			
+			$w = $width;
+			$h = 1.0 / $r * $w;
+		}
+		
+		$w = intval( $w );
+		$h = intval( $h );
+		
+		$this->magic( 0, 0, 0, 0, $w, $h, $this->width, $this->height );
+	}
+
+
+	public function centerThumb( $width, $height, $color = null ) {
+
+		$r = 1.0 * $this->width / $this->height;
+		
+		$h = $height;
+		$w = $r * $h;
+		
+		if ( $w > $width ) {
+			
+			$w = $width;
+			$h = 1.0 / $r * $w;
+		}
+		
+		$w = intval( $w );
+		$h = intval( $h );
+		
+		$x = intval( ( $width - $w ) / 2 );
+		$y = intval( ( $height - $h ) / 2 );
+		
+		$this->magic( $x, $y, 0, 0, $w, $h, $this->width, $this->height, $width, $height, $color );
+	}
+
+
+	public function freeThumb( $width, $height ) {
+
+		$w = intval( $width );
+		$h = intval( $height );
+		
+		$this->magic( 0, 0, 0, 0, $w, $h, $this->width, $this->height );
+	}
+}
+
+?>

src/h5ai/php/main.php

@@ -0,0 +1,15 @@
+<?php
+
+require_once "h5ai.php";
+require_once "crumb.php";
+require_once "customize.php";
+require_once "extended.php";
+require_once "tree.php";
+
+$h5ai = new H5ai();
+$crumb = new Crumb( $h5ai );
+$customize = new Customize( $h5ai );
+$extended = new Extended( $h5ai );
+$tree = new Tree( $h5ai );
+
+?>

src/h5ai/php/thumb.php

@@ -0,0 +1,26 @@
+<?php
+
+	require_once "thumbnail.php";
+
+	$src = $_REQUEST["src"];
+	$width = $_REQUEST["width"];
+	$height = $_REQUEST["height"];
+	$mode = $_REQUEST["mode"];
+	
+	if ( !Thumbnail::isUsable() ) {
+		Image::showImage( $src );	
+		exit;
+	}
+
+	$thumbnail = new Thumbnail( $src, $mode, $width, $height );
+	$thumbnail->create( 1 );
+	if ( file_exists( $thumbnail->getPath() ) ) {
+		Image::showImage( $thumbnail->getPath() );
+	} else {
+		$image = new Image();
+		$image->setSource( $src );
+		$image->thumb( $mode, $width, $height );
+		$image->showDest();	
+	}
+
+?>

src/h5ai/php/thumbnail.php

@@ -0,0 +1,56 @@
+<?php
+
+require_once "image.php";
+
+class Thumbnail {
+	
+	private $src, $width, $height, $name, $href, $path;
+
+	public static function isUsable() {
+
+		return Image::isUsable();
+	}
+
+	public function __construct( $src, $mode, $width, $height ) {
+	
+		$this->src = $src;
+		$this->width = $width;
+		$this->height = $height;
+		$this->mode = $mode;
+		$this->name = sha1( "$this->src-$this->width-$this->height-$this->mode" );
+		$this->href = "/h5ai/cache/thumb-" . $this->name . ".jpg";
+		$this->path = getenv( "DOCUMENT_ROOT" ) . $this->href;
+		$this->liveHref = "/h5ai/php/thumb.php?src=" . $this->src . "&width=" . $this->width . "&height=" . $this->height . "&mode=" . $this->mode;
+	}
+
+	public function create( $force = 0 ) {
+	
+		if (
+			$force === 2
+			|| ( $force === 1 && !file_exists( $this->path ) )
+			|| ( file_exists( $this->path ) && filemtime( $this->src ) >= filemtime( $this->path ) )
+		) {
+			$image = new Image();
+			$image->setSource( $this->src );
+			$image->thumb( $this->mode, $this->width, $this->height );
+			$image->saveDest( $this->path );	
+		}
+	}
+
+	public function getHref() {
+		
+		return $this->href;
+	}
+
+	public function getPath() {
+		
+		return $this->path;
+	}
+
+	public function getLiveHref() {
+		
+		return $this->liveHref;
+	}
+}
+
+?>

src/h5ai/php/tree.php

@@ -0,0 +1,147 @@
+<?php
+
+class TreeEntry {
+	private $h5ai, $label, $absPath, $absHref, $isFolder, $type, $content;
+
+	public function __construct( $h5ai, $absPath, $absHref, $type = null ) {
+
+		$this->h5ai = $h5ai;
+
+		$this->label = $this->h5ai->getLabel( $absHref );
+		$this->absPath = $this->h5ai->normalizePath( $absPath, false );
+		$this->isFolder = is_dir( $this->absPath );
+		$this->absHref = $this->h5ai->normalizePath( $absHref, $this->isFolder );
+
+		$this->type = $type !== null ? $type : ( $this->isFolder ? "folder" : $this->h5ai->getType( $this->absPath ) );
+		$this->content = null;
+	}
+
+	public function loadContent() {
+
+		$this->content = array();
+
+		if ( $this->h5ai->getHttpCode( $this->absHref ) !== "h5ai" ) {
+			return;
+		}
+		
+		$files = $this->h5ai->readDir( $this->absPath );
+		foreach ( $files as $file ) {
+			$tree = new TreeEntry( $this->h5ai, $this->absPath . "/" . $file, $this->absHref . rawurlencode( $file ) );
+
+			if ( $tree->isFolder ) {
+				$this->content[$tree->absPath] = $tree;
+			}
+		}
+
+		$this->sort();
+	}
+
+	public function cmpTrees( $t1, $t2 ) {
+
+		if ( $t1->isFolder && !$t2->isFolder ) {
+			return -1;
+		}
+		if ( !$t1->isFolder && $t2->isFolder ) {
+			return 1;
+		}
+		return strcasecmp( $t1->absPath, $t2->absPath );
+	}
+
+	public function sort() {
+
+		if ( $this->content !== null ) {
+			uasort( $this->content, array( $this, "cmpTrees" ) );
+		}
+	}
+
+	public function toHtml() {
+
+		$classes = "entry " . $this->type . ( $this->absHref === $this->h5ai->getAbsHref() ? " current" : "" );
+		$img = $this->type;
+		if ( $this->absHref === "/" ) {
+			$img = "folder-home";
+		}
+		$hint = "";
+		$code = "h5ai";
+
+		if ( $this->isFolder ) {
+			$code = $this->h5ai->getHttpCode( $this->absHref );
+			$classes .= " checkedHttpCode";
+			if ( $code !== "h5ai" ) {
+				if ( $code === 200 ) {
+					$img = "folder-page";
+					$hint = "<span class='hint'><img src='/h5ai/images/page.png' alt='page' /></span>";
+				} else {
+					$classes .= " error";
+					$hint = "<span class='hint'> " . $code . " </span>";
+				}
+			}
+		}
+
+		$html = "<div class='" . $classes ."'>\n";
+		if ( $this->content !== null && count( $this->content ) === 0 || $code !== "h5ai" ) {
+			$html .= "<span class='blank'></span>\n";
+		} else {
+			$indicatorState = $this->content === null ? " unknown" : " open";
+			$html .= "<span class='indicator" . $indicatorState . "'><img src='/h5ai/images/tree.png' alt='>' /></span>\n";
+		}
+		$html .= "<a href='" . $this->absHref . "'>\n";
+		$html .= "<span class='icon'><img src='/h5ai/icons/16x16/" . $img . ".png' alt='" . $img . "' /></span>\n";
+		$html .= "<span class='label'>" . $this->label . "</span>" . $hint . "\n";
+		$html .= "</a>\n";
+		$html .= $this->contentToHtml();
+		$html .= "</div>\n";
+		return $html;
+	}
+
+	public function contentToHtml() {
+
+		$html = "<ul class='content'>\n";
+		if ( $this->content !== null ) {
+			foreach( $this->content as $tree ) {
+				$html .= "<li>" . $tree->toHtml() . "</li>";
+			}
+		}
+		$html .= "</ul>\n";
+		return $html;
+	}
+
+	public function getRoot() {
+
+		if ( $this->absHref === "/" ) {
+			return $this;
+		};
+
+		$tree = new TreeEntry( $this->h5ai, dirname( $this->absPath ), dirname( $this->absHref ) );
+		$tree->loadContent();
+		$tree->content[ $this->absPath ] = $this;
+		
+		return $tree->getRoot();
+	}
+}
+
+
+class Tree {
+	private $h5ai;
+
+	public function __construct( $h5ai ) {
+
+		$this->h5ai = $h5ai;
+	}
+
+	public function toHtml() {
+
+		$options = $this->h5ai->getOptions();
+		if ( $options["showTree"] === false ) {
+			return "";
+		}
+
+		$tree = new TreeEntry( $this->h5ai, $this->h5ai->getAbsPath(), $this->h5ai->getAbsHref() );
+		$tree->loadContent();
+		$root = $tree->getRoot();
+		return "<section id='tree'>\n" . $root->toHtml() . "</section>\n";
+	}
+}
+
+
+?>

src/h5ai/php/treecontent.php

@@ -0,0 +1,20 @@
+<?php
+
+if ( ! array_key_exists( "href", $_REQUEST ) ) {
+	exit;
+}
+ 
+require_once "h5ai.php";
+require_once "tree.php";
+
+$h5ai = new H5ai();
+
+$absHref = trim( $_REQUEST[ "href" ] );
+$absPath = $h5ai->getAbsPath( $absHref );
+
+$tree = new TreeEntry( $h5ai, $absPath, $absHref );
+$tree->loadContent();
+
+echo $tree->contentToHtml();
+
+?>

src/h5ai/types.txt

@@ -0,0 +1,63 @@
+archive            .tar.gz  .tgz  .tar.bz2
+audio              .mp3  .wav  .ogg
+authors            AUTHORS  authors
+bin                .so  .o  .class
+blank
+bmp                .bmp
+c                  .c
+calc
+cd                 .iso  .cue
+copying            COPYING  copying  LICENSE  license
+cpp                .cpp
+css                .css  .less
+deb                .deb
+default
+doc                .doc
+draw
+eps
+exe                .exe
+folder
+folder-home
+folder-open
+folder-page
+folder-parent
+gif                .gif
+gzip               .gz
+h                  .h
+hpp                .hpp
+html               .html  .htm  .shtml
+ico                .ico
+image              .xpm
+install            INSTALL  install
+java               .java
+jpg                .jpg  .jpeg
+js                 .js  .json
+log                .log  CHANGELOG  changelog  LOG  log
+makefile           .pom  pom.xml  build.xml
+package
+pdf                .pdf
+php                .php
+playlist           .m3u
+png                .png
+pres
+psd
+py                 .py
+rar                .rar
+rb                 .rb
+readme             README  readme
+rpm                .rpm
+rss                .rss
+rtf                .rtf
+script             .conf  .ini  .sh  .shar  .csh  .ksh  .tcl
+source
+sql
+tar                .tar
+tex                .tex
+text               .txt  .text  .md  .markdown
+tiff               .tiff
+unknown
+vcal               .vcal
+video
+xml                .xml
+zip                .zip  .Z  .z  .jar  .war  .bz2
+

src/js.htaccess

@@ -0,0 +1,113 @@
+################################
+# %BUILD_NAME% %BUILD_VERSION%  (js)
+# customized .htaccess
+################################
+
+
+# Options  +Indexes
+# Options  +FollowSymLinks
+
+
+################################
+# h5ai header and footer
+################################
+
+HeaderName           /h5ai/header.html
+ReadmeName           /h5ai/footer.html
+
+
+################################
+# hide h5ai folder and config files from index
+################################
+
+IndexIgnore          h5ai  h5ai.header.html  h5ai.footer.html
+
+
+################################
+# table options
+################################
+
+# syntax for default sort order is: IndexOrderDefault Ascending|Descending Name|Date|Size
+IndexOrderDefault    Ascending Name
+
+IndexOptions         Type=text/html;h5ai=%BUILD_VERSION%
+IndexOptions         Charset=UTF-8
+IndexOptions         FancyIndexing
+IndexOptions         HTMLTable
+IndexOptions         XHTML
+IndexOptions         SuppressHTMLPreamble
+IndexOptions         SuppressRules
+IndexOptions         SuppressDescription
+IndexOptions         FoldersFirst
+IndexOptions         IgnoreCase
+IndexOptions         IconsAreLinks
+IndexOptions         VersionSort
+IndexOptions         NameWidth=*
+
+
+################################
+# icon mapping
+################################
+
+AddIcon              /h5ai/icons/16x16/folder-parent.png      ..
+AddIcon              /h5ai/icons/16x16/folder.png      ^^DIRECTORY^^
+AddIcon              /h5ai/icons/16x16/blank.png       ^^BLANKICON^^
+
+AddIcon              /h5ai/icons/16x16/readme.png      README
+AddIcon              /h5ai/icons/16x16/copying.png     COPYING  LICENSE
+AddIcon              /h5ai/icons/16x16/install.png     INSTALL
+AddIcon              /h5ai/icons/16x16/authors.png     AUTHORS
+AddIcon              /h5ai/icons/16x16/log.png         LOG  Log  log
+
+AddIcon              /h5ai/icons/16x16/css.png         .less
+AddIcon              /h5ai/icons/16x16/script.png      .conf  .ini  .sh  .shar  .csh  .ksh  .tcl
+AddIcon              /h5ai/icons/16x16/makefile.png    .pom  pom.xml  build.xml
+AddIcon              /h5ai/icons/16x16/bin.png         .so  .o
+
+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
+AddIcon              /h5ai/icons/16x16/cd.png          .iso  .cue
+
+AddIconByType        /h5ai/icons/16x16/png.png         image/png
+AddIconByType        /h5ai/icons/16x16/jpg.png         image/jpeg
+AddIconByType        /h5ai/icons/16x16/gif.png         image/gif
+AddIconByType        /h5ai/icons/16x16/ico.png         image/x-icon
+AddIconByType        /h5ai/icons/16x16/bmp.png         image/x-ms-bmp
+
+AddIconByType        /h5ai/icons/16x16/html.png        text/html
+AddIconByType        /h5ai/icons/16x16/css.png         text/css
+AddIconByType        /h5ai/icons/16x16/xml.png         application/xml
+AddIconByType        /h5ai/icons/16x16/js.png          application/javascript  application/json
+AddIconByType        /h5ai/icons/16x16/php.png         application/x-httpd-php
+
+AddIconByType        /h5ai/icons/16x16/py.png          text/x-python
+AddIconByType        /h5ai/icons/16x16/rb.png          application/x-ruby
+AddIconByType        /h5ai/icons/16x16/java.png        text/x-java
+AddIconByType        /h5ai/icons/16x16/cpp.png         text/x-c++src
+AddIconByType        /h5ai/icons/16x16/hpp.png         text/x-c++hdr
+AddIconByType        /h5ai/icons/16x16/c.png           text/x-csrc
+AddIconByType        /h5ai/icons/16x16/h.png           text/x-chdr
+
+AddIconByType        /h5ai/icons/16x16/pdf.png         application/pdf
+
+AddIconByType        /h5ai/icons/16x16/rtf.png         text/rtf  application/rtf
+AddIconByType        /h5ai/icons/16x16/tex.png         text/x-tex
+AddIconByType        /h5ai/icons/16x16/makefile.png    text/x-makefile
+
+AddIconByType        /h5ai/icons/16x16/bin.png         application/java-vm
+AddIconByType        /h5ai/icons/16x16/exe.png         application/x-executable application/x-msdos-program
+
+AddIconByType        /h5ai/icons/16x16/text.png        text/*
+AddIconByType        /h5ai/icons/16x16/image.png       image/*
+AddIconByType        /h5ai/icons/16x16/audio.png       audio/*
+AddIconByType        /h5ai/icons/16x16/video.png       video/*
+
+AddIconByEncoding    /h5ai/icons/16x16/zip.png         x-compress  x-gzip  x-bzip2
+
+DefaultIcon          /h5ai/icons/16x16/unknown.png
+
+

src/php.htaccess

@@ -0,0 +1,19 @@
+################################
+# %BUILD_NAME% %BUILD_VERSION%  (php)
+# customized .htaccess
+################################
+
+
+# Options  +Indexes
+# Options  +FollowSymLinks
+
+
+HeaderName    /h5ai/header.php
+ReadmeName    /h5ai/footer.php
+
+IndexIgnore   *
+
+IndexOptions  Type=text/html;h5ai=%BUILD_VERSION%
+IndexOptions  Charset=UTF-8
+IndexOptions  SuppressHTMLPreamble
+

target/dot.htaccess

@@ -1,137 +0,0 @@
-################################
-# h5ai 0.5
-# customized .htaccess
-################################
-
-
-# Options  +Indexes
-# Options  +FollowSymLinks
-
-
-################################
-# cache images for 52 weeks
-################################
-
-<IfModule mod_headers.c>
-	<FilesMatch "\.png$">
-		Header set Cache-Control "max-age=31449600, public"
-	</FilesMatch>
-</IfModule>
-
-
-################################
-# style auto index
-################################
-
-<IfModule mod_autoindex.c>
-
-	################################
-	# uncomment the following line to force directory listing
-	# even for directories with valid index files
-	################################
-
-	# DirectoryIndex       IGNORE-DEFAULT-INDEX-FILES
-
-
-	################################
-	# h5ai header and footer
-	################################
-
-	HeaderName           /h5ai/header.html
-	ReadmeName           /h5ai/footer.html
-
-
-	################################
-	# hide h5ai folder and config files from index
-	################################
-
-	IndexIgnore          h5ai  h5ai.header.html  h5ai.footer.html
-
-
-	################################
-	# table options
-	################################
-
-	IndexOrderDefault    Ascending Name
-
-	IndexOptions         Charset=UTF-8
-	IndexOptions         FancyIndexing
-	IndexOptions         HTMLTable
-	IndexOptions         XHTML
-	IndexOptions         SuppressHTMLPreamble
-	IndexOptions         SuppressRules
-	IndexOptions         SuppressDescription
-	IndexOptions         FoldersFirst
-	IndexOptions         IgnoreCase
-	IndexOptions         IconsAreLinks
-	IndexOptions         VersionSort
-	IndexOptions         NameWidth=*
-
-
-	################################
-	# icon mapping
-	################################
-
-	AddIcon              /h5ai/icons/16x16/parent.png      ..
-	AddIcon              /h5ai/icons/16x16/folder.png      ^^DIRECTORY^^
-	AddIcon              /h5ai/icons/16x16/blank.png       ^^BLANKICON^^
-
-	AddIcon              /h5ai/icons/16x16/readme.png      README
-	AddIcon              /h5ai/icons/16x16/copying.png     COPYING  LICENSE
-	AddIcon              /h5ai/icons/16x16/install.png     INSTALL
-	AddIcon              /h5ai/icons/16x16/authors.png     AUTHORS
-	AddIcon              /h5ai/icons/16x16/log.png         LOG  Log  log
-
-	AddIcon              /h5ai/icons/16x16/css.png         .less
-	AddIcon              /h5ai/icons/16x16/script.png      .conf  .ini  .sh  .shar  .csh  .ksh  .tcl
-	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/pdf.png         .pdf
-	AddIcon              /h5ai/icons/16x16/deb.png         .deb
-	AddIcon              /h5ai/icons/16x16/rpm.png         .rpm
-	AddIcon              /h5ai/icons/16x16/cd.png          .iso  .cue
-
-	AddIconByType        /h5ai/icons/16x16/png.png         image/png
-	AddIconByType        /h5ai/icons/16x16/jpg.png         image/jpeg
-	AddIconByType        /h5ai/icons/16x16/gif.png         image/gif
-	AddIconByType        /h5ai/icons/16x16/ico.png         image/x-icon
-	AddIconByType        /h5ai/icons/16x16/bmp.png         image/x-ms-bmp
-
-	AddIconByType        /h5ai/icons/16x16/html.png        text/html
-	AddIconByType        /h5ai/icons/16x16/css.png         text/css
-	AddIconByType        /h5ai/icons/16x16/xml.png         application/xml
-	AddIconByType        /h5ai/icons/16x16/js.png          application/javascript  application/json
-	AddIconByType        /h5ai/icons/16x16/php.png         application/x-httpd-php
-
-	AddIconByType        /h5ai/icons/16x16/py.png          text/x-python
-	AddIconByType        /h5ai/icons/16x16/rb.png          application/x-ruby
-	AddIconByType        /h5ai/icons/16x16/java.png        text/x-java
-	AddIconByType        /h5ai/icons/16x16/cpp.png         text/x-c++src
-	AddIconByType        /h5ai/icons/16x16/hpp.png         text/x-c++hdr
-	AddIconByType        /h5ai/icons/16x16/c.png           text/x-csrc
-	AddIconByType        /h5ai/icons/16x16/h.png           text/x-chdr
-
-	AddIconByType        /h5ai/icons/16x16/pdf.png         application/pdf
-
-	AddIconByType        /h5ai/icons/16x16/rtf.png         text/rtf  application/rtf
-	AddIconByType        /h5ai/icons/16x16/tex.png         text/x-tex
-	AddIconByType        /h5ai/icons/16x16/makefile.png    text/x-makefile
-
-	AddIconByType        /h5ai/icons/16x16/bin.png         application/java-vm
-	AddIconByType        /h5ai/icons/16x16/exe.png         application/x-executable application/x-msdos-program
-
-	AddIconByType        /h5ai/icons/16x16/text.png        text/*
-	AddIconByType        /h5ai/icons/16x16/image.png       image/*
-	AddIconByType        /h5ai/icons/16x16/audio.png       audio/*
-	AddIconByType        /h5ai/icons/16x16/video.png       video/*
-
-	AddIconByEncoding    /h5ai/icons/16x16/zip.png         x-compress  x-gzip  x-bzip2
-
-	DefaultIcon          /h5ai/icons/16x16/unknown.png
-
-</IfModule>
-

target/h5ai/footer.html

@@ -1,22 +0,0 @@
-			<!-- generated code ends here -->
-		</section>
-		<section id="extended"></section>
-		<footer></footer>
-	</section>
-	<section id="tree"></section>
-	<footer>
-		<a id="html5" href="http://www.w3.org/html/logo/" target="_blank" title="HTML5 semantics, storage & CSS3">
-			<img class="logo" src="/h5ai/images/html5.png" alt="html5" />
-			<img class="techclass" src="/h5ai/images/html5-semantics.png" alt="html5-semantics" />
-			<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">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>window.jQuery || document.write( '<script src="/h5ai/js/lib/jquery.min.js"><\/script>' )</script>
-	<script src="/h5ai/js/main.js"></script>
-</body>
-</html>

target/h5ai/header.html

@@ -1,33 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js">
-<head>
-	<meta charset="utf-8">
-	<title>Directory index · styled with h5ai</title>
-	<meta name="h5ai-version" content="h5ai 0.5">
-	<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">
-	<link rel="apple-touch-icon" type="image/png" href="/h5ai/images/h5ai-48x48.png">
-	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold">
-	<link rel="stylesheet" type="text/css" href="/h5ai/css/main.css">
-	<script src="/h5ai/js/lib/modernizr.min.js"></script>
-</head>
-<body>
-	<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="viewicons" class="view"><a href="#"><img src="/h5ai/images/view-icons.png" alt="view-icons" />icons</a></li>
-			<li id="viewdetails" class="view" ><a href="#"><img src="/h5ai/images/view-details.png" alt="view-details" />details</a></li>
-		</ul>
-		<div class="clearfix"></div>
-	</nav>
-	<section id="content">
-		<header></header>
-		<section id="table" class="jsDisabledFallback">
-			<!--
-				The following code was generated by apache's autoindex module. It is not valid HTML 5 for the
-				reason, that 'align' and 'valign' attributes on the td element are obsolete. Both of them are
-				removed via javascript. The actual page should render as perfect HTML 5, even if the produced
-				source is not valid HTML 5.
-			-->