<!DOCTYPE html>
<html>
<head>
<title>2 by 2 Demo</title>
<script type="text/javascript" src="def.js"></script>
<script type="text/javascript" src="jquery-1.6.min.js"></script>
<script type="text/javascript" src="jquery.hotkeys.js"></script>
<link type="text/css" href="default.css" rel="stylesheet" />
<script type="text/javascript" src="SetupWorkspace.js"></script>
<link type="text/css" href="SetupWorkspace.css" rel="stylesheet" />
<script type="text/javascript">
$(function(){
var Workspace = new SetupWorkspace("maincontainer");
});
</script>
</head>
<body>
<div id="maincontainer">
<div id="firstcontainer" class="container first">
<div style="padding:10%;color: SteelBlue;font-size: 120%;">
<h3>This is Demo of 2x2 Workspace using HTML5. You can use Arrow Keys <img style="width:7%" src="http://vegastrike.sourceforge.net/albums/wiki_manual/CURSORS_GENERAL.png"></img> to navigate.</h3>
<h3> Or Click buttons on Navigator , don't forget to click the 'circular button' in navigator Or Press "Shift+Up" Arrow key to Zoom/UnZoom</h3>
<h3> Try to resize the Browser Window and see how it looks</h3>
<h4>Licence - (c) <a href="http://naendrasiosdiya.com">Narendra Sisodiya</a> 2011 - GPL-v3 License</h4>
</div>
</div>
<div id="secondcontainer" class="container second">
<div style="padding:10%;color: SteelBlue;font-size: 120%;">
<h3>This is the workspace number 2, You can add any content here</h3>
</div>
</div>
<div id="thirdcontainer" class="container third">
<div style="padding:10%;color: SteelBlue;font-size: 120%;">
<h3>This is the workspace number 3, You can add any content here</h3> </div>
</div>
<div id="forthcontainer" class="container forth">
<div style="padding:10%;color: SteelBlue;font-size: 120%;">
<h3>This is the workspace number 4, You can add any content here</h3> </div>
</div>
</div>
<div id="navigator" style="position: absolute; left: 1%; top: 3%; width: 10%;" >
<img id="navigator-left" class="navImgclick" src="nav/1.png" style="position: absolute; width: 30%; top: 30%;">
<img id="navigator-right" class="navImgclick" src="nav/2.png" style="position: absolute; width: 30%; left: 60%; top: 30%;">
<img id="navigator-top" class="navImgclick" src="nav/3.png" style="position: absolute; width: 30%; left: 30%;">
<img id="navigator-bottom" class="navImgclick" src="nav/4.png" style="position: absolute; width: 30%; top: 60%; left: 30%;">
<img id="navigator-center" class="navImgclick" src="nav/5.png" style="position: absolute; width: 30%; left: 30%; top: 30%;">
</div>
<div>
<audio id='clickaudio' src='audio/ClickSound.ogg'></audio>
</div>
</body>
</html>