Fixed problems with ' in links

* 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,50 @@
+
+# Build folders to ignore
+bin
+build
+#target
+
+build.local.*
+
+
+# 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
+

README.md

@@ -1,31 +1,166 @@
-h5ai - a beautified Apache index
-================================
+# h5ai v0.10.1   ·   a beautified Apache index
 
-Screenshot
-----------
-
-![screenshot](screen.jpg "screenshot")
-
-compare it to the built in index
-
-![original index](org.jpg "original index")
+h5ai aims to make browsing files on a Apache HTTP server more comfortable.  
+See the [live demo](http://larsjung.de/h5ai/sample).  
+For installation instructions and documentation have a look at
+[project page](http://larsjung.de/h5ai).
 
 
-Install
--------
+## License and References
 
-* copy the `h5ai` folder to the web-root directory of your server
-* 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)
+<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png" /></a>  
+[h5ai](http://larsjung.de/h5ai) is provided under the terms of the [CC BY-SA 3.0 License](http://creativecommons.org/licenses/by-sa/3.0/).  
+It is based on
+[HTML5 Boilerplate](http://html5boilerplate.com),
+[jQuery](http://jquery.com),
+[Modernizr](http://www.modernizr.com) and
+[Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-173323228),
+please respect their rights.
 
 
-License
--------
+## Changelog
 
-This project is licensed under the [CC BY-SA 3.0 License](http://creativecommons.org/licenses/by-sa/3.0/)
+### v0.10.1
+*2011-07-24*
 
-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.
+* 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/h5ai)
+* added top/bottom message support, only basicly styled
+
+
+### v0.2.1
+*2011-06-16*
+
+* fixed croped filenames
+* fixed missing .png extension in header
+* added some color to the links
+* added changelog
+
+
+### v0.2
+*2011-06-15*
+
+* added icon view
 

build.properties

@@ -0,0 +1,19 @@
+custom                           = true
+
+
+# project
+project.name                     = h5ai
+project.version                  = 0.10.1
+
+
+# src
+src.dir                          = src
+
+
+# build
+build.dir                        = target
+
+
+# libs
+lib.scripp.jar                   = tools/scripp.jar
+

build.xml

@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="utf-8"?>
+<project
+	name="h5ai"
+	basedir="."
+	default="build"
+	xmlns:scripp="antlib:de.larsjung.scripp.ant"
+>
+	<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>
+
+
+	<target name="clean" depends="init">
+		<delete dir="${build.dir}" />
+	</target>
+
+
+	<target name="build" depends="clean">
+		<mkdir dir="${build.dir}" />
+		<copy todir="${build.dir}">
+		    <fileset dir="${src.dir}" />
+		</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>
+
+		<scripp.dir dir="${build.dir}/h5ai/css" />
+		<scripp.dir dir="${build.dir}/h5ai/js" />
+	</target>
+
+
+	<macrodef name="scripp.dir">
+		<attribute name="dir" />
+		<sequential>
+			<scripp:process>
+		        <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>

dot-htaccess

@@ -1,87 +0,0 @@
-
-<IfModule mod_autoindex.c>
-
-	Options              +Indexes  +FollowSymLinks
-
-	IndexOptions         Charset=UTF-8
-	IndexOptions         FancyIndexing
-	IndexOptions         HTMLTable
-	IndexOptions         XHTML
-	IndexOptions         SuppressHTMLPreamble
-	IndexOptions         SuppressRules
-	IndexOptions         SuppressDescription
-	IndexOptions         FoldersFirst
-	IndexOptions         IgnoreCase
-	IndexOptions         IconsAreLinks
-	IndexOptions         VersionSort
-
-	DirectoryIndex       IGNORE-DEFAULT-INDEX-FILES
-	IndexOrderDefault    Ascending Name
-	IndexIgnore          h5ai  .??*  *~  *#  RCS  CVS  *,v  *,t
-
-	HeaderName           /h5ai/header.html
-	ReadmeName           /h5ai/footer.html
-
-	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
-	AddIcon              /h5ai/icons/css.png         .less
-	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/java.png        text/x-java
-	AddIconByType        /h5ai/icons/py.png          text/x-python
-	AddIconByType        /h5ai/icons/rb.png          application/x-ruby
-	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/tex.png         text/x-tex
-	AddIcon              /h5ai/icons/script.png      .conf  .ini  .sh  .shar  .csh  .ksh  .tcl
-
-	AddIcon              /h5ai/icons/log.png         log  Log  LOG
-
-	AddIconByType        /h5ai/icons/bin.png         application/java-vm
-	AddIcon              /h5ai/icons/bin.png         .so  .o
-	AddIconByType        /h5ai/icons/exe.png         application/x-executable application/x-msdos-program
-
-	AddIconByType        /h5ai/icons/makefile.png    text/x-makefile
-	AddIcon              /h5ai/icons/makefile.png    pom.xml  .pom  build.xml
-
-	AddIconByType        /h5ai/icons/pdf.png         application/pdf
-	AddIconByType        /h5ai/icons/rtf.png         text/rtf  application/rtf
-
-	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
-
-	AddIcon              /h5ai/icons/authors.png     AUTHORS
-	AddIcon              /h5ai/icons/install.png     INSTALL
-	AddIcon              /h5ai/icons/copying.png     COPYING  LICENSE
-	AddIcon              /h5ai/icons/readme.png      README
-
-	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
-
-	AddIcon              /h5ai/icons/parent.png      ..
-	AddIcon              /h5ai/icons/folder.png      ^^DIRECTORY^^
-	AddIcon              /h5ai/icons/blank.png       ^^BLANKICON^^
-
-	DefaultIcon          /h5ai/icons/unknown.png
-
-</IfModule>
-

h5ai/footer.html

@@ -1,21 +0,0 @@
-		<!-- generated code ends here -->
-		<div id="empty">empty</div>
-		<div id="special"></div>
-	</section>
-	<footer>
-		<a id="html5" href="http://www.w3.org/html/logo/" target="_blank" title="HTML5 semantics & 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-css3.png" alt="html5-css3" />
-		</a>
-		<a href="http://github.com/larrrs/h5ai" target="_blank" title="html5autoindex v0.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,24 +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"><a href="/"><img src="/h5ai/icons/home.png" alt="domain" /><span>domain</span></a></li>
-		</ul>
-		<div class="clearfix"></div>
-	</nav>
-	<section id="content">
-		<!--
-			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,180 +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: #333;
-}
-
-
-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 {
-	float: left;
-	border-right: 1px dotted rgb(225,225,225);
-	cursor: pointer;
-	opacity: 0.7;
-}
-nav li.hover, nav li.hover a {
-	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;
-}
-
-
-section#content {
-	max-width: 980px;
-	margin: 0px auto;
-}
-
-
-table {
-	width: 100%;
-	border-collapse: collapse;
-}
-table {
-	display: block;
-}
-table tr.hover, table tr.hover a {
-	background-color: rgb(235,245,250);
-	background-color: #eeeeee;
-	color: #333;
-	cursor: pointer;
-}
-table th, table td {
-    padding: 3px 6px;
-    text-align: left;
-	border: none;
-}
-table th {
-	padding-bottom: 18px;
-	opacity: 0.4;
-}
-table th.hover {
-	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;
-}
-
-
-div#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;
-}
-
-
-#html5 {
-	position: absolute;
-	left: 6px;
-	bottom: 6px;
-	float: left;
-}
-#html5 img {
-	opacity: 0.4;
-	width: 20px;
-	height: 20px;
-}
-#html5:hover img {
-	opacity: 0.8;
-}
-

