Merge branch 'develop'

.gitignore

@@ -1,10 +1,8 @@
 
 # Build folders to ignore
-bin
 build
-target
-
 build.local.*
+release
 
 
 # Eclipse

README.md

@@ -1,58 +1,158 @@
 # h5ai
 
-* [Download, docs and demo](http://larsjung.de/h5ai)
-* [Sources at GitHub](http://github.com/lrsjng/h5ai)
+Don't use files from this repository (`src` folder) for installation.
+They need to be preprocessed/compiled to work correctly. You'll find a
+precompiled package on the [project page](http://larsjung.de/h5ai).
 
-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).
+To report a bug or make a feature request
+please create [a new issue](http://github.com/lrsjng/h5ai/issues/new).
+
+* 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>
+
+h5ai is provided under the terms of the [MIT License](http://github.com/lrsjng/h5ai/blob/master/LICENSE.txt).
+
+
+## h5ai profits from these great projects
+
+* [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)
 
 
 ## Changelog
 
-### v0.12.3
-*2011-07-30*
+### v0.17 · *2011-11-28*
 
-* added tr translation by [Batuhan Icoz](http://github.com/batuhanicoz/h5ai)
+* h5ai is now located in `_h5ai` to reduce collisions
+* switches from HTML5 Boilerplate reset to normalization
+* adds some style changes for small devices
+* configuration (options, types, translations) now via `config.js`
+* icons for JS version are now configured via `config.js`
+* sort order configuration changed
+* sorting is now done without page reload
+* adds `customHeader` and `customFooter` to `config.js`
+* supports restricted folders to some extent
+* some style changes on tree and language menu
+* fixes total file/folder count in status bar
+* adds support for use with userdir (requires some manual changes)
 
 
-### v0.12.2
-*2011-07-30*
+### 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
+
+
+### v0.15.2 · *2011-09-18*
+
+* 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*
+### v0.12.1 · *2011-07-29*
 
 * fixed unchecked use of console.log
 
 
-### v0.12
-*2011-07-28*
+### v0.12 · *2011-07-28*
 
 * improved performance
 
 
-### v0.11
-*2011-07-27*
+### v0.11 · *2011-07-27*
 
 * changed license to MIT license, see `LICENSE.txt`
 
 
-### v0.10.2
-*2011-07-26*
+### v0.10.2 · *2011-07-26*
 
 * improved tree scrollbar
 
 
-### v0.10.1
-*2011-07-24*
+### v0.10.1 · *2011-07-24*
 
 * fixed problems with ' in links
 
 
-### v0.10
-*2011-07-24*
+### 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))
@@ -61,8 +161,7 @@ It uses the [Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-1733
 * added "empty" to localization (hope Google Translate did a good job here)
 
 
-### v0.9
-*2011-07-18*
+### 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)
@@ -73,32 +172,28 @@ It uses the [Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-1733
 * added sv translation by Oscar Carlsson
 
 
-### v0.8
-*2011-07-08*
+### 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 
+* long breadcrumbs (multiple rows) no longer hide content
 * error folder icons are opaque now
 * refactored js a lot (again...)
 
 
-### v0.7
-*2011-07-07*
+### v0.7 · *2011-07-07*
 
 * removed shadows
 * smarter tree side bar
 
 
-### v0.6
-*2011-07-05*
+### v0.6 · *2011-07-05*
 
 * refactored js
 * added localization, see `options.js`
 
 
-### v0.5.3
-*2011-07-04*
+### v0.5.3 · *2011-07-04*
 
 * refactored js
 * added basic options support via `options.js`
@@ -106,28 +201,24 @@ It uses the [Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-1733
 * optional tree sidebar
 
 
-### v0.5.2
-*2011-07-02*
+### v0.5.2 · *2011-07-02*
 
 * details view adjusts to window width
 * linked icon for *.gz and *.bz2
 
 
-### v0.5.1
-*2011-07-01*
+### v0.5.1 · *2011-07-01*
 
 * disabled tree sidebar for now, since it had unwanted side effects
 
 
-### v0.5
-*2011-07-01*
+### 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
@@ -136,23 +227,20 @@ It uses the [Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-1733
 * 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
@@ -160,23 +248,20 @@ It uses the [Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-1733
 * 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
@@ -184,8 +269,7 @@ It uses the [Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-1733
 * added changelog
 
 
-### v0.2
-*2011-06-15*
+### v0.2 · *2011-06-15*
 
 * added icon view
 

build.properties

@@ -1,20 +1,23 @@
-custom                           = true
+custom             = true
 
 
 # project
-project.name                     = h5ai
-project.version                  = 0.12.3
+project.name       = h5ai
+project.version    = 0.17
 
 
 # src
-src.dir                          = src
+src.dir            = src
 
 
 # build
-build.dir                        = build
-release.dir                      = release
+build.dir          = build
+release.dir        = release
 
 
-# libs
-lib.scripp.jar                   = tools/scripp.jar
+# tools
+tool.wepp          = tools/wepp
+tool.jslint        = jslint
+tool.jshint        = jshint
+tool.jsxint.file   = ${build.dir}/_h5ai/js/main-js.js
 

build.xml

@@ -1,81 +1,78 @@
 <?xml version="1.0" encoding="utf-8"?>
 <project
-	name="h5ai"
-	basedir="."
-	default="release"
-	xmlns:scripp="antlib:de.larsjung.scripp.ant"
+    name="h5ai"
+    basedir="."
+    default="release"
 >
-	<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>
-        <taskdef
-        	resource="de/larsjung/scripp/ant/antlib.xml"
-        	uri="antlib:de.larsjung.scripp.ant"
-        	classpath="${lib.scripp.jar}"
-        />
-	</target>
 
+    <import file="tools/wepp.ant.xml" />
 
-	<target name="clean" depends="init">
-		<delete dir="${build.dir}" />
-		<delete dir="${release.dir}" />
-	</target>
+    <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-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">
-		<scripp.dir dir="${build.dir}/h5ai/css" />
-		<scripp.dir dir="${build.dir}/h5ai/js" />
-	</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="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>
 
+    <target name="pre-xint" depends="build-prepare">
+        <wepp file="${tool.jsxint.file}" tofile="${tool.jsxint.file}" 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>
+    <target name="lint" depends="pre-xint">
+        <echo>JSLint "${tool.jsxint.file}"</echo>
+        <exec executable="${tool.jslint}" failonerror="true">
+            <arg value="${tool.jsxint.file}" />
+        </exec>
+    </target>
 
+    <target name="hint" depends="pre-xint">
+        <echo>JSHint "${tool.jsxint.file}"</echo>
+        <exec executable="${tool.jshint}" failonerror="true">
+            <arg value="${tool.jsxint.file}" />
+        </exec>
+    </target>
+
+    <target name="xint" depends="lint,hint">
+    </target>
 
-	<macrodef name="scripp.dir">
-		<attribute name="dir" />
-		<attribute name="compress" default="true" />
-		<sequential>
-			<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" />
-		        <globmapper from="*.js" to="*.js" />
-			</scripp:process>
-			<delete dir="@{dir}/inc">
-				<fileset dir="@{dir}" includes="**/*.less" />
-			</delete>
-		</sequential>
-	</macrodef>
 </project>

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/config.js

@@ -0,0 +1,411 @@
+/*
+ * h5ai %BUILD_VERSION%
+ *
+ * Configuration
+ * options, types and localization
+ */
+
+var H5AI_CONFIG = {
+
+    "options": {
+
+        /*
+         * The absolute links to webroot and h5ai.
+         * Do not change this unless you know what you are doing.
+         */
+        "rootAbsHref": "/",
+        "h5aiAbsHref": "/_h5ai/",
+
+        /*
+         * Filenames of customized header and footer files to look for
+         * in each folder.
+         */
+        "customHeader": "_h5ai.header.html",
+        "customFooter": "_h5ai.footer.html",
+
+        /*
+         * 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 is a two letter code. The first letter specifies
+         * the column: "n" for "Name", "d" for "Date" or "s" for "Size". The
+         * second letter specifies the sort order: "a" for "ascending" or "d"
+         * for "descending".
+         */
+        "sortorder": "na",
+
+        /*
+         * 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": {},
+
+        /*
+         * 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": "en",
+
+        /*
+         * 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,
+
+        /*
+         * Date format in detailed view, for example: "yyyy-MM-dd HH:mm:ss"
+         * Syntax as specified by date.js
+         * http://code.google.com/p/datejs/wiki/FormatSpecifiers
+         */
+        "dateFormat": "yyyy-MM-dd HH:mm",
+
+        /*
+         * Requires PHP on the server.
+         * Show thumbnails for image files.
+         */
+        "showThumbs": false,
+
+        /*
+         * Requires PHP on the server.
+         * Enable zipped download of selected entries.
+         */
+        "zippedDownload": false
+    },
+
+
+    /*
+     * File types mapped to file extensions.
+     */
+    "types": {
+        "archive":          [".tar.bz2", ".tar.gz", ".tgz"],
+        "audio":            [".aif", ".m4a", ".mid", ".mp3", ".mpa", ".ra", ".ogg", ".wav", ".wma"],
+        "authors":          ["authors"],
+        "bin":              [".class", ".o", ".so"],
+        "blank":            [],
+        "bmp":              [".bmp"],
+        "c":                [".c"],
+        "calc":             [".ods", ".ots", ".xlr", ".xls", ".xlsx"],
+        "cd":               [".cue", ".iso"],
+        "copying":          ["copying", "license"],
+        "cpp":              [".cpp"],
+        "css":              [".css", ".less"],
+        "deb":              [".deb"],
+        "default":          [],
+        "doc":              [".doc", ".docx", ".odm", ".odt", ".ott"],
+        "draw":             [".drw"],
+        "eps":              [".eps"],
+        "exe":              [".exe"],
+        "folder":           [],
+        "folder-home":      [],
+        "folder-open":      [],
+        "folder-page":      [],
+        "folder-parent":    [],
+        "gif":              [".gif"],
+        "gzip":             [".gz"],
+        "h":                [".h"],
+        "hpp":              [".hpp"],
+        "html":             [".htm", ".html", ".shtml"],
+        "ico":              [".ico"],
+        "image":            [".xpm"],
+        "install":          ["install"],
+        "java":             [".java"],
+        "jpg":              [".jpg", ".jpeg"],
+        "js":               [".js", ".json"],
+        "log":              [".log", "changelog"],
+        "makefile":         [".pom", "build.xml", "pom.xml"],
+        "package":          [],
+        "pdf":              [".pdf"],
+        "php":              [".php"],
+        "playlist":         [".m3u"],
+        "png":              [".png"],
+        "pres":             [".odp", ".otp", ".pps", ".ppt", ".pptx"],
+        "psd":              [".psd"],
+        "py":               [".py"],
+        "rar":              [".rar"],
+        "rb":               [".rb"],
+        "readme":           ["readme"],
+        "rpm":              [".rpm"],
+        "rss":              [".rss"],
+        "rtf":              [".rtf"],
+        "script":           [".conf", ".csh", ".ini", ".ksh", ".sh", ".shar", ".tcl"],
+        "source":           [],
+        "sql":              [],
+        "tar":              [".tar"],
+        "tex":              [".tex"],
+        "text":             [".markdown", ".md", ".text", ".txt"],
+        "tiff":             [".tiff"],
+        "unknown":          [],
+        "vcal":             [".vcal"],
+        "video":            [".avi", ".flv", ".mov", ".mp4", ".mpg", ".rm", ".swf", ".vob", ".wmv"],
+        "xml":              [".xml"],
+        "zip":              [".bz2", ".jar", ".war", ".z", ".Z", ".zip"]
+    },
+
+
+    /*
+     * Available translations.
+     */
+    "langs": {
+
+        "en": {
+            "lang": "english",
+            "details": "details",
+            "icons": "icons",
+            "name": "Name",
+            "lastModified": "Last modified",
+            "size": "Size",
+            "parentDirectory": "Parent Directory",
+            "empty": "empty",
+            "folders": "folders",
+            "files": "files",
+            "download": "download"
+        },
+
+        "bg": {
+            "lang": "български",
+            "details": "детайли",
+            "icons": "икони",
+            "name": "Име",
+            "lastModified": "Последна промяна",
+            "size": "Размер",
+            "parentDirectory": "Предходна директория",
+            "empty": "празно",
+            "folders": "папки",
+            "files": "файлове",
+            "download": "download"
+        },
+
+        "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ů",
+            "download": "download"
+        },
+
+        "de": {
+            "lang": "deutsch",
+            "details": "Details",
+            "icons": "Icons",
+            "name": "Name",
+            "lastModified": "Geändert",
+            "size": "Größe",
+            "parentDirectory": "Übergeordnetes Verzeichnis",
+            "empty": "leer",
+            "folders": "Ordner",
+            "files": "Dateien",
+            "download": "Download"
+        },
+
+        "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",
+            "download": "download"
+        },
+
+        "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",
+            "download": "télécharger"
+        },
+
+        "it": {
+            "lang": "italiano",
+            "details": "dettagli",
+            "icons": "icone",
+            "name": "Nome",
+            "lastModified": "Ultima modifica",
+            "size": "Dimensione",
+            "parentDirectory": "Cartella Superiore",
+            "empty": "vuota",
+            "folders": "cartelle",
+            "files": "file",
+            "download": "download"
+       },
+
+        "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",
+            "download": "lejupielādēt"
+        },
+
+        "nl": {
+            "lang": "nederlands",
+            "details": "details",
+            "icons": "iconen",
+            "name": "Naam",
+            "lastModified": "Laatste wijziging",
+            "size": "Grootte",
+            "parentDirectory": "Bovenliggende map",
+            "empty": "lege",
+            "folders": "folders",
+            "files": "files",
+            "download": "download"
+        },
+
+        "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",
+            "download": "download"
+        },
+
+        "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",
+            "download": "download"
+        },
+
+        "ru": {
+            "lang": "русский",
+            "details": "детали",
+            "icons": "иконки",
+            "name": "Имя",
+            "lastModified": "Последние изменения",
+            "size": "Размер",
+            "parentDirectory": "Главная директория",
+            "empty": "пусто",
+            "folders": "папки",
+            "files": "файлы",
+            "download": "download"
+        },
+
+        "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",
+            "download": "download"
+        },
+
+        "sv": {
+            "lang": "svenska",
+            "details": "detaljerad",
+            "icons": "ikoner",
+            "name": "Filnamn",
+            "lastModified": "Senast ändrad",
+            "size": "Filstorlek",
+            "parentDirectory": "Till överordnad mapp",
+            "empty": "tom",
+            "folders": "folders",
+            "files": "files",
+            "download": "download"
+        },
+
+        "tr": {
+            "lang": "türkçe",
+            "details": "detaylar",
+            "icons": "ikonlar",
+            "name": "İsim",
+            "lastModified": "Son Düzenleme",
+            "size": "Boyut",
+            "parentDirectory": "Üst Dizin",
+            "empty": "boş",
+            "folders": "klasörler",
+            "files": "dosyalar",
+            "download": "indir"
+        },
+
+        "zh-cn": {
+            "lang": "简体中文",
+            "details": "详情",
+            "icons": "图标",
+            "name": "文件名",
+            "lastModified": "上次修改",
+            "size": "大小",
+            "parentDirectory": "上层文件夹",
+            "empty": "空文件夹",
+            "folders": "文件夹",
+            "files": "文件",
+            "download": "download"
+        }
+    }
+};

src/_h5ai/css/inc/extended.less

@@ -0,0 +1,280 @@
+
+#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);
+
+                    img.ascending, img.descending {
+                        position: relative;
+                        top: -2px;
+                        display: none;
+                        width: 12px;
+                        height: 12px;
+                        padding: 0 8px;
+                    }
+                    &:hover {
+                        color: #555;
+                        opacity: 0.9;
+                    }
+                    &.ascending img.ascending {
+                        display: inline;
+                    }
+                    &.descending img.descending {
+                        display: inline;
+                    }
+                }
+            }
+            &.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;
+                    &.thumb {
+                        border: 1px solid #eee;
+                    }
+                }
+            }
+            .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;
+                            &.thumb {
+                                border: 1px solid #eee;
+                            }
+                        }
+                    }
+                    .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/h5bp-norm.less

