<!--
/******************************************************************************
@owner: SVSi
@author: Arthur Johnson
@function: Main Panel Builder panels HTML/PHP page
*******************************************************************************/
-->
<!DOCTYPE html>
<html>
	<head>
	
		<title>SVSi Control Panels</title>
		
		<!-- Meta Data -->
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<!-- End of Meta Data -->
		
		<!-- Touch Panel Style -->
			<style id="tpstyle">* {cursor: none !important;}
				body {overflow: hidden}
			</style>
		<!-- End of Touch Panel Style -->
		
		<!-- PHP
			<?php				
				$platform = 'false';
				if (file_exists('/svsi/divasUpdater')) $platform = 'ncommand';
				else if (file_exists('/svsi/config/factory.txt')) $platform = 'wallcon';
				else if (file_exists('/svsi/config/touchCalibDone')) $platform = 'modero';
				
				echo '--><script>var platform = "'.$platform.'";</script><!--';
				
				if ($platform === 'ncommand') include_once "verify.php";
				if ($platform === 'wallcon'){
					session_start(); require_once "../wallfunctions.php";
					if (isset($_REQUEST) && isset($_REQUEST['User']) && isset($_REQUEST['Pass'])){
						$mobile_user = getUser($_REQUEST['User']);
						if ($mobile_user){
							if (md5($_REQUEST['Pass']) != $mobile_user['password']){
								header("location: /login.php");
								exit;
							}
						}
					}
					else {
						if ($_SERVER['SERVER_ADDR'] != $_SERVER['REMOTE_ADDR']){
							if (!isLoggedIn()){
								header("location: /login.php");
								exit;
							}
						}
					}
				}
			?>
		End of PHP -->
		
		<p id="username-php" style="display: none;"><!--<?php 
			if ($platform === 'ncommand') echo $_SESSION['User']; else if ($platform === 'wallcon') echo $_SESSION['username']; else echo 'false'; 
		?>--></p>
		
		<!-- Initialize Page Global Variables -->
			<script>
				var dev = false; var version = '1.0.23'; //if (dev) version = parseInt(Math.random()*1000000000);
				
				if (!window.platform || window.platform === 'false' || window.platform === "'.$platform.'") window.platform = 'standalone';
				standalone = wallcon = modero = ncommand = false;
				switch (platform){
					case 'standalone': standalone = true; break;
					case 'wallcon': wallcon = true; break;
					case 'modero': modero = true; break;
					case 'ncommand': ncommand = true; break;
				}
				
				var activepanel = isworkingpanel = true; 
				var usephp = true; var useDB_read = false; var useDB_write = false;
				
				var unitlist = [];
				var Server = {name: location.hostname, ip: location.host, 
					errors: true, warnings: true, notices: true, debugging: true};
				var Client = {username: false};
				
				var project = false;
				
				if (standalone){
					var os = require('os'), fs = require('fs');
					var gui = require('nw.gui');
					var win = gui.Window.get();
				}
			</script> 
		<!-- End of Initialize -->
		
		<!-- Stylesheets -->
			<script>
				document.write('<link rel="stylesheet" href="css/fonts.css?v='+version+'" type="text/css" />');
				document.write('<link rel="stylesheet" href="css/index.css?v='+version+'" type="text/css" />');
			</script>
		<!-- End of Stylesheets -->
		
		<!-- Start Websocket -->
			<script>document.write('<script src="js/websocket.js?v='+version+'"\><\/script>');</script>
		<!-- End Start Websocket -->

		<!-- jQuery etc. -->
			<script src="js/libs/jquery.js"></script>
			<script src="js/libs/resize.js"></script>
			<script src="js/libs/slider.js"></script>
			<script src="js/libs/easing.js"></script>
			<script src="js/libs/drag.js"></script>
		<!-- End of jQuery etc. -->
		
		<!-- Shims/Polyfills -->
			<script> if (window.attachEvent && !window.addEventListener) var oldIE = true; </script>
			<script src="js/libs/modernizr.js"></script>
			<!--[IF IE]>
				<script src="js/libs/exCanvas.js"></script>
				<script src="js/libs/cssSandpaper.js"></script>
				<script src="js/libs/es5.js"></script>
				<script src="js/libs/web.js"></script>
				<script src="js/libs/pie.js"></script>
				<script src="js/libs/ie-opacity-polyfill.js"></script>
			<![ENDIF]-->
			<script src="js/libs/typedarray.js"></script>
			<script src="js/libs/stacktrace.js"></script>
			<script>document.write('<script src="js/utils.js?v='+version+'"\><\/script>');</script>
		<!-- End of Shims/Polyfills -->
		
		<!-- Libraries -->
			<script>
				document.write('<script src="js/libs/angular.js?v='+version+'"\><\/script>');
				document.write('<script src="js/libs/angimate.js?v='+version+'"\><\/script>');
				document.write('<script src="js/libs/watch.js?v='+version+'"\><\/script>');
				document.write('<script src="js/libs/shortcut.js?v='+version+'"\><\/script>');
				document.write('<script src="js/libs/socketio.js?v='+version+'"\><\/script>');
				document.write('<script src="js/libs/binary.js?v='+version+'"\><\/script>');
				document.write('<script src="js/libs/saveas.js?v='+version+'"\><\/script>');
			</script>
		<!-- End of Libraries -->
		
		<!-- Classes -->
			<script>
				//document.write('<script src="js/ngmodel.js?v='+version+'"\><\/script>');
				document.write('<script src="js/panelbuilder.js?v='+version+'"\><\/script>');
				document.write('<script src="js/button.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widget.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widgetpart.js?v='+version+'"\><\/script>');
				document.write('<script src="js/panel.js?v='+version+'"\><\/script>');
				document.write('<script src="js/subpanel.js?v='+version+'"\><\/script>');
				document.write('<script src="js/mouse.js?v='+version+'"\><\/script>');
				document.write('<script src="js/setupPB.js?v='+version+'"\><\/script>');
				document.write('<script src="js/tween.js?v='+version+'"\><\/script>');
			</script>
		<!-- End of Classes -->

		<!-- Set up Local and Remote Storage -->
			<script>document.write('<script src="js/storage.js?v='+version+'"\><\/script>');</script>
		<!-- End of Local and Remote Storage Setup -->
		
		<script>
			startWebsocket(function(){
				if (1||standalone) websocket.emit('message', {command: 'discover', timeout: 10}, noop);
				websocket.emit('message', {command: 'getStatus'}, 
					function(r){
						if (!r || !r.split) return; var a = r.split('\r');
						for (var i=0; i<a.length; i++){
							var b = a[i].substring(0, a[i].indexOf(':')); var c = a[i].substring(a[i].indexOf(':')+1);
							if (b !== ''){Server[b] = c; Server[b.toLowerCase()] = c;}
						}
					});
				
				Server.devtools = function(){websocket.emit('message', {command: 'devtools'});};
			});
			
			if (standalone){
				shortcut.add('F12', function(){
					win.showDevTools();
				});
				shortcut.add('F11', function(){
					win.enterFullscreen();
				});
				shortcut.add('F5', function(){
					win.reloadDev();
				});
			}
			
		</script>
			
		<div id="infopage" style="position: absolute; left: 0; top: 0;
			width: 100%; height: 100%; z-index: 900000; border: none; background: white;
			display: none; text-align: center; font-size: 40px !important;"></div>
		
	</head>
	
	<body id="thebody" class="thebody" style="z-index: -1; font-family: Helvetica; background-color: black !important;">
		
		<!-- Loading Screen -->
			<div id="loadingscreen" style="display: block; position: absolute; left: 0px; top: 0px; z-index: 20000000; height: 100%;
				width: 100%; background: black;">
			</div>
		<!-- End of Loading Screen -->
		
		<!-- Hidden Elements -->
			<input type="file" id="file-open" style="position: absolute; top: 0; left: -10000px;"></input>
			<div id="dialog" title="Dialog" style="z-index: 20000; height: 150px; display: none;">
				<div style="position: absolute; left: 28px; top: 15px;">Name: &nbsp;<input type="text" name="name" id="addpanel-name"><br></div>
				<div style="position: absolute; left: 28px; top: 45px;">Width: &nbsp;<input type="text" name="width" id="addpanel-width"><br></div>
				<div style="position: absolute; left: 28px; top: 75px;">Height: <input type="text" name="height" id="addpanel-height"><br /><br /></div>
				<div style="position: absolute; left: 208px; top: 115px;">
					<button type="button" onclick="$('#dialog').dialog('close');" style="float: right; margin-left: 5px;">Cancel</button>
					<button type="button" onclick="" style="float: right;">Save</button>
				</div>
			</div>
		<!-- End of Hidden Elements -->
		
		<!-- Testing/Debug Elements -->
			<div id="debugdiv" style="display: none; position: absolute; left: 0px; top: 0px; z-index: 20000; height: 150px;\
				background: black;">
				<input type="text" id="debugenter" style="position: absolute; top: 0; left: 0px;"></input>
			</div>
			<div id="dvrplayerwidgetplaylist" style="display:none;" title="Choose Playlist">
			  <span id="selectDVRPlaylistLabel" style="text-align:center;">Play File:</span><br>
			  <span id="selectDVRPlaylistSpan"></span>
			</div>
		<!-- End of Testing/Debug Elements -->
		
		<!-- Security Panel -->
			<div id="security" class="noselect" style="display: none; position: absolute; left: 0px; top: 0px; z-index: 200000; 
				width: 100%; height: 100%; background: black; text-align: center;">
				<div id="security-panel" style="position: absolute; width: 100%; background: none; left: 25%;">
					<br>
					<input type="text" id="security-text" style="width: 70%; font-size: 1.75em; text-align: center;" 
						onchange="if (window.passkey && $(this).val() == window.passkey){$('#security').fadeOut(); $(this).val('');}"
						onkeypress="if (window.passkey && $(this).val() == window.passkey){$('#security').fadeOut(); $(this).val('');}"
						onpaste="if (window.passkey && $(this).val() == window.passkey){$('#security').fadeOut(); $(this).val('');}"
						oninput="if (window.passkey && $(this).val() == window.passkey){$('#security').fadeOut(); $(this).val('');}"/>
					<br><br>
					<div id="security-1" style="width: 40%; height: 50px; background: grey; margin: 1%;
						display: inline-block; cursor: pointer;" onclick="$('#security-text').val($('#security-text').val()+'1'); $('#security-text').change();">
						<span style="position: relative; top: calc(50% - 0.60em);
						left: 0px; font-size: 1.5em;">1</span></div>
					<div id="security-5" style="width: 40%; height: 50px; background: grey; margin: 1%;
						display: inline-block; cursor: pointer;" onclick="$('#security-text').val($('#security-text').val()+'5'); $('#security-text').change();"><span style="position: relative; top: calc(50% - 0.60em);
						left: 0px; font-size: 1.5em;">5</span></div>
					<div id="security-2" style="width: 40%; height: 50px; background: grey; margin: 1%;
						display: inline-block; cursor: pointer;" onclick="$('#security-text').val($('#security-text').val()+'2'); $('#security-text').change();"><span style="position: relative; top: calc(50% - 0.75em);
						left: 0px; font-size: 1.5em;">2</span></div>
					<div id="security-6" style="width: 40%; height: 50px; background: grey; margin: 1%;
						display: inline-block; cursor: pointer;" onclick="$('#security-text').val($('#security-text').val()+'6'); $('#security-text').change();"><span style="position: relative; top: calc(50% - 0.75em);
						left: 0px; font-size: 1.5em;">6</span></div>
					<div id="security-3" style="width: 40%; height: 50px; background: grey; margin: 1%;
						display: inline-block; cursor: pointer;" onclick="$('#security-text').val($('#security-text').val()+'3'); $('#security-text').change();"><span style="position: relative; top: calc(50% - 0.75em);
						left: 0px; font-size: 1.5em;">3</span></div>
					<div id="security-7" style="width: 40%; height: 50px; background: grey; margin: 1%;
						display: inline-block; cursor: pointer;" onclick="$('#security-text').val($('#security-text').val()+'7'); $('#security-text').change();"><span style="position: relative; top: calc(50% - 0.75em);
						left: 0px; font-size: 1.5em;">7</span></div>
					<div id="security-4" style="width: 40%; height: 50px; background: grey; margin: 1%;
						display: inline-block; cursor: pointer;" onclick="$('#security-text').val($('#security-text').val()+'4'); $('#security-text').change();"><span style="position: relative; top: calc(50% - 0.75em);
						left: 0px; font-size: 1.5em;">4</span></div>
					<div id="security-8" style="width: 40%; height: 50px; background: grey; margin: 1%;
						display: inline-block; cursor: pointer;" onclick="$('#security-text').val($('#security-text').val()+'8'); $('#security-text').change();"><span style="position: relative; top: calc(50% - 0.75em);
						left: 0px; font-size: 1.5em;">8</span></div>
				</div>
			</div>
		<!-- End of Security Panel -->
		
		<!-- Kickstart Everything (ie. Main) -->
			<script>
				var username = $('#username-php').html().trim().replace(/\<\!--/g, '').replace(/--\>/g, '');
				document.write('<script src="js/main.js?v='+version+'"\><\/script>');
				document.write('<script src="js/sandbox.js?v='+version+'"\><\/script>');
				document.write('<script src="js/index.js?v='+version+'"\><\/script>');
				document.write('<script src="js/modules/SVSi/NVR.js?v='+version+'"\><\/script>');
				document.write('<script src="js/modules/SVSi/N_Series.js?v='+version+'"\><\/script>');
				document.write('<script src="js/modules/SVSi/N4000.js?v='+version+'"\><\/script>');
				document.write('<script src="js/modules/SVSi/WP.js?v='+version+'"\><\/script>');
				$('#security-panel').center();
				
				if (!(window.innerHeight - window.outerHeight < 5 && window.innerHeight - window.outerHeight > -5)) websocket.emit('message', {command: 'fullscreen'});
				
				//alert('h '+window.innerHeight+' '+window.outerHeight);
			</script>
		<!-- End of Kickstart Everything (ie. Main) -->
			
	</body>
</html>