h5ai/main.js

@@ -1,159 +0,0 @@
-( function( $ ) {
-
-	var columnClasses = [ "icon", "name", "date", "size" ];
-	var defaultSortOrder = "C=N;O=A"
-	var h5aiPath = "/h5ai"
-
-
-	$( function() {
-
-		init();
-	} );
-
-
-	function init () {
-
-		convertToHtml5();
-		addBreadcrumb();
-		addColumnClasses();
-		initTableRows();
-		addSortOrderIcons();
-		//specialFiles();
-	};
-
-	
-	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" )
-			.hover(
-				function () {
-					$( this ).addClass( "hover" );
-				},
-				function () {
-					$( this ).removeClass( "hover" );
-				}
-			)
-			.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" )
-			.hover(
-				function () {
-					$( this ).addClass( "hover" );
-				},
-				function () {
-					$( this ).removeClass( "hover" );
-				}
-			)
-			.click( function () {
-				document.location.href = $( this ).find( "a" ).attr( "href" );
-			} );
-		$( "td.name a" ).closest( "tr" )
-			.hover(
-				function () {
-					$( this ).addClass( "hover" );
-				},
-				function () {
-					$( this ).removeClass( "hover" );
-				}
-			)
-			.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 specialFiles() {
-
-		specialFile( "README", "readme.png" );
-		specialFile( "ChangeLog", "changelog.png" );
-		specialFile( "INSTALL", "install.png" );
-		specialFile( "COPYING", "copying.png" );
-		specialFile( "LICENSE", "copying.png" );
-		specialFile( "AUTHORS", "authors.png" );
-	};
-
-
-	function specialFile( name, img ) {
-
-		if ( $( "td.name a:contains(" + name + ")" ).size() > 0 ) {
-			$( "#special" )
-				.append( $( "<img src='" + h5aiPath + "/images/" + img + "' alt='readme' />" ) )
-				.show();
-		}
-	};
-
-} )( jQuery );

src/dot.htaccess

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

src/h5ai/css/inc/extended.less

@@ -0,0 +1,209 @@
+
+#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 {
+				border-bottom: 1px solid #ddd;
+
+				a, a:active, a:visited {
+					display: block;
+					color: #555;
+					text-decoration: none;
+					cursor: pointer;
+					
+					&:hover, &.hover {
+						background-color: #f6f6f6;
+						color: #e80;
+					}
+				}
+				&.error {
+					a, a:active, a:visited {
+						color: #aaa;
+					
+						.label {
+							.hint {
+								margin-left: 12px;
+								font-size: 0.9em;
+								color: #c55;
+							}
+						}
+						&:hover, &.hover {
+							opacity: 1;
+							background-color: #f6f6f6;
+							color: #e80;
+						}
+					}
+				}
+			}
+			.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;
+			}
+		}
+	}
+	.empty {
+		text-align: center;
+		margin: 50px 0;
+		color: #ddd;
+		font-size: 5em;
+		font-weight: bold;
+	}
+}
+
+
+#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;
+					}
+					.icon {
+						display: block;
+
+						img {
+							width: 48px;
+							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;
+						}
+					}
+				}
+			}
+		}
+	}
+	.empty {
+		padding: 16px;
+		height: 120px;
+		text-align: center;
+		color: #ddd;
+		font-size: 5em;
+		font-weight: bold;
+	}
+}

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,128 @@
+
+#tree {
+	position: fixed;
+	display: none;
+	left: 0;
+	top: 0;
+	overflow: auto;
+	font-size: 0.85em;
+	padding: 16px 32px 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;
+		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.less

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

src/h5ai/footer.html

@@ -0,0 +1,23 @@
+			<!-- generated code ends here -->
+		</section>
+		<section id="extended"></section>
+		<footer></footer>
+	</section>
+	<section id="tree"></section>
+	<footer>
+		<a id="html5" href="http://www.w3.org/html/logo/" target="_blank" title="HTML5 semantics, storage & CSS3">
+			<img class="logo" src="/h5ai/images/html5.png" alt="html5" />
+			<img class="techclass" src="/h5ai/images/html5-semantics.png" alt="html5-semantics" />
+			<img class="techclass" src="/h5ai/images/html5-storage.png" alt="html5-storage" />
+			<img class="techclass" src="/h5ai/images/html5-css3.png" alt="html5-css3" />
+		</a>
+		<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai project page">h5ai %BUILD_VERSION%</a>
+		<span class="l10n-footerUsing">using</span>
+		<a href="http://tiheum.deviantart.com/art/Faenza-Icons-173323228" target="_blank" title="icon theme for Gnome">Faenza icons</a>
+	</footer>
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
+	<script>window.jQuery || document.write( '<script src="/h5ai/js/lib/jquery.min.js"><\/script>' )</script>
+	<script src="/h5ai/options.js"></script>
+	<script src="/h5ai/js/main.js"></script>
+</body>
+</html>

src/h5ai/header.html

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