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;
	}

	#bg-layer1, #bg-layer2{
		background: #333;
		position: fixed;
		top: 0; 
		left: 0;
		padding: 0;	
		margin: 0;
		z-index: 1;
		/*width: 100%;*/ /* scale to page width */
		/*height: 100%;*/
	}
	
	#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;
	}
	
	#UpgradeBroswerNotice {
		position: absolute;
		top: 10px; 
		left: 10px;
		color: #333;
		background-color: #ffa;
		padding: 10px;
		width: 240px;
		text-align:left;
		font-zise: 8px;
		border: 1px solid #aaa;
		z-index: 666;
	}
	#UpgradeBroswerNotice p {
		margin: 10px 0 0 0;
	}
	#UpgradeBroswerNotice a {
		color: #333;
		text-decoration: underline;
	}
	
</style>

<!-- Include the required js -->
<script src="../js/lib/prototype.js" type="text/javascript"></script>
<script src="../js/lib/scriptaculous.js" type="text/javascript"></script>
<script src="bgslide_v0.03.js" type="text/javascript"></script>

<!-- Disable for IE < 7 and show the browser upgrade notice -->
<!--[if lt IE 7]>
<script type="text/javascript"> 
BgSlideSupported = false; 
Event.observe(window,'load',function(){Effect.Appear('UpgradeBroswerNotice');});
</script>
<![endif]-->

</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 id="debug-msg"></p>
<p>Copyright &copy;2007 the <a href="http://bitdojo.net">Bit Dojo</a></p>

</div>


<!-- This is where the images are displayed. Two IMG tags 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 upgrade notice -->
<div id="UpgradeBroswerNotice" style="display:none;">
<p><b>Upgrade your browser!</b></p>
<p>It appears that you are using an old web browser which does not properly support industrial standards.</p>
<p>In order to experience this and many other great websites in all their glory, you will need to upgrade your browser.</p>
<p>I highly recommend Mozilla Firefox, which can be downloaded free
<a href="http://mozilla.com/en-US/firefox/">here</a>.</p>
</div>


</body>

</html>