@@ -0,0 +1,295 @@
+/* 
+ * HTML5 ✰ Boilerplate
+ *
+ * What follows is the result of much research on cross-browser styling. 
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ *
+ * Detailed information about this CSS: h5bp.com/css
+ * 
+ * ==|== normalize ==========================================================
+ */
+
+
+/* =============================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+audio:not([controls]) { display: none; }
+[hidden] { display: none; }
+
+
+/* =============================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
+ * 2. Force vertical scrollbar in non-IE
+ * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
+ */
+
+//html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+
+body { margin: 0; font-size: 13px; line-height: 1.231; }
+
+body, button, input, select, textarea { font-family: sans-serif; color: #222; }
+
+/* 
+ * Remove text-shadow in selection highlight: h5bp.com/i
+ * These selection declarations have to be separate
+ * Also: hot pink! (or customize the background color to match your design)
+ */
+
+::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
+::selection { background: #fe57a1; color: #fff; text-shadow: none; }
+
+
+/* =============================================================================
+   Links
+   ========================================================================== */
+
+a { color: #00e; }
+a:visited { color: #551a8b; }
+a:hover { color: #06e; }
+a:focus { outline: thin dotted; }
+
+/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
+a:hover, a:active { outline: 0; }
+
+
+/* =============================================================================
+   Typography
+   ========================================================================== */
+
+abbr[title] { border-bottom: 1px dotted; }
+
+b, strong { font-weight: bold; }
+
+blockquote { margin: 1em 40px; }
+
+dfn { font-style: italic; }
+
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+
+ins { background: #ff9; color: #000; text-decoration: none; }
+
+mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+
+/* Redeclare monospace font family: h5bp.com/j */
+pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
+
+/* Improve readability of pre-formatted text in all browsers */
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+
+q { quotes: none; }
+q:before, q:after { content: ""; content: none; }
+
+small { font-size: 85%; }
+
+/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+
+/* =============================================================================
+   Lists
+   ========================================================================== */
+
+ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
+dd { margin: 0 0 0 40px; }
+nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+
+
+/* =============================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * 1. Improve image quality when scaled in IE7: h5bp.com/d
+ * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
+ */
+
+img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+
+/*
+ * Correct overflow not hidden in IE9 
+ */
+
+svg:not(:root) { overflow: hidden; }
+
+
+/* =============================================================================
+   Figures
+   ========================================================================== */
+
+figure { margin: 0; }
+
+
+/* =============================================================================
+   Forms
+   ========================================================================== */
+
+form { margin: 0; }
+fieldset { border: 0; margin: 0; padding: 0; }
+
+/* Indicate that 'label' will shift focus to the associated form element */
+label { cursor: pointer; }
+
+/* 
+ * 1. Correct color not inheriting in IE6/7/8/9 
+ * 2. Correct alignment displayed oddly in IE6/7 
+ */
+
+legend { border: 0; *margin-left: -7px; padding: 0; }
+
+/*
+ * 1. Correct font-size not inheriting in all browsers
+ * 2. Remove margins in FF3/4 S5 Chrome
+ * 3. Define consistent vertical alignment display in all browsers
+ */
+
+button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
+
+/*
+ * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
+ * 2. Correct inner spacing displayed oddly in IE6/7
+ */
+
+button, input { line-height: normal; *overflow: visible; }
+
+/*
+ * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
+ */
+
+table button, table input { *overflow: auto; }
+
+/*
+ * 1. Display hand cursor for clickable form elements
+ * 2. Allow styling of clickable form elements in iOS
+ */
+
+button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
+
+/*
+ * Consistent box sizing and appearance
+ */
+
+input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
+input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
+input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
+
+/* 
+ * Remove inner padding and border in FF3/4: h5bp.com/l 
+ */
+
+button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
+
+/* 
+ * 1. Remove default vertical scrollbar in IE6/7/8/9 
+ * 2. Allow only vertical resizing
+ */
+
+textarea { overflow: auto; vertical-align: top; resize: vertical; }
+
+/* Colors for form validity */
+input:valid, textarea:valid {  }
+input:invalid, textarea:invalid { background-color: #f0dddd; }
+
+
+/* =============================================================================
+   Tables
+   ========================================================================== */
+
+table { border-collapse: collapse; border-spacing: 0; }
+td { vertical-align: top; }
+
+
+/* ==|== primary styles =====================================================
+   Author: 
+   ========================================================================== */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ==|== non-semantic helper classes ========================================
+   Please define your styles before this section.
+   ========================================================================== */
+
+/* For image replacement */
+.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
+.ir br { display: none; }
+
+/* Hide from both screenreaders and browsers: h5bp.com/u */
+.hidden { display: none !important; visibility: hidden; }
+
+/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+
+/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+
+/* Hide visually and from screenreaders, but maintain layout */
+.invisible { visibility: hidden; }
+
+/* Contain floats: h5bp.com/q */ 
+.clearfix:before, .clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { zoom: 1; }
+
+
+
+/* ==|== media queries ======================================================
+   PLACEHOLDER Media Queries for Responsive Design.
+   These override the primary ('mobile first') styles
+   Modify as content requires.
+   ========================================================================== */
+
+@media only screen and (min-width: 480px) {
+  /* Style adjustments for viewports 480px and over go here */
+
+}
+
+@media only screen and (min-width: 768px) {
+  /* Style adjustments for viewports 768px and over go here */
+
+}
+
+
+
+/* ==|== print styles =======================================================
+   Print styles.
+   Inlined to avoid required HTTP connection: h5bp.com/r
+   ========================================================================== */
+ 
+@media print {
+  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
+  a, a:visited { 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: ""; }  /* Don't show links for images, or javascript/internal links */
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; } /* h5bp.com/t */
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3 { page-break-after: avoid; }
+}
+

src/_h5ai/css/inc/main.less

@@ -0,0 +1,237 @@
+
+@import "h5bp-norm";
+@import "mixins";
+
+
+html.js {
+    .hideOnJs {
+        display: none;
+    }
+}
+html.no-js {
+    .hideOnNoJs {
+        display: none;
+    }
+}
+
+
+body {
+    font-family: Ubuntu, sans-serif;
+    font-size: 16px;
+    color: #555;
+    background-color: #fff;
+    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 {
+        position: relative;
+        top: -2px;
+        width: 16px;
+        height: 16px;
+    }
+    img + span {
+        margin-left: 6px;
+    }
+    .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;
+        }
+    }
+    .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 100px;
+    }
+    .right {
+        display: block;
+        padding: 0 8px;
+        float: right
+    }
+    .noJsMsg {
+        color: #c33;
+        margin-left: 16px;
+    }
+    .status {
+        .sep {
+            display: inline-block;
+            padding: 0 6px;
+        }
+        &.default {
+        }
+        &.dynamic {
+            display: none;
+        }
+    }
+    #langSelector {
+        position: relative;
+        cursor: pointer;
+
+        .langOptions {
+            position: absolute;
+            z-index: 2;
+            overflow: auto;
+            display: none;
+            right: 0;
+            top: 0;
+            max-height: 200px;
+            background-color: rgb(241,241,241);
+            border: 1px solid rgb(210,210,210);
+
+            > .scrollbar {
+                margin: 0;
+                width: 6px;
+                background-color: rgb(210,210,210);
+
+                .drag {
+                    background-color: rgb(180,180,180);
+                }
+                &.dragOn .drag {
+                    background-color: rgb(150,150,150);
+                }
+            }
+
+            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);
+                    }
+                }
+                li:nth-child(3n+1) {
+
+                }
+            }
+        }
+    }
+}
+
+@import "responsive";
+

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/responsive.less

@@ -0,0 +1,36 @@
+@media only screen and (max-width: 500px) {
+body > nav {
+    .view span {
+        display: none;
+    }
+}
+#extended.icons-view {
+    padding: 0;
+    border: none;
+    margin: 0 -14px;
+}
+}
+
+@media only screen and (max-width: 350px) {
+body > nav {
+    .crumb {
+        display: none;
+    }
+    .current {
+        display: block;
+    }
+} 
+#extended.details-view {
+    .header .label, .entry .label {
+        margin-right: 110px;
+    }
+    .header .date, .entry .date {
+        display: none;
+    }
+}
+body > footer {
+    .center {
+        display: none;
+    }
+}
+}

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,130 @@
+
+#tree {
+    display: none;
+    position: fixed;
+    left: 0;
+    top:  82px;
+    z-index: 1;
+    overflow: auto;
+    font-size: 0.85em;
+    padding: 8px;
+    background-color: rgb(241,241,241);
+    border: 1px solid rgb(210,210,210);
+    border-left: none;
+    .border-radius(0 10px 10px 0);
+
+    > .scrollbar {
+        margin: 8px 8px 8px 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, ul.content {
+            list-style: none;
+            margin: 0;
+            padding: 0 0 0 24px;
+        }
+    }
+}

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 class="hideOnJs noJsMsg"> ⚡ JavaScript is disabled! ⚡ </span>
+        </span>
+        <span class="right">
+            <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="folderTotal"></span> <span class="l10n-folders">folders</span>
+                    <span class='sep'>·</span>
+                    <span class="fileTotal"></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/config.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,31 @@
+<!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 hideOnNoJs">
+        <ul id="navbar"></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 HTML5, but this
+                section gets removed from the DOM tree as soon as its information is parsed. The actual page
+                should render as valid HTML5, even if the produced source is not valid HTML5.
+            -->

src/_h5ai/header.php

@@ -0,0 +1,60 @@
+<!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 id="navbar">
+            <?php echo $crumb->toHtml(); ?>
+        </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 class="hideOnJs noJsMsg"> ⚡ JavaScript is disabled! ⚡ </span>
+        </span>
+        <span class="right">
+            <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="folderTotal"></span> <span class="l10n-folders">folders</span>
+                    <span class='sep'>·</span>
+                    <span class="fileTotal"></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/config.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 and removed from the DOM tree. -->