<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>
		<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
		<!-- 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%;
                }
                .taskbarTime {
                    height: 42px;
                    float: left;
                }
                .taskbarApps {
                    text-align: center;
                    float: left;
                    margin-left: 5px;
                    margin-top: 2px;
                }
		</style>
  	</head>
  	<body onload="initAgendaWM()">
   		<p class="cwhite br2">DremJS Version 0.1.4b</p>
   		<p class="cwhite br1">&copy; Innovation Inc.</p>
   		<div class="start startgray">
      			<ul class="astart">
        			<dt><a onclick="openApplication('About', 800, 500, 'about.png')"><p><img src="apps/About/about.png" align="top"> About DremJS</p></a></dt>
				    <dt><a onclick="openApplication('HowTo', 800, 500, 'howto.png')"><p><img src="apps/HowTo/howto.png" align="top"> How to Install Applications</p></a></dt>
    				<dt><a onclick="openApplication('Market', 'max', 'max', 'market.png')"><p><img src="apps/Market/market.png" align="top"> DremJS Market</p></a></dt>
	       			<dt><a onclick="openApplication('debug', -1, -1, 'debug.png')"><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">
        <!-- This is the taskbar -->
        <div id="taskbar" class="taskbar">
            <div id="taskbarTime" class="taskbarTime">
                <!-- Add apps here -->
                <div class="cwhite" style="text-align:left" id="txt"></div> <a onclick="openApplication('About', 800, 500, 'about.png')"><img src="apps/About/about.png"> |</a>
                </div>
                <div id="taskbarApps" class="taskbarApps">
            
                </div>
        </div>
    </div>
	   
    <script>
        function initAgendaWM() {
			startTime();
			makeDraggable();
		} // Initialize Agenda
        
		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);
		} // Tick tock, Mr. Wick...
        
		function checkTime(i) {
    		if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    		return i;
		}
        
        function makeDraggable() {
            $(".framewrap")
                .draggable()
                .resizable();
        } // Makes all applications with the framewrap class draggable. Has to be ran every time applications are launched or things get sticky.

        function moveToFront(app) {
            $('.framewrap').css('z-index', 1);
	        $('#' + app).css('z-index', 9999);
        } // Move a clicked application to the front

	   function openApplication(app, width, height, appIcon) {
           // Set width and height as default if one is <=-1
           if (width <= -1 || height <= -1 || width == undefined || height == undefined) {
               width="500";
               height="300";
           }
           var i = 0;
           // Get the first available application ID.
           while ($('#' + i).length)
               i++;
           /*
           This is just the following as a string:
           <div onclick=moveToFront('[windowID]') id='[windowID]' class='framewrap' style='width:[width]px; height=[height]px'>
               <input type='button' onclick="closeApplication('[windowID]')" value='X' />
               <input type='button' onclick="maximizeApplication('[windowID]')" value='\u25A1' />
               <input type='button' onclick="minimizeApplication('[windowID]')" value='_' />
               <iframe class='appFrame' src='apps/[application name]'></iframe>
           </div>
           [windowID] is replaced with i (defined above)
           [application name] is replaced with parameter "app" (used to determine the application name to open).

           The app parameter points to a subdirectory called apps. This means if you were to run openApplication(foo), it will attempt to open an
           Application stored at apps/foo/

           Quite frustrating to work with, but it works. I'll make it fancier later, but right now it is good enough.
           */
            var application="<div onclick=\"moveToFront('" + i + "')\" name='" + app + "' id='" + i + "' class='framewrap' style='width:" + width + "px; height:" + height + "px'><input type='button' onclick=\"closeApplication('" + i + "')\" value='X' /><input type='button' onclick=\"maximizeApplication('" + i + "')\" value='\u25A1' /><input type='button' onclick=\"minimizeApplication('" + i + "')\" value='_' /><iframe class='appFrame' src='apps/" + app + "/'></iframe></div>";
            var taskbarApp="<div id='task" + i + "' onclick=\"minimizeApplication('" + i + "')\" class='taskbarApps'><img src='apps/" + app + "/" + appIcon + "' style='width:32px;height:32px' align='middle' /></div>";
            var parent=document.getElementById('appContainer');
            parent.insertAdjacentHTML('beforeend', application);
            var parent=document.getElementById('taskbarApps');
            parent.insertAdjacentHTML('beforeend', taskbarApp);
	        if (width == "max" || height == "max")
       	        maximizeApplication(i);
            moveToFront(i);
            makeDraggable();
        } // Opens an application.

	    function closeApplication(id) {
            var application = document.getElementById(id);
            var taskbarApp = document.getElementById('task' + id);
            application.parentNode.removeChild(application);
            taskbarApp.parentNode.removeChild(taskbarApp);
        } // Closes an application.

        function maximizeApplication(id) {
            document.getElementById(id).setAttribute('style', "height: 92%; width: 99%; top: 42px; left: 0px");
        } // Maximize application
        
        function minimizeApplication(id) {
            var application = document.getElementById(id);
            if (application.style.display === "none") {
                application.style.display = "block";
            } else {
                application.style.display = "none";
            }
        } // Minimize application
        
        function idExists(id) {
            if ($('#' + id).length)
                return $('#' + id).attr('name');
            else
                return false;
        } // Check if an ID exists
    </script>
	</body>
</html>