More refactoring. Added global includes.

README.md

@@ -1,44 +1,74 @@
 h5ai - a beautified Apache index
 ================================
 
-Screenshot
+Screenshots
-----------
+-----------
 
-<img
+<a href="http://repo.larsjung.de/screens/h5ai-v0.2.1-details.png" target="_blank" style="float: left">
-	width="800"
+	<img src="http://repo.larsjung.de/screens/h5ai-v0.2.1-details.png" width="400px" alt="screenshot" title="screenshot"/>
-	src="http://repo.larsjung.de/screens/h5ai.png"
+</a>
-	alt="screenshot"
+<a href="http://repo.larsjung.de/screens/h5ai-v0.2.1-icons.png" target="_blank" style="float: right">
-	title="screenshot"
+	<img src="http://repo.larsjung.de/screens/h5ai-v0.2.1-icons.png" width="400px" alt="screenshot" title="screenshot" />
-	style="border: 1px solid #ccc"
+</a>
-/>
+<div style="clear: both"/>
-
-
-compare it to apache's built in autoindex:
-
-<img
-	width="800"
-	src="http://repo.larsjung.de/screens/ai.png"
-	alt="apache autoindex"
-	title="apache autoindex"
-	style="border: 1px solid #ccc"
-/>
 
 
 Live example
 ------------
 
-For a live experience browse [here](http://repo.larsjung.de/h5ai-sample)  
+View a [sample folder](http://repo.larsjung.de/h5ai-sample)  
 *(the files are all empty to save webspace)*
 
 
 Install
 -------
 
-* Copy the `h5ai` folder to the web-root directory of your server or alternativly set an alias `/h5ai/` to
+1. Copy the `h5ai` folder to the web-root directory of your server or alternativly set an alias `/h5ai/` to
-  this folder.
+   this folder.
-* Add the content of file `dot.htaccess` to the `.htaccess` file in the directory
+2. Add the content of file `dot.htaccess` to the `.htaccess` file in the directory
-  you want to be indexed (you might have to create this file). This directory and any subdirectories will be
+   you want to be styled (you might have to create this file). This directory and any subdirectories will be
-  styled.
+   styled by h5ai.
+
+
+Changelog
+---------
+
+
+### v0.2.3
+*2011-06-17*
+
+* more refactoring in main.js
+* added custom js support, and global includes
+
+
+### 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
+
+
+Author
+------
+
+[Lars Jung](http://larsjung.de)  
+[h5ai on github](http://github.com/larrrs/h5ai)  
 
 
 License
@@ -53,4 +83,3 @@ It is based on the awesome [HTML5 Boilerplate](http://html5boilerplate.com) and
 [Faenza icon set](http://tiheum.deviantart.com/art/Faenza-Icons-173323228), please respect their rights.
 
 
-

dot.htaccess

@@ -44,21 +44,26 @@
 	IndexOptions         IgnoreCase
 	IndexOptions         IconsAreLinks
 	IndexOptions         VersionSort
+	IndexOptions         NameWidth=*
 
 
 	################################
 	# icon mapping
 	################################
 
-	AddIcon              /h5ai/icons/log.png         log  Log  LOG
+	AddIcon              /h5ai/icons/parent.png      ..
-	AddIcon              /h5ai/icons/authors.png     AUTHORS
+	AddIcon              /h5ai/icons/folder.png      ^^DIRECTORY^^
-	AddIcon              /h5ai/icons/install.png     INSTALL
+	AddIcon              /h5ai/icons/blank.png       ^^BLANKICON^^
-	AddIcon              /h5ai/icons/copying.png     COPYING  LICENSE
+
 	AddIcon              /h5ai/icons/readme.png      README
+	AddIcon              /h5ai/icons/copying.png     COPYING  LICENSE
+	AddIcon              /h5ai/icons/install.png     INSTALL
+	AddIcon              /h5ai/icons/authors.png     AUTHORS
+	AddIcon              /h5ai/icons/log.png         LOG  Log  log
 
 	AddIcon              /h5ai/icons/css.png         .less
-	AddIcon              /h5ai/icons/makefile.png    .pom  pom.xml  build.xml
 	AddIcon              /h5ai/icons/script.png      .conf  .ini  .sh  .shar  .csh  .ksh  .tcl
+	AddIcon              /h5ai/icons/makefile.png    .pom  pom.xml  build.xml
 	AddIcon              /h5ai/icons/bin.png         .so  .o
 
 	AddIcon              /h5ai/icons/zip.png         .zip  .Z  .z  .jar  .war
@@ -105,10 +110,6 @@
 
 	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,6 +1,7 @@
-		<!-- generated code ends here -->
+			<!-- generated code ends here -->
-		<div id="empty">empty</div>
+		</section>
-		<section id="h5ai-bottom"></section>
+		<section id="icons"></section>
+		<section id="bottom"></section>
 	</section>
 	<footer>
 		<a id="html5" href="http://www.w3.org/html/logo/" target="_blank" title="HTML5 semantics, storage & CSS3">
@@ -9,7 +10,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://github.com/larrrs/h5ai" target="_blank" title="h5ai v0.2">h5ai</a>
+		<a href="http://github.com/larrrs/h5ai" target="_blank" title="h5ai v0.2.3">h5ai</a>
 		using
 		<a href="http://html5boilerplate.com" target="_blank" title="a rock-solid default for HTML5 awesome">HTML5 Boilerplate</a>
 		and

h5ai/header.html

@@ -2,7 +2,7 @@
 <html>
 <head>
 	<meta charset="utf-8">
-	<title>Index</title>
+	<title>Index - styled with h5ai</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">
@@ -12,16 +12,17 @@
 	<nav>
 		<ul>
 			<li id="domain" class="crumb"><a href="/"><img src="/h5ai/icons/home.png" alt="domain" /><span>domain</span></a></li>
-			<li id="icons" class="view"><a href="#"><img src="/h5ai/icons/view-icons" alt="view-icons" />icons</a></li>
+			<li id="viewicons" class="view"><a href="#"><img src="/h5ai/icons/view-icons.png" alt="view-icons" />icons</a></li>
-			<li id="details" class="view" ><a href="#"><img src="/h5ai/icons/view-details.png" alt="view-details" />details</a></li>
+			<li id="viewdetails" class="view" ><a href="#"><img src="/h5ai/icons/view-details.png" alt="view-details" />details</a></li>
 		</ul>
 		<div class="clearfix"></div>
 	</nav>
 	<section id="content">
-		<section id="h5ai-top"></section>
+		<section id="top"></section>
-		<!--
+		<section id="details">
-			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
+				The following code was generated by apache's autoindex module. It is not valid HTML 5 for the
-			removed via javascript. The actual page should render as perfect HTML 5, even if the produced
+				reason, that 'align' and 'valign' attributes on the td element are obsolete. Both of them are
-			source is not valid HTML 5.
+				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

@@ -15,40 +15,45 @@ a, a:visited {
 	text-decoration: none;
 }
 a:hover {
-	color: #333;
+	color: #e80;
 }
 
 
 nav {
 	position: fixed;
+	z-index: 1;
 	width: 100%;
-	left: 0px;
+	left: 0;
-	top: 0px;
+	top: 0;
 	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;
+	-webkit-box-shadow: 0 0 30px #555;
-	-moz-box-shadow: 0px 0px 30px #555;
+	-moz-box-shadow: 0 0 30px #555;
-	box-shadow: 0px 0px 30px #555;
+	box-shadow: 0 0 30px #555;
 }
 nav li {
 	cursor: pointer;
 	opacity: 0.7;
+	-webkit-transition: all 0.2s ease-in-out;
+	-moz-transition: all 0.2s ease-in-out;
+	-o-transition: all 0.2s ease-in-out;
+	transition: all 0.2s ease-in-out;
 }
 nav li:hover, nav li:hover a {
+	color: #e80;
 	background-color: rgba(255,255,255,0.5);
 	opacity: 1.0;
 }
 nav a {
-	display: block
+	display: block;
 	height: 30px;
 	line-height: 30px;
-	padding: 4px 10px;
+	padding: 0 10px;
 }
 nav img {
 	vertical-align: bottom;
-	padding-right: 6px;
+	padding: 0 6px 6px 0;
-	padding-bottom: 6px;
 }
 nav li.crumb {
 	float: left;
@@ -60,114 +65,116 @@ nav li.view {
 }
 
 
-section#h5ai-top {
+#top {
 	display: none;
-	padding: 0px 0px 10px 0px;
+	padding-bottom: 10px;
-	margin: 0px 0px 80px 0px;
+	margin-bottom: 80px;
-	border-bottom: 1px solid #999;
+	border-bottom: 2px dashed #ddd;
+}
+#bottom {
+	display: none;
+	padding-top: 10px;
+	margin-top: 80px;
+	border-top: 2px dashed #ddd;
 }
 
 
-section#h5ai-bottom {
+#content {
-	display: none;
-	padding: 10px 0px 0px 0px;
-	margin: 80px 0px 0px 0px;
-	border-top: 1px solid #999;
-}
-
-
-section#content {
 	max-width: 980px;
-	margin: 0px auto;
+	margin: 0 auto;
 }
 
 
-table {
+#details {
+	display: none;
+}
+#details table {
+	display: block;
 	width: 100%;
 	border-collapse: collapse;
 }
-table {
+#details tr.entry:hover, #details tr.entry:hover a {
-	display: block;
-}
-table tr.entry:hover, table tr.entry:hover a {
 	background-color: rgb(235,245,250);
-	background-color: #eeeeee;
+	background-color: #f0f0f0;
-	color: #333;
+	color: #e80;
 	cursor: pointer;
 }
-table th, table td {
+#details th, #details td {
 	padding: 3px 6px;
 	text-align: left;
 	border: none;
 }
-table th {
+#details th {
 	padding-bottom: 18px;
 	opacity: 0.4;
+	-webkit-transition: all 0.2s ease-in-out;
+	-moz-transition: all 0.2s ease-in-out;
+	-o-transition: all 0.2s ease-in-out;
+	transition: all 0.2s ease-in-out;
 }
-table th.header:hover {
+#details th.header:hover, #details th.header:hover a {
+	color: #555;
 	cursor: pointer;
 	opacity: 0.9;
 }
-table th a, table th a:visited {
+#details th a, #details th a:visited {
 	color: #555;
 	font-weight: normal;
 }
-table th a img {
+#details th a img {
 	width: 12px;
 	height: 12px;
-	padding: 0px 8px;
+	padding: 0 8px;
 }
-table td {
+#details td {
 	border: 1px solid #ddd;
-	border-left: 0px;
+	border-left: none;
-	border-right: 0px;
+	border-right: none;
 }
-table .icon {
+#details .icon {
 	text-align: center;
 	width: 16px;
 }
-table .icon img {
+#details .icon img {
 	width: 16px;
 	height: 16px;
 	padding-top: 2px;
 }
-table .name {
+#details .name {
 	width: 682px;
 	max-width: 682px;
 	overflow: hidden;
 	white-space: nowrap;
 }
-table .date {
+#details .date {
 	text-align: right;
 	width: 160px;
 	min-width: 160px;
 	white-space: nowrap;
 }
-table .size {
+#details .size {
 	text-align: right;
 	width: 70px;
 	min-width: 70px;
 	white-space: nowrap;
 }
-
+#details .empty {
-
-div#empty {
-	display: none;
 	text-align: center;
-	margin: 50px 0px;
+	margin: 50px 0;
 	color: #ddd;
 	font-size: 5em;
 	font-weight: bold;
 }
 
 
-#box {
+#icons {
+	display: none;
 	padding: 10px;
 	border: 1px solid #eee;
 	border-radius: 15px;
 }
-#box .entry {
+#icons .entry {
-	margin: 10px;
+	margin: 8px;
 	padding: 8px;
 	width: 100px;
 	height: 120px;
@@ -176,40 +183,47 @@ div#empty {
 	overflow: hidden;
 	border-radius: 5px;
 	cursor: pointer;
+	border: 1px solid rgba(0,0,0,0);
 }
-#box .entry:hover {
+#icons .entry:hover {
-	-webkit-box-shadow: 0px 0px 20px #555;
+	color: #e80;
-	-moz-box-shadow: 0px 0px 20px #555;
+	border-color: #eee;
-	box-shadow: 0px 0px 20px #999;
+	-webkit-box-shadow: 0 0 20px #555;
+	-moz-box-shadow: 0 0 20px #555;
+	box-shadow: 0 0 20px #999;
 }
-#box .entry img {
+#icons .entry img {
 	width: 48px;
 	height: 48px;
-	margin: 0px 0px 8px 0px;
+	margin-bottom: 8px;
-}
-
-
-section#special {
-	display: none;
-	text-align: center;
-	margin: 50px 0px;
 }
 
 
 footer {
 	position: fixed;
+	z-index: 1;
 	width: 100%;
-	left: 0px;
+	left: 0;
-	bottom: 0px;
+	bottom: 0;
-	padding: 10px 0px;
+	padding: 10px 0;
 	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;
+	-webkit-box-shadow: 0 0 30px #555;
-	-moz-box-shadow: 0px 0px 30px #555;
+	-moz-box-shadow: 0 0 30px #555;
-	box-shadow: 0px 0px 30px #555;
+	box-shadow: 0 0 30px #555;
+}
+footer a, footer a:visited {
+	color: #555;
+	-webkit-transition: all 0.2s ease-in-out;
+	-moz-transition: all 0.2s ease-in-out;
+	-o-transition: all 0.2s ease-in-out;
+	transition: all 0.2s ease-in-out;
+}
+footer a:hover {
+	color: #e80;
 }
 
 
@@ -220,9 +234,13 @@ footer {
 	float: left;
 }
 #html5 img {
-	opacity: 0.4;
 	width: 20px;
 	height: 20px;
+	opacity: 0.4;
+	-webkit-transition: all 0.2s ease-in-out;
+	-moz-transition: all 0.2s ease-in-out;
+	-o-transition: all 0.2s ease-in-out;
+	transition: all 0.2s ease-in-out;
 }
 #html5:hover img {
 	opacity: 0.8;

h5ai/main.js

@@ -1,37 +1,85 @@
 ( function( $ ) {
 
-	var columnClasses = [ "icon", "name", "date", "size" ];
-	var defaultSortOrder = "C=N;O=A"
-	var h5aiPath = "/h5ai"
-	var views = [ "details", "icons" ];
 
+	/*******************************
+	 * init after dom load
+	 *******************************/
 
 	$( function() {
 
-		init();
+		applyViewmode();
+		initBreadcrumb();
+		initViews();
+		loadIncludes();
 	} );
 
 
-	function init () {
 
-		convertToHtml5();
+
-		addBreadcrumb();
+	/*******************************
-		addColumnClasses();
+	 * config
-		initTableRows();
+	 *******************************/
-		addSortOrderIcons();
+
-		addTopAndBottom();
+	var config = {
-		initViews();
+		columnClasses: [ "icon", "name", "date", "size" ],
-		checkView();
+		defaultSortOrder: "C=N;O=A",
+		viewmodes: [ "details", "icons" ],
+		store: {
+			viewmode: "h5ai.viewmode"
+		},
+		icons: {
+			crumb: "/h5ai/icons/crumb.png",
+			ascending: "/h5ai/icons/ascending.png",
+			descending: "/h5ai/icons/descending.png"
+		},
+		globalPath: "/h5ai/global/",
+		localPrefix: "h5ai.",
+		includes: {
+			top: "top.html",
+			bottom: "bottom.html",
+			include: "include.js"
+		}
 	};
 
 
-	function convertToHtml5() {
 
-		$( "td" ).removeAttr( "align" ).removeAttr( "valign" );
+
+	/*******************************
+	 * local stored viewmode
+	 *******************************/
+
+	function getViewmode() {
+	
+		var viewmode = localStorage.getItem( config.store.viewmode );
+		if ( $.inArray( viewmode, config.viewmodes ) ) {
+			return viewmode;
+		};
+		return config.viewmodes[0];
 	};
 
 
-	function addBreadcrumb() {
+	function applyViewmode( viewmode ) {
+
+		if ( viewmode !== undefined ) {
+			localStorage.setItem( config.store.viewmode, viewmode );
+		}	
+		if ( getViewmode() === "icons" ) {
+			$( "#details" ).hide();
+			$( "#icons" ).show();
+		} else {
+			$( "#details" ).show();
+			$( "#icons" ).hide();
+		}
+	};
+
+
+
+
+	/*******************************
+	 * breadcrumb
+	 *******************************/
+
+	function initBreadcrumb() {
 
 		$( "#domain span" ).text( document.domain );
 		var pathname = decodeURI( document.location.pathname );
@@ -42,7 +90,7 @@
 			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>" ) );
+				$ul.append( $( "<li class='crumb'><a href='" +  path + "'><img src='" + config.icons.crumb + "' alt='>' />" + part + "</a></li>" ) );
 			}
 		}
 
@@ -55,18 +103,30 @@
 	};
 
 
+
+
+	/*******************************
+	 * details view
+	 *******************************/
+
+	function makeTableHtml5Conform() {
+
+		$( "#details td" ).removeAttr( "align" ).removeAttr( "valign" );
+	};
+
+
 	function getColumnClass( idx ) {
 
-		if ( idx >= 0 && idx < columnClasses.length ) {
+		if ( idx >= 0 && idx < config.columnClasses.length ) {
-			return columnClasses[idx];
+			return config.columnClasses[idx];
 		}
 		return "unknown";
 	};
 
 
-	function addColumnClasses() {
+	function initTableColumns() {
 
-		$( "tr" ).each( function () {
+		$( "#details tr" ).each( function () {
 			var colIdx = 0;
 			$( this ).find( "th,td" ).each( function () {
 				$( this ).addClass( getColumnClass( colIdx ) );
@@ -78,117 +138,132 @@
 
 	function initTableRows() {
 
-		$( "th a" ).closest( "th" )
+		$( "#details th a" ).closest( "th" )
 			.addClass( "header" )
 			.click( function () {
 				document.location.href = $( this ).find( "a" ).attr( "href" );
 			} );
-		$( "td.name a" ).closest( "tr" )
+		$( "#details td.name a" ).closest( "tr" )
 			.addClass( "entry" )
 			.click( function () {
 				document.location.href = $( this ).find( "td.name a" ).attr( "href" );
 			} );
-		$dataRows = $( "td" ).closest( "tr" );
+		$dataRows = $( "#details td" ).closest( "tr" );
 		if ( $dataRows.size() === 0 || $dataRows.size() === 1 && $dataRows.find( "td.name a" ).text() === "Parent Directory" ) {
-			$( "#empty" ).show();
+			$( "#details" ).append( $( "<div class='empty'>empty</div>" ) );
 		}
 	};
 
 
-	function addSortOrderIcons() {
+	function addSortOrderIcon() {
 
 		var order = document.location.search;
 		if ( order === "" ) {
-			order = defaultSortOrder;
+			order = config.defaultSortOrder;
 		}
 		var $icon;
 		if ( order.indexOf( "O=A" ) >= 0 ) {
-			$icon = $( "<img src='" + h5aiPath + "/icons/ascending.png' class='sort' alt='ascending' />" );
+			$icon = $( "<img src='" + config.icons.ascending + "' class='sort' alt='ascending' />" );
 		} else {
-			$icon = $( "<img src='" + h5aiPath + "/icons/descending.png' class='sort' alt='descending' />" );
+			$icon = $( "<img src='" + config.icons.descending + "' class='sort' alt='descending' />" );
 		}
 		if ( order.indexOf( "C=N" ) >= 0 ) {
-			$( "th.name a" ).append( $icon );
+			$( "#details th.name a" ).append( $icon );
 		} else if ( order.indexOf( "C=M" ) >= 0 ) {
-			$( "th.date a" ).prepend( $icon );
+			$( "#details th.date a" ).prepend( $icon );
 		} else if ( order.indexOf( "C=S" ) >= 0 ) {
-			$( "th.size a" ).prepend( $icon );
+			$( "#details th.size a" ).prepend( $icon );
 		}
 	};
 
 
-	function addTopAndBottom() {
+	function initDetailsView() {
 
-		$( "#h5ai-top" ).load( "h5ai.top.html", function( response, status, xhr ) {
+		makeTableHtml5Conform();
-			if (status != "error") {
+		initTableColumns();
-				$( "#h5ai-top" ).show();
+		initTableRows();
-			}
+		addSortOrderIcon();
-		} );
+	};
-		$( "#h5ai-bottom" ).load( "h5ai.bottom.html", function( response, status, xhr ) {
+
-			if (status != "error") {
+
-				$( "#h5ai-bottom" ).show();
+
-			}
+
+	/*******************************
+	 * icons view
+	 *******************************/
+
+	function initIconsView() {
+
+		var $div = $( "<div></div>" );
+		$( "#details td.name a" ).closest( "tr" ).each( function () {
+			var $tr = $( this );
+			var icon = $tr.find( "td.icon img" ).attr( "src" ).replace( "icons", "images" );
+			var $link = $tr.find( "td.name a" );
+			$( "<div class='entry'><img src='" + icon + "' /><div class='label'>" + $link.text() + "</div></div>" )
+				.click( function () {
+					document.location.href = $link.attr( "href" );
+				} ).
+				appendTo( $div );
 		} );
+		$div.append( $( "<div class='clearfix'></div>" ) );
+		$( "#icons" ).append( $div );
 	};
 
 
-	function checkView() {
-		
-		if ( getView() === "icons" ) {
-			$( "#content table" ).hide();
-			$( "#content #empty" ).hide();
-			$( "#content #box" ).show();
-		} else {
-			$( "#content table" ).show();
-			$( "#content #box" ).hide();
-		}
-	};
 
 
-	function getView() {
+	/*******************************
-	
+	 * init views
-		var view = localStorage.getItem( "h5ai.view" );
+	 *******************************/
-		if ( $.inArray( view, views ) ) {
-			return view;
-		};
-		return views[0];
-	};
 
-
-	function setView( view ) {
-	
-		localStorage.setItem( "h5ai.view", view );
-		checkView();
-	};
-
-	
 	function initViews() {
 
-		var $box = $( "<div id=\"box\"></div>" );
+		initDetailsView();
-		$( "td.name a" ).closest( "tr" ).each( function () {
+		initIconsView();
-			var $tr = $( this );
+
-			var icon = $tr.find( "td.icon img" ).attr( "src" ).replace( "icon", "image" );
+		$( "#viewdetails" ).closest( "li" )
-			var name = $tr.find( "td.name a" ).text();
+			.click( function () {
-			$( "<div class=\"entry\"></div>" )
+				applyViewmode( "details" );
-				.append( $( "<img src=\"" + icon + "\" />" ) )
+			} );
-				.append( $( "<div class=\"label\">" + name + "</div>" ) )
+		$( "#viewicons" ).closest( "li" )
-				.click( function () {
+			.click( function () {
-					document.location.href = $tr.find( "td.name a" ).attr( "href" );
+				applyViewmode( "icons" );
-				} ).
+			} );
-				appendTo( $box );
+	};
+
+
+
+
+	/*******************************
+	 * includes
+	 *******************************/
+
+	function loadIncludes() {
+
+		$( "#top" ).load( config.localPrefix + config.includes.top, function( response, status ) {
+			if (status !== "error") {
+				$( "#top" ).show();
+			} else {
+				$( "#top" ).load( config.globalPath + config.includes.top, function( response, status ) {
+					if (status !== "error") {
+						$( "#top" ).show();
+					}
+				} );
+			}
 		} );
-		$box.append( $( "<div class=\"clearfix\"></div>" ) );
+		$( "#bottom" ).load( config.localPrefix + config.includes.bottom, function( response, status ) {
-		$( "#content table" ).after( $box );
+			if (status !== "error") {
-
+				$( "#bottom" ).show();
-
+			} else {
-		$( "#details" ).closest( "li" )
+				$( "#bottom" ).load( config.globalPath + config.includes.bottom, function( response, status ) {
-			.click( function () {
+					if (status !== "error") {
-				setView( "details" );
+						$( "#bottom" ).show();
-			} );
+					}
-		$( "#icons" ).closest( "li" )
+				} );
-			.click( function () {
+			}
-				setView( "icons" );
+		} );
-			} );
+		$.getScript( config.globalPath + config.includes.include );
+		$.getScript( config.localPrefix + config.includes.include );
 	};
 
 } )( jQuery );