Merge branch 'develop'

* 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

@@ -0,0 +1,48 @@
+
+# Build folders to ignore
+build
+build.local.*
+release
+
+
+# Eclipse
+.classpath
+.ant-targets-*
+
+# Numerous always-ignore extensions
+*.diff
+*.err
+*.orig
+*.log
+*.rej
+*.swo
+*.swp
+*.vi
+*~
+*.sass-cache
+
+# OS or Editor folders
+.DS_Store
+.cache
+.project
+.settings
+.tmproj
+nbproject
+Thumbs.db
+
+# Dreamweaver added files
+_notes
+dwsync.xml
+
+# Komodo
+*.komodoproject
+.komodotools
+
+# Folders to ignore
+.hg
+.svn
+.CVS
+intermediate
+publish
+.idea
+

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,78 +1,252 @@
-h5ai - a beautified Apache index
-================================
+# h5ai
 
-Screenshots
------------
+* Website with download, docs and demo: <http://larsjung.de/h5ai>
+* Sources: <http://github.com/lrsjng/h5ai>
+* Q&A group: <http://groups.google.com/group/h5ai>
 
-<a href="http://repo.larsjung.de/screens/h5ai.png"><img
-	width="400"
-	src="http://repo.larsjung.de/screens/h5ai.png"
-	alt="screenshot"
-	title="screenshot"
-	style="border: 1px solid #ccc"
-/></a>
-
-<a href="http://repo.larsjung.de/screens/h5ai-0.2.png"><img
-	width="400"
-	src="http://repo.larsjung.de/screens/h5ai-0.2.png"
-	alt="screenshot"
-	title="screenshot"
-	style="border: 1px solid #ccc"
-/></a>
+h5ai is provided under the terms of the [MIT License](http://github.com/lrsjng/h5ai/blob/master/LICENSE.txt).  
 
 
-Live example
-------------
+## h5ai profits from these great projects
 
-View a [sample folder](http://repo.larsjung.de/h5ai-sample)  
-*(the files are all empty to save webspace)*
+* [AmplifyJS](http://amplifyjs.com) (MIT/GPL)
+* [Datejs](http://www.datejs.com) (MIT)
+* [Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-173323228) (GPL)
+* [HTML5 ★ Boilerplate](http://html5boilerplate.com)
+* [jQuery](http://jquery.com) (MIT/GPL)
+* [jQuery.mousewheel](http://github.com/brandonaaron/jquery-mousewheel) (MIT)
+* [modernizr](http://www.modernizr.com) (MIT/BSD)
 
 
-Install
--------
+## Changelog
 
-1. Copy the `h5ai` folder to the web-root directory of your server or alternativly set an alias `/h5ai/` to
-   this folder.
-2. Add the content of file `dot.htaccess` to the `.htaccess` file in the directory
-   you want to be indexed (you might have to create this file). This directory and any subdirectories will be
-   styled.
+### v0.16 · *2011-11-02*
+
+* sorts translations in `options.js`
+* improves HTML head sections
+* refactors JavaScript and PHP a lot
+* improves/fixes file selection for zipped download
+* fixes scrollbar and header/footer link issues (didn't work when zipped download enabled)
+* adds support for ctrl-select
+* `dateFormat` in `options.js` changed, now affecting JS and PHP version
+* `dateFormat` is localizable by adding it to a translation in `options.js`
+* PHP version is now configurable via `php/config.php` (set custom doc root and other PHP related things)
+* image thumbs and zipped download is disabled by default now, but works fine if PHP is configured
 
 
-Changelog
----------
+### v0.15.2 · *2011-09-18*
 
-### v0.2.1
-*2011-06-16*
+* added it translation by [Salvo Gentile](http://github.com/SalvoGentile) and [Marco Patriarca](http://github.com/Fexys)
+* switched build process from scripp to wepp
+
+
+### v0.15.1 · *2011-09-06*
+
+* fixed security issues with the zipped download feature
+* made zipped download optional (but enabled by default)
+
+
+### v0.15 · *2011-09-04*
+
+* added zipped download for selected files
+* cleaned and refactored
+
+
+### 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*
+
+* added better fallback, in case JavaScript is disabled
+* rewrote js, fixed middle-button click etc. problems
+* refactored css
+* sorted, added and moved icons and images
+* updated dot.access
+
+
+### v0.3.2 · *2011-06-24*
+
+* removed lib versions from file names
+* added 'empty' indicator for icons view
+
+
+### v0.3.1 · *2011-06-24*
+
+* refactored js
+* added `folderClick` and `fileClick` callback hooks
+* fixed .emtpy style
+
+
+### 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
+* added Modernizr 2.0.4 for future use
+* updated jQuery to version 1.6.1
+
+
+### 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*
+
+* refactored a lot, added some comments
+* included fixes from [NumEricR](http://github.com/NumEricR)
+* added top/bottom message support, only basicly styled
+
+
+### v0.2.1 · *2011-06-16*
 
 * fixed croped filenames
 * fixed missing .png extension in header
-* removed .html extension from Header-/ReadmeName references in dot.htaccess
 * added some color to the links
 * added changelog
 
-### v0.2
-*2011-06-15*
+
+### v0.2 · *2011-06-15*
 
 * added icon view
 
-
-Author
-------
-
-Lars Jung  
-[project site](http://github.com/larrrs/h5ai)  
-[website](http://larsjung.de)
-
-
-License
--------
-
-<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>
-
-This project is licensed under the [CC BY-SA 3.0 License](http://creativecommons.org/licenses/by-sa/3.0/).
-
-
-It is based on the awesome [HTML5 Boilerplate](http://html5boilerplate.com) and the beautiful
-[Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-173323228), please respect their rights.
-
-

build.properties

@@ -0,0 +1,20 @@
+custom             = true
+
+
+# project
+project.name       = h5ai
+project.version    = 0.16
+
+
+# src
+src.dir            = src
+
+
+# build
+build.dir          = build
+release.dir        = release
+
+
+# tools
+tool.wepp          = tools/wepp
+

build.xml

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<project
+    name="h5ai"
+    basedir="."
+    default="release"
+>
+
+    <import file="tools/wepp.ant.xml" />
+
+    <target name="init">
+        <property file="build.properties" />
+        <tstamp>
+            <format property="build.stamp" pattern="yyyy-MM-dd-HHmmss" />
+        </tstamp>
+        <property name="build.label" value="${project.name} ${project.version} b${build.stamp}" />
+        <echo>Build: ${build.label}</echo>
+    </target>
+
+    <target name="clean" depends="init">
+        <delete dir="${build.dir}" />
+        <delete dir="${release.dir}" />
+    </target>
+
+    <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}" />
+            <replacefilter token="%BUILD_NAME%" value="${project.name}" />
+            <replacefilter token="%BUILD_VERSION%" value="${project.version}" />
+            <replacefilter token="%BUILD_STAMP%" value="${build.stamp}" />
+        </replace>
+    </target>
+
+    <target name="build" depends="build-prepare">
+        <wepp.dir dir="${build.dir}/h5ai/css" />
+        <wepp.dir dir="${build.dir}/h5ai/js" />
+    </target>
+
+    <target name="build-uncompressed" depends="build-prepare">
+        <wepp.dir dir="${build.dir}/h5ai/css" args="--nc" />
+        <wepp.dir dir="${build.dir}/h5ai/js" args="--nc" />
+    </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>
+
+</project>

dot.htaccess

@@ -1,116 +0,0 @@
-
-<IfModule mod_autoindex.c>
-
-	# Options              +Indexes
-
-
-	################################
-	# 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
-	ReadmeName           /h5ai/footer
-
-
-	################################
-	# hide h5ai folder and config files from index
-	################################
-
-	IndexIgnore          h5ai  h5ai.*
-
-
-	################################
-	# 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/parent.png      ..
-	AddIcon              /h5ai/icons/folder.png      ^^DIRECTORY^^
-	AddIcon              /h5ai/icons/blank.png       ^^BLANKICON^^
-
-	AddIcon              /h5ai/icons/readme.png      README
-	AddIcon              /h5ai/icons/copying.png     COPYING  LICENSE
-	AddIcon              /h5ai/icons/install.png     INSTALL
-	AddIcon              /h5ai/icons/authors.png     AUTHORS
-	AddIcon              /h5ai/icons/log.png         LOG  Log  log
-
-	AddIcon              /h5ai/icons/css.png         .less
-	AddIcon              /h5ai/icons/script.png      .conf  .ini  .sh  .shar  .csh  .ksh  .tcl
-	AddIcon              /h5ai/icons/makefile.png    .pom  pom.xml  build.xml
-	AddIcon              /h5ai/icons/bin.png         .so  .o
-
-	AddIcon              /h5ai/icons/zip.png         .zip  .Z  .z  .jar  .war
-	AddIcon              /h5ai/icons/tar.png         .tar
-	AddIcon              /h5ai/icons/archive.png     .tar.gz  .tgz  .tar.bz2
-	AddIcon              /h5ai/icons/pdf.png         .pdf
-	AddIcon              /h5ai/icons/deb.png         .deb
-	AddIcon              /h5ai/icons/rpm.png         .rpm
-	AddIcon              /h5ai/icons/cd.png          .iso  .cue
-
-	AddIconByType        /h5ai/icons/png.png         image/png
-	AddIconByType        /h5ai/icons/jpg.png         image/jpeg
-	AddIconByType        /h5ai/icons/gif.png         image/gif
-	AddIconByType        /h5ai/icons/ico.png         image/x-icon
-	AddIconByType        /h5ai/icons/bmp.png         image/x-ms-bmp
-
-	AddIconByType        /h5ai/icons/html.png        text/html
-	AddIconByType        /h5ai/icons/css.png         text/css
-	AddIconByType        /h5ai/icons/xml.png         application/xml
-	AddIconByType        /h5ai/icons/js.png          application/javascript  application/json
-	AddIconByType        /h5ai/icons/php.png         application/x-httpd-php
-
-	AddIconByType        /h5ai/icons/py.png          text/x-python
-	AddIconByType        /h5ai/icons/rb.png          application/x-ruby
-	AddIconByType        /h5ai/icons/java.png        text/x-java
-	AddIconByType        /h5ai/icons/cpp.png         text/x-c++src
-	AddIconByType        /h5ai/icons/hpp.png         text/x-c++hdr
-	AddIconByType        /h5ai/icons/c.png           text/x-csrc
-	AddIconByType        /h5ai/icons/h.png           text/x-chdr
-
-	AddIconByType        /h5ai/icons/pdf.png         application/pdf
-
-	AddIconByType        /h5ai/icons/rtf.png         text/rtf  application/rtf
-	AddIconByType        /h5ai/icons/tex.png         text/x-tex
-	AddIconByType        /h5ai/icons/makefile.png    text/x-makefile
-
-	AddIconByType        /h5ai/icons/bin.png         application/java-vm
-	AddIconByType        /h5ai/icons/exe.png         application/x-executable application/x-msdos-program
-
-	AddIconByType        /h5ai/icons/text.png        text/*
-	AddIconByType        /h5ai/icons/image.png       image/*
-	AddIconByType        /h5ai/icons/audio.png       audio/*
-	AddIconByType        /h5ai/icons/video.png       video/*
-
-	AddIconByEncoding    /h5ai/icons/zip.png         x-compress  x-gzip  x-bzip2
-
-	DefaultIcon          /h5ai/icons/unknown.png
-
-</IfModule>
-

h5ai/footer.html

@@ -1,22 +0,0 @@
-		<!-- generated code ends here -->
-		<div id="empty">empty</div>
-		<section id="h5ai-bottom"></section>
-	</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://github.com/larrrs/h5ai" target="_blank" title="h5ai v0.2.1">h5ai</a>
-		using
-		<a href="http://html5boilerplate.com" target="_blank" title="a rock-solid default for HTML5 awesome">HTML5 Boilerplate</a>
-		and
-		<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.5.1/jquery.js"></script>
-	<script>window.jQuery || document.write( '<script src="/h5ai/lib/jquery-1.5.min.js"><\/script>' )</script>
-	<script src="/h5ai/main.js"></script>
-</body>
-</html>

h5ai/header.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta charset="utf-8">
-	<title>Index</title>
-	<link rel="shortcut icon" href="/h5ai/icons/folder.png" />
-	<link rel="apple-touch-icon" href="/h5ai/images/folder.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/main.css">
-</head>
-<body>
-	<nav>
-		<ul>
-			<li id="domain" class="crumb"><a href="/"><img src="/h5ai/icons/home.png" alt="domain" /><span>domain</span></a></li>
-			<li id="icons" class="view"><a href="#"><img src="/h5ai/icons/view-icons.png" alt="view-icons" />icons</a></li>
-			<li id="details" class="view" ><a href="#"><img src="/h5ai/icons/view-details.png" alt="view-details" />details</a></li>
-		</ul>
-		<div class="clearfix"></div>
-	</nav>
-	<section id="content">
-		<section id="h5ai-top"></section>
-		<!--
-			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.
-		-->

h5ai/main.css

@@ -1,257 +0,0 @@
-
-@import "lib/html5reset.css";
-
-
-body {
-	font-family: Ubuntu, sans-serif;
-	font-size: 16px;
-	color: #555;
-	margin: 80px 30px;
-}
-
-
-a, a:visited {
-	color: #555;
-	text-decoration: none;
-}
-a:hover {
-	color: #e80;
-}
-
-
-nav {
-	position: fixed;
-	width: 100%;
-	left: 0px;
-	top: 0px;
-	font-size: 0.85em;
-	background-color: rgb(240,240,240);
-	border-bottom: 1px solid rgb(225,225,225);
-	-webkit-box-shadow: 0px 0px 30px #555;
-	-moz-box-shadow: 0px 0px 30px #555;
-	box-shadow: 0px 0px 30px #555;
-}
-nav li {
-	cursor: pointer;
-	opacity: 0.7;
-	-webkit-transition: all 0.2s ease-in-out;
-	-moz-transition: all 0.2s ease-in-out;
-	-o-transition: all 0.2s ease-in-out;
-	transition: all 0.2s ease-in-out;
-}
-nav li:hover, nav li:hover a {
-	color: #e80;
-	background-color: rgba(255,255,255,0.5);
-	opacity: 1.0;
-}
-nav a {
-	display: block
-	height: 30px;
-	line-height: 30px;
-	padding: 4px 10px;
-}
-nav img {
-	vertical-align: bottom;
-	padding-right: 6px;
-	padding-bottom: 6px;
-}
-nav li.crumb {
-	float: left;
-	border-right: 1px dotted rgb(225,225,225);
-}
-nav li.view {
-	float: right;
-	border-left: 1px dotted rgb(225,225,225);
-}
-
-
-section#h5ai-top {
-	display: none;
-	padding: 0px 0px 10px 0px;
-	margin: 0px 0px 80px 0px;
-	border-bottom: 1px solid #999;
-}
-
-
-section#h5ai-bottom {
-	display: none;
-	padding: 10px 0px 0px 0px;
-	margin: 80px 0px 0px 0px;
-	border-top: 1px solid #999;
-}
-
-
-section#content {
-	max-width: 980px;
-	margin: 0px auto;
-}
-
-
-table {
-	width: 100%;
-	border-collapse: collapse;
-}
-table {
-	display: block;
-}
-table tr.entry:hover, table tr.entry:hover a {
-	background-color: rgb(235,245,250);
-	background-color: #f0f0f0;
-	color: #e80;
-	cursor: pointer;
-}
-table th, table td {
-	padding: 3px 6px;
-	text-align: left;
-	border: none;
-}
-table th {
-	padding-bottom: 18px;
-	opacity: 0.4;
-	-webkit-transition: all 0.2s ease-in-out;
-	-moz-transition: all 0.2s ease-in-out;
-	-o-transition: all 0.2s ease-in-out;
-	transition: all 0.2s ease-in-out;
-}
-table th.header:hover, table th.header:hover a {
-	color: #555;
-	cursor: pointer;
-	opacity: 0.9;
-}
-table th a, table th a:visited {
-	color: #555;
-	font-weight: normal;
-}
-table th a img {
-	width: 12px;
-	height: 12px;
-	padding: 0px 8px;
-}
-table td {
-	border: 1px solid #ddd;
-	border-left: 0px;
-	border-right: 0px;
-}
-table .icon {
-	text-align: center;
-	width: 16px;
-}
-table .icon img {
-	width: 16px;
-	height: 16px;
-	padding-top: 2px;
-}
-table .name {
-	width: 682px;
-	max-width: 682px;
-	overflow: hidden;
-	white-space: nowrap;
-}
-table .date {
-	text-align: right;
-	width: 160px;
-	min-width: 160px;
-	white-space: nowrap;
-}
-table .size {
-	text-align: right;
-	width: 70px;
-	min-width: 70px;
-	white-space: nowrap;
-}
-
-
-div#empty {
-	display: none;
-	text-align: center;
-	margin: 50px 0px;
-	color: #ddd;
-	font-size: 5em;
-	font-weight: bold;
-}
-
-
-#box {
-	padding: 10px;
-	border: 1px solid #eee;
-	border-radius: 15px;
-}
-#box .entry {
-	margin: 8px;
-	padding: 8px;
-	width: 100px;
-	height: 120px;
-	float: left;
-	text-align: center;
-	overflow: hidden;
-	border-radius: 5px;
-	cursor: pointer;
-	border: 1px solid rgba(0,0,0,0);
-}
-#box .entry:hover {
-	color: #e80;
-	border-color: #eee;
-	-webkit-box-shadow: 0px 0px 20px #555;
-	-moz-box-shadow: 0px 0px 20px #555;
-	box-shadow: 0px 0px 20px #999;
-}
-#box .entry img {
-	width: 48px;
-	height: 48px;
-	margin: 0px 0px 8px 0px;
-}
-
-
-section#special {
-	display: none;
-	text-align: center;
-	margin: 50px 0px;
-}
-
-
-footer {
-	position: fixed;
-	width: 100%;
-	left: 0px;
-	bottom: 0px;
-	padding: 10px 0px;
-	border-top: 1px solid rgb(225,225,225);
-	background-color: rgb(240,240,240);
-	color: #999;
-	font-size: 0.85em;
-	text-align: center;
-	-webkit-box-shadow: 0px 0px 30px #555;
-	-moz-box-shadow: 0px 0px 30px #555;
-	box-shadow: 0px 0px 30px #555;
-}
-footer a, footer a:visited {
-	color: #555;
-	-webkit-transition: all 0.2s ease-in-out;
-	-moz-transition: all 0.2s ease-in-out;
-	-o-transition: all 0.2s ease-in-out;
-	transition: all 0.2s ease-in-out;
-}
-footer a:hover {
-	color: #e80;
-}
-
-
-#html5 {
-	position: absolute;
-	left: 6px;
-	bottom: 6px;
-	float: left;
-}
-#html5 img {
-	width: 20px;
-	height: 20px;
-	opacity: 0.4;
-	-webkit-transition: all 0.2s ease-in-out;
-	-moz-transition: all 0.2s ease-in-out;
-	-o-transition: all 0.2s ease-in-out;
-	transition: all 0.2s ease-in-out;
-}
-#html5:hover img {
-	opacity: 0.8;
-}
-

h5ai/main.js

@@ -1,195 +0,0 @@
-( function( $ ) {
-
-	var columnClasses = [ "icon", "name", "date", "size" ];
-	var defaultSortOrder = "C=N;O=A"
-	var h5aiPath = "/h5ai"
-	var views = [ "details", "icons" ];
-
-
-	$( function() {
-
-		init();
-	} );
-
-
-	function init () {
-
-		convertToHtml5();
-		addBreadcrumb();
-		addColumnClasses();
-		initTableRows();
-		addSortOrderIcons();
-		addTopAndBottom();
-		initViews();
-		checkView();
-	};
-
-
-	function convertToHtml5() {
-
-		$( "td" ).removeAttr( "align" ).removeAttr( "valign" );
-	};
-
-
-	function addBreadcrumb() {
-
-		$( "#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='" + h5aiPath + "/icons/crumb.png' alt='>' />" + part + "</a></li>" ) );
-			}
-		}
-
-		$( "nav li a" ).closest( "li" )
-			.click( function () {
-				document.location.href = $( this ).find( "a" ).attr( "href" );
-			} );
-
-		document.title = document.domain + pathname;
-	};
-
-
-	function getColumnClass( idx ) {
-
-		if ( idx >= 0 && idx < columnClasses.length ) {
-			return columnClasses[idx];
-		}
-		return "unknown";
-	};
-
-
-	function addColumnClasses() {
-
-		$( "tr" ).each( function () {
-			var colIdx = 0;
-			$( this ).find( "th,td" ).each( function () {
-				$( this ).addClass( getColumnClass( colIdx ) );
-				colIdx++;
-			} );
-		} );
-	};
-
-
-	function initTableRows() {
-
-		$( "th a" ).closest( "th" )
-			.addClass( "header" )
-			.click( function () {
-				document.location.href = $( this ).find( "a" ).attr( "href" );
-			} );
-		$( "td.name a" ).closest( "tr" )
-			.addClass( "entry" )
-			.click( function () {
-				document.location.href = $( this ).find( "td.name a" ).attr( "href" );
-			} );
-		$dataRows = $( "td" ).closest( "tr" );
-		if ( $dataRows.size() === 0 || $dataRows.size() === 1 && $dataRows.find( "td.name a" ).text() === "Parent Directory" ) {
-			$( "#empty" ).show();
-		}
-	};
-
-
-	function addSortOrderIcons() {
-
-		var order = document.location.search;
-		if ( order === "" ) {
-			order = defaultSortOrder;
-		}
-		var $icon;
-		if ( order.indexOf( "O=A" ) >= 0 ) {
-			$icon = $( "<img src='" + h5aiPath + "/icons/ascending.png' class='sort' alt='ascending' />" );
-		} else {
-			$icon = $( "<img src='" + h5aiPath + "/icons/descending.png' class='sort' alt='descending' />" );
-		}
-		if ( order.indexOf( "C=N" ) >= 0 ) {
-			$( "th.name a" ).append( $icon );
-		} else if ( order.indexOf( "C=M" ) >= 0 ) {
-			$( "th.date a" ).prepend( $icon );
-		} else if ( order.indexOf( "C=S" ) >= 0 ) {
-			$( "th.size a" ).prepend( $icon );
-		}
-	};
-
-
-	function addTopAndBottom() {
-
-		$( "#h5ai-top" ).load( "h5ai.top.html", function( response, status, xhr ) {
-			if (status != "error") {
-				$( "#h5ai-top" ).show();
-			}
-		} );
-		$( "#h5ai-bottom" ).load( "h5ai.bottom.html", function( response, status, xhr ) {
-			if (status != "error") {
-				$( "#h5ai-bottom" ).show();
-			}
-		} );
-	};
-
-
-	function checkView() {
-		
-		if ( getView() === "icons" ) {
-			$( "#content table" ).hide();
-			$( "#content #empty" ).hide();
-			$( "#content #box" ).show();
-		} else {
-			$( "#content table" ).show();
-			$( "#content #empty" ).show();
-			$( "#content #box" ).hide();
-		}
-	};
-
-
-	function getView() {
-	
-		var view = localStorage.getItem( "h5ai.view" );
-		if ( $.inArray( view, views ) ) {
-			return view;
-		};
-		return views[0];
-	};
-
-
-	function setView( view ) {
-	
-		localStorage.setItem( "h5ai.view", view );
-		checkView();
-	};
-
-	
-	function initViews() {
-
-		var $box = $( "<div id=\"box\"></div>" );
-		$( "td.name a" ).closest( "tr" ).each( function () {
-			var $tr = $( this );
-			var icon = $tr.find( "td.icon img" ).attr( "src" ).replace( "icon", "image" );
-			var name = $tr.find( "td.name a" ).text();
-			$( "<div class=\"entry\"></div>" )
-				.append( $( "<img src=\"" + icon + "\" />" ) )
-				.append( $( "<div class=\"label\">" + name + "</div>" ) )
-				.click( function () {
-					document.location.href = $tr.find( "td.name a" ).attr( "href" );
-				} ).
-				appendTo( $box );
-		} );
-		$box.append( $( "<div class=\"clearfix\"></div>" ) );
-		$( "#content table" ).after( $box );
-
-
-		$( "#details" ).closest( "li" )
-			.click( function () {
-				setView( "details" );
-			} );
-		$( "#icons" ).closest( "li" )
-			.click( function () {
-				setView( "icons" );
-			} );
-	};
-
-} )( jQuery );

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

@@ -0,0 +1,265 @@
+
+#extended.details-view {
+    display: none;
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        li {
+            position: relative;
+            white-space: nowrap;
+            clear: both;
+
+            &.header {
+                a, a:active, a:visited {
+                    padding-bottom: 18px;
+                    color: #555;
+                    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 {
+
+                a, a:active, a:visited {
+                    display: block;
+                    color: #555;
+                    text-decoration: none;
+                    cursor: pointer;
+                    border-bottom: 1px solid #ddd;
+
+                    &:hover, &.hover {
+                        background-color: #f6f6f6;
+                        color: #e80;
+                    }
+                    &.selected:not(.selecting), &.selecting:not(.selected) {
+                        border-color: rgba(240,100,0,0.2);
+                        background-color: rgba(240,100,0,0.2);
+                    }
+                }
+                &.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 {
+                padding: 6px;
+            }
+            .icon {
+                display: inline-block;
+                position: absolute;
+                left: 0;
+                top: 2px;
+                width: 16px;
+
+                img {
+                    width: 16px;
+                    height: 16px;
+                }
+            }
+            .icon.big {
+                display: none;
+            }
+            .label {
+                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: 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 {
+        text-align: center;
+        margin: 50px 0;
+        color: #ddd;
+        font-size: 5em;
+        font-weight: bold;
+    }
+}
+
+
+#selection-rect {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
+    border: 1px dashed rgba(240,100,0,0.5);
+    background-color: rgba(240,100,0,0.2);
+}
+
+
+#extended.icons-view {
+    display: none;
+    padding: 3px;
+    border: 1px solid #eee;
+    border-radius: 15px;
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        li {
+            &.header {
+                display: none;
+            }
+            &.entry {
+                float: left;
+
+                a, a:active, a:visited {
+                    display: block;
+                    margin: 8px;
+                    padding: 8px;
+                    width: 100px;
+                    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 {
+                        color: #e80;
+                        border-color: #eee;
+                        background-color: #f6f6f6;
+                    }
+                    &.selected:not(.selecting), &.selecting:not(.selected) {
+                        border-color: rgba(240,100,0,0.2);
+                        background-color: rgba(240,100,0,0.2);
+                    }
+                    .icon {
+                        display: block;
+
+                        img {
+                            min-width: 48px;
+                            min-height: 48px;
+                            margin-bottom: 8px;
+                        }
+                    }
+                    .icon.small {
+                        display: none;
+                    }
+                    .label {
+                        display: block;
+                        word-wrap: break-word;
+                    }
+                    .date, .size {
+                        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;
+                }
+            }
+        }
+    }
+    .empty {
+        padding: 16px;
+        height: 120px;
+        text-align: center;
+        color: #ddd;
+        font-size: 5em;
+        font-weight: bold;
+    }
+}

src/h5ai/css/inc/html5reset.less

@@ -53,8 +53,8 @@ sup { top: -0.5em; }
 sub { bottom: -0.25em; }
 
 pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
-textarea { overflow: auto; } 
-.ie6 legend, .ie7 legend { margin-left: -7px; } 
+textarea { overflow: auto; }
+.ie6 legend, .ie7 legend { margin-left: -7px; }
 input[type="radio"] { vertical-align: text-bottom; }
 input[type="checkbox"] { vertical-align: bottom; }
 .ie7 input[type="checkbox"] { vertical-align: baseline; }
@@ -81,7 +81,7 @@ a:hover { color: #036; }
 /**
  * Primary styles
  *
- * Author: 
+ * Author:
  */
 
 
@@ -117,20 +117,20 @@ a:hover { color: #036; }
 }
 
 @media screen and (max-device-width: 480px) {
-  
+
   /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
 }
 
 
 @media print {
   * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
-  -ms-filter: none !important; } 
+  -ms-filter: none !important; }
   a, a:visited { color: #444 !important; text-decoration: underline; }
   a[href]:after { content: " (" attr(href) ")"; }
   abbr[title]:after { content: " (" attr(title) ")"; }
-  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
   pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
-  thead { display: table-header-group; } 
+  thead { display: table-header-group; }
   tr, img { page-break-inside: avoid; }
   @page { margin: 0.5cm; }
   p, h2, h3 { orphans: 3; widows: 3; }

src/h5ai/css/inc/main.less

@@ -0,0 +1,210 @@
+
+@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);
+    }
+    #download {
+        display: none;
+        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 {
+        .sep {
+            display: inline-block;
+            padding: 0 6px;
+        }
+        &.default {
+        }
+        &.dynamic {
+            display: none;
+        }
+    }
+    #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

@@ -0,0 +1,38 @@
+
+.border-radius (@radius) {
+    -moz-border-radius: @radius;
+    -webkit-border-radius: @radius;
+    border-radius: @radius;
+}
+
+
+.box-shadow (@shadow) {
+    -moz-box-shadow: @shadow;
+    -webkit-box-shadow: @shadow;
+    box-shadow: @shadow;
+}
+
+
+.transition (@transition) {
+    -moz-transition: @transition;
+    -ms-transition: @transition;
+    -o-transition: @transition;
+    -webkit-transition: @transition;
+    transition: @transition;
+}
+
+
+.transform (@transform) {
+    -moz-transform: @transform;
+    -o-transform: @transform;
+    -webkit-transform: @transform;
+    transform: @transform;
+}
+
+
+.background-size (@size) {
+    -moz-background-size: @size;
+    -webkit-background-size: @size;
+    background-size: @size;
+}
+

src/h5ai/css/inc/table.less

@@ -0,0 +1,68 @@
+
+#table {
+    table {
+        display: block;
+        width: 100%;
+        border-collapse: collapse;
+
+        th, td {
+            padding: 3px 6px;
+            text-align: left;
+            border: none;
+        }
+        th {
+            padding-bottom: 18px;
+            opacity: 0.4;
+            .transition(all 0.2s ease-in-out);
+
+            &:hover, &:hover a {
+                color: #555;
+                cursor: pointer;
+                opacity: 0.9;
+            }
+            a, a:visited {
+                color: #555;
+                font-weight: normal;
+
+                img {
+                    width: 12px;
+                    height: 12px;
+                    padding: 0 8px;
+                }
+            }
+        }
+        td {
+            border: 1px solid #ddd;
+            border-left: none;
+            border-right: none;
+        }
+        td:nth-child(1), th:nth-child(1) {
+            text-align: center;
+            width: 16px;
+
+            img {
+                width: 16px;
+                height: 16px;
+                padding-top: 2px;
+            }
+        }
+        td:nth-child(2), th:nth-child(2) {
+            width: 682px;
+            max-width: 682px;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+        td:nth-child(3), th:nth-child(3) {
+            text-align: right;
+            width: 160px;
+            min-width: 160px;
+            white-space: nowrap;
+        }
+        td:nth-child(4), th:nth-child(4) {
+            text-align: right;
+            width: 70px;
+            min-width: 70px;
+            white-space: nowrap;
+        }
+    }
+}

src/h5ai/css/inc/tree.less

@@ -0,0 +1,129 @@
+
+#tree {
+    display: none;
+    position: fixed;
+    left: 0;
+    top:  82px;
+    z-index: 1;
+    overflow: auto;
+    font-size: 0.85em;
+    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);
+
+    > .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 {
+        .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 {
+                color: #e80;
+                background-color: rgba(255,255,255,0.5);
+                opacity: 1;
+            }
+            .label {
+                display: inline-block;
+            }
+            .icon {
+                display: inline-block;
+                width: 20px;
+                img {
+                    width: 16px;
+                    height: 16px;
+                    vertical-align: bottom;
+                }
+            }
+            .hint {
+                display: inline-block;
+                margin-left: 12px;
+                font-size: 0.9em;
+                color: #ccc;
+                img {
+                    width: 10px;
+                    height: 10px;
+                    vertical-align: baseline;
+                }
+            }
+        }
+        &.file {
+            display: none;
+        }
+        &.current {
+            > a, > a:active, > a:visited {
+                border: 1px solid rgb(221,221,221);
+                background-color: rgba(255,255,255,0.5);
+                opacity: 1;
+            }
+        }
+        &.error {
+            > a, > a:active, > a:visited {
+                color: #999;
+                &:hover, &.hover {
+                    color: #e80;
+                }
+            }
+            .hint {
+                color: #c55;
+            }
+        }
+        .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,17 @@
+
+@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/footer.html

@@ -0,0 +1,34 @@
+            <!-- generated code ends here -->
+        </section>
+        <section id="extended" class="clearfix"></section>
+        <footer></footer>
+    </section>
+    <section id="tree"></section>
+    <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='sep'>·</span>
+                    <span class="fileCount"></span> <span class="l10n-files">files</span>
+                </span>
+                <span class="status dynamic">
+                </span>
+            </span>
+        </span>
+    </footer>
+    <script src="/h5ai/js/libs.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

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title>Directory index · styled with h5ai</title>
+    <meta name="h5ai-version" content="h5ai %BUILD_VERSION% (js)">
+    <meta name="description" content="Directory index styled with h5ai (http://larsjung.de/h5ai)">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold">
+    <link rel="stylesheet" href="/h5ai/css/main-js.css">
+    <script src="/h5ai/js/modernizr.min.js"></script>
+</head>
+<body>
+    <div id="selection-rect"></div>
+    <nav class="clearfix">
+        <ul>
+            <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>
+            <li id="download" class="hideOnNoJs">
+                <a href="#"><img src="/h5ai/images/download.png" alt="download" /><span class="l10n-download">download</span></a>
+            </li>
+        </ul>
+    </nav>
+    <section id="content">
+        <header></header>
+        <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
+                removed via javascript. The actual page should render as perfect HTML 5, even if the produced
+                source is not valid HTML 5.
+            -->

src/h5ai/header.php

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<?php include "php/main.php"; ?>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <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="viewport" content="width=device-width, initial-scale=1.0">
+    <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" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold">
+    <link rel="stylesheet" href="/h5ai/css/main-php.css">
+    <script src="/h5ai/js/modernizr.min.js"></script>
+</head>
+<body>
+    <div id="selection-rect"></div>
+    <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>
+            <li id="download" class="hideOnNoJs">
+                <a href="#"><img src="/h5ai/images/download.png" alt="download" /><span class="l10n-download">download</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>
+                <span class='sep'>·</span>
+                <?php echo $extended->getFileCount(); ?> <span class="l10n-files">files</span>
+            </span>
+            <span class="status dynamic">
+            </span>
+        </span>
+    </footer>
+    <script src="/h5ai/js/libs.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 -->