bit dojo labs : file explorer

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>BgSlide JS</title>

<style type="text/css">

	body{ background: #333; color: #555; font-family: Arial, Helvetica, sans-serif; font-size: 75%; line-height: 1.5; margin: 0; padding: 0; text-align: center; position: relative; }
	a{ color: #579; text-decoration: none; } a:hover{ color: #CC0000; }
	#content{ position: relative; margin: 10% auto; text-align: left; width: 36em; background: #eee; border: 1px solid #aaa; padding: 10px 10px; opacity: 0.9; z-index: 5;	}

	/* Two <img> layers fix positioned at (0,0) */
	#bg-layer1, #bg-layer2 {
		background: #333;
		position: fixed;
		top: 0; 
		left: 0;
		padding: 0;	
		margin: 0;
		z-index: 1;
		width: 100%;
		min-width: 1600px;
	}
	
	/* Layer 2 needs to be on top */
	#bg-layer2 {
		z-index: 2;	
	}
	
	#loading-indicator {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1338;
		margin: 5px;
		background-color: #000;
		color: #eee;
		font-family: arial, sans-serif;
		font-size: 12px;
		background-image: url('http://bitdojo.net/wp-dojo/loading2-black.gif');
		background-repeat: no-repeat;
		background-position: 5px 5px;
		width: 27px;
		height: 26px;
	}
	
	#BroswerNotice {
		position: absolute;
		top: 10px; 
		left: 10px;
		color: #333;
		background-color: #ffa;
		padding: 10px;
		width: 240px;
		text-align:left;
		border: 1px solid #aaa;
		z-index: 666;
	}
	
	#BroswerNotice p {
		margin: 10px 0 10px 0;
	}
	
	#BroswerNotice a {
		color: #333;
		text-decoration: underline;
	}
	
</style>

<!-- Include the required js -->
<script src="./js/lib/prototype.js" type="text/javascript"></script> <!-- http://prototypejs.org -->
<script src="./js/lib/scriptaculous.js" type="text/javascript"></script> <!-- http://script.aculo.us -->
<script src="./js/bgslide.js" type="text/javascript"></script>

</head>

<body>

<div id="content">
	<h1>BgSlide JS</h1>
	<p>Background image slideshow for your webpage.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed quis magna pulvinar metus luctus volutpat. Aliquam erat volutpat. Donec urna. Suspendisse vel sapien ut metus tempus varius. Aenean laoreet massa vitae mi. In vitae ipsum facilisis eros feugiat placerat. Sed ultricies ullamcorper mauris. Duis sed lorem. Phasellus in leo ut purus pulvinar accumsan. Sed vitae ligula a tellus porttitor congue. Maecenas quis augue mattis enim rutrum feugiat. Sed ultrices nibh ac est. Nullam faucibus urna nec nisl. Suspendisse sodales magna nec nisi. Aenean ipsum.</p>
	<p>BgSlide JS &copy;2009 <a href="http://bitdojo.net">Bit Dojo</a>, background images: <a href="http://deadpxl.deviantart.com/art/Aqua-Dreams-Wallpapers-61934627">Aqua Dreams</a> by <a href="http://deadpxl.deviantart.com">deadPxl</a></p>
</div>

<!-- This is where the images are displayed. Two <img> are required for transition effects. -->
<img id="bg-layer1" alt="Background Image" src="" style="display:none;" />
<img id="bg-layer2" alt="Background Image" src="" style="display:none;" />

<!-- Loading indicator -->
<div id="loading-indicator" style="display:none;"></div>
<script type="text/javascript">$('loading-indicator').show();</script>

<!-- A friendly browser upgrade notice -->
<div id="BroswerNotice" style="display:none;">
<p><b>Oh no!</b></p>
<p>It seems your browser does not fully support web standards.</p>
<p>In order to experience this and many other great websites in all their glory, you should upgrade your browser.</p>
<p>We recommend Mozilla Firefox, which can be downloaded free <a href="http://mozilla.com">here</a>.</p>
</div>

<!-- Show browser upgrade notice for IE -->
<!--[if IE]>
<script type="text/javascript">Event.observe(window,'load',function(){Effect.Appear('BroswerNotice');});</script>
<![endif]-->

</body>

</html>