<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<!-- classes were from SparrOS Developer Team -->
<title>DremJS</title>
<!--<embed src="mopen.mp3" width="0" height="0" loop="false" autostart="true" hidden="true" />
<audio loop autoplay>
Aw fiddle sticks. What now? (ERROR: 1040-0001)
Your browser doesn't support the AUDIO tag! Get a newer browser or update it
<source src="ambient.mp3" type="audio/mp3">
</audio>-->
<style>
.framewrap {
width:500px;
height:300px;
padding:10px;
position: fixed;
top: 50px;
left: 10px;
background-color:#87CEEB;
}
.appFrame {
width:99%;
height:93%;
background-color:#FFFFFF;
}
.start {
position: absolute;
left: 0px;
bottom: 0px;
}
.astart {
position: absolute;
left: 0px;
bottom: 50px;
}
.cwhite {
color: white;
}
.br1 {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 12px;
}
.br2 {
position: absolute;
bottom: 22px;
right: 16px;
font-size: 12px;
}
.br3 {
position: absolute;
bottom: 36px;
right: 16px;
font-size: 12px;
}
html {
background: url(DremJS-Background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
a:link {
color: black;
text-decoration: none;
}
a:visited {
color: black;
text-decoration: none;
}
.startgray {
background-color: gray;
padding: 300px;
border: 5px solid gray;
margin: 0;
}
.cent {
position: relative;
top: 4px;
}
.taskbar {
background-color: black;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 42px;
}
</style>
</head>
<body onload="initAgendaWM()">
<p class="cwhite br3">DremJS Version 0.1.2b</p>
<p class="cwhite br2">Build 31</p>
<p class="cwhite br1">© Innovation Inc.</p>
<div class="start startgray">
<ul class="astart">
<dt><a onclick="openApplication('About')"><p><img src="apps/About/about.png" align="top"> About DremJS</p></a></dt>
<dt><a onclick="openApplication('HowTo')"><p><img src="apps/HowTo/howto.png" align="top"> How to Install Applications</p></a></dt>
<dt><a onclick="openApplication('Market')"><p><img src="apps/Market/market.png" align="top"> DremJS Market</p></a></dt>
<dt><a onclick="openApplication('debug')"><p><img src="apps/debug/debug.png" align="top"> Report a Bug</p></a></dt>
<!--Below is where remotely installed apps will start -->
<hr />
<dt><a target="_top" href="shuttingdown.html"><p><img src="shutdown.png" align="top" style="width:16px;height:16px;"> Shutdown DremJS</p></dt>
</ul>
<a href="#"><p class="start" style="left:12px;">Start</p></a>
</div>
<div id="appContainer">
</div>
<div class="taskbar">
<div class="cwhite" style="text-align:left" id="txt"></div> <a onclick="openApplication('About')"><img class="cent" src="apps/About/about.png"> |</a>
</div>
<script>
function initAgendaWM() {
makeDraggable();
startTime();
}
function makeDraggable() {
$(".framewrap")
.draggable()
.resizable();
}
function moveToFront(app) {
$('.framewrap').css('z-index', 1);
$('#' + app).css('z-index', 9999);
}
function openApplication(app) {
var i = 0;
while ($('#' + i).length)
i++;
var newElement="<div onclick=\"moveToFront('" + i + "')\" id='" + i + "' class='framewrap'><input type='button' onclick=\"closeApplication('" + i + "')\" value='X' /><iframe class='appFrame' src='apps/" + app + "/'></iframe></div>";
var parent=document.getElementById('appContainer');
parent.innerHTML+=newElement;
moveToFront(i);
makeDraggable();
}
function closeApplication(app) {
var element = document.getElementById(app);
element.parentNode.removeChild(element);
}
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</body>
</html>