Added basic options support. Refactored js.

.gitignore

@@ -4,9 +4,12 @@ bin
 build
 #target
 
+build.local.*
+
+
 # Eclipse
 .classpath
-.ant-targets-build.xml
+.ant-targets-*
 
 # Numerous always-ignore extensions
 *.diff

README.md

@@ -1,20 +1,20 @@
-# h5ai v0.3.1   ·   a beautified Apache index
+# h5ai v0.5.3   ·   a beautified Apache index
 
 
 ## Screenshots
 
-<a href="http://github.com/lrsjng/h5ai/raw/master/resources/h5ai-v0.2.1-details.png" target="_blank">
+<a href="http://github.com/lrsjng/h5ai/raw/master/resources/h5ai-v0.4-details.png" target="_blank">
-	<img src="http://github.com/lrsjng/h5ai/raw/master/resources/h5ai-v0.2.1-details.png" width="400px" alt="screenshot" title="screenshot" style="display: inline" />
+	<img src="http://github.com/lrsjng/h5ai/raw/master/resources/h5ai-v0.4-details.png" width="400px" alt="screenshot" title="screenshot" style="display: inline" />
 </a>
 &#160; &#160; &#160;
-<a href="http://github.com/lrsjng/h5ai/raw/master/resources/h5ai-v0.2.1-icons.png" target="_blank">
+<a href="http://github.com/lrsjng/h5ai/raw/master/resources/h5ai-v0.4-icons.png" target="_blank">
-	<img src="http://github.com/lrsjng/h5ai/raw/master/resources/h5ai-v0.2.1-icons.png" width="400px" alt="screenshot" title="screenshot" style="display: inline" />
+	<img src="http://github.com/lrsjng/h5ai/raw/master/resources/h5ai-v0.4-icons.png" width="400px" alt="screenshot" title="screenshot" style="display: inline" />
 </a>
 
 
 ## Live example
 
-View a [sample folder](http://repo.larsjung.de/h5ai-sample)  
+View a [sample folder](http://larsjung.de/h5ai/sample)  
 *(the files are all empty to save webspace)*
 
 
@@ -29,12 +29,68 @@ Everything you need is located in folder `target`.
   styled by h5ai.
 
 Optionally add `h5ai.header.html` and/or `h5ai.footer.html` files to any of the styled folders to [display
-custom top or bottom sections](http://repo.larsjung.de/h5ai-sample/customize). The content of those files
+custom top or bottom sections](http://larsjung.de/h5ai/sample/customize). The content of those files
 will be wrapped by `<header>` and `<footer>` tags.
 
 
+## License and References
+
+<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png" /></a>  
+[h5ai](http://larsjung.de/h5ai) is provided under the terms of the [CC BY-SA 3.0 License](http://creativecommons.org/licenses/by-sa/3.0/).  
+It is based on
+[HTML5 Boilerplate](http://html5boilerplate.com),
+[jQuery](http://jquery.com),
+[Modernizr](http://www.modernizr.com) and
+[Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-173323228),
+please respect their rights.
+
+
 ## Changelog
 
+### v0.5.3
+*2011-07-04*
+
+* refactored js
+* added basic options support
+
+
+### 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*
 
@@ -81,22 +137,3 @@ will be wrapped by `<header>` and `<footer>` tags.
 
 * added icon view
 
-
-## Author
-
-[Lars Jung](http://larsjung.de)  
-[h5ai on github](http://github.com/lrsjng/h5ai)  
-
-
-## License
-
-<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/88x31.png" /></a>  
-This project is licensed under the [CC BY-SA 3.0 License](http://creativecommons.org/licenses/by-sa/3.0/).  
-It is based on
-[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.
-
-

build.properties

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

src/dot.htaccess

@@ -8,14 +8,16 @@
 # Options  +FollowSymLinks
 
 
-################################
-# cache images for 52 weeks
-################################
-
 <IfModule mod_headers.c>
+
+	################################
+	# cache images for 52 weeks
+	################################
+
 	<FilesMatch "\.png$">
 		Header set Cache-Control "max-age=31449600, public"
 	</FilesMatch>
+
 </IfModule>
 
 
@@ -54,6 +56,7 @@
 
 	IndexOrderDefault    Ascending Name
 
+	IndexOptions         Type=text/html;h5ai=%BUILD_VERSION%
 	IndexOptions         Charset=UTF-8
 	IndexOptions         FancyIndexing
 	IndexOptions         HTMLTable
@@ -72,66 +75,66 @@
 	# icon mapping
 	################################
 
-	AddIcon              /h5ai/icons/parent.png      ..
+	AddIcon              /h5ai/icons/16x16/parent.png      ..
-	AddIcon              /h5ai/icons/folder.png      ^^DIRECTORY^^
+	AddIcon              /h5ai/icons/16x16/folder.png      ^^DIRECTORY^^
-	AddIcon              /h5ai/icons/blank.png       ^^BLANKICON^^
+	AddIcon              /h5ai/icons/16x16/blank.png       ^^BLANKICON^^
 
-	AddIcon              /h5ai/icons/readme.png      README
+	AddIcon              /h5ai/icons/16x16/readme.png      README
-	AddIcon              /h5ai/icons/copying.png     COPYING  LICENSE
+	AddIcon              /h5ai/icons/16x16/copying.png     COPYING  LICENSE
-	AddIcon              /h5ai/icons/install.png     INSTALL
+	AddIcon              /h5ai/icons/16x16/install.png     INSTALL
-	AddIcon              /h5ai/icons/authors.png     AUTHORS
+	AddIcon              /h5ai/icons/16x16/authors.png     AUTHORS
-	AddIcon              /h5ai/icons/log.png         LOG  Log  log
+	AddIcon              /h5ai/icons/16x16/log.png         LOG  Log  log
 
-	AddIcon              /h5ai/icons/css.png         .less
+	AddIcon              /h5ai/icons/16x16/css.png         .less
-	AddIcon              /h5ai/icons/script.png      .conf  .ini  .sh  .shar  .csh  .ksh  .tcl
+	AddIcon              /h5ai/icons/16x16/script.png      .conf  .ini  .sh  .shar  .csh  .ksh  .tcl
-	AddIcon              /h5ai/icons/makefile.png    .pom  pom.xml  build.xml
+	AddIcon              /h5ai/icons/16x16/makefile.png    .pom  pom.xml  build.xml
-	AddIcon              /h5ai/icons/bin.png         .so  .o
+	AddIcon              /h5ai/icons/16x16/bin.png         .so  .o
 
-	AddIcon              /h5ai/icons/zip.png         .zip  .Z  .z  .jar  .war
+	AddIcon              /h5ai/icons/16x16/archive.png     .tar.gz  .tgz  .tar.bz2
-	AddIcon              /h5ai/icons/tar.png         .tar
+	AddIcon              /h5ai/icons/16x16/zip.png         .zip  .Z  .z  .jar  .war  .gz  .bz2
-	AddIcon              /h5ai/icons/archive.png     .tar.gz  .tgz  .tar.bz2
+	AddIcon              /h5ai/icons/16x16/tar.png         .tar
-	AddIcon              /h5ai/icons/pdf.png         .pdf
+	AddIcon              /h5ai/icons/16x16/pdf.png         .pdf
-	AddIcon              /h5ai/icons/deb.png         .deb
+	AddIcon              /h5ai/icons/16x16/deb.png         .deb
-	AddIcon              /h5ai/icons/rpm.png         .rpm
+	AddIcon              /h5ai/icons/16x16/rpm.png         .rpm
-	AddIcon              /h5ai/icons/cd.png          .iso  .cue
+	AddIcon              /h5ai/icons/16x16/cd.png          .iso  .cue
 
-	AddIconByType        /h5ai/icons/png.png         image/png
+	AddIconByType        /h5ai/icons/16x16/png.png         image/png
-	AddIconByType        /h5ai/icons/jpg.png         image/jpeg
+	AddIconByType        /h5ai/icons/16x16/jpg.png         image/jpeg
-	AddIconByType        /h5ai/icons/gif.png         image/gif
+	AddIconByType        /h5ai/icons/16x16/gif.png         image/gif
-	AddIconByType        /h5ai/icons/ico.png         image/x-icon
+	AddIconByType        /h5ai/icons/16x16/ico.png         image/x-icon
-	AddIconByType        /h5ai/icons/bmp.png         image/x-ms-bmp
+	AddIconByType        /h5ai/icons/16x16/bmp.png         image/x-ms-bmp
 
-	AddIconByType        /h5ai/icons/html.png        text/html
+	AddIconByType        /h5ai/icons/16x16/html.png        text/html
-	AddIconByType        /h5ai/icons/css.png         text/css
+	AddIconByType        /h5ai/icons/16x16/css.png         text/css
-	AddIconByType        /h5ai/icons/xml.png         application/xml
+	AddIconByType        /h5ai/icons/16x16/xml.png         application/xml
-	AddIconByType        /h5ai/icons/js.png          application/javascript  application/json
+	AddIconByType        /h5ai/icons/16x16/js.png          application/javascript  application/json
-	AddIconByType        /h5ai/icons/php.png         application/x-httpd-php
+	AddIconByType        /h5ai/icons/16x16/php.png         application/x-httpd-php
 
-	AddIconByType        /h5ai/icons/py.png          text/x-python
+	AddIconByType        /h5ai/icons/16x16/py.png          text/x-python
-	AddIconByType        /h5ai/icons/rb.png          application/x-ruby
+	AddIconByType        /h5ai/icons/16x16/rb.png          application/x-ruby
-	AddIconByType        /h5ai/icons/java.png        text/x-java
+	AddIconByType        /h5ai/icons/16x16/java.png        text/x-java
-	AddIconByType        /h5ai/icons/cpp.png         text/x-c++src
+	AddIconByType        /h5ai/icons/16x16/cpp.png         text/x-c++src
-	AddIconByType        /h5ai/icons/hpp.png         text/x-c++hdr
+	AddIconByType        /h5ai/icons/16x16/hpp.png         text/x-c++hdr
-	AddIconByType        /h5ai/icons/c.png           text/x-csrc
+	AddIconByType        /h5ai/icons/16x16/c.png           text/x-csrc
-	AddIconByType        /h5ai/icons/h.png           text/x-chdr
+	AddIconByType        /h5ai/icons/16x16/h.png           text/x-chdr
 
-	AddIconByType        /h5ai/icons/pdf.png         application/pdf
+	AddIconByType        /h5ai/icons/16x16/pdf.png         application/pdf
 
-	AddIconByType        /h5ai/icons/rtf.png         text/rtf  application/rtf
+	AddIconByType        /h5ai/icons/16x16/rtf.png         text/rtf  application/rtf
-	AddIconByType        /h5ai/icons/tex.png         text/x-tex
+	AddIconByType        /h5ai/icons/16x16/tex.png         text/x-tex
-	AddIconByType        /h5ai/icons/makefile.png    text/x-makefile
+	AddIconByType        /h5ai/icons/16x16/makefile.png    text/x-makefile
 
-	AddIconByType        /h5ai/icons/bin.png         application/java-vm
+	AddIconByType        /h5ai/icons/16x16/bin.png         application/java-vm
-	AddIconByType        /h5ai/icons/exe.png         application/x-executable application/x-msdos-program
+	AddIconByType        /h5ai/icons/16x16/exe.png         application/x-executable application/x-msdos-program
 
-	AddIconByType        /h5ai/icons/text.png        text/*
+	AddIconByType        /h5ai/icons/16x16/text.png        text/*
-	AddIconByType        /h5ai/icons/image.png       image/*
+	AddIconByType        /h5ai/icons/16x16/image.png       image/*
-	AddIconByType        /h5ai/icons/audio.png       audio/*
+	AddIconByType        /h5ai/icons/16x16/audio.png       audio/*
-	AddIconByType        /h5ai/icons/video.png       video/*
+	AddIconByType        /h5ai/icons/16x16/video.png       video/*
 
-	AddIconByEncoding    /h5ai/icons/zip.png         x-compress  x-gzip  x-bzip2
+	AddIconByEncoding    /h5ai/icons/16x16/zip.png         x-compress  x-gzip  x-bzip2
 
-	DefaultIcon          /h5ai/icons/unknown.png
+	DefaultIcon          /h5ai/icons/16x16/unknown.png
 
 </IfModule>
 

src/h5ai/css/inc/extended.less

@@ -0,0 +1,169 @@
+
+#extended.details-view {
+	display: none;
+
+	ul {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+
+		li {
+			position: relative;
+			white-space: nowrap;
+			clear: both;
+
+			&.header a {
+				padding-bottom: 18px;
+				color: #555;
+				opacity: 0.4;
+				cursor: pointer;
+				.transition( all 0.2s ease-in-out );
+
+				&:visited {
+					color: #555;
+				}
+				&:hover {
+					color: #555;
+					opacity: 0.9;
+				}
+				img {
+					width: 12px;
+					height: 12px;
+					padding: 0 8px;
+				}
+			}
+			&.entry {
+				border-bottom: 1px solid #ddd;
+
+				a {
+					display: block;
+					cursor: pointer;
+
+					&:hover {
+						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 220px 0 24px;
+				overflow: hidden;
+				white-space: nowrap;
+				text-align: left;
+			}
+			.date {
+				position: absolute;
+				right: 70px;
+				top: 0;
+				text-align: right;
+				width: 140px;
+				white-space: nowrap;
+			}
+			.size {
+				position: absolute;
+				right: 0;
+				top: 0;
+				text-align: right;
+				width: 50px;
+				white-space: nowrap;
+			}
+		}
+	}
+	.empty {
+		text-align: center;
+		margin: 50px 0;
+		color: #ddd;
+		font-size: 5em;
+		font-weight: bold;
+	}
+}
+
+
+#extended.icons-view {
+	display: none;
+	padding: 10px;
+	border: 1px solid #eee;
+	border-radius: 15px;
+
+	ul {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+
+		li {
+			&.header {
+				display: none;
+			}
+			&.entry {
+				float: left;
+
+				a {
+					display: block;
+					margin: 8px;
+					padding: 8px;
+					width: 100px;
+					height: 120px;
+					float: left;
+					text-align: center;
+					overflow: hidden;
+					border-radius: 5px;
+					cursor: pointer;
+					border: 2px solid rgba(0,0,0,0);
+			
+					&:hover {
+						color: #e80;
+						border-color: #eee;
+						background-color: #f6f6f6;
+						//.box-shadow( 0, 0, 20px, #999 );
+					}
+					.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;
+					}
+				}
+			}
+		}
+	}
+	.empty {
+		padding: 16px;
+		height: 120px;
+		text-align: center;
+		color: #ddd;
+		font-size: 5em;
+		font-weight: bold;
+	}
+}

src/h5ai/css/inc/mixins.less

@@ -1,87 +1,38 @@
 
-.border-radius ( @radius: 5px ) {
+.border-radius ( @radius ) {
-	-webkit-border-radius: @radius;
 	-moz-border-radius: @radius;
+	-webkit-border-radius: @radius;
 	border-radius: @radius;
 }
 
 
-.border-top-right-radius ( @radius: 5px ) {
+.box-shadow ( @shadow ) {
-	-webkit-border-top-right-radius: @radius;
+	-moz-box-shadow: @shadow;
-	-moz-border-radius-topright: @radius;
+	-webkit-box-shadow: @shadow;
-	border-top-right-radius: @radius;
+	box-shadow: @shadow;
 }
 
 
-.border-bottom-right-radius ( @radius: 5px ) {
+.transition ( @transition ) {
-	-webkit-border-bottom-right-radius: @radius;
+	-moz-transition: @transition;
-	-moz-border-radius-bottomright: @radius;
+	-ms-transition: @transition;
-	border-bottom-right-radius: @radius;
+	-o-transition: @transition;
+	-webkit-transition: @transition;
+	transition: @transition;
 }
 
 
-.box-shadow ( @x: 10px, @y: 10px, @blur: 5px, @color: #ccc ) {
+.transform ( @transform ) {
-	-webkit-box-shadow: @x @y @blur @color;
+	-moz-transform: @transform;
-	-moz-box-shadow: @x @y @blur @color;
+	-o-transform: @transform;
-	box-shadow: @x @y @blur @color;
+	-webkit-transform: @transform;
+	transform: @transform;
 }
 
 
-.transition ( @transitions ) {
+.background-size ( @size ) {
-	-webkit-transition: @transitions;
+	-moz-background-size: @size;
-	-moz-transition: @transitions;
+	-webkit-background-size: @size;
-	-o-transition: @transitions;
+	background-size: @size;
-	transition: @transitions;
 }
 
-
-.transform ( @transforms ) {
-	-webkit-transform: @transforms;
-	-moz-transform: @transforms;
-	-o-transform: @transforms;
-	transform: @transforms;
-}
-
-
-.rhythm ( @height, @size ) {
-
-	@base: @size / 16;
-	font-size: 1% * @base * 100;
-	@factor: @height / @size;
-	@rhythm: 1em * @factor;
-
-	p {
-		font-size: 1em;
-		line-height: @rhythm;
-		margin-top: @rhythm;
-		margin-bottom: @rhythm;
-	}
-
-	h1 {
-		font-size: @rhythm;
-		line-height: 1em;
-		margin-bottom: 1em;
-		margin-top: 1em;
-	}
-
-	h2 {
-		font-size: @rhythm / 1.1;
-		line-height: 1.1em;
-		margin-bottom: 1.1em;
-		margin-top: 1.1em;
-	}
-
-	h3 {
-		font-size: @rhythm / 1.2;
-		line-height: 1.2em;
-		margin-bottom: 1.2em;
-		margin-top: 1.2em;
-	}
-
-	h4 {
-		font-size: @rhythm / 1.3;
-		line-height: 1.3em;
-		margin-bottom: 1.3em;
-		margin-top: 1.3em;
-	}
-}

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,74 @@
+
+#tree {
+	display: none;
+	position: fixed;
+	left: 0;
+	top: 80px;
+	font-size: 0.85em;
+	padding: 16px 32px 16px 16px;
+	background-color: rgb(240,240,240);
+	border: 1px solid rgb(225,225,225);
+	border-left: none;
+	.border-radius ( 0 15px 15px 0 );
+	.box-shadow( 0 0 30px #999 );
+
+	.entry {
+		> a, > a.visited {
+			padding: 4px 6px;
+			border: 1px solid rgba(0,0,0,0);
+			.border-radius( 5px );
+			display: block;
+			opacity: 0.7;
+
+			&:hover {
+				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-style: italic;
+				color: #ccc;
+				img {
+					width: 10px;
+					height: 10px;
+					vertical-align: baseline;
+				}
+			}
+			.error {
+				color: #c55;
+			}
+		}
+		&.file {
+			display: none;
+		}
+		&.current {
+			> a, > a:visited {
+				border: 1px solid rgba(0,0,0,0.1);
+				background-color: rgba(255,255,255,0.5);
+				opacity: 1;
+			}
+		}
+		&.notListable {
+			> a, > a:visited {
+				color: #999;
+			}
+		}
+		ul {
+			list-style: none;
+			margin-left: 20px;
+		}
+	}
+}

src/h5ai/css/main.less

@@ -3,6 +3,17 @@
 @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;
@@ -30,8 +41,15 @@ body > nav {
 	font-size: 0.85em;
 	background-color: rgb(240,240,240);
 	border-bottom: 1px solid rgb(225,225,225);
-	.box-shadow( 0, 0, 30px, #555 );
+	.box-shadow( 0 0 30px #555 );
 
+	span.jsDisabledFallback {
+		display: block;
+		height: 30px;
+		line-height: 30px;
+		padding: 0 10px;
+		color: #999;
+	}
 	li {
 		cursor: pointer;
 		opacity: 0.7;
@@ -40,14 +58,29 @@ body > nav {
 		&.crumb {
 			float: left;
 			border-right: 1px dotted rgb(225,225,225);
+			.hint {
+				margin-left: 8px;
+				font-style: italic;
+				color: #999;
+			}
+			img.hint {
+				width: 10px;
+				height: 10px;
+				vertical-align: baseline;
+				padding: 0px;
+			}
+		}
+		&.current {
+			background-color: rgba(255,255,255,0.5);
+			opacity: 1.0;
 		}
 		&.view {
 			float: right;
 			border-left: 1px dotted rgb(225,225,225);
 		}
 		&:hover, &:hover a {
-			color: #e80;
 			background-color: rgba(255,255,255,0.5);
+			color: #e80;
 			opacity: 1.0;
 		}
 	}
@@ -85,127 +118,9 @@ body > nav {
 }
 
 
-#details {
+@import "inc/table";
-	display: none;
+@import "inc/extended";
-
+@import "inc/tree";
-	table {
-		display: block;
-		width: 100%;
-		border-collapse: collapse;
-
-		tr.entry:hover, tr.entry:hover a {
-			background-color: #f0f0f0;
-			color: #e80;
-			cursor: pointer;
-		}
-		th, td {
-			padding: 3px 6px;
-			text-align: left;
-			border: none;
-		}
-		th {
-			padding-bottom: 18px;
-			opacity: 0.4;
-			.transition( all 0.2s ease-in-out );
-	
-			&.header:hover, &.header: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;
-		}
-		.icon {
-			text-align: center;
-			width: 16px;
-	
-			img {
-				width: 16px;
-				height: 16px;
-				padding-top: 2px;
-			}
-		}
-		.name {
-			width: 682px;
-			max-width: 682px;
-			overflow: hidden;
-			white-space: nowrap;
-		}
-		.date {
-			text-align: right;
-			width: 160px;
-			min-width: 160px;
-			white-space: nowrap;
-		}
-		.size {
-			text-align: right;
-			width: 70px;
-			min-width: 70px;
-			white-space: nowrap;
-		}
-	}
-	.empty {
-		text-align: center;
-		margin: 50px 0;
-		color: #ddd;
-		font-size: 5em;
-		font-weight: bold;
-	}
-}
-
-
-#icons {
-	display: none;
-	padding: 10px;
-	border: 1px solid #eee;
-	border-radius: 15px;
-
-	.entry {
-		margin: 8px;
-		padding: 8px;
-		width: 100px;
-		height: 120px;
-		float: left;
-		text-align: center;
-		overflow: hidden;
-		border-radius: 5px;
-		cursor: pointer;
-		border: 1px solid rgba(0,0,0,0);
-
-		&:hover {
-			color: #e80;
-			border-color: #eee;
-			.box-shadow( 0, 0, 20px, #999 );
-		}
-		img {
-			width: 48px;
-			height: 48px;
-			margin-bottom: 8px;
-		}
-	}
-	.empty {
-		padding: 16px;
-		height: 120px;
-		text-align: center;
-		color: #ddd;
-		font-size: 5em;
-		font-weight: bold;
-	}
-}
 
 
 body > footer {
@@ -220,7 +135,7 @@ body > footer {
 	color: #999;
 	font-size: 0.85em;
 	text-align: center;
-	.box-shadow( 0, 0, 30px, #555 );
+	.box-shadow( 0 0 30px #555 );
 
 	a, a:visited {
 		color: #555;

src/h5ai/footer.html

@@ -1,8 +1,9 @@
 			<!-- generated code ends here -->
 		</section>
-		<section id="icons"></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" />
@@ -10,14 +11,13 @@
 			<img class="techclass" src="/h5ai/images/html5-storage.png" alt="html5-storage" />
 			<img class="techclass" src="/h5ai/images/html5-css3.png" alt="html5-css3" />
 		</a>
-		<a href="http://github.com/lrsjng/h5ai" target="_blank" title="%BUILD_NAME% %BUILD_VERSION%">h5ai</a>
+		<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai %BUILD_VERSION%">h5ai</a>
 		using
-		<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/jquery.min.js"></script>
+	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
 	<script>window.jQuery || document.write( '<script src="/h5ai/js/lib/jquery.min.js"><\/script>' )</script>
+	<script src="/h5ai/options.js"></script>
 	<script src="/h5ai/js/main.js"></script>
 </body>
 </html>

src/h5ai/header.html

@@ -3,27 +3,28 @@
 <head>
 	<meta charset="utf-8">
 	<title>Directory index · styled with h5ai</title>
-	<meta name="h5ai-version" content="%BUILD_NAME% %BUILD_VERSION%">
+	<meta name="h5ai-version" content="h5ai %BUILD_VERSION%">
-	<meta name="description" content="Directory index styled with h5ai (http://github.com/lrsjng/h5ai)">
+	<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" href="/h5ai/icons/folder.png" />
+	<link rel="shortcut icon" type="image/png" href="/h5ai/images/h5ai-16x16.png">
-	<link rel="apple-touch-icon" href="/h5ai/images/folder.png">
+	<link rel="apple-touch-icon" type="image/png" href="/h5ai/images/h5ai-48x48.png">
 	<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,italic,bold">
 	<link rel="stylesheet" type="text/css" href="/h5ai/css/main.css">
 	<script src="/h5ai/js/lib/modernizr.min.js"></script>
 </head>
 <body>
 	<nav>
+		<span class="jsDisabledFallback">Directory index · JavaScript is disabled</span>
 		<ul>
-			<li id="domain" class="crumb"><a href="/"><img src="/h5ai/icons/home.png" alt="domain" /><span>domain</span></a></li>
+			<li id="domain" class="crumb"><a href="/"><img src="/h5ai/images/home.png" alt="domain" /><span>domain</span></a></li>
-			<li id="viewicons" class="view"><a href="#"><img src="/h5ai/icons/view-icons.png" alt="view-icons" />icons</a></li>
+			<li id="viewicons" class="view"><a href="#"><img src="/h5ai/images/view-icons.png" alt="view-icons" />icons</a></li>
-			<li id="viewdetails" class="view" ><a href="#"><img src="/h5ai/icons/view-details.png" alt="view-details" />details</a></li>
+			<li id="viewdetails" class="view" ><a href="#"><img src="/h5ai/images/view-details.png" alt="view-details" />details</a></li>
 		</ul>
 		<div class="clearfix"></div>
 	</nav>
 	<section id="content">
 		<header></header>
-		<section id="details">
+		<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