Removed shadows. Reworked tree side bar.

README.md

@@ -1,4 +1,4 @@
-# h5ai v0.6   ·   a beautified Apache index
+# h5ai v0.7   ·   a beautified Apache index
 
 
 ## Screenshots
@@ -47,6 +47,13 @@ please respect their rights.
 
 ## Changelog
 
+### v0.7
+*2011-07-07*
+
+* removed shadows
+* smarter tree side bar
+
+
 ### v0.6
 *2011-07-05*
 

build.properties

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

build.xml

@@ -2,6 +2,7 @@
 <project
 	name="h5ai"
 	basedir="."
+	default="build"
 	xmlns:scripp="antlib:de.larsjung.scripp.ant"
 >
 	<target name="init">

src/h5ai/css/inc/extended.less

@@ -44,10 +44,16 @@
 						color: #e80;
 					}
 				}
-				&.notListable {
+				&.error {
 					> a, > a:visited {
 						opacity: 0.7;
 						color: #999;
+
+						.hint {
+							font-size: 0.9em;
+							font-style: italic;
+							color: #c55;
+						}
 					}
 				}
 			}
@@ -75,11 +81,6 @@
 				overflow: hidden;
 				white-space: nowrap;
 				text-align: left;
-				.error {
-					font-size: 0.9em;
-					font-style: italic;
-					color: #c55;
-				}
 			}
 			.date {
 				position: absolute;
@@ -161,20 +162,21 @@
 					.label {
 						display: block;
 						word-wrap: break-word;
-						.error {
-							font-size: 0.9em;
-							font-style: italic;
-							color: #c55;
-						}
 					}
 					.date, .size {
 						display: none;
 					}
 				}
-				&.notListable {
+				&.error {
 					> a, > a:visited {
 						opacity: 0.7;
 						color: #999;
+
+						.hint {
+							font-size: 0.9em;
+							font-style: italic;
+							color: #c55;
+						}
 					}
 				}
 			}

src/h5ai/css/inc/tree.less

@@ -1,19 +1,50 @@
 
 #tree {
-	display: none;
 	position: fixed;
-	left: 0;
+	left: -200px;
 	top: 80px;
 	font-size: 0.85em;
 	padding: 16px 32px 16px 16px;
-	background-color: rgb(240,240,240);
-	border: 1px solid rgb(225,225,225);
+	background-color: rgb(241,241,241);
+	border: 2px solid rgb(210,210,210);
 	border-left: none;
 	.border-radius ( 0 15px 15px 0 );
-	.box-shadow( 0 0 30px #999 );
-
+	
 	.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.visited {
+			margin-left: 16px;
 			padding: 4px 6px;
 			border: 1px solid rgba(0,0,0,0);
 			.border-radius( 5px );
@@ -40,6 +71,7 @@
 				display: inline-block;
 				margin-left: 12px;
 				font-style: italic;
+				font-size: 0.9em;
 				color: #ccc;
 				img {
 					width: 10px;
@@ -47,9 +79,6 @@
 					vertical-align: baseline;
 				}
 			}
-			.error {
-				color: #c55;
-			}
 		}
 		&.file {
 			display: none;
@@ -61,12 +90,15 @@
 				opacity: 1;
 			}
 		}
-		&.notListable {
+		&.error {
 			> a, > a:visited {
 				color: #999;
 			}
+			.hint {
+				color: #c55;
+			}
 		}
-		ul {
+		.content {
 			list-style: none;
 			margin-left: 20px;
 		}

src/h5ai/css/main.less

@@ -39,10 +39,9 @@ body > nav {
 	left: 0;
 	top: 0;
 	font-size: 0.85em;
-	background-color: rgb(240,240,240);
-	border-bottom: 1px solid rgb(225,225,225);
-	.box-shadow( 0 0 30px #555 );
-
+	background-color: rgb(241,241,241);
+	border-bottom: 2px solid rgb(210,210,210);
+	
 	span.jsDisabledFallback {
 		display: block;
 		height: 30px;
@@ -57,7 +56,7 @@ body > nav {
 		
 		&.crumb {
 			float: left;
-			border-right: 1px dotted rgb(225,225,225);
+			border-right: 1px solid rgb(231,231,231);
 			.hint {
 				margin-left: 8px;
 				font-style: italic;
@@ -76,7 +75,7 @@ body > nav {
 		}
 		&.view {
 			float: right;
-			border-left: 1px dotted rgb(225,225,225);
+			border-left: 1px solid rgb(230,230,230);
 		}
 		&:hover, &:hover a {
 			background-color: rgba(255,255,255,0.5);
@@ -130,12 +129,12 @@ body > footer {
 	left: 0;
 	bottom: 0;
 	padding: 10px 0;
-	border-top: 1px solid rgb(225,225,225);
-	background-color: rgb(240,240,240);
+	background-color: rgb(241,241,241);
+	border-top: 2px solid rgb(210,210,210);
+	
 	color: #999;
 	font-size: 0.85em;
 	text-align: center;
-	.box-shadow( 0 0 30px #555 );
 
 	a, a:visited {
 		color: #555;

src/h5ai/js/inc/file.js

@@ -1,22 +1,26 @@
 
 var File = function ( utils, folder, tableRow ) {
 
+	var THIS = this;
+
+
+
 	if ( ! /\/$/.test( folder ) ) {
 		folder += "/";
 	};
 
 	if ( tableRow !== undefined ) {
 		var $tds = $( tableRow ).find( "td" );
-		var $img = $( $tds.get( 0 ) ).find( "img" );
-		var $a= $( $tds.get( 1 ) ).find( "a" );
+		var $img = $tds.eq( 0 ).find( "img" );
+		var $a= $tds.eq( 1 ).find( "a" );
 
 		this.parentFolder = folder;
 		this.icon16 = $img.attr( "src" );
 		this.alt = $img.attr( "alt" );
 		this.label = $a.text();
-		this.href = $a.attr("href");
-		this.date = $( $tds.get(2) ).text();
-		this.size = $( $tds.get(3) ).text();
+		this.href = decodeURI( $a.attr("href") );
+		this.date = $tds.eq( 2 ).text();
+		this.size = $tds.eq( 3 ).text();
 	} else {
 		var splits = utils.splitPathname( folder );
 
@@ -35,65 +39,105 @@ var File = function ( utils, folder, tableRow ) {
 	this.icon48 = this.icon16.replace( "16x16", "48x48" );
 	this.isFolder = ( this.alt === "[DIR]" );
 	this.isParentFolder = ( this.isFolder && this.label === "Parent Directory" );
-	this.absHref = this.isParentFolder ? this.href : this.parentFolder + this.href;			
+	this.absHref = this.isParentFolder ? this.href : this.parentFolder + this.href;
+	this.status = undefined;  // undefined, "h5ai" or HTTP response code
 	this.content = undefined;
+	this.$treeHtml = undefined;
 
 
-	this.isComplete = function () {
+	this.isEmpty = function() {
 
-		if ( this.isFolder ) {
-			if ( this.content === undefined ) {
+		if ( this.content === undefined ) {
+			return true;
+		};
+		for ( var prop in this.content ) {
+			if( this.content.hasOwnProperty( prop ) ) {
 				return false;
-			} else if ( this.content instanceof Array  ) {
-				for ( idx in this.content ) {
-					if ( !this.content[idx].isComplete() ) {
-						return false;
-					};
-				};
 			};
 		};
 		return true;
 	};
 
 
-	this.toHtml = function () {
+	this.updateTreeHtml = function () {
 
-		var $entry = $( "<div class='entry' />" );
+		var $html = $( "<div class='entry' />" ).data( "file", this );
+		var $blank = $( "<span class='blank' />" ).appendTo( $html );
 
 		try {
 			var $a = $( "<a href='" + this.absHref + "' />" )
-				.appendTo( $entry )
+				.appendTo( $html )
 				.append( $( "<span class='icon'><img src='" + this.icon16 + "' /></span>" ) )
 				.append( $( "<span class='label'>" + this.label + "</span>" ) );
 
 			if ( this.isFolder ) {
-				$entry.addClass( "folder" );
-				if ( this.absHref === document.location.pathname ) {
-					$a.find( ".icon img" ).attr( "src", "/h5ai/icons/16x16/folder-open.png" );
-					$entry.addClass( "current" );
-				};
-				if ( this.content instanceof Array ) {
-					var $ul = $( "<ul class='content' />" ).appendTo( $entry );
-					for ( idx in this.content ) {
-						$( "<li />" ).append( this.content[idx].toHtml() ).appendTo( $ul );
+
+				$html.addClass( "folder" );
+
+				// indicator
+				if ( this.status === undefined || !this.isEmpty() ) {
+					var $indicator = $( "<span class='indicator'><img src='/h5ai/images/tree.png' /></span>" );
+					if ( this.status === undefined ) {
+						$indicator.addClass( "unknown" );
+					} else {
+						$indicator.addClass( "open" );
 					};
-				} else if ( this.content === undefined ) {
-					$a.append( $( "<span class='hint'><img src='/h5ai/images/loading.png' /></span>" ) );
-				} else if ( this.content === 200 ) {
-					$a.find( ".icon img" ).attr( "src", "/h5ai/icons/16x16/folder-page.png" );
-					$a.append( $( "<span class='hint'><img src='/h5ai/images/page.png' /></span>" ) );
-				} else {
-					$a.append( $( "<span class='hint error'>" + this.content + "</span>" ) );
-					$entry.addClass( "notListable" );
+					$indicator.click( function( event ) {
+						if ( $indicator.hasClass( "unknown" ) ) { 
+							tree.fetchEntry( THIS.absHref, function ( newEntry ) {
+								$html.replaceWith( newEntry.updateTreeHtml() );
+							} );
+						} else if ( $indicator.hasClass( "open" ) ) {
+							$indicator.removeClass( "open" );
+							$html.find( "> ul.content" ).slideUp();
+						} else {
+							$indicator.addClass( "open" );
+							$html.find( "> ul.content" ).slideDown();				
+						};
+					} );
+					$blank.replaceWith( $indicator );
 				};
+
+				// is this the current folder?
+				if ( this.absHref === decodeURI( document.location.pathname ) ) {
+					$html.addClass( "current" );
+					$a.find( ".icon img" ).attr( "src", "/h5ai/icons/16x16/folder-open.png" );
+				};
+
+				// does it have subfolders?
+				if ( !this.isEmpty() ) {
+					var $ul = $( "<ul class='content' />" ).appendTo( $html );
+					for ( idx in this.content ) {
+						$( "<li />" ).append( this.content[idx].updateTreeHtml() ).appendTo( $ul );
+					};
+				};
+
+				// reflect folder status
+				if ( !isNaN( this.status ) ) {
+					if ( this.status === 200 ) {
+						$a.find( ".icon img" ).attr( "src", "/h5ai/icons/16x16/folder-page.png" );
+						$a.append( $( "<span class='hint'><img src='/h5ai/images/page.png' /></span>" ) );
+					} else {
+						$html.addClass( "error" );
+						$a.append( $( "<span class='hint'>" + this.status + "</span>" ) );
+					};
+				};
+
 			} else {
-				$entry.addClass( "file" );
+				$html.addClass( "file" );
 			};
 
+
 		} catch( err ) {
-			$( "<span class='fail'>fail</span>" ).appendTo( $entry );
+			console.log( "updateTreeHtml failed",  err );
+			$( "<span class='fail'>failed</span>" ).appendTo( $html );
 		};
 
-		return $entry;
+		if ( this.$treeHtml !== undefined ) {
+			this.$treeHtml.replaceWith( $html );
+		};
+		this.$treeHtml = $html;
+
+		return $html;
 	};
 };

src/h5ai/js/inc/h5ai.js

@@ -1,6 +1,10 @@
 
 var H5ai = function ( options ) {
 
+	var THIS = this;
+
+
+
 	/*******************************
 	 * config
 	 *******************************/
@@ -100,10 +104,7 @@ var H5ai = function ( options ) {
 	this.getViewmode = function () {
 	
 		var viewmode = localStorage.getItem( this.config.store.viewmode );
-		if ( $.inArray( viewmode, this.config.viewmodes ) >= 0 ) {
-			return viewmode;
-		};
-		return this.config.viewmodes[0];
+		return $.inArray( viewmode, this.config.viewmodes ) >= 0 ? viewmode : this.config.viewmodes[0];
 	};
 
 
@@ -112,6 +113,7 @@ var H5ai = function ( options ) {
 		if ( viewmode !== undefined ) {
 			localStorage.setItem( this.config.store.viewmode, viewmode );
 		};
+		viewmode = this.getViewmode();
 
 		$( "body > nav li.view" ).hide();
 		if ( this.config.viewmodes.length > 1 ) {
@@ -124,11 +126,11 @@ var H5ai = function ( options ) {
 		};
 
 		$( "body > nav li.view" ).removeClass( "current" );
-		if ( this.getViewmode() === "details" ) {
+		if ( viewmode === "details" ) {
 			$( "#viewdetails" ).closest( "li" ).addClass( "current" );
 			$( "#table" ).hide();
 			$( "#extended" ).addClass( "details-view" ).removeClass( "icons-view" ).show();
-		} else if ( this.getViewmode() === "icons" ) {
+		} else if ( viewmode === "icons" ) {
 			$( "#viewicons" ).closest( "li" ).addClass( "current" );
 			$( "#table" ).hide();
 			$( "#extended" ).removeClass( "details-view" ).addClass( "icons-view" ).show();
@@ -171,11 +173,10 @@ var H5ai = function ( options ) {
 
 	this.initTableView = function () {
 
-		var ref = this;
 		function getColumnClass( idx ) {
 
-			if ( idx >= 0 && idx < ref.config.columnClasses.length ) {
-				return ref.config.columnClasses[idx];
+			if ( idx >= 0 && idx < THIS.config.columnClasses.length ) {
+				return THIS.config.columnClasses[idx];
 			};
 			return "unknown";
 		};
@@ -200,11 +201,11 @@ var H5ai = function ( options ) {
 		var $ul = $( "<ul/>" );
 
 		// headers
-		var $li = $( "<li class='header' />" ).appendTo( $ul );
-		$( "<a class='icon'></a>" ).appendTo( $li );
 		var $label = $( "th.name a" );
 		var $date = $( "th.date a" );
 		var $size = $( "th.size a" );
+		var $li = $( "<li class='header' />" ).appendTo( $ul );
+		$( "<a class='icon'></a>" ).appendTo( $li );
 		$( "<a class='label' href='" + $label.attr( "href" ) + "'><span class='l10n-columnName'>" + $label.text() + "</span></a>" ).appendTo( $li );
 		$( "<a class='date' href='" + $date.attr( "href" ) + "'><span class='l10n-columnLastModified'>" + $date.text() + "</span></a>" ).appendTo( $li );
 		$( "<a class='size' href='" + $size.attr( "href" ) + "'><span class='l10n-columnSize'>" + $size.text() + "</span></a>" ).appendTo( $li );
@@ -227,68 +228,48 @@ var H5ai = function ( options ) {
 		} else if ( order.indexOf( "C=S" ) >= 0 ) {
 			$li.find( "a.size" ).prepend( $icon );
 		};
-		
+
 		// entries
 		$( "#table td.name a" ).closest( "tr" ).each( function () {
-			var $tr = $( this );
-			var $img = $tr.find( "td.icon img" );
-			var iconsmall = $img.attr( "src" );
-			var iconbig = iconsmall.replace( "16x16", "48x48" );
-			var alt = $img.attr( "alt" );
-			var $link = $tr.find( "td.name a" );
-			var label = $link.text();
-			var href = $link.attr( "href" );
-			var date = $tr.find( "td.date" ).text();
-			var size = $tr.find( "td.size" ).text();
+			var file = new File( utils, decodeURI( document.location.pathname ), this );
 
-			var $li = $( "<li class='entry' />" ).appendTo( $ul );
-			if ( alt === "[DIR]" ) {
-				$li.addClass( "folder" );
+			var $li = $( "<li class='entry' />" ).data( "file", file ).appendTo( $ul );
+			if ( file.isFolder ) {
+				$li.addClass( "folder" )
+					.click( function() {
+						THIS.triggerFolderClick( file );
+					} );
 			} else {
-				$li.addClass( "file" );					
-			}
-			var $a = $( "<a href='" + href + "' />" ).appendTo( $li );
-			$( "<span class='icon small'><img src='" + iconsmall + "' alt='" + alt + "' /></span>" ).appendTo( $a );
-			$( "<span class='icon big'><img src='" + iconbig + "' alt='" + alt + "' /></span>" ).appendTo( $a );
-			$( "<span class='label'>" + label + "</span>" ).appendTo( $a );
-			$( "<span class='date'>" + date + "</span>" ).appendTo( $a );
-			$( "<span class='size'>" + size + "</span>" ).appendTo( $a );
+				$li.addClass( "file" )
+					.click( function() {
+						THIS.triggerFileClick( file );
+					} );
+			};
+			var $a = $( "<a href='" + file.href + "' />" ).appendTo( $li );
+			$( "<span class='icon small'><img src='" + file.icon16 + "' alt='" + file.alt + "' /></span>" ).appendTo( $a );
+			$( "<span class='icon big'><img src='" + file.icon48 + "' alt='" + file.alt + "' /></span>" ).appendTo( $a );
+			var $label = $( "<span class='label'>" + file.label + "</span>" ).appendTo( $a );
+			$( "<span class='date'>" + file.date + "</span>" ).appendTo( $a );
+			$( "<span class='size'>" + file.size + "</span>" ).appendTo( $a );
+			if ( file.isParentFolder ) {
+				$label.addClass( "l10n-parentDirectory" );
+				$li.addClass( "parentfolder" );
+			};
 		} );
 
 		$( "#extended" ).append( $ul );
 
-		$entries = $( "#extended .entry" );
-
 		// empty
-		if ( $entries.size() === 0 || $entries.size() === 1 && $entries.find( ".label" ).text() === "Parent Directory" ) {
+		if ( $ul.children( ".entry:not(.parentfolder)" ).size() === 0 ) {
 			$( "#extended" ).append( $( "<div class='empty'>empty</div>" ) );
 		};
 
-		// parent folder
-		if ( $entries.size() > 0 ) {
-			$entry0 = $( $entries.get(0) );
-			if ( $entry0.find( ".label" ).text() === "Parent Directory" ) {
-				$entry0.find( ".label" ).addClass( "l10n-parentDirectory" );
-				$entry0.addClass( "parentfolder" );
-			};
-		};
-
 		// in case of floats
 		$( "#extended" ).append( $( "<div class='clearfix' />" ) );
-
-		// click callbacks
-		var ref = this;
-		$( "#extended .entry.folder" )
-			.click( function() {
-				ref.triggerFolderClick( $( this ).find( ".label" ).text() );
-			} );
-		$( "#extended .entry.file" )
-			.click( function() {
-				ref.triggerFileClick( $( this ).find( ".label" ).text() );
-			} );
 	};
 
 
+
 	/*******************************
 	 * init views
 	 *******************************/
@@ -298,14 +279,13 @@ var H5ai = function ( options ) {
 		this.initTableView();
 		this.initExtendedView();
 
-		var ref = this;
 		$( "#viewdetails" ).closest( "li" )
 			.click( function () {
-				ref.applyViewmode( "details" );
+				THIS.applyViewmode( "details" );
 			} );
 		$( "#viewicons" ).closest( "li" )
 			.click( function () {
-				ref.applyViewmode( "icons" );
+				THIS.applyViewmode( "icons" );
 			} );
 	};
 

src/h5ai/js/inc/tree.js

@@ -1,7 +1,7 @@
 
 var Tree = function ( utils, h5ai ) {
 
-	var thistree = this;
+	var THIS = this;
 	var contentTypeRegEx = /^text\/html;h5ai=/;
 
 	this.init = function () {
@@ -9,7 +9,6 @@ var Tree = function ( utils, h5ai ) {
 		if ( h5ai.config.showTree ) {
 			this.checkCrumb();
 			this.checkCurrentFolder();
-			this.initShifting();
 			this.populateTree();
 		};
 	};
@@ -18,13 +17,14 @@ var Tree = function ( utils, h5ai ) {
 	this.checkCrumb = function () {
 
 		$( "li.crumb a" ).each( function() {
-			
+
 			var $a = $( this );
 			var pathname = $a.attr( "href" );
-			thistree.checkPathname( pathname, function ( status ) {
-				if ( status !== 0 ) {
-					$( "<img class='hint' src='/h5ai/images/page.png' alt='not listable' />" ).appendTo( $a );
-					if ( status !== 200 ) {
+			THIS.checkPathname( pathname, function ( status ) {
+				if ( !isNaN( status ) ) {
+					if ( status === 200 ) {
+						$( "<img class='hint' src='/h5ai/images/page.png' alt='not listable' />" ).appendTo( $a );
+					} else {
 						$( "<span class='hint'>(" + status + ")</span>" ).appendTo( $a );
 					};
 				};
@@ -36,7 +36,7 @@ var Tree = function ( utils, h5ai ) {
 	this.checkCurrentFolder = function () {
 
 		$( "#extended li.entry.folder" ).each( function() {
-			
+
 			var $entry = $( this );
 			if ( $entry.hasClass( "parentfolder" ) ) {
 				return;
@@ -44,111 +44,79 @@ var Tree = function ( utils, h5ai ) {
 
 			var $a = $entry.find( "a" );
 			var pathname = decodeURI( document.location.pathname ) + $a.attr( "href" );
-			thistree.checkPathname( pathname, function ( status ) {
-				if ( status === 200 ) {
-					$a.find( ".icon.small img" ).attr( "src", "/h5ai/icons/16x16/folder-page.png" );
-					$a.find( ".icon.big img" ).attr( "src", "/h5ai/icons/48x48/folder-page.png" );
-				} else if ( status !== 0 ) {
-					$entry.addClass( "notListable" );
-					$a.find( ".label" )
-						.append( " " )
-						.append(  $( "<span class='error'>" + status + "</span>" ) );
+			THIS.checkPathname( pathname, function ( status ) {
+				if ( !isNaN( status ) ) {
+					if ( status === 200 ) {
+						$a.find( ".icon.small img" ).attr( "src", "/h5ai/icons/16x16/folder-page.png" );
+						$a.find( ".icon.big img" ).attr( "src", "/h5ai/icons/48x48/folder-page.png" );
+					} else {
+						$entry.addClass( "error" );
+						$a.find( ".label" )
+							.append( " " )
+							.append(  $( "<span class='hint'>" + status + "</span>" ) );
+					};
 				};
 			} );
 		} );
 	};
 
 
-	this.shiftTree = function ( show ) {
-		
-		var $tree = $( "#tree" );
-		var $extended = $( "#extended" );
-		var show = show || false;
-
-		if ( $tree.outerWidth() < $extended.offset().left || show ) {
-			$tree.stop().animate( { left: 0 } );										
-		} else {
-			$tree.stop().animate( { left: 24 - $tree.outerWidth() } );					
-		};
-	};
-	
-
-	this.initShifting = function () {
-		
-		$( "#tree" ).hover(
-			function () {
-				thistree.shiftTree( true );
-			},
-			function () {
-				thistree.shiftTree();
-			}
-		);
-		$( window ).resize( function() {
-			thistree.shiftTree();	
-		} );
-	};
-
-	
 	this.populateTree = function () {
 
 		var $tree = $( "#tree" );
-		$tree.css( { left: -400 } ).show();
-
-		this.shiftTree();
-		
-		this.fetchTree( decodeURI( document.location.pathname ), function( entry ) {
-			$tree.empty().append( entry.toHtml() );
-			thistree.shiftTree();
-		} );
-	};
-
-	
-	this.fetchTree = function ( pathname, callback ) {
-		
-		this.walkBack( pathname, function( walkbackedPathname ) {
-			var entry = new File( utils, walkbackedPathname );
-			thistree.fetchEntriesRecursive( walkbackedPathname, function ( content ) {
-				entry.content = content;
-				callback( entry );
-			} );
-		} );
-	};
-
-
-	this.walkBack = function ( pathname, callback ) {
-
-		var splits = utils.splitPathname( pathname );
-		var parent = splits[0];
-		if ( parent === "" ) {
-			callback( pathname );
-		} else {
-			this.checkPathname( parent, function( state ) {
-				if ( state === 0 ) {
-					thistree.walkBack( parent, callback );
-				} else {
-					callback( pathname );
-				};
-			} );
-		};
-	};
-
-
-	this.fetchEntriesRecursive = function ( pathname, callback ) {
-
-		this.fetchEntries( pathname, false, function ( entries ) {
-			if ( entries instanceof Array ) {
-				for ( idx in entries ) {
-					( function ( entry ) {
-						if ( entry.isFolder ) {
-							thistree.fetchEntriesRecursive( entry.absHref, function( content ) {
-								entry.content = content;
-								callback( entries );
-							} );
-						};
-					} ) ( entries[idx] );
-				};
+		var $extended = $( "#extended" );
+		var shiftTree = function ( show ) {
+			if ( $tree.outerWidth() < $extended.offset().left || show === true ) {
+				$tree.stop().animate( { left: 0 } );										
+			} else {
+				$tree.stop().animate( { left: 18 - $tree.outerWidth() } );					
 			};
-			callback( entries );
+		};
+
+		$tree.hover(
+				function () {
+					shiftTree( true );
+				},
+				function () {
+					shiftTree();
+				}
+		);
+
+		$( window ).resize( function() {
+			shiftTree();	
+		} );
+
+		this.fetchTree( decodeURI( document.location.pathname ), function( entry ) {
+			$tree.append( entry.updateTreeHtml() );
+			shiftTree();
+		} );
+	};
+
+
+	this.fetchTree = function ( pathname, callback, child ) {
+
+		this.fetchEntry( pathname, function ( entry ) {
+			if ( child !== undefined ) {
+				entry.content[ child.absHref ] = child;
+			};
+
+			var parent = utils.splitPathname( pathname )[0];
+			if ( parent === "" ) {
+				callback( entry );
+			} else {
+				THIS.fetchTree( parent, callback, entry );				
+			};
+		} );
+	};
+
+
+	this.fetchEntry = function ( pathname, callback ) {
+
+		this.fetchEntries( pathname, false, function ( status, entries ) {
+			var entry = new File( utils, pathname );
+			entry.status = status;
+			entry.content = entries;
+			callback( entry );
 		} );
 	};
 
@@ -156,9 +124,11 @@ var Tree = function ( utils, h5ai ) {
 	this.fetchEntries = function ( pathname, includeParent, callback ) {
 
 		this.checkPathname( pathname, function ( status ) {
+
 			console.log( "checkPathname", pathname, status );
-			if ( status !== 0 ) {
-				callback( status );
+
+			if ( status !== "h5ai" ) {
+				callback( status, {} );
 				return;
 			};
 
@@ -167,22 +137,28 @@ var Tree = function ( utils, h5ai ) {
 				type: "GET",
 				dataType: "html",
 				error: function ( xhr ) {
-					callback( xhr.status ); // since it was checked before this should never happen
+					callback( xhr.status, {} ); // since it was checked before this should never happen
 				},
 				success: function ( html, status, xhr ) {
 					if ( !contentTypeRegEx.test( xhr.getResponseHeader( "Content-Type" ) ) ) {
-						callback( xhr.status ); // since it was checked before this should never happen
+						callback( xhr.status, {} ); // since it was checked before this should never happen
 						return;
 					};
 
-					var entries = [];
+					var entries =  {};
 					$( html ).find( "#table table td" ).closest( "tr" ).each( function () { 
 						var entry = new File( utils, pathname, this );
-						if ( !entry.isParentFolder || includeParent ) {
-							entries.push( entry );
+						if ( entry.isFolder && ( !entry.isParentFolder || includeParent ) ) {
+							entries[ entry.absHref ] = entry;
+							THIS.checkPathname( entry.absHref, function ( status ) {
+								if ( status !== "h5ai" ) {
+									entry.status = status;
+									entry.updateTreeHtml();
+								};
+							} );
 						};
 					} );
-					callback( entries );
+					callback( "h5ai", entries );
 				}
 			} );
 		} );
@@ -196,9 +172,7 @@ var Tree = function ( utils, h5ai ) {
 		if ( h5ai.config.folderStatus[ pathname ] !== undefined ) {
 			callback( h5ai.config.folderStatus[ pathname ] );
 			return;
-		};
-
-		if ( pathnameCache[ pathname ] !== undefined ) {
+		} else if ( pathnameCache[ pathname ] !== undefined ) {
 			callback( pathnameCache[ pathname ] );
 			return;
 		}; 
@@ -208,8 +182,8 @@ var Tree = function ( utils, h5ai ) {
 			type: "HEAD",
 			complete: function ( xhr ) {
 				var status = xhr.status;
-				if ( xhr.status === 200 && contentTypeRegEx.test( xhr.getResponseHeader( "Content-Type" ) ) ) {
-					status = 0;
+				if ( status === 200 && contentTypeRegEx.test( xhr.getResponseHeader( "Content-Type" ) ) ) {
+					status = "h5ai";
 				};
 				pathnameCache[ pathname ] = status;
 				callback( status );

src/h5ai/options.js

@@ -1,3 +1,7 @@
+/*
+ * h5ai %BUILD_VERSION%
+ * Options and localization 
+ */
 
 h5aiOptions = {
 
@@ -18,7 +22,7 @@ h5aiOptions = {
 	 * folderStatus below to avoid such requests.
 	 * It might also affect performance significantly.
 	 */
-	showTree: false,
+	showTree: true,
 
 	/*
 	 * Associative array of folders and their HTTP status codes to

target/dot.htaccess

@@ -1,5 +1,5 @@
 ################################
-# h5ai 0.6
+# h5ai 0.7
 # customized .htaccess
 ################################
 
@@ -56,7 +56,7 @@
 
 	IndexOrderDefault    Ascending Name
 
-	IndexOptions         Type=text/html;h5ai=0.6
+	IndexOptions         Type=text/html;h5ai=0.7
 	IndexOptions         Charset=UTF-8
 	IndexOptions         FancyIndexing
 	IndexOptions         HTMLTable

target/h5ai/footer.html

@@ -11,7 +11,7 @@
 			<img class="techclass" src="/h5ai/images/html5-storage.png" alt="html5-storage" />
 			<img class="techclass" src="/h5ai/images/html5-css3.png" alt="html5-css3" />
 		</a>
-		<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai 0.6">h5ai</a>
+		<a href="http://larsjung.de/h5ai" target="_blank" title="h5ai 0.7">h5ai</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>

target/h5ai/header.html

@@ -3,7 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<title>Directory index · styled with h5ai</title>
-	<meta name="h5ai-version" content="h5ai 0.6">
+	<meta name="h5ai-version" content="h5ai 0.7">
 	<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">

target/h5ai/options.js

@@ -1,3 +1,7 @@
+/*
+ * h5ai 0.7
+ * Options and localization 
+ */
 
 h5aiOptions = {
 
@@ -18,7 +22,7 @@ h5aiOptions = {
 	 * folderStatus below to avoid such requests.
 	 * It might also affect performance significantly.
 	 */
-	showTree: false,
+	showTree: true,
 
 	/*
 	 * Associative array of folders and their HTTP status codes to