<!--
/******************************************************************************
@owner: SVSi
@author: Arthur Johnson
@function: Main Panel Builder panelbuilding HTML/PHP page
*******************************************************************************/
-->
<!DOCTYPE HTML>
<html ng-app="html" style="background: black;">
	<head>
	
		<title>SVSi Panel Builder</title>
		
		<!-- Meta Data -->
			<meta charset="utf-8">
			<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<!-- End of Meta Data -->
		
		<!-- 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 (!isLoggedIn()){header("location: /login.php"); exit;}
				}
			?>
		End of PHP -->
		
		<!-- Initialize Page Global Variables -->
			<script> 
				var dev = true;  var version = '1.23.16'; //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 = false, isworkingpanel = false;
				var useDB_read = false; var useDB_write = false;
				
				//todo: reconcile 8300 8307
				if (wallcon) var wizard = true;
				
				var unitlist = []; var scriptlist = []; var modulelist = [];
				var projectlist = []; var projectnames = []; var manufacturerlist = [];
				var module_command_list = false;
				
				var Server = {name: location.hostname, ip: location.host, 
					errors: false, warnings: false, notices: false, inbound: false, outbound: false};
				var Client = {username: false, ip: 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/pb.css?v='+version+'" type="text/css" />');
				document.write('<link rel="stylesheet" href="css/fonts.css?v='+version+'" type="text/css" />');
				document.write('<link rel="stylesheet" href="css/layers.css?v='+version+'" type="text/css" />');
				document.write('<link rel="stylesheet" href="css/jquery-ui.css?v='+version+'" type="text/css" />');
				document.write('<link rel="stylesheet" href="css/anim.css?v='+version+'" type="text/css" />');
			</script>
		<!-- End of Stylesheets -->
		
		<!--<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>-->
		
		<!-- 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/colors.js"></script>
		<!-- End of jQuery etc. -->

		<!-- Shims/Polyfills -->
			<script>
				if (window.attachEvent && !window.addEventListener) var oldIE = true;
				else var oldIE = false;
			</script>
			<script src="js/libs/modernizr.js"></script>
			<!--[IF IE]>
				<script src="js/libs/exCanvas.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/cssSandpaper.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/ckeditor/ckeditor.js?v='+version+'"\><\/script>');
				document.write('<script src="js/libs/jscolor/jscolor.js?v='+version+'"\><\/script>');
				document.write('<script src="js/libs/fabric.js?v='+version+'"\><\/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/saveas.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/ace/ace.js?v='+version+'"\><\/script>');
				document.write('<script src="js/libs/ace/ext-language_tools.js?v='+version+'"\><\/script>');
				document.write('<script src="js/tween.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/setupPB.js?v='+version+'"\><\/script>');
				document.write('<script src="js/asset.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/widgets/hslider.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widgets/vslider.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widgets/hslider2.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widgets/vslider2.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widgets/numpad.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widgets/numpad2.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widgets/dial.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widgets/dial2.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widgets/dpad.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widgets/dvr.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widgets/nvr_play.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widgets/vlist.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widgets/hlist.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widgets/encselect.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widgets/decselect.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widgets/timeweather.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widgets/textwidget.js?v='+version+'"\><\/script>');
				document.write('<script src="js/widgets/imagewidget.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/action.js?v='+version+'"\><\/script>');
				document.write('<script src="js/texteditor.js?v='+version+'"\><\/script>');
				document.write('<script src="js/wizard.js?v='+version+'"\><\/script>');
				document.write('<script src="js/sandbox.js?v='+version+'"\><\/script>');
				document.write('<script src="js/websocket.js?v='+version+'"\><\/script>');
			</script>
		<!-- End of Classes -->
		<script>document.write('<script src="js/scripts.js?v='+version+'"\><\/script>');</script>
		
		<!-- 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>
	
			$(document).ready(function(){
				startWebsocket(function(){
					if (standalone) websocket.emit('message', {command: 'discover', timeout: 10}, noop);
				});
			
				server({opts: {command: 'read_allmodules'}, callback: function(data){
					modulelist = json_decode(data);
				}});
				server({opts: {command: 'read_allmanufacturers'}, callback: function(data){
					manufacturerlist = json_decode(data);
				}});
			
				if (standalone){
					var tray = new gui.Tray({title: 'Tray', icon: 'icons/icon.png'});
					var _menu = new gui.Menu();
					_menu.append(new gui.MenuItem({label: 'exit'}));
					_menu.items[0].click = function(){gui.App.quit();};
					tray.menu = _menu;
					win.on('close', function(){this.close(true);});
					win.setShowInTaskbar(true);
					shortcut.add('F12', function(){if (dev) win.showDevTools();});
					shortcut.add('F11', function(){if (dev) win.enterFullscreen();});
					shortcut.add('F5', function(){
						if (dev){if (websocket) websocket.io.disconnect(); win.reloadDev();}
					});
				}
				
				pb.updateProjectList(function(){
					console.log('updating project list', projectlist);
					var selectstring = '<option value="-1">[Choose...]</option>';
					for (var i=0;i<5;i++){
						if (projectlist[i]) selectstring += '<option value="'+
							projectlist[i].puid+'">'+projectlist[i].name+'</option>';
					}
					$('#project-options-recent-select')[0].innerHTML = selectstring;
				});

				ng.wallcon = wallcon, ng.standalone = standalone, ng.ncommand = ncommand;
				
				setupPB();
				update();
			});
			
		</script>
		
		<script id="loaded-script" src=""></script>
		
	</head>
	
	<body id="thebody" class="thebody textselecttest" 
		style="z-index: -1; font-family: Helvetica; cursor: default !important;"
		onselectstart="if ((event.target || event.srcElement).nodeName === 'IMG'){
							event.preventDefault(); return false;
						}">
						
		<!-- Hide All -->
			<div id="hideall" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; 
				background: black; z-index: 9000000000000;"></div>
		<!-- Hide All -->
		
		<!-- Spinner -->
		<div id="spinner" style="display: none; z-index: 900000000000; position: absolute; left: 0vw; top: 0vh; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5);">
		<div style="position: absolute; left: calc(50% - 100px); top: calc(50% - 100px);"><style type='text/css'>
			@-webkit-keyframes uil-default-anim { 0% { opacity: 1} 100% {opacity: 0} }@keyframes uil-default-anim { 0% { opacity: 1} 100% {opacity: 0} }.uil-default-css > div:nth-of-type(1){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.5s;animation-delay: -0.5s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(2){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.4166666666666667s;animation-delay: -0.4166666666666667s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(3){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.33333333333333337s;animation-delay: -0.33333333333333337s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(4){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.25s;animation-delay: -0.25s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(5){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.16666666666666669s;animation-delay: -0.16666666666666669s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(6){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: -0.08333333333333331s;animation-delay: -0.08333333333333331s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(7){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0s;animation-delay: 0s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(8){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.08333333333333337s;animation-delay: 0.08333333333333337s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(9){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.16666666666666663s;animation-delay: 0.16666666666666663s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(10){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.25s;animation-delay: 0.25s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(11){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.33333333333333337s;animation-delay: 0.33333333333333337s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}.uil-default-css > div:nth-of-type(12){-webkit-animation: uil-default-anim 1s linear infinite;animation: uil-default-anim 1s linear infinite;-webkit-animation-delay: 0.41666666666666663s;animation-delay: 0.41666666666666663s;}.uil-default-css { position: relative;background:none;width:200px;height:200px;}</style>
			<div class='uil-default-css' style='transform:scale(0.6);'><div style='top:80px;left:93px;width:14px;height:40px;background:#ffffff;-webkit-transform:rotate(0deg) translate(0,-60px);transform:rotate(0deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#ffffff;-webkit-transform:rotate(30deg) translate(0,-60px);transform:rotate(30deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#ffffff;-webkit-transform:rotate(60deg) translate(0,-60px);transform:rotate(60deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#ffffff;-webkit-transform:rotate(90deg) translate(0,-60px);transform:rotate(90deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#ffffff;-webkit-transform:rotate(120deg) translate(0,-60px);transform:rotate(120deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#ffffff;-webkit-transform:rotate(150deg) translate(0,-60px);transform:rotate(150deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#ffffff;-webkit-transform:rotate(180deg) translate(0,-60px);transform:rotate(180deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#ffffff;-webkit-transform:rotate(210deg) translate(0,-60px);transform:rotate(210deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#ffffff;-webkit-transform:rotate(240deg) translate(0,-60px);transform:rotate(240deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#ffffff;-webkit-transform:rotate(270deg) translate(0,-60px);transform:rotate(270deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#ffffff;-webkit-transform:rotate(300deg) translate(0,-60px);transform:rotate(300deg) translate(0,-60px);border-radius:10px;position:absolute;'></div><div style='top:80px;left:93px;width:14px;height:40px;background:#ffffff;-webkit-transform:rotate(330deg) translate(0,-60px);transform:rotate(330deg) translate(0,-60px);border-radius:10px;position:absolute;'></div></div>
		</div></div>
		<!-- End of Spinner -->
						
		<!-- Wizard Choice -->
			<div id="wizard-choice" style="overflow: hidden; z-index: 30000000000; height: 100%; width: 600px;
				display: none; opacity: 1.0; position: absolute; top: 0; background: white; color: black;
				left: calc(50% - 100px);">
				<div id="wizard-choice-title" class="wizard-choice"
					style="display: none; position: absolute; left: 48px; top: 17%; font-size: 30px;">Welcome to the panel builder.</div>
				<div id="wizard-choice-text" class="wizard-choice"
					style="display: none; position: absolute; left: 88px; top: calc(17% + 40px);">Which mode do you want to use?</div>
				<div id="wizard-choice-buttons" class="wizard-choice"
					style="display: none; position: absolute; right: 42px; top: calc(17% + 115px);">
					<button class="white-button" id="wizard-choice-editor" 
						style="float: right; font-size: 19px; border-radius: 18px;">Full Panel Editor</button>
					<button class="white-button" id="wizard-choice-wizard" 
						style="float: right; font-size: 19px; border-radius: 18px;">N-Touch Wizard</button>
				</div>
			</div>
		<!-- End of Wizard Choice -->
	
		<!-- Project Options -->
			<div id="project-options" style="overflow: hidden; z-index: 30000000000; height: 100%; width: 600px;
				display: none; opacity: 1.0; position: absolute; top: 0; background: white; color: black;
				left: calc(50% - 500px);">
				<div id="project-options-title" class="project-options"
					style="display: none; position: absolute; left: 28px; top: 17%; font-size: 30px;">Welcome to the panel builder.</div>
				<div id="project-options-text" class="project-options"
					style="display: none; position: absolute; left: 58px; top: calc(17% + 40px);">Would you like to create a new, open, or import an existing project?</div>
				<div id="project-options-recent" class="project-options" style="display: none; position: absolute; left: 85px; top: calc(17% + 75px);">
					Recent: <select id="project-options-recent-select" onchange="pb.loadRecent(); $('#dialog-mousecatch').fadeOut();"><option value="none">none</option></select>
				</div>
				<div id="project-options-buttons" class="project-options" style="white-space: nowrap; display: none; position: absolute; left: 282px; top: calc(17% + 115px); width: 270px;">
					<button class="white-button" style="float: right; font-size: 19px; border-radius: 18px;"
						 id="project-options-import" onclick="
							document.getElementById('file-open').accept = '.zip';
							pb.openFileBrowser(function(){
								console.log('binsocket file upload');
								sendFile($('#file-open')[0].files[0], {command: 'import_project', filename: $('#file-open')[0].files[0].filename}, 
									function(opts){
										console.log('binsocket return', opts);
									});

							});">Import</button>
					<button class="white-button" id="project-options-open" onclick="pb.openSelectProjectList();"
						style="float: right; font-size: 19px; border-radius: 18px;">Open</button>
					<button class="white-button" id="project-options-new" onclick="pb.loadProject();"
						style="float: right; font-size: 19px; border-radius: 18px;">New</button>
				</div>
			</div>
		<!-- End of Project Options -->
		
		<!-- Add a Panel -->
			<div id="add-panel" style="overflow: hidden; z-index: 30000000000; height: 100%; width: 600px;
				display: none; opacity: 1.0; position: absolute; top: 0; background: white; color: black;
				left: calc(50% - 100px);">
				<div class="add-panel" style="display: none; position: absolute; left: 48px; top: 17%; font-size: 30px;">Add a panel to your project.</div>
				<div class="add-panel" style="display: none; position: absolute; left: 88px; top: calc(17% + 40px);">Enter the details of your new panel:</div>
				<div class="add-panel" style="display: none; position: absolute; left: 88px; top: calc(17% + 80px);">Panel Name:</div>
				<input id="add-panel-name" class="add-panel" style="display: none; position: absolute; left: 250px; top: calc(17% + 80px); text-align: center;" />
				<div class="add-panel" style="display: none; position: absolute; left: 88px; top: calc(17% + 120px);">Common Sizes:</div>
				<select id="add-panel-select" class="add-panel" style="display: none; position: absolute; left: 250px; top: calc(17% + 120px); text-align: center;"
					onchange="
						switch($(this).val()){
							case 'modero': $('#add-panel-width').val(1024); $('#add-panel-height').val(600); break;
							case 'n8300': $('#add-panel-width').val(240); $('#add-panel-height').val(320); break;
							case 'laptop': $('#add-panel-width').val(1366); $('#add-panel-height').val(768); break;
							case 'desktop': $('#add-panel-width').val(1920); $('#add-panel-height').val(1080); break;
							case 'ipad': $('#add-panel-width').val(768); $('#add-panel-height').val(1024); break;
							case 'ipadretina': $('#add-panel-width').val(1536); $('#add-panel-height').val(2048); break;
							case 'iphone': $('#add-panel-width').val(320); $('#add-panel-height').val(568); break;
							case 'galaxys': $('#add-panel-width').val(720); $('#add-panel-height').val(1280); break;
							case 'notebook': $('#add-panel-width').val(1280); $('#add-panel-height').val(800); break;
						}
					">
					<option value="none">[Choose...]</option>
					<option value="modero">Modero (1024x600)</option>
					<option value="n8300">N8301/N8302 (240x320)</option>
					<option value="laptop">Laptop (1366x768)</option>
					<option value="desktop">Desktop (1920x1080)</option>
					<option value="ipad">iPad (768x1024)</option>
					<option value="ipadretina">iPad Retina (1536x2048)</option>
					<option value="iphone">iPhone (320x568)</option>
					<option value="galaxys">Galaxy S (720x1280)</option>
					<option value="notebook">Notebook (1280x800)</option>
				</select>
				<div class="add-panel" style="display: none; position: absolute; left: 88px; top: calc(17% + 160px);">Panel Width (px):</div>
				<input id="add-panel-width" class="add-panel" style="display: none; position: absolute; left: 250px; top: calc(17% + 160px); text-align: center;" />
				<div class="add-panel" style="display: none; position: absolute; left: 88px; top: calc(17% + 200px);">Panel Height (px):</div>
				<input id="add-panel-height" class="add-panel" style="display: none; position: absolute; left: 250px; top: calc(17% + 200px); text-align: center;" />
				<div id="add-panel-buttons" class="add-panel" style="display: none; position: absolute; right: 42px; top: calc(17% + 255px);">
					<button class="white-button" id="add-panel-cancel" style="float: right; font-size: 19px; border-radius: 18px;">Cancel</button>
					<button class="white-button" id="add-panel-add" style="float: right; font-size: 19px; border-radius: 18px;">Add</button>
				</div>
			</div>
		<!-- Add a Panel -->
			
		<!-- Menu Bar -->
			<div id="menubar" class="layerZzz" style="position: absolute; left: 0; top: 0px; width: 100%; height: 32px;
				background: black; border-bottom: 1px solid grey;">
				
				<div id="filemenu" class="filemenu menu layerZzz" style="position: absolute; top: 0px; left: 2px;">
					<ul>
						<li><a href="#" id="filemenu-button" class="filemenu menu-button" style="">File</a></li>
					</ul>
				</div>
					<ul id="filemenu-menu" class="filemenu layerS menu-menu">
						<a href="#"><li id="filemenuitem1" class="filemenu menu-item layerR">New Project</li></a>
						<a href="#"><li id="filemenuitem6" class="filemenu menu-item layerR">Open Project</li></a>
						<a href="#"><li id="filemenuitem3" class="filemenu menu-item layerR">Save Project</li></a>
						<a href="#"><li id="filemenuitem7" class="filemenu menu-item layerR">Save Project As...</li></a>
						<a href="#"><li id="filemenuitem5" class="filemenu menu-item layerR">Recent Projects...</li></a>
						<a href="#"><li id="filemenuitem8" class="filemenu menu-item layerR">Delete Project...</li></a>
						<a href="#"><li id="filemenuitem2" class="filemenu menu-item layerR">Import Project...</li></a>
						<a href="#"><li id="filemenuitem4" class="filemenu menu-item layerR">Export Project...</li></a>
						<a href="../" onclick="
							if (standalone){
								event.preventDefault();
								gui.App.quit();
							}
						"><li id="filemenuitem9" class="filemenu menu-item layerR">Exit</li></a>
					</ul>
					<ul id="recentmenu-menu" class="recentmenu layerR menu-menu">
						<a href="#"><li id="recentmenuitem1" class="recentmenu menu-item layerR" style="display: none;">&nbsp;</li></a>
						<a href="#"><li id="recentmenuitem2" class="recentmenu menu-item layerR" style="display: none;">&nbsp;</li></a>
						<a href="#"><li id="recentmenuitem3" class="recentmenu menu-item layerR" style="display: none;">&nbsp;</li></a>
						<a href="#"><li id="recentmenuitem4" class="recentmenu menu-item layerR" style="display: none;">&nbsp;</li></a>
						<a href="#"><li id="recentmenuitem5" class="recentmenu menu-item layerR" style="display: none;">&nbsp;</li></a>
						<a href="#"><li id="recentmenuitem6" class="recentmenu menu-item layerR" style="display: none;">&nbsp;</li></a>
						<a href="#"><li id="recentmenuitem7" class="recentmenu menu-item layerR" style="display: none;">&nbsp;</li></a>
						<a href="#"><li id="recentmenuitem8" class="recentmenu menu-item layerR" style="display: none;">&nbsp;</li></a>
					</ul>
				
				<div id="addmenu" class="addmenu menu layerX" style="display: none; position: absolute; top: 0px; left: 2px;">
					<ul>
						<li><a href="#" id="addmenu-button" class="addmenu menu-button" style="">Add</a>
						</li>
					</ul>
				</div>
					<ul id="addmenu-menu" class="addmenu layerR menu-menu">
						<a href="#"><li id="addmenuitem1" class="addmenu menu-item layerR">Add Panel...</li></a>
						<a href="#"><li id="addmenuitem2" class="addmenu menu-item layerR">Add Button...</li></a>
						<a href="#"><li id="addmenuitem3" class="addmenu menu-item layerR">Add Widget...</li></a>
					</ul>
				
				<div id="viewmenu" class="viewmenu menu layerX" style="position: absolute; top: 0px; left: 72px;">
					<ul>
						<li><a href="#" id="viewmenu-button" class="viewmenu menu-button" style="">View</a></li>
					</ul>
				</div>
					<ul id="viewmenu-menu" class="viewmenu layerR menu-menu">
						<a href="#"><li id="viewmenuitem2" class="viewmenu menu-item layerR">Preview Panel</li></a>
						<a href="#"><li id="viewmenuitem3" class="viewmenu menu-item layerR">Setup Script</li></a>
					</ul>
				
				<div id="windowmenu" class="windowmenu menu layerX" style="position: absolute; top: 0px; left: 142px;">
					<ul>
						<li><a href="#" id="windowmenu-button" class="windowmenu menu-button" style="">Window</a></li>
					</ul>
				</div>
					<ul id="windowmenu-menu" class="windowmenu layerR menu-menu">
						<a href="#"><li id="windowmenuitem2"
							class="windowmenu menu-item layerR">Tools Pane</li></a>
						<a href="#"><li id="windowmenuitem7"
							class="windowmenu menu-item layerR">Project Pane</li></a>
					</ul>
				
				<div id="helpmenu" class="helpmenu menu layerX" style="position: absolute; top: 0px; left: 212px;">
					<ul>
						<li><a href="#" id="helpmenu-button" class="helpmenu menu-button layerR" style="">Help</a></li>
					</ul>
				</div>
					<ul id="helpmenu-menu" class="helpmenu layerR menu-menu">
						<a href="manual/FullEditorTutorial.pdf" target="_blank" onclick="
							if (standalone){
								event.preventDefault();
								websocket.emit('message', {command: 'dirname'}, function(dir){
									gui.Shell.openItem(dir+'manual/FullEditorTutorial.pdf');
								});
							}
						"><li id="helpmenuitem1" class="helpmenu menu-item layerR">Editor</li></a>
						<a href="modules.php" target="_blank" onclick="
							if (standalone){
								event.preventDefault();
								gui.Window.open('modules.php', {
									title: 'SVSi Control Modules', show: true, toolbar : false, frame: true,
									icon: 'icons/icon.png', width: 1330, 
									height: 770, position: 'center'
								});
							}
						"><li id="helpmenuitem4" class="helpmenu menu-item layerR">Modules</li></a>
						<a href="manual/PanelBuilderScriptsGuide.pdf" target="_blank" onclick="
							if (standalone){
								event.preventDefault();
								websocket.emit('message', {command: 'dirname'}, function(dir){
									gui.Shell.openItem(dir+'manual/PanelBuilderScriptsGuide.pdf');
								});
							}
						"><li id="helpmenuitem2" class="helpmenu menu-item layerR">Scripts</li></a>
						<a href="manual/CombinedNSeriesAPICommandList.pdf" target="_blank" onclick="
							if (standalone){
								event.preventDefault();
								websocket.emit('message', {command: 'dirname'}, function(dir){
									gui.Shell.openItem(dir+'manual/CombinedNSeriesAPICommandList.pdf');
								});
							}
						"><li id="helpmenuitem3" class="helpmenu menu-item layerR">Commands</li></a>
						<a href="#"><li id="helpmenuitem5" class="helpmenu menu-item layerR">About...</li></a>
					</ul>
					
				<div id="project-name-display" class="layerQ" style="color: white; position: absolute; text-align: center; white-space: nowrap;
					left: 270px; top: 40px; font-size: 12px; opacity: 0.8; display: none; width: calc(100% - 1026px); overflow: hidden;">Project:</div>
			</div>
		<!-- End of Menu Bar -->
		
		<!-- Top Button/Icon Bar -->
			<div id="zoom-in-button" class="icon layerX" style="opacity: 0.9; position: absolute; top: 34px; left: 20px;">
				<img id="zoom-in-image" title="Zoom In"  style="width: 26px;" src="images/icons/zoomin2.png" /></div>
			<div id="zoom-out-button" class="icon layerX" style="opacity: 0.9; position: absolute; top: 34px; left: 60px;">
				<img id="zoom-out-image" title="Zoom Out"  style="width: 26px;" src="images/icons/zoomout2.png" /></div>
			<div id="move-button" class="icon layerX" style="opacity: 0.9; position: absolute; top: 34px; left: 100px;">
				<img id="move-button-image" style="width: 24px;" title="Scroll" src="images/icons/move2.png" /></div>
			<div id="fit-button" class="icon layerX" style="opacity: 0.9; position: absolute; top: 34px; left: 140px;">
				<img id="fit-button-image" style="width: 24px;" title="Fit to Screen" src="images/icons/fittoscreen.png" /></div>
			<div id="undo-button" class="icon layerX" style="opacity: 0.9; position: absolute; top: 34px; left: 180px;">
				<img style="width: 26px;" title="Undo" src="images/icons/undo2.png" /></div>
			<div id="redo-button" class="icon layerX" style="opacity: 0.9; position: absolute; top: 34px; left: 220px;">
				<img style="width: 26px;" title="Redo" src="images/icons/redo2.png" /></div>
			
			<div id="item-toolbar" class="layerZzz"  style="position: absolute; top: 4px; left: 300px; height: 33px; width: calc(100% - 300px);">
				<script>
				var s = 4.762; var t = 7;
				document.write('\
					<div id="clone-button" class="icon layerZzz" style="opacity: 0.9; position: absolute; top: 0px;\
							left: '+(s*(t++))+'%;">\
						<img style="width: 24px;" title="Clone" src="images/icons/clone.png" /></div>\
					<div id="copysize-button" class="icon layerZzz" style="opacity: 0.9; position: absolute; top: 0px;\
							left: '+(s*(t++))+'%;">\
						<img style="width: 24px;" title="Copy Size" src="images/icons/copysize.png" /></div>\
					<div id="alignleft-button" class="icon layerZzz" style="opacity: 0.9; position: absolute; top: 0px;\
							left: '+(s*(t++))+'%;">\
						<img style="width: 24px;" title="Align Left" src="images/icons/alignleft.png" /></div>\
					<div id="alignright-button" class="icon layerZzz" style="opacity: 0.9; position: absolute; top: 0px;\
							left: '+(s*(t++))+'%;">\
						<img style="width: 24px;" title="Align Right" src="images/icons/alignright.png" /></div>\
					<div id="aligntop-button" class="icon layerZzz" style="opacity: 0.9; position: absolute; top: 0px;\
							left: '+(s*(t++))+'%;">\
						<img style="width: 24px;" title="Align Top" src="images/icons/aligntop.png" /></div>\
					<div id="alignbottom-button" class="icon layerZzz" style="opacity: 0.9; position: absolute; top: 0px;\
							left: '+(s*(t++))+'%;">\
						<img style="width: 24px;" title="Align Bottom" src="images/icons/alignbottom.png" /></div>\
					<div id="centerh-button" class="icon layerZzz" style="opacity: 0.9; position: absolute; top: 0px;\
							left: '+(s*(t++))+'%;">\
						<img style="width: 24px;" title="Center Horizontally" src="images/icons/centerh.png" /></div>\
					<div id="centerv-button" class="icon layerZzz" style="opacity: 0.9; position: absolute; top: 0px;\
							left: '+(s*(t++))+'%;">\
						<img style="width: 24px;" title="Center Vertically" src="images/icons/centerv.png" /></div>\
					<div id="centerb-button" class="icon layerZzz" style="opacity: 0.9; position: absolute; top: 0px;\
							left: '+(s*(t++))+'%;">\
						<img style="width: 24px;" title="Center" src="images/icons/centerb.png" /></div>\
					<div id="alignh-button" class="icon layerZzz" style="opacity: 0.9; position: absolute; top: 0px;\
							left: '+(s*(t++))+'%;">\
						<img style="width: 24px;" title="Align Horizontally" src="images/icons/alignhorizontally.png" /></div>\
					<div id="alignv-button" class="icon layerZzz" style="opacity: 0.9; position: absolute; top: 0px;\
							left: '+(s*(t++))+'%;">\
						<img style="width: 24px;" title="Align Vertically" src="images/icons/alignvertically.png" /></div>\
					<div id="aligng-button" class="icon layerZzz" style="opacity: 0.9; position: absolute; top: 0px;\
							left: '+(s*(t++))+'%;">\
						<img style="width: 24px;" title="Align to Grid" src="images/icons/aligngrid.png" /></div>\
					<div id="seditor-button" class="icon layerZzz" style="opacity: 0.9; position: absolute; top: 0px;\
							left: '+(s*(t++))+'%;">\
						<img style="width: 24px;" title="Edit Scripts/Conditions" src="images/icons/script.png" /></div>\
					<div id="delete-button" class="icon layerZzz" style="opacity: 0.9; position: absolute; top: 0px;\
							left: '+(s*(t++))+'%;">\
						<img style="width: 24px;" title="Delete" src="images/icons/delete.png" /></div>\
					');
				</script>
			</div>
		<!-- End of Top Button/Icon Bar -->
		
		<!-- Panel Labels Bar/Scroller -->	
			<div id="labels-bar" class="layerQ noselect" style="position: absolute; left: 0px;
				top: 32px; border-top: 1px solid grey; border-bottom: 1px solid lightgrey;"></div>
			
			<div id="left-arrow" class="layerR noselect"><img class="arrowicon layerR"
				style="width: 11px; opacity: 0.5;" src="images/icons/leftarrow2.png" /></div>
			<div id="right-arrow" class="layerR noselect"><img class="arrowicon layerR"
				style="width: 11px; opacity: 0.5;" src="images/icons/rightarrow2.png" /></div>
				
			<div id="labels-wrapper" class="layerR noselect" style="position: absolute; right: 80px; top: 33px; width: 546px; height: 28px; overflow:hidden">
				<div id="labels" style="position: absolute; left: 234px; top: 0px; height: 28px; "></div>
			</div>
			
			<div id="addpanelicon-button" class="icon layerR noselect" style="opacity: 0.9; position: absolute; top: 35px; right: 700px;">
				<img style="width: 24px;" onclick="pb.addPanel();" title="Add Panel" src="images/icons/add.png" /></div>
			<div id="deletepanelicon-button" class="icon layerR noselect" style="opacity: 0.9; position: absolute; top: 35px; right: 726px;">
				<img style="width: 24px;" onclick="pb.dialogs.delete();" title="Delete Panel" src="images/icons/subtract.png" /></div>
		<!-- End of Panel Labels Bar/Scroller -->
		
		<!-- Tools Panel -->
			<div id="tools-panel" class="tools-panel layerX noselect" 
				style="overflow: visible; opacity: 1.0; display: block; position: absolute;
					width: 290px; height: calc(100% - 63px); left: 0px; top: 63px; background: rgba(128,128,128,0.65);">
				<div id="tools-buttons" style="position: absolute; width: 100%; height: 29px; left: 0px; top: 0px;
					border-bottom: solid white 1px; background: black;">
					<div id="button-library-label" style="margin-top: 0px; font-size: 13px; width: 31%; margin: 1%;
						position: absolute; left: 0px; top: 0px; background-color: #000; z-index: 201; height: 73%;
						cursor: pointer; color: white; text-align: center; color: #ccc; border-radius: 3px;
						line-height: 160%; font-size: 80%; font-weight: bold; border: 1px solid #737373;"
						class="library-label">Buttons</div>
					<div id="widget-library-label" style="margin-top: 0px; font-size: 13px; width: 31%; margin: 1%;
						position: absolute; left: 33%; top: 0px; background-color: #000; z-index: 201; height: 73%;
						cursor: pointer; color: white; text-align: center; color: #ccc; border-radius: 3px;
						line-height: 160%; font-size: 80%; font-weight: bold; border: 1px solid #737373;"
						class="library-label">Widgets</div>
					<div id="template-library-label" style="margin-top: 0px; font-size: 13px; width: 31%; margin: 1%;
						position: absolute; left: 66%; top: 0px; background-color: #000; z-index: 201; height: 73%;
						cursor: pointer; color: white; text-align: center; color: #ccc; border-radius: 3px;
						line-height: 160%; font-size: 80%; font-weight: bold; border: 1px solid #737373;"
						class="library-label">Templates</div>
					<!--<div id="subpanel-library-label" style="margin-top: 0px; font-size: 13px; width: 25%; margin: 1%;
						position: absolute; left: 72%; top: 0px; background-color: #000; z-index: 201; height: 73%;
						cursor: pointer; color: white; text-align: center; color: #ccc; border-radius: 3px;
						line-height: 160%; font-size: 80%; font-weight: bold; border: 1px solid #737373;"
						class="library-label">SubPanels</div>-->
				</div>
				<div id="button_library" class="tools-item-pane tools_item layerD noselect"
					style="position: absolute; width: 100%; height: 100%; left: 0px; top: 29px;">
					<div id="button-library-tabs" class="noselect" style="position: relative; right: 0px; top: 0px; width: 100%;
							height: 39px; border-top: solid darkgrey 1px; background-color: #000000; z-index: 200;">
						<select id="button-library-select" onchange="pb.setButtonLibrary();" style="position: relative;
							left: 10px; top: 8px;">
							</select>
						<img src="images/icons/export.png" id="button-library-import" class="buttons-button" onclick=""
							style="margin-top: 4px; float: right; opacity: 1.0; height: 75%;" title="Import Button Library" />
						<img src="images/icons/import.png" id="button-library-export" class="buttons-button" onclick=""
							style="margin-top: 4px; float: right; opacity: 1.0; height: 75%;" title="Export Button Library" />
					</div>
					<div id="button-library-pane" style="position: relative; top: 0px;
						width: 100%; height: 100%; overflow:auto; z-index: 201; display: block; border-top: 1px solid darkgrey;
						border-bottom: 1px solid darkgrey; background: none;">
					</div>
				</div>
				<div id="widget_library" class="tools-item-pane tools_item layerD noselect"
					style="display: none; position: absolute; width: 100%; height: 100%; left: 0px; top: 29px;">
					<div id="widget-library-tabs" style="position: relative; right: 0px; top: 0px; width: 100%; height: 39px;
						border-top: solid darkgrey 1px; background-color: black; z-index: 200;">
					</div>
					<div id="widget-library-pane" style="position: relative; top: 0px; width:100%;
						height: 100%; overflow: auto; z-index: 201; border-top: 1px solid darkgrey; overflow: hidden;
						border-bottom: 1px solid darkgrey;">
					</div>
				</div>
				<div id="template_library" class="tools-item-pane tools_item layerD noselect"
					style="display: none; position: absolute; width: 100%; height: 100%; left: 0px; top: 29px;">
					<div id="template-library-tabs" style="position: relative; right: 0px; top: 0px; width: 100%; height: 39px;
							border-top: 1px solid darkgrey; border-bottom: 1px solid darkgrey;background-color: black; z-index: 200;">
						<a><img id="import-template-panel" title="Import Template Library" src="images/icons/export.png" style="margin-top: 4px; height: 75%; float: right;" /></a>
						<img id="export-template-panel" title="Export Template Library" src="images/icons/import.png" style="margin-top: 4px; height: 75%; float: right;" />
						<img id="delete-template" title="Delete Selected Template" src="images/icons/minus.png" style="margin-top: 4px; height: 75%; float: right;" />
						<img id="apply-template-panel" title="Apply Selected Template to Current Panel" src="images/icons/addto.png" style="margin-top: 4px; height: 75%; float: right;" />
						<img id="add-template-panel" title="Add Template from Current Panel" src="images/icons/addfrom.png" style="margin-top: 4px; height: 75%; float: right;" />
					</div>
					<div id="template-library-pane" style="position: relative; top: 0px; width:100%;
						overflow: auto; z-index: 1205; border-top: 1px solid darkgrey;
						height: 100%;">
						<div id="templatesGrid" style="width: 100%; height: 100%;"></div>
					</div>
				</div>
				<div id="subpanel_library" class="tools-item-pane tools_item layerD noselect"
					style="display: none; position: absolute; width: 100%; height: 100%; left: 0px; top: 29px;">
					<div id="subpanel-library-tabs" style="position: relative; right: 0px; top: 0px; width: 100%; height: 39px;
							border-top: 1px solid darkgrey; border-bottom: 1px solid darkgrey;background-color: black; z-index: 200;">
					</div>
					<div id="subpanel-library-pane" style="position: relative; top: 0px; width:100%;
						overflow: auto; z-index: 1205; border-top: 1px solid darkgrey;
						height: 100%;">
						<div id="subpanelsGrid" style="width: 100%; height: 100%;"></div>
					</div>
				</div>
				<div id="toolsidebar" style="background: black; width: 12px; height: 100%; position: absolute;
					top: 0px; right: -13px; border-left: 1px solid gray;">
					<img src="images/ui/warrow.png" style="width: 12px; position: absolute; left: 0px; top: calc(50% - 6px);" />
				</div>
			</div>
		<!-- End of Tools Panel -->
		
		<!-- Resources Panel -->
			<div id="resources-panel" class="resources-panel layerX noselect"
				style="overflow: visible; opacity: 1.0; display: block; position: absolute;
					width: 290px; height: calc(100% - 63px); right: 0px; top: 63px; background: rgba(128,128,128,0.65);">
				<div id="resources-buttons" style="position: absolute; width: 100%; height: 58px; left: 0px; top: 0px;
					border-bottom: solid white 1px; background: black;">
					<div id="props-props-label" style="margin-top: 0px; font-size: 13px; width: 97%; margin: 1%;
					position: relative; left: 0px; top: 0px; background-color: #000; z-index: 201; height: 36.5%;
					cursor: pointer; color: white; text-align: center; color: #ccc; border-radius: 3px;
					line-height: 160%; font-size: 80%; font-weight: bold; border: 1px solid #737373;"
					class="props-label">Item Properties</div><div id="panel-props-label" style="margin-top: 0px; font-size: 13px; width: 30.5%; margin: 1%;
					position: relative; left: 0px; top: 0px; display: inline-block; background-color: #000; z-index: 201; height: 36.5%;
					cursor: pointer; color: white; text-align: center; color: #ccc; border-radius: 3px;
					line-height: 160%; font-size: 80%; font-weight: bold; border: 1px solid #737373;"
					class="props-label">Panel</div><div id="project-props-label" style="margin-top: 0px; font-size: 13px; width: 30.5%; margin: 1%;
					position: relative; left: 0%; top: 0px; display: inline-block; background-color: #000; z-index: 201; height: 36.5%;
					cursor: pointer; color: white; text-align: center; color: #ccc; border-radius: 3px;
					line-height: 160%; font-size: 80%; font-weight: bold; border: 1px solid #737373;"
					class="props-label">Project</div><div id="assets-props-label" style="margin-top: 0px; font-size: 13px; width: 30.5%; margin: 1%;
					position: relative; left: 0%; top: 0px; display: inline-block; background-color: #000; z-index: 201; height: 36.5%;
					cursor: pointer; color: white; text-align: center; color: #ccc; border-radius: 3px;
					line-height: 160%; font-size: 80%; font-weight: bold; border: 1px solid #737373;"
					class="props-label">Assets</div>
				</div>
				<div id="props_props" class="props_props resources-item-pane tools_item layerD noselect" 
					ng-show="selected" ng-animate="{show: 'props_props-show', hide: 'props_props-hide'}"
					style="display: none; position: absolute; width: 100%; height: calc(100% - 58px); left: 0px; top: 58px;">
					<div id="props-props-pane" style="position: absolute; top: 0px; width: 100%; height: 100%;
						overflow: auto; z-index: 200; border-top: 1px solid darkgrey; border-bottom: 1px solid darkgrey;">
						
						<div id="item-basics" class="item-options-labels noselect"
							style="height: 40px; color: white; text-align: center; line-height: 2.5em; background: #000; border-left: 1px solid #444;
							border-bottom: 1px solid #444; cursor: pointer;"><b>Basic</b></div>
						<div id="item-basics-container" class="item-options noselect" style="overflow: hidden; background: none; 
							color: white; text-align: center; border: 1px solid transparent;">
							<div style="padding-top: 5px; padding-bottom: 5px;"><b>Width</b></div>
							<div class="noselect" style="width: 100%; overflow: auto; overflow-x: hidden;
								border-top: 1px solid #555; border-bottom: 1px solid #555; white-space: nowrap;">
								<input type="text" id="item-width-input" style="width: calc(100% - 42px); border-radius: 0px; text-align: center;" ng-value="selected[0].width"
								/><button id="item-width-input-button" class="pane-button">Set</button>
							</div>
							<div style="padding-top: 5px; padding-bottom: 5px;"><b>Height</b></div>
							<div class="noselect" style="width:100%;overflow:auto;overflow-x:hidden;border-top: 1px solid #555; border-bottom: 1px solid #555; white-space: nowrap;">
								<input type="text" id="item-height-input" style="width: calc(100% - 42px); border-radius: 0px; text-align: center;" value="80"
								/><button id="item-height-input-button" class="pane-button">Set</button>
							</div>
							<div style="padding-top: 5px; padding-bottom: 5px;"><b>Top</b></div>
							<div class="noselect" style="width: 100%; overflow: auto; overflow-x: hidden;
								border-top: 1px solid #555; border-bottom: 1px solid #555; white-space: nowrap;">
								<input type="text" id="item-top-input" style="width: calc(100% - 42px); border-radius: 0px; text-align: center;" value="80"
								/><button id="item-top-input-button" class="pane-button">Set</button>
							</div>
							<div style="padding-top: 5px; padding-bottom: 5px;"><b>Left</b></div>
							<div class="noselect" style="width:100%;overflow:auto;overflow-x:hidden;border-top: 1px solid #555; border-bottom: 1px solid #555; white-space: nowrap;">
								<input type="text" id="item-left-input" style="width: calc(100% - 42px); border-radius: 0px; text-align: center;" value="80"
								/><button id="item-left-input-button" class="pane-button">Set</button>
							</div>
							<div style="border-top: 0px solid #555; height: 50px; padding-top: 5px; padding-bottom: 5px;"><b>Layer</b>
								<div style="height: 40px; text-align: center; white-space: nowrap;">
									<button id="item-to-up-button" class="black-button">Up</button>
									<button id="item-to-down-button" class="black-button">Down</button>
									<button id="item-to-top-button" class="black-button">Top</button>
									<button id="item-to-bottom-button" class="black-button">Bottom</button>
								</div>
							</div>
						</div>
						
						<div ng-show="buttonstates.length" id="item-states" class="item-options-labels noselect"
							style="display: block; height: 40px; color: white; text-align: center; line-height: 2.5em;
							cursor: pointer; background: #000; border-left: 1px solid #444;
							border-bottom: 1px solid #444;"><b>States</b></div>
						<div ng-show="buttonstates.length" id="item-states-container" class="item-options noselect"
							style="overflow: hidden; background: none; color: white; text-align: center; position: relative; border: 1px solid transparent;">
							<div ng-repeat="state in buttonstates" style="width: 100%; background: none; color: white; text-align: center; border-bottom: 1px solid black;">
								<div style="padding-top: 5px; padding-bottom: 5px;"><b>Name</b></div>
								<div class="noselect" style="width: 100%; overflow: auto; overflow-x: hidden; margin-bottom: 4px;
									border-top: 1px solid #555; border-bottom: 1px solid #555; white-space: nowrap;">
									<input type="text" class="state-name-input" style="width: calc(100% - 42px); border-radius: 0px; text-align: center;" 
									value="{{state.name}}" \><button id="item-width-input-button" 
									data-index="{{buttonstates.indexOf(state)}}" data-name="{{state.name}}" class="pane-button" onclick="
										var button = this;
										$('.outlined').each(function(){
											var item = pb.getItem(this.id);
											var stateindex = $(button).data('index') + 1;
											item.getState(stateindex).name = $(button.parentNode).find('.state-name-input').val();
										});
										ng.buttonstates = pb.getItem($('.outlined')[0].id).core.states;
									">Set</button>
								</div>
								<button data-name="{{state.name}}" class="black-button" 
									onclick="var name = $(this).data('name'); $('.outlined').each(function(){pb.getItem(this.id).setState(name);});">View State</button>
								<button class="black-button" data-name="{{state.name}}" onclick="
									textEditor.open({index: $(this).data('name')});
								">Edit Script</button>
								<br>
								<button class="black-button" data-index="{{buttonstates.indexOf(state)}}" onclick="
									var self = this;
									var index = $(this).data('index');
									pb.openDialog({
										content: 'Extra CSS Styling:<br>'+
											'<textarea id=\x22new_style\x22 style=\x22width: 365px; height: 94px;\x22 value=\x22\x22 /></textarea>',
										style: {
											height: '170px',
											'border-radius': '15px'
										},
										init: function(){
											$('#new_style').val(pb.getItem($('.first')[0].id).getState(index+1).style);
										},
										onConfirm: function(){
											$('.outlined').each(function(){
												pb.getItem(this.id).getState(index+1).style = $('#new_style').val();
												pb.getItem(this.id).setState();
											});
											pb.closeDialog();
										}
									});
								">Set Style</button>
								<button data-name="{{state.name}}" class="black-button" 
									onclick="
										if (ng.buttonstates.length <= 1){
											pb.openDialog({
												content: '<div>Buttons must have at least one state</div>',
												style: {height: '120px'}, cancel: false,
												onConfirm: function(){
													pb.closeDialog();
												}
											});
										}
										else {
											var name = $(this).data('name');
											pb.openDialog({
												content: '<div>Delete this state on selected buttons?</div>',
												style: {height: '120px'},
												onConfirm: function(){
													$('.outlined').each(function(){
														pb.getItem(this.id).deleteState(name);
													});
													var array = [];
													$('.outlined').each(function(){
														var item = pb.getItem(this.id);
														if (item instanceof Button) for (var i=0; i<item.core.states.length; i++){
															var found = false;
															for (var j=0; j<array.length; j++){
																if (item.core.states[i].name == array[j].name) found = true;
															}
															if (!found) array.push(item.core.states[i]);
														}
													});
													ng.buttonstates = array;
													$('#item-states-container').slideDown(1000);
													
													pb.closeDialog();
												}
											});
										}
									">Delete State</button>
								<br>
								<div style="border-bottom: 0px solid #555; height: 60px; margin-top: 4px;">
									<b>Background Color:</b>
									<div style="height: 40px; text-align: center;">
										<input id="BGcolor" class="color {pickerFaceColor:'#111'}" data-name="{{state.name}}"
											data-index="{{buttonstates.indexOf(state)}}"
											onchange="
												var color = this.color;
												var index = $(this).data('index');
												$('.outlined').each(function(){
													pb.getItem(this.id).getState(index+1).bgcolor = '#' + color;
													pb.getItem(this.id).setState();
												});
											">
										<img class="remove-bgcolor" src="images/icons/delete3.png"
											data-index="{{buttonstates.indexOf(state)}}"
											onclick="
												var index = $(this).data('index');
												$('.outlined').each(function(){
													pb.getItem(this.id).getState(index+1).bgcolor = '';
													pb.getItem(this.id).setState();
												});
											"
											title="Remove Background Color" style="cursor: pointer; width: 25px; height: 25px;
												position: relative; top: 6px;" />
									</div>
								</div>
								<div style="overflow-x: hidden;">
									<b>Background Image:</b><br />&nbsp;
									<input type="file" id="buttonbgFileInput" accept="image/x-png, image/gif, image/jpeg"
										style="margin-top: 5px; border: none; vertical-align: top;"
										data-index="{{buttonstates.indexOf(state)}}"
										onclick="this.value = null;"
										onchange="
											var file = this.files[0];
											var index = $(this).data('index');
											sendFile(file, {command: 'image', puid: pb.project.core.puid}, function(opts){
												$('.outlined').each(function(){
													pb.getItem(this.id).getState(index+1).bgimage = opts.filename;
													pb.getItem(this.id).setState();
												});
											});
										">
									<img class="remove-bg" src="images/icons/delete3.png"
										data-index="{{buttonstates.indexOf(state)}}"
										onclick="
											var index = $(this).data('index');
											$('.outlined').each(function(){
												pb.getItem(this.id).element.style.backgroundImage = 'none';
												pb.getItem(this.id).getState(index+1).bgimage = blankimg;
												pb.getItem(this.id).setState();
											});
										"
										title="Remove Background" style="cursor: pointer; width: 25px; height: 25px;
										padding-top: 4px;" />
								</div>
								<script>jscolor.init();</script>
								<div style=""><b>Hue:</b></div>
								<div class="noselect" style="width:100%;overflow:auto;overflow-x:hidden;border-top: 0px solid #555; border-bottom: 0px solid #555; height: 35px; text-align: center;">
									<div style="width: 100%; display: inline; text-align: center;">
										<div data-index="{{buttonstates.indexOf(state)}}" class="hue-slider" style="display: block; width: 60%; margin-left: 20%; margin-top: 5px;"></div>
									</div>
								</div>
								<div style=""><b>Saturation:</b></div>
								<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 0px solid #555; border-bottom: 0px solid #555; height: 35px; text-align: center;">
									<div style="width: 100%; display: inline; text-align: center;">
										<div data-index="{{buttonstates.indexOf(state)}}" class="sat-slider" style="display: block; width: 60%; margin-left: 20%; margin-top: 5px;"></div>
									</div>
								</div>
								<script>
									$('.hue-slider').each(function(){
										var self = this;
										$(this).slider({
											value:0, min: 0, max: 100, step: 1,
											slide: function(event, ui){
												var index = $(self).data('index');
												$('.outlined').each(function(){
													var item = pb.getItem(this.id); if (!item) return;
													var tval = parseInt(parseInt($(self).slider('option', 'value'))*3.6)+'deg';
													if (item instanceof Button){
														if (undef(item.core.states[index].cssfilter) || 
															item.core.states[index].cssfilter === 'none' || !item.core.states[index].cssfilter)
															item.core.states[index].cssfilter = 'hue-rotate(0deg) saturate(1)';
														var s1 = item.core.states[index].cssfilter.substring(0, item.core.states[index].cssfilter.indexOf('(')+1);
														var s2 = item.core.states[index].cssfilter.substring(item.core.states[index].cssfilter.indexOf(')'));
														item.core.states[index].cssfilter = s1+tval+s2;
													}
													item.setState();
												});
											}
										});
									});
									$('.sat-slider').each(function(){
										var self = this;
										$(this).slider({
											value:0, min: 0, max: 100, step: 1,
											slide: function(event, ui){
												var index = $(self).data('index');
												$('.outlined').each(function(){
													var item = pb.getItem(this.id); if (!item) return;
													var tval = (parseInt($(self).slider('option', 'value'))*2)+'%';
													if (item instanceof Button){
														if (undef(item.core.states[index].cssfilter) ||
															item.core.states[index].cssfilter === 'none' || !item.core.states[index].cssfilter)
															item.core.states[index].cssfilter = 'hue-rotate(0deg) saturate(1)';
														var s1 = item.core.states[index].cssfilter.substring(0, nindexOf(item.core.states[index].cssfilter, '(', 2)+1);
														var s2 = item.core.states[index].cssfilter.substring(nindexOf(item.core.states[index].cssfilter, ')', 2));
														item.core.states[index].cssfilter = s1+tval+s2;
													}
													item.setState();
												});
											}
										});
									});
								</script>
							</div>
							<div style="padding-top: 5px; padding-bottom: 5px;"><b>Name</b></div>
							<input type="text" id="new-state-name-input" style="width: calc(100% - 0px); border-radius: 0px; text-align: center; margin-bottom: 3px;" \>
							<button id="add-state-button" class="black-button" style="position: relative; margin: 6px;">Add New State</button>
						</div>
						
						<div id="item-border" class="item-options-labels noselect"
							style="height: 40px; color: white; text-align: center; line-height: 2.5em;
							background: #000; cursor: pointer; border-left: 1px solid #444;
							border-bottom: 1px solid #444;" onclick="
								var item = pb.getItem($('.outlined')[0].id);
								if (item.core.states[item.core.currentstate].borders && item.core.states[item.core.currentstate].borders.tl &&
									/px/.test(item.core.states[item.core.currentstate].borders.tl)) $('#item-border-radius-tl').val(parseInt(item.core.states[item.core.currentstate].borders.tl));
								if (item.core.states[item.core.currentstate].borders && item.core.states[item.core.currentstate].borders.tr &&
									/px/.test(item.core.states[item.core.currentstate].borders.tr)) $('#item-border-radius-tr').val(parseInt(item.core.states[item.core.currentstate].borders.tr));
								if (item.core.states[item.core.currentstate].borders && item.core.states[item.core.currentstate].borders.bl &&
									/px/.test(item.core.states[item.core.currentstate].borders.tb)) $('#item-border-radius-tb').val(parseInt(item.core.states[item.core.currentstate].borders.tb));
								if (item.core.states[item.core.currentstate].borders && item.core.states[item.core.currentstate].borders.br &&
									/px/.test(item.core.states[item.core.currentstate].borders.br)) $('#item-border-radius-br').val(parseInt(item.core.states[item.core.currentstate].borders.br));
							"><b>Border</b></div>
						<div id="item-border-container" class="item-options noselect"
							style="overflow: hidden; background: none; color: white; text-align: center; border: 1px solid transparent;">
							<div style="padding-top: 5px; padding-bottom: 5px;"><b>Size:</b></div>
							<div style="width: 100%; overflow: auto; overflow-x: hidden; border-top: 1px solid #555; border-bottom: 1px solid #555; white-space: nowrap;">
								<input type="text" id="item-border-size" style="width: calc(100% - 42px); border-radius: 0px; text-align: center;"
								/><button id="item-border-size-button" class="pane-button">Set</button>
							</div>
							<div style="padding-top: 5px; padding-bottom: 5px; height: 60px;"><b>Color:</b>
								<br />
								<div id="borderColorSelector" class="colorSelector" title="Border Color" style="margin-left: 10px;"><div style="background-color: #000000"></div></div>
								<div style="height: 40px; text-align: center;">
									<input id="ie-borderColorSelector" class="color {pickerFaceColor:'#111'}" style=""
										onchange="var tcolor = this.color; $('.outlined').each(function(){this.style.borderColor = '#'+tcolor;});">
									<img id="ie-remove-bordercolor" src="images/icons/delete3.png"
										onclick="$('.outlined').each(function(){this.style.borderColor = 'rgba(0,0,0,0)';});"
										title="Remove Border Color" style="cursor: pointer; width: 25px; height: 25px;
										position: relative; top: 6px;" />
								</div>
								<br />
							</div>
							<div>Border-Radius Top-Left:</div>
							<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 0px solid #555; border-bottom: 0px solid #555;height:50px;">
								<div style="width: 100%; display: block; position: relative;">
									<div style="position: absolute; left: calc(20% - 45px); top: 5px; display: block; width: 45px;">
										<input type="radio" id="border-tl-px" name="border-tl" checked value="px" /> px<br><input type="radio" id="border-tl-pc" name="border-tl" value="pc" /> %</div>
									<div style="display: inline-block; width: 60%; top: 7px; float: right; margin-right: 20px;">
										<input type="text" class="item-border-radius" style="display: inline-block; position: relative; top: 13px; text-align: center;"
											name="" id="item-border-radius-tl" value="0" \>
										<div id="tl-slider" style="display: none; width: 90%; position: relative; top: 13px;"></div>
									</div>
									<br>
								</div>
							</div>
							<div>Border-Radius Top-Right:</div>
							<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 0px solid #555; border-bottom: 0px solid #555;height:50px;">
								<div style="width: 100%; display: block; position: relative;">
									<div style="position: absolute; left: calc(20% - 45px); top: 5px; display: block; width: 45px;">
										<input type="radio" id="border-tl-px" name="border-tr" checked value="px" /> px<br><input type="radio" id="border-tr-pc" name="border-tr" value="pc" /> %</div>
									<div style="display: inline-block; width: 60%; top: 7px; float: right; margin-right: 20px;">
										<input type="text" class="item-border-radius" style="display: inline-block; position: relative; top: 13px; text-align: center;"
											name="" id="item-border-radius-tr" value="0" \>
										<div id="tr-slider" style="display: none; width: 90%; position: relative; top: 13px;"></div>
									</div>
									<br>
								</div>
							</div>
							<div>Border-Radius Bottom-Left:</div>
							<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 0px solid #555; border-bottom: 0px solid #555;height:50px;">
								<div style="width: 100%; display: block; position: relative;">
									<div style="position: absolute; left: calc(20% - 45px); top: 5px; display: block; width: 45px;">
										<input type="radio" id="border-bl-px" name="border-bl" checked value="px" /> px<br><input type="radio" id="border-bl-pc" name="border-bl" value="pc" /> %</div>
									<div style="display: inline-block; width: 60%; top: 7px; float: right; margin-right: 20px;">
										<input type="text" class="item-border-radius" style="display: inline-block; position: relative; top: 13px; text-align: center;"
											name="" id="item-border-radius-bl" value="0" \>
										<div id="bl-slider" style="display: none; width: 90%; position: relative; top: 13px;"></div>
									</div>
									<br>
								</div>
							</div>
							<div>Border-Radius Bottom-Right:</div>
							<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 0px solid #555; border-bottom: 0px solid #555;height:50px;">
								<div style="width: 100%; display: block; position: relative;">
									<div style="position: absolute; left: calc(20% - 45px); top: 5px; display: block; width: 45px;">
										<input type="radio" id="border-br-px" name="border-br" checked value="px" /> px<br><input type="radio" id="border-br-pc" name="border-br" value="pc" /> %</div>
									<div style="display: inline-block; width: 60%; top: 7px; float: right; margin-right: 20px;">
										<input type="text" class="item-border-radius" style="display: inline-block; position: relative; top: 13px; text-align: center;"
											name="" id="item-border-radius-br" value="0" \>
										<div id="br-slider" style="display: none; width: 90%; position: relative; top: 13px;"></div>
									</div>
									<br>
								</div>
							</div>
						</div>
						
						<div id="item-boxshadow" class="item-options-labels noselect" style="height: 40px;
							color: white; text-align: center; line-height: 2.5em; cursor: pointer;
							background: #000; border-left: 1px solid #444;
							border-bottom: 1px solid #444;"><b>Box Shadow</b></div>
						<div id="item-boxshadow-container" class="item-options noselect"
							style="overflow: hidden; background: none; color: white; text-align: center; border: 1px solid transparent;">
							<div style="padding-left: 0px; margin-top: 4px; margin-bottom: 4px;"><input id="box-shadow-inset"
								type="checkbox" name="boxshadowinset" value="boxshadowinset"><b>Inset</b></div>
							<div style="border-bottom: 0px solid grey; height: 40px; margin-top: 4px; margin-bottom: 4px;"><b>Box Shadow Color:</b>
								<br />
								<div style="height: 40px; text-align: center; margin: 3px;">
									<input id="ie-boxShadowColorSelector" class="color {pickerFaceColor:'#111'}" style="">
								</div>
							</div>
							<div style="margin-top: 4px; margin-bottom: 4px;"><b>Vertical Position:</b></div>
							<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 0px solid #555;
								border-bottom: 0px solid #555;">
								<input type="text" value="5" id="box-shadow-vp-input" style="text-align: center;">
							</div>
							<div style="margin-top: 4px; margin-bottom: 4px;"><b>Horizontal Position:</b></div>
							<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 0px solid #555;
								border-bottom: 0px solid #555;">
								<input type="text" value="5" id="box-shadow-hp-input" style="text-align: center;">
							</div>
							<div style="margin-top: 4px; margin-bottom: 4px;"><b>Blur Radius:</b></div>
							<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 0px solid #555;
								border-bottom: 0px solid #555;">
								<input type="text" value="5" id="box-shadow-br-input" style="text-align: center;">
							</div>
							<div style="margin-top: 4px; margin-bottom: 4px;"><b>Spread Radius:</b></div>
							<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 0px solid #555;
								border-bottom: 0px solid #555; margin-bottom: 7px;">
								<input type="text" value="5" id="box-shadow-sr-input" style="text-align: center;">
							</div>
							<button id="box-shadow-remove-button" class="black-button" style="position: relative; margin: 6px;">Remove Shadow</button>
							<button id="box-shadow-button" class="black-button" style="position: relative; margin: 6px;">Set Shadow</button>
						</div>
						
						<div id="item-dropshadow" class="item-options-labels noselect" style="height: 40px;
							color: white; text-align: center; line-height: 2.5em; cursor: pointer;
							background: #000; border-left: 1px solid #444;
							border-bottom: 1px solid #444;"><b>Drop Shadow</b></div>
						<div id="item-dropshadow-container" class="item-options noselect"
							style="overflow: hidden; background: none; color: white; text-align: center; border: 1px solid transparent;">
							<div style="padding-left: 0px; margin-top: 4px; margin-bottom: 4px; display: none;"><input id="drop-shadow-inset"
								type="checkbox" name="boxshadowinset" value="boxshadowinset"><b>Inset</b></div>
							<div style="border-bottom: 0px solid grey; height: 40px; margin-top: 4px; margin-bottom: 4px;"><b>Drop Shadow Color:</b>
								<br />
								<div style="height: 40px; text-align: center; margin: 3px;">
									<input id="ie-dropShadowColorSelector" class="color {pickerFaceColor:'#111'}" style="">
								</div>
							</div>
							<div style="margin-top: 4px; margin-bottom: 4px;"><b>Vertical Position:</b></div>
							<div style="width: 100%; overflow: auto; overflow-x: hidden; border-top: 0px solid #555;
								border-bottom: 0px solid #555;">
								<input type="text" value="5" id="drop-shadow-vp-input" style="text-align: center;">
							</div>
							<div style="margin-top: 4px; margin-bottom: 4px;"><b>Horizontal Position:</b></div>
							<div style="width: 100%; overflow: auto; overflow-x: hidden; border-top: 0px solid #555;
								border-bottom: 0px solid #555;">
								<input type="text" value="5" id="drop-shadow-hp-input" style="text-align: center;">
							</div>
							<div style="margin-top: 4px; margin-bottom: 4px;"><b>Blur Radius:</b></div>
							<div style="width: 100%;overflow:auto;overflow-x:hidden;border-top: 0px solid #555;
								border-bottom: 0px solid #555;">
								<input type="text" value="5" id="drop-shadow-br-input" style="text-align: center;">
							</div>
							<div style="margin-top: 4px; margin-bottom: 4px; display: none;"><b>Spread Radius:</b></div>
							<div style="width: 100%; overflow: auto; overflow-x: hidden; border-top: 0px solid #555;
								border-bottom: 0px solid #555; margin-bottom: 7px; display: none;">
								<input type="text" value="5" id="drop-shadow-sr-input" style="text-align: center;">
							</div>
							<button id="drop-shadow-remove-button" class="black-button" style="position: relative; margin: 6px;">Remove Shadow</button>
							<button id="drop-shadow-button" class="black-button" style="position: relative; margin: 6px;">Set Shadow</button>
						</div>
						
						<div id="item-textshadow" class="item-options-labels noselect"
							style="display: block; height: 40px; color: white; text-align: center; line-height: 2.5em;
							cursor: pointer; background: #000; border-left: 1px solid #444;
							border-bottom: 1px solid #444;"><b>Text Shadow</b></div>
						<div id="item-textshadow-container" class="item-options noselect" style="display: block;
							overflow: hidden; background: none; color: white; text-align: center; border: 1px solid transparent;">
							<div style="border-bottom: 0px solid grey; height: 40px; margin-top: 4px; margin-bottom: 4px;"><b>Text Shadow Color:</b>
								<br />
								<div style="height: 40px; text-align: center; margin: 3px;">
									<input id="ie-textShadowColorSelector" class="color {pickerFaceColor:'#111'}" style="">
								</div>
							</div>
							<div style="margin-top: 4px; margin-bottom: 4px;"><b>Vertical Position:</b></div>
							<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 0px solid #555;
								border-bottom: 0px solid #555;">
								<input type="text" value="5" id="text-shadow-vp-input" style="text-align: center;">
							</div>
							<div style="margin-top: 4px; margin-bottom: 4px;"><b>Horizontal Position:</b></div>
							<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 0px solid #555;
								border-bottom: 0px solid #555;">
								<input type="text" value="5" id="text-shadow-hp-input" style="text-align: center;">
							</div>
							<div style="margin-top: 4px; margin-bottom: 4px;"><b>Blur Radius:</b></div>
							<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 0px solid #555;
								border-bottom: 0px solid #555;">
								<input type="text" value="5" id="text-shadow-br-input" style="text-align: center;">
							</div>
							<button id="text-shadow-remove-button" class="black-button" style="position: relative; margin: 6px;">Remove Shadow</button>
							<button id="text-shadow-button" class="black-button" style="position: relative; margin: 6px;">Set Shadow</button>
						</div>
						
						<div id="item-drawingtools" class="item-options-labels noselect"
							style="display: none; height: 40px; color: white; text-align: center; line-height: 2.5em;
							cursor: pointer; background: #000; border-left: 1px solid #444;
							border-bottom: 1px solid #444;"><b>&nbsp;&nbsp;Drawing Tools</b></div>
						<div id="item-drawingtools-container" class="item-options noselect"
							style="display: none; overflow: hidden; background: #444; color: white; border: 1px solid transparent;">
							<div style="display: inline-block; margin-left: 10px">
								<br /><button id="drawing-mode" class="btn btn-info">Cancel drawing mode</button><br>
								<button id="clear-canvas" class="btn btn-info">Clear</button><br>
								
								<div id="drawing-mode-options">
									<label for="drawing-mode-selector">Mode:</label>
									<select id="drawing-mode-selector">
										<option>Pencil</option>
										<option>Circle</option>
										<option>Spray</option>
										<option>Pattern</option>
										<option>hline</option>
										<option>vline</option>
										<option>square</option>
										<option>diamond</option>
										<option>texture</option>
									</select><br>
									
									<label for="drawing-line-width">Line width:</label>
									<span class="info">30</span><input type="range" value="30" min="0" max="150" id="drawing-line-width"><br>
									
									<label for="drawing-color">Line color:</label>
									<input type="color" value="#005E7A" id="drawing-color"><br>
									
									<label for="drawing-shadow-color">Shadow color:</label>
									<input type="color" value="#005E7A" id="drawing-shadow-color"><br>
									
									<label for="drawing-shadow-width">Shadow width:</label>
									<span class="info">0</span><input type="range" value="0" min="0" max="50" id="drawing-shadow-width"><br>
									
									<label for="drawing-shadow-offset">Shadow offset:</label>
									<span class="info">0</span><input type="range" value="0" min="0" max="50" id="drawing-shadow-offset"><br>
								</div><br />&nbsp;
							</div>
						</div>
						
						<!-- todo: reconcile 8300 8307 -->
						
						<?php if ($platform !== 'modero'){ ?>
							<div id="item-touchpanelkey" class="item-options-labels noselect"
								style="display: block; height: 40px; color: white; text-align: center; line-height: 2.5em;
								cursor: pointer; background: #000; border-left: 1px solid #444;
								border-bottom: 1px solid #444;"><b>Touch Panel Key</b></div>
							<div id="item-touchpanelkey-container" class="item-options noselect"
								style="display: block; overflow: hidden; background: none; color: white;
								text-align: center; position: relative; border: 1px solid transparent;">
								<img src="images/ntouch/ntouchkeys.png" style="margin-bottom: 7px; margin-top: 25px;" />
								<div style="position: absolute; top: 60px; left: 7px;">1 <input type="radio" name="tpkey" id="touchpanelkey-radio1" style="border: 1px solid black;"></div>
								<div style="position: absolute; top: 90px; left: 7px;">2 <input type="radio" name="tpkey" id="touchpanelkey-radio2"></div>
								<div style="position: absolute; top: 120px; left: 7px;">3 <input type="radio" name="tpkey" id="touchpanelkey-radio3"></div>
								<div style="position: absolute; top: 150px; left: 7px;">4 <input type="radio" name="tpkey" id="touchpanelkey-radio4"></div>
								<div style="position: absolute; top: 60px; right: 7px;">5 <input type="radio" name="tpkey" id="touchpanelkey-radio5"></div>
								<div style="position: absolute; top: 90px; right: 7px;">6 <input type="radio" name="tpkey" id="touchpanelkey-radio6"></div>
								<div style="position: absolute; top: 120px; right: 7px;">7 <input type="radio" name="tpkey" id="touchpanelkey-radio7"></div>
								<div style="position: absolute; top: 150px; right: 7px;">8 <input type="radio" name="tpkey" id="touchpanelkey-radio8"></div>
								<div style="margin-bottom: 7px;">None <input type="radio" name="tpkey" id="touchpanelkey-radio9" checked="checked"></div>
							</div>
						<?php } ?>
						
						<div id="item-icon" class="item-options-labels noselect" style="height: 40px;
							color: white; text-align: center; line-height: 2.5em; cursor: pointer;
							background: #000; border-left: 1px solid #444; border-bottom: 1px solid #444;" 
							onclick="
								var item = pb.getItem($('.outlined')[0].id); $('#icon-pos-input').val(item.core.iconstyle.position);
								$('#icon-w-input').val(parseFloat(item.core.iconstyle.width)); $('#icon-h-input').val(parseFloat(item.core.iconstyle.height));
							"><b>Icon</b></div>
						<div id="item-icon-container" class="item-options noselect"
							style="overflow: hidden; background: none; color: white; text-align: center; border: 1px solid transparent;">
							<div style="overflow-x: hidden;">
								<input type="file" id="iconFileInput" style="margin-top: 5px; border: none; vertical-align: top;"
									onclick="this.value = null;"
									onchange="
										var file = this.files[0];
										var index = $(this).data('index');
										sendFile(file, {command: 'image', puid: pb.project.core.puid}, function(opts){
											$('.outlined').each(function(){
												pb.getItem(this.id).core.iconimage = opts.filename;
												pb.getItem(this.id).setState();
											});
										});
									">
								<img id="item-remove-icon" src="images/icons/delete3.png" title="Remove Background"
									onclick="
										$('.outlined').each(function(){
											pb.getItem(this.id).core.iconimage = blankimg;
											pb.getItem(this.id).setState();
										});
									" style="cursor: pointer; width: 25px; height: 25px; padding-top: 4px;" />
							</div>
							<div style="margin-top: 4px; margin-bottom: 4px;"><b>Position:</b></div>
							<div style="width: 100%; overflow: auto; overflow-x: hidden; border-top: 0px solid #555;
									border-bottom: 0px solid #555; white-space: nowrap;">
									<select id="icon-pos-input" style="width: calc(100% - 42px); border-radius: 0px; text-align: center;" value="0">
										<option value="topleft">top left</option>
										<option value="topcenter">top center</option>
										<option value="topright">top right</option>
										<option value="centerleft">center left</option>
										<option value="center">center</option>
										<option value="centerright">center right</option>
										<option value="bottomleft">bottom left</option>
										<option value="bottomcenter">bottom center</option>
										<option value="bottomright">bottom right</option>
									</select><button class="pane-button" onclick="
										$('.outlined').each(function(){
											var item = pb.getItem(this.id);
											if (!item.core.iconstyle) item.core.iconstyle = {position: 'topcenter', left: 'calc(50% - 20px)', top: '0px', width: '40px', height: '40px'};
											switch ($('#icon-pos-input').val()){
												case 'topleft': 
													item.iconnode.style.top = item.core.iconstyle.top = '0px'; 
													item.iconnode.style.left = item.core.iconstyle.left = '0px'; 
													break;
												case 'topcenter': 
													item.iconnode.style.top = item.core.iconstyle.top = '0px'; 
													item.iconnode.style.left = item.core.iconstyle.left = 'calc(50% - '+parseFloat(item.iconnode.style.width)/2+'px)'; 
													break;
												case 'topright': 
													item.iconnode.style.top = item.core.iconstyle.top = '0px'; 
													item.iconnode.style.left = item.core.iconstyle.left = 'calc(100% - '+parseFloat(item.iconnode.style.width)+'px)';
													break;
												case 'centerleft': 
													item.iconnode.style.left = item.core.iconstyle.left = '0px'; 
													item.iconnode.style.top = item.core.iconstyle.top = 'calc(50% - '+parseFloat(item.iconnode.style.height)/2+'px)'; 
													break;
												case 'center': 
													item.iconnode.style.left = item.core.iconstyle.left = 'calc(50% - '+parseFloat(item.iconnode.style.width)/2+'px)'; 
													item.iconnode.style.top = item.core.iconstyle.top = 'calc(50% - '+parseFloat(item.iconnode.style.height)/2+'px)'; 
													break;
												case 'centerright': 
													item.iconnode.style.left = item.core.iconstyle.left = 'calc(100% - '+parseFloat(item.iconnode.style.width)+'px)'; 
													item.iconnode.style.top = item.core.iconstyle.top = 'calc(50% - '+parseFloat(item.iconnode.style.height)/2+'px)'; 
													break;
												case 'bottomleft': 
													item.iconnode.style.left = item.core.iconstyle.left = '0px'; 
													item.iconnode.style.top = item.core.iconstyle.top = 'calc(100% - '+parseFloat(item.iconnode.style.height)+'px)'; 
													break;
												case 'bottomcenter': 
													item.iconnode.style.left = item.core.iconstyle.left = 'calc(50% - '+parseFloat(item.iconnode.style.width)/2+'px)'; 
													item.iconnode.style.top = item.core.iconstyle.top = 'calc(100% - '+parseFloat(item.iconnode.style.height)+'px)'; 
													break;
												case 'bottomright': 
													item.iconnode.style.left = item.core.iconstyle.left = 'calc(100% - '+parseFloat(item.iconnode.style.width)+'px)'; 
													item.iconnode.style.top = item.core.iconstyle.top = 'calc(100% - '+parseFloat(item.iconnode.style.height)+'px)'; 
													break;
											}
											item.core.iconstyle.position = $('#icon-pos-input').val();
										});
									">Set</button>
							</div>
							<!--<div style="width: 100%; overflow: auto; overflow-x: hidden; border-top: 0px solid #555;
									border-bottom: 0px solid #555; white-space: nowrap;">
									<input type="text" id="icon-vp-input" style="width: calc(100% - 42px); border-radius: 0px; text-align: center;" 
										value="0" \><button class="pane-button" onclick="
										$('.outlined').each(function(){
											var item = pb.getItem(this.id);
											item.iconnode.style.top = $('#icon-vp-input').val()+'px';
											if (!item.core.iconstyle) item.core.iconstyle = {};
											item.core.iconstyle.top = $('#icon-vp-input').val()+'px';
										});
									">Set</button>
							</div>
							<div style="margin-top: 4px; margin-bottom: 4px;"><b>Horizontal Position:</b></div>
							<div style="width: 100%; overflow: auto; overflow-x: hidden; border-top: 0px solid #555;
									border-bottom: 0px solid #555; white-space: nowrap;">
									<input type="text" id="icon-hp-input" style="width: calc(100% - 42px); border-radius: 0px; text-align: center;" 
										value="0" \><button class="pane-button" onclick="
										$('.outlined').each(function(){
											var item = pb.getItem(this.id);
											item.iconnode.style.left = $('#icon-hp-input').val()+'px';
											if (!item.core.iconstyle) item.core.iconstyle = {};
											item.core.iconstyle.left = $('#icon-hp-input').val()+'px';
										});
									">Set</button>
							</div>-->
							<div style="margin-top: 4px; margin-bottom: 4px;"><b>Width (px):</b></div>
							<div style="width: 100%; overflow: auto; overflow-x: hidden; border-top: 0px solid #555;
									border-bottom: 0px solid #555; white-space: nowrap;">
									<input type="text" id="icon-w-input" style="width: calc(100% - 42px); border-radius: 0px; text-align: center;" 
										value="0" \><button class="pane-button" onclick="
										$('.outlined').each(function(){
											var item = pb.getItem(this.id);
											item.iconnode.style.width = $('#icon-w-input').val()+'px';
											if (!item.core.iconstyle) item.core.iconstyle = {position: 'topcenter', left: 'calc(50% - 20px)', top: '0px', width: '40px', height: '40px'};
											item.core.iconstyle.width = $('#icon-w-input').val()+'px';
											switch (item.core.iconstyle.position){
												case 'topleft': 
													item.iconnode.style.top = item.core.iconstyle.top = '0px'; 
													item.iconnode.style.left = item.core.iconstyle.left = '0px'; 
													break;
												case 'topcenter': 
													item.iconnode.style.top = item.core.iconstyle.top = '0px'; 
													item.iconnode.style.left = item.core.iconstyle.left = 'calc(50% - '+parseFloat(item.iconnode.style.width)/2+'px)'; 
													break;
												case 'topright': 
													item.iconnode.style.top = item.core.iconstyle.top = '0px'; 
													item.iconnode.style.left = item.core.iconstyle.left = 'calc(100% - '+parseFloat(item.iconnode.style.width)+'px)';
													break;
												case 'centerleft': 
													item.iconnode.style.left = item.core.iconstyle.left = '0px'; 
													item.iconnode.style.top = item.core.iconstyle.top = 'calc(50% - '+parseFloat(item.iconnode.style.height)/2+'px)'; 
													break;
												case 'center': 
													item.iconnode.style.left = item.core.iconstyle.left = 'calc(50% - '+parseFloat(item.iconnode.style.width)/2+'px)'; 
													item.iconnode.style.top = item.core.iconstyle.top = 'calc(50% - '+parseFloat(item.iconnode.style.height)/2+'px)'; 
													break;
												case 'centerright': 
													item.iconnode.style.left = item.core.iconstyle.left = 'calc(100% - '+parseFloat(item.iconnode.style.width)+'px)'; 
													item.iconnode.style.top = item.core.iconstyle.top = 'calc(50% - '+parseFloat(item.iconnode.style.height)/2+'px)'; 
													break;
												case 'bottomleft': 
													item.iconnode.style.left = item.core.iconstyle.left = '0px'; 
													item.iconnode.style.top = item.core.iconstyle.top = 'calc(100% - '+parseFloat(item.iconnode.style.height)+'px)'; 
													break;
												case 'bottomcenter': 
													item.iconnode.style.left = item.core.iconstyle.left = 'calc(50% - '+parseFloat(item.iconnode.style.width)/2+'px)'; 
													item.iconnode.style.top = item.core.iconstyle.top = 'calc(100% - '+parseFloat(item.iconnode.style.height)+'px)'; 
													break;
												case 'bottomright': 
													item.iconnode.style.left = item.core.iconstyle.left = 'calc(100% - '+parseFloat(item.iconnode.style.width)+'px)'; 
													item.iconnode.style.top = item.core.iconstyle.top = 'calc(100% - '+parseFloat(item.iconnode.style.height)+'px)'; 
													break;
											}
										});
									">Set</button>
							</div>
							<div style="margin-top: 4px; margin-bottom: 4px;"><b>Height (px):</b></div>
							<div style="width: 100%; overflow: auto; overflow-x: hidden; border-top: 0px solid #555;
									border-bottom: 0px solid #555; margin-bottom: 7px; white-space: nowrap;">
									<input type="text" id="icon-h-input" style="width: calc(100% - 42px); border-radius: 0px; text-align: center;" 
										value="0" \><button class="pane-button" onclick="
										$('.outlined').each(function(){
											var item = pb.getItem(this.id);
											item.iconnode.style.height = $('#icon-h-input').val()+'px';
											if (!item.core.iconstyle) item.core.iconstyle = {position: 'topcenter', left: 'calc(50% - 20px)', top: '0px', width: '40px', height: '40px'};
											item.core.iconstyle.height = $('#icon-h-input').val()+'px';
											switch (item.core.iconstyle.position){
												case 'topleft': 
													item.iconnode.style.top = item.core.iconstyle.top = '0px'; 
													item.iconnode.style.left = item.core.iconstyle.left = '0px'; 
													break;
												case 'topcenter': 
													item.iconnode.style.top = item.core.iconstyle.top = '0px'; 
													item.iconnode.style.left = item.core.iconstyle.left = 'calc(50% - '+parseFloat(item.iconnode.style.width)/2+'px)'; 
													break;
												case 'topright': 
													item.iconnode.style.top = item.core.iconstyle.top = '0px'; 
													item.iconnode.style.left = item.core.iconstyle.left = 'calc(100% - '+parseFloat(item.iconnode.style.width)+'px)';
													break;
												case 'centerleft': 
													item.iconnode.style.left = item.core.iconstyle.left = '0px'; 
													item.iconnode.style.top = item.core.iconstyle.top = 'calc(50% - '+parseFloat(item.iconnode.style.height)/2+'px)'; 
													break;
												case 'center': 
													item.iconnode.style.left = item.core.iconstyle.left = 'calc(50% - '+parseFloat(item.iconnode.style.width)/2+'px)'; 
													item.iconnode.style.top = item.core.iconstyle.top = 'calc(50% - '+parseFloat(item.iconnode.style.height)/2+'px)'; 
													break;
												case 'centerright': 
													item.iconnode.style.left = item.core.iconstyle.left = 'calc(100% - '+parseFloat(item.iconnode.style.width)+'px)'; 
													item.iconnode.style.top = item.core.iconstyle.top = 'calc(50% - '+parseFloat(item.iconnode.style.height)/2+'px)'; 
													break;
												case 'bottomleft': 
													item.iconnode.style.left = item.core.iconstyle.left = '0px'; 
													item.iconnode.style.top = item.core.iconstyle.top = 'calc(100% - '+parseFloat(item.iconnode.style.height)+'px)'; 
													break;
												case 'bottomcenter': 
													item.iconnode.style.left = item.core.iconstyle.left = 'calc(50% - '+parseFloat(item.iconnode.style.width)/2+'px)'; 
													item.iconnode.style.top = item.core.iconstyle.top = 'calc(100% - '+parseFloat(item.iconnode.style.height)+'px)'; 
													break;
												case 'bottomright': 
													item.iconnode.style.left = item.core.iconstyle.left = 'calc(100% - '+parseFloat(item.iconnode.style.width)+'px)'; 
													item.iconnode.style.top = item.core.iconstyle.top = 'calc(100% - '+parseFloat(item.iconnode.style.height)+'px)'; 
													break;
											}
										});
									">Set</button>
							</div>
						</div>
						
						<div id="item-text" class="item-options-labels noselect"
							style="height: 40px; color: white; text-align: center; line-height: 2.5em;
							background: #000; border-left: 1px solid #444;
							border-bottom: 1px solid #444; cursor: pointer;"><b>Text</b></div>
						<div id="item-text-container" class="item-options noselect" style="
							overflow: hidden; background: none; color: white; text-align: center; border: 1px solid transparent;">
							<div id="text-to-item" contenteditable="true" style="width: 100%; min-height: 70px; 
								background: white; color: black; cursor: text; position: relative;"></div>
							<button id="text-to-item-button" class="black-button" style="position: relative;">Set Text</button>
						</div>
						
					</div>
				</div>
				<div id="panel_props" class="resources-item-pane tools_item layerD noselect"
					style="position: absolute; width: 100%; height: 100%; left: 0px; top: 58px;">
					<div id="panel-props-pane" style="position: absolute; top: 0px; width:100%; height: 100%;
						overflow:auto; z-index: 200; border-top: 1px solid darkgrey; border-bottom: 1px solid darkgrey;">
						<div id="panel-basic-container" class="noselect"
							style="display: block; overflow: hidden; background: none; color: white;
								text-align: center; position: relative;">
							<div style="padding-top: 5px; padding-bottom: 5px;"><b>Name</b></div>
							<div class="noselect" style="width: 100%; overflow: auto; overflow-x: hidden;
								border-top: 1px solid #555; border-bottom: 1px solid #555; white-space: nowrap;">
								<input type="text" id="panel-name-input" style="width: calc(100% - 42px); border-radius: 0px; text-align: center;" value="80"
								/><button id="panel-name-input-button" class="pane-button">Set</button>
							</div>
							<div style="padding-top: 5px; padding-bottom: 5px;"><b>Width</b></div>
							<div class="noselect" style="width: 100%; overflow: auto; overflow-x: hidden;
								border-top: 1px solid #555; border-bottom: 1px solid #555; white-space: nowrap;">
								<input type="text" id="panel-width-input" style="width: calc(100% - 42px); border-radius: 0px; text-align: center;" ng-value="selected[0].width"
								/><button id="panel-width-input-button" class="pane-button">Set</button>
							</div>
							<div style="padding-top: 5px; padding-bottom: 5px;"><b>Height</b></div>
							<div class="noselect" style="width: 100%; overflow: auto; overflow-x: hidden;
								border-top: 1px solid #555; border-bottom: 1px solid #555; white-space: nowrap;">
								<input type="text" id="panel-height-input" style="width: calc(100% - 42px); border-radius: 0px; text-align: center;" value="80"
								/><button id="panel-height-input-button" class="pane-button">Set</button>
							</div>
							<div style="padding-top: 5px; padding-bottom: 5px;"><b>Default Panel</b></div>
							<div class="noselect" style="width: 100%; overflow: auto; overflow-x: hidden;">
								<input type="checkbox" id="panel-default-input" style="" />
							</div>
							<div style="padding-top: 5px; padding-bottom: 5px;"><b>Auto-Resize Panel to Device</b></div>
							<div class="noselect" style="width: 100%; overflow: auto; overflow-x: hidden;">
								<input type="checkbox" id="panel-autoresize-input" style="" />
							</div>
							<div style="border-bottom: 0px solid #555; height: 60px; margin-top: 4px;">
									<b>Background Color:</b>
									<div style="height: 40px; text-align: center;">
										<input id="panelBGcolor" class="color {pickerFaceColor:'#111'}"
											onchange="
												var color = '#'+this.color;
												$(pb.currentpanel.element).css({backgroundColor: color});
											">
										<img class="remove-bgcolor" src="images/icons/delete3.png"
											onclick="
												$(pb.currentpanel.element).css({backgroundColor: '#FFFFFF'});
												$('#panelBGcolor')[0].color.fromString('FFFFFF');
											"
											title="Remove Background Color" style="cursor: pointer; width: 25px; height: 25px;
												position: relative; top: 6px;" />
									</div>
								</div>
								<div style="overflow-x: hidden;">
									<b>Background Image:</b><br />&nbsp;
									<input type="file" id="panelBGFileInput" accept="image/x-png, image/gif, image/jpeg"
										style="margin-top: 5px; border: none; vertical-align: top;"
										onclick="this.value = null;"
										onchange="
											var file = this.files[0];
											sendFile(file, {command: 'image', puid: pb.project.core.puid}, function(opts){
												$(pb.currentpanel.element).css({
													backgroundImage: 'url('+opts.filename+')',
													backgroundSize: '100% 100%'
												});
											});
										">
									<img class="remove-bg" src="images/icons/delete3.png"
										onclick="
											$(pb.currentpanel.element).css({
												backgroundImage: 'none',
												backgroundSize: '100% 100%'
											});
										"
										title="Remove Background" style="cursor: pointer; width: 25px; height: 25px;
										padding-top: 4px;" />
								</div>
						</div>
					</div>
				</div>
				<div id="project_props" class="resources-item-pane tools_item layerD noselect"
					style="display: none; position: absolute; width: 100%; height: 100%; left: 0px; top: 58px;">
					<div id="project-props-tabs" class="noselect" style="
						display: none; position: relative; right: 0px; top: -2px; width: 100%; height: 39px;
						border-top: solid darkgrey 1px; background-color: black; z-index: 200;">
						<button type="button" onclick="pb.exportProject();" style="margin-top: 6px; float: right;">Export</button>
						<button type="button" onclick="promptSave();" style="margin-top: 6px; float: right;">Save</button>
						<button type="button" onclick="
							pb.openDialog('Are you sure?', 'Your current progress will not be saved.', function(){pb.loadProject()}, 'yesno');
							$('#project-name-display').css('display', 'none');
						" style="float: right; margin-left: 40px; margin-top: 6px;">New</button>
					</div>
					<div id="project-props-pane" style="position: relative; top: 0px; width:100%; height: 100%;
						overflow-x: hidden; z-index: 200; border-top: 1px solid darkgrey; border-bottom: 1px solid darkgrey;
						border-bottom: 1px solid darkgrey;">
						<div style="display: block; overflow: hidden; background: none; color: white;
							text-align: center; position: relative; padding-top: 5px; padding-bottom: 5px;"><b>Name</b></div>
						<div style="width: 100%; border-top: 1px solid #555; border-bottom: 1px solid #555;">
							<input type="text" id="project-props-name" style="width: 100%; height: 100%;
								border-radius: 0px; text-align: center;">
						</div>
						<div style="display: block; overflow: hidden; background: none; color: white;
							text-align: center; position: relative; padding-top: 5px; padding-bottom: 5px;"><b>Setup Script</b>
						</div>
						<div style="width:100%; border-top: 0px solid darkgrey; border-bottom: none; text-align: center;">
							<input type="button" id="project-props-setupscript" value="view" style="margin: 5px;" />
						</div>
						<div style="display: block; overflow: hidden; background: none; color: white;
							text-align: center; position: relative; padding-top: 5px; padding-bottom: 5px;" ng-show="wallcon"><b>Set project as N-Touch Panels</b>
						</div>
						<div style="width:100%;border-top: 0px solid darkgrey; border-bottom: 0px solid darkgrey; text-align: center;" ng-show="wallcon">
							<input type="button" id="project-props-n8301" value="set" style="margin: 5px;" />
						</div>
						<div style="display: block; overflow: hidden; background: none; color: white;
							text-align: center; position: relative; padding-top: 5px; padding-bottom: 5px;"><b>Snap Items to Panel</b>
						</div>
						<div style="width:100%; border-top: 0px solid darkgrey; border-bottom: 0px solid darkgrey; text-align: center;">
							<input type="checkbox" id="project-props-snaptopanel" checked="checked" style="margin: 5px;" onclick="
								if (pb.snap_to_panel) pb.snap_to_panel = false;
								else pb.snap_to_panel = true;
							" />
						</div>
						<div style="display: block; overflow: hidden; background: none; color: white;
							text-align: center; position: relative; padding-top: 5px; padding-bottom: 5px;"><b>Project Security Code</b>
						</div>
						<div style="width:100%; border-top: 0px solid darkgrey; border-bottom: 0px solid darkgrey; text-align: center;">
							<input type="text" id="project-props-passkey" style="margin: 5px; text-align: center;"
								onchange="this.value = this.value.replace(/\D/g, ''); pb.project.core.passkey = $(this).val();"
								onkeypress="this.value = this.value.replace(/\D/g, ''); pb.project.core.passkey = $(this).val();"
								onpaste="this.value = this.value.replace(/\D/g, ''); pb.project.core.passkey = $(this).val();"
								oninput="this.value = this.value.replace(/\D/g, ''); pb.project.core.passkey = $(this).val();"
							/>
						</div>
						<br>
						<div style="display: block; overflow: hidden; background: black; color: white;
							text-align: center; position: relative; padding-top: 5px; padding-bottom: 5px;"><b>Project Tree</b></div>
							<div id="project-props-tree" style="width:100%; color: white; margin: 0px; overflow-y: auto;">
								
							</div>
					</div>
				</div>
				<div id="asset_props" class="resources-item-pane tools_item layerD noselect"
					style="display: none; position: absolute; width: 100%; height: 100%; left: 0px; top: 58px;">
					<div id="asset-props-pane" style="position: relative; top: -2px; width:100%; height: 100%; overflow-y: auto;
						overflow-x: hidden; z-index: 200; border-top: 1px solid darkgrey;
						border-bottom: 1px solid darkgrey;">
						<div id="asset-props-tabs" class="noselect" style="position: relative; right: 0px; top: 0px; width: 100%;
								height: 40px; border-bottom: solid darkgrey 1px; background-color: #000000; z-index: 200;">
							<div id="assets-props-images" style="margin-top: 0px; font-size: 13px; width: 31%; margin: 1%;
								position: absolute; left: 0%; top: 2px; background-color: #000; z-index: 201; height: 73%;
								cursor: pointer; color: white; text-align: center; color: #ccc; border-radius: 3px;
								line-height: 220%; font-size: 80%; font-weight: bold; border: 1px solid #737373;"
								class="assets-props-label">Images</div>
							<div id="assets-props-scripts" style="margin-top: 0px; font-size: 13px; width: 31%; margin: 1%;
								position: absolute; left: 33%; top: 2px; background-color: #000; z-index: 201; height: 73%;
								cursor: pointer; color: white; text-align: center; color: #ccc; border-radius: 3px;
								line-height: 220%; font-size: 80%; font-weight: bold; border: 1px solid #737373;"
								class="assets-props-label">Scripts</div>
							<div id="assets-props-modules" style="margin-top: 0px; font-size: 13px; width: 31%; margin: 1%;
								position: absolute; left: 66%; top: 2px; background-color: #000; z-index: 201; height: 73%;
								cursor: pointer; color: white; text-align: center; color: #ccc; border-radius: 3px;
								line-height: 220%; font-size: 80%; font-weight: bold; border: 1px solid #737373;"
								class="assets-props-label">Modules</div>
						</div>
						<div id="assets-images-pane" class="assets-pane" style="display: none; width: 100%; height: calc(100% - 40px); position: absolute; left: 0%; top: 40px;">
							<div id="" style="width: 100%; height: 30px; background: black; position: relative; border-bottom: 2px solid rgb(169, 169, 169);">
								<div style="color: white; position: absolute; left: 20px; top: 8px; font-size: 13px; z-index: 50;" ng-show="disk.max">disk: {{disk.total}}/{{disk.max}}</div>
								<img src="images/icons/import.png" id="assets-images-import" class="buttons-button rotate90ccw" onclick=""
									style="margin-top: 4px; float: right; opacity: 1.0; height: 75%;" title="View" />
								<img src="images/icons/minus.png" id="assets-images-delete" class="buttons-button" onclick=""
									style="margin-top: 4px; float: right; opacity: 1.0; height: 75%;" title="Remove Selected Assets" />
								<img src="images/icons/plus.png" id="assets-images-add" class="buttons-button"
									style="float: right; margin-top: 4px; opacity: 1.0; height: 75%;" title="Add New Image Asset" />
							</div>
							<div id="assets-images-pane-list" style="position: relative; width: 100%; height: calc(100% - 60px); overflow-y: scroll;"></div>
						</div>
						<div id="assets-scripts-pane" class="assets-pane" style="display: none; width: 100%; height: calc(100% - 40px); position: absolute; left: 0%; top: 40px;">
							<div id="" style="width: 100%; height: 30px; background: black; position: relative; border-bottom: 2px solid rgb(169, 169, 169);">
								<div style="color: white; position: absolute; left: 20px; top: 8px; font-size: 13px; z-index: 50;" ng-show="disk.max">disk: {{disk.total}}/{{disk.max}}</div>
								<img src="images/icons/import.png" id="assets-scripts-import" class="buttons-button rotate90ccw" onclick=""
									style="margin-top: 4px; float: right; opacity: 1.0; height: 75%;" title="View" />
								<img src="images/icons/minus.png" id="assets-scripts-delete" class="buttons-button" onclick=""
									style="margin-top: 4px; float: right; opacity: 1.0; height: 75%;" title="Remove Selected Assets" />
								<img src="images/icons/plus.png" id="assets-scripts-add" class="buttons-button"
									style="float: right;
									margin-top: 4px; opacity: 1.0; height: 75%;" title="Add New Script Asset" />
							</div>
							<div id="assets-scripts-pane-list" style="position: relative; width: 100%; height: calc(100% - 32px); overflow-y: auto;"></div>
						</div>
						<div id="assets-modules-pane" class="assets-pane" style="display: none; width: 100%; height: calc(100% - 40px); position: absolute; left: 0%; top: 40px;">
							<div id="" style="width: 100%; height: 30px; background: black; position: relative; border-bottom: 2px solid rgb(169, 169, 169);">
								<div style="color: white; position: absolute; left: 20px; top: 8px; font-size: 13px; z-index: 50;" ng-show="disk.max">disk: {{disk.total}}/{{disk.max}}</div>
								<img src="images/icons/import.png" id="assets-modules-import" class="buttons-button rotate90ccw" onclick=""
									style="margin-top: 4px; float: right; opacity: 1.0; height: 75%;" title="View" />
								<img src="images/icons/minus.png" id="assets-modules-delete" class="buttons-button" onclick=""
									style="margin-top: 4px; float: right; opacity: 1.0; height: 75%;" title="Remove Selected Assets" />
								<img src="images/icons/plus.png" id="assets-modules-add" class="buttons-button"
									style="float: right;
									margin-top: 4px; opacity: 1.0; height: 75%;" title="Add New Module Asset" />
							</div>
							<div id="assets-modules-pane-list" style="position: relative; width: 100%; height: calc(100% - 32px); overflow-y: auto;"></div>
						</div>
					</div>
				</div>
				<div id="resourcesidebar" style="background: black; width: 12px; height: 100%; position: absolute;
					top: 0px; left: -13px; border-right: 1px solid gray;">
					<img class="fliph" src="images/ui/warrow.png"
						style="width: 12px; position: absolute; left: 0px; top: calc(50% - 6px);" />
				</div>
			</div>
		<!-- End of Resources Panel -->

		<!-- Panel View Area -->
			<div id="panels" class="scrollpanel" style="position: absolute; left: 0px; top: 80px;">
				<div id="panel-space-1" class="panel-space-center panel-space" style="position: absolute; left: 0px; top: 0px;"></div>
				<div id="panel-space-2" class="panel-space-left panel-space" style="position: absolute; left: 0px; top: 0px;"></div>
				<div id="panel-space-3" class="panel-space-right panel-space" style="position: absolute; left: 0px; top: 0px;"></div>
			</div>
		<!-- End of Panel View Area -->
		
		<!-- Hidden Elements -->
			<iframe style="display: none;" id="fileopener"></iframe>
			<div id="loading" style="position: absolute; left: 0%; top: 0%; background: rgba(0,0,0,0.3);"></div>
			<div id="tooltip2" style="position: absolute; display: none; z-index: 10000000;
				color: black; font-size: 11px; text-align: center; padding: 3px; border: 1px solid black;
				background: #fff; -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.25);
				-moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.25); box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.25); pointer-events: none;"></div>
			<div id="selectorbox" style="opacity: 0.65; display: none; z-index: 10000000; cursor: default !important;"></div>		
			<input type="file" id="file-open" style="position: absolute; top: 0; left: -10000px;"></input>
			<div id="maineditor" data-faded="false" style="overflow: hidden; display: none;
				position: absolute; width: 100%; height: 100%; z-index: 900000000; background-color: black;
				color: white; border: none; top: 0%; left: 0%; text-align: center; opacity: 1.0;">
				<div style="position: absolute; left: 5.0%; top: calc(10% - 56px);">
					<select id="maineditor_themes" style="position: absolute; z-index: 60;"
						onchange="maineditor.setTheme('ace/theme/'+$('#maineditor_themes').val());">
						<option value="vibrant_ink">Default</option>
						<optgroup label="Light">
							<option value="chrome">Chrome</option>
							<option value="clouds">Clouds</option>
							<option value="crimson_editor">Crimson Editor</option>
							<option value="dawn">Dawn</option>
							<option value="dreamweaver">Dreamweaver</option>
							<option value="eclipse">Eclipse</option>
							<option value="github">Github</option>
							<option value="solarized_light">Solarized Light</option>
							<option value="textmate">TextMate</option>
							<option value="tomorrow">Tomorrow</option>
							<option value="xcode">XCode</option>
							<option value="kuroir">Kuroir</option>
							<option value="katzenmilch">KatzenMilch</option>
						</optgroup>
						<optgroup label="Dark">
							<option value="ambiance">Ambiance</option>
							<option value="chaos">Chaos</option>
							<option value="clouds_midnight">Clouds Midnight</option>
							<option value="cobalt">Cobalt</option>
							<option value="idle_fingers">Idle Fingers</option>
							<option value="krtheme">krTheme</option>
							<option value="merbivore">Merbivore</option>
							<option value="merbivore_soft">Merbivore Soft</option>
							<option value="mono_industrial">Mono Industrial</option>
							<option value="monokai">Monokai</option>
							<option value="pastel_on_dark">Pastel on Dark</option>
							<option value="solarized_dark">Solarized Dark</option>
							<option value="terminal">Terminal</option>
							<option value="tomorrow_night">Tomorrow Night</option>
							<option value="tomorrow_night_blue">Tomorrow Night Blue</option>
							<option value="tomorrow_night_bright">Tomorrow Night Bright</option>
							<option value="tomorrow_night_eighties">Tomorrow Night 80s</option>
							<option value="twilight">Twilight</option>
							<option value="vibrant_ink">Vibrant Ink</option>
						</optgroup>
					</select>
				</div>
				<div id="fader-button" data-faded="false" style="display: none; position: absolute; left: 1%; top: 1%;
					width: 3%; background-size: 100% 100%; opacity: 0.3; cursor: pointer; z-index: 1000;"
					onmouseover="$(this).css({opacity: 0.6});"
					onmouseout="$(this).css({opacity: 0.3});">
					<img src="images/icons/opacity.png" style="width: 100%;" />
				</div>
				<div id="maineditor-topoptions" style="z-index: 90; position: absolute; left: 21%; top: calc(10% - 60px); 
					font-size: 24px; height: 25px; width: 20%;"></div>
				<div id="maineditor-selector" style="z-index: 90; position: absolute; left: calc(5% + 180px); top: calc(10% - 60px); 
					font-size: 24px; height: 25px; width: 190px;">
					<span style="font-size: 15px;">Script: </span><select id="maineditor-script-selector-select" 
						style="position: relative; top: -3px; left: 0px;">
						<option ng-repeat="item in maineditor_scripts" value="{{item.name}}">{{item.name}}</option>
					</select>
				</div>
				<div id="maineditor-itemid" style="position: relative; top: 0.3%; font-size: 25px;"></div>
				<img style="position: absolute; right: 4.8%; top: 3%; height: 5%;" src="images/svsi/svsi2.png" />
				<div id="maineditor_code" style="width: 90%; height: 79%; position: absolute; right: 5%; top: 10%; text-align: left;"></div>
				<div id="maineditor-help-button" data-show="false" type="button" onclick=""
					onmouseover="$(this).css({background: 'white', color: 'black'});"
					onmouseout="$(this).css({background: '#333', color: 'white'});"
					style="position: absolute; left: 7%; top: 91%; width: 120px; height: 45px; color: white;
						background: #333; line-height: 45px; font-size: 22px; text-align: center; border-radius: 25px;
						cursor: pointer; display: inline-block; font-family: 'Times New Roman';">Help</span></div>
				<div id="maineditor-save-button" type="button" onclick=""
					onmouseover="$(this).css({background: 'white', color: 'black'});"
					onmouseout="$(this).css({background: '#333', color: 'white'});"
					style="position: absolute; right: calc(7% + 140px); top: 91%; width: 120px; height: 45px; color: white;
						background: #333; line-height: 45px; font-size: 22px; text-align: center; border-radius: 25px;
						cursor: pointer; display: inline-block; font-family: 'Times New Roman';">Save</div>
				<div id="maineditor-cancel-button" type="button" onclick="textEditor.close();"
					onmouseover="$(this).css({background: 'white', color: 'black'});"
					onmouseout="$(this).css({background: '#333', color: 'white'});"
					style="position: absolute; right: 7%; top: 91%; width: 120px; height: 45px; color: white;
						background: #333; line-height: 45px; font-size: 22px; text-align: center; border-radius: 25px;
						cursor: pointer; display: inline-block; font-family: 'Times New Roman';">Cancel</div>
				<div id="maineditor-help-menu" style="position: absolute; left: calc(7% + 127px); bottom: calc(9% - 45px);
					width: 200px; height: 152px; background: none; display: none;">
					<div id="maineditor-scripthelp" style="position: absolute; left: 0%; top: 0%;
						width: 100%; height: 32%; color: white; background: #333; border-radius: 25px; cursor: pointer;
						line-height: 45px; font-size: 22px; text-align: center; font-family: 'Times New Roman';"
						onmouseover="$(this).css({background: '#bbb', color: 'black'});"
						onmouseout="$(this).css({background: '#333', color: 'white'});">script help</div>
					<div id="maineditor-modulehelp" style="position: absolute; left: 0%; top: 33%;
						width: 100%; height: 32%; color: white; background: #333; border-radius: 25px; cursor: pointer;
						line-height: 45px; font-size: 22px; text-align: center; font-family: 'Times New Roman';"
						onmouseover="$(this).css({background: '#bbb', color: 'black'});"
						onmouseout="$(this).css({background: '#333', color: 'white'});">module help</div>
					<div id="maineditor-commandhelp" style="position: absolute; left: 0%; top: 66%;
						width: 100%; height: 32%; color: white; background: #333; border-radius: 25px; cursor: pointer;
						line-height: 45px; font-size: 22px; text-align: center; font-family: 'Times New Roman';"
						onmouseover="$(this).css({background: '#bbb', color: 'black'});"
						onmouseout="$(this).css({background: '#333', color: 'white'});">command help</div>
				</div>
				<div style="position: absolute; left: 5.0%; top: calc(10% - 28px);">
					<select class="command-select" style="">
						<option value="tcpclient">tcpclient</option>
						<option value="udpclient">udpclient</option>
						<option value="require">require</option>
						<option value="module">module</option>
						<option value="gotopanel">gotopanel</option>
						<option value="tcpopen">tcpopen</option>
						<option value="tcpsend">tcpsend</option>
						<option value="tcpclose">tcpclose</option>
						<option value="get">get</option>
						<option value="self">self</option>
						<option value="asciitohex">asciiToHex</option>
						<option value="hextoascii">hexToAscii</option>
					</select>
					<span style="margin-right: 4px;" ng-show="maineditor.iptext">
						<input class="iptextinput" type="textbox" style="width: 110px;" placeholder="192.168.1.12" value="" />
					</span>
					<span style="margin-right: 4px;" ng-show="maineditor.porttext">
						<input class="porttextinput" type="textbox" style="width: 60px;" placeholder="50001" value="" />
					</span>
					<span style="margin-right: 4px;" ng-show="maineditor.msgtext">
						<input class="msgtextinput" type="textbox" placeholder="message/data" value="" />
					</span>
					<span style="margin-right: 4px;" ng-show="maineditor.itemtext">
						<input class="itemtextinput" type="textbox" placeholder="Button-1" value="" />
					</span>
					<select class="select1" style="margin-right: 4px;" ng-show="maineditor.select1">
						<option ng-repeat="item in maineditor.select1" ng-value="item.value">{{item.text}}</option>
					</select>
					<span style="margin-right: 4px;" ng-show="maineditor.file1">
						<input class="file1" type="file" />
					</span>
					<span style="margin-right: 4px;" ng-show="maineditor.textbox1">
						<input class="textbox1" type="textbox" style="{{maineditor.textbox1.style}}"
							placeholder="{{maineditor.textbox1.placeholder}}" value="" />
					</span>
					<span style="margin-right: 4px;" ng-show="maineditor.textbox2">
						<input class="textbox2" type="textbox" style="{{maineditor.textbox2.style}}"
							placeholder="{{maineditor.textbox2.placeholder}}" value="" />
					</span>
					<span style="margin-right: 4px;" ng-show="maineditor.textbox3">
						<input class="textbox3" type="textbox" style="{{maineditor.textbox3.style}}"
							placeholder="{{maineditor.textbox3.placeholder}}" value="" />
					</span>
					<select class="select2" style="margin-right: 4px;" ng-show="maineditor.select2">
						<option ng-repeat="item in maineditor.select2" ng-value="item.value">{{item.text}}</option>
					</select>
					<select class="select3" style="margin-right: 4px;" ng-show="maineditor.select3">
						<option ng-repeat="item in maineditor.select3" ng-value="item.value">{{item.text}}</option>
					</select>
					<select class="select4" style="margin-right: 4px;" ng-show="maineditor.select4">
						<option ng-repeat="item in maineditor.select4" ng-value="item.value">{{item.text}}</option>
					</select>
					<input class="add-command" style="margin-right: 4px;" type="button" value="add" />
				</div>
			</div>
			<div id="dialog-pane" class="mainpane" style="display: none; position: fixed; top: 0px; left: 0px;
				width: 100%; height: 100%; background: rgba(0,0,0,0.3);
				z-index: 500000000001;">
				<div id="dialog-minipane" class="minipane" style="display: block; background: none; position: absolute;">
					<div class="titletext titlebar" id="dialog_title" style="text-align: center; font-weight: bold;
						font-size: 22px;"></div>
					<div id="dialog_content"></div>
					<div id="dialog_buttons" style="position: absolute; left: 0px; bottom: 14px; width: 95%;">
						<input id="dialog_extra" type="button" value="none" style="float: right; margin-right: 6px;"></input>
						<input id="dialog_cancel" type="button" value="cancel" style="float: right; margin-right: 6px;"></input>
						<input id="dialog_confirm" type="button" value="ok" style="float: right; margin-right: 6px;"></input>
					</div>
				</div>
			</div>
			<div id="dialog-mousecatch" style="z-index: 19999; position: absolute; left: 0px; top: 0px;
				width: 100%; height: 100%; opacity: 1.0; background: #000;"></div>
		<!-- End of Hidden Elements -->
		
		<!-- Generic Script Editor -->
			<div id="scripteditor" style="position: absolute; left: 0%; top: 0%; display: none;
				background: black; width: 100%; height: 100%; z-index: 900000000;">
				<img style="position: absolute; right: 4.8%; top: 3%; height: 5%;" src="images/svsi/svsi2.png" />
				<div style="position: absolute; top: 0.3%; left: 0%; width: 100%; text-align: center;
					color: white; font-size: 23px;">
					<div id="scriptname"></div>
				</div>
				<div style="position: absolute; left: 5.0%; top: calc(10% - 56px);">
					<select id="scripttexteditor_themes" style="position: absolute; z-index: 60;" onchange="scripteditor.setTheme('ace/theme/'+$('#scripttexteditor_themes').val());">
						<option value="vibrant_ink">Default</option>
						<optgroup label="Light">
							<option value="chrome">Chrome</option>
							<option value="clouds">Clouds</option>
							<option value="crimson_editor">Crimson Editor</option>
							<option value="dawn">Dawn</option>
							<option value="dreamweaver">Dreamweaver</option>
							<option value="eclipse">Eclipse</option>
							<option value="github">Github</option>
							<option value="solarized_light">Solarized Light</option>
							<option value="textmate">TextMate</option>
							<option value="tomorrow">Tomorrow</option>
							<option value="xcode">XCode</option>
							<option value="kuroir">Kuroir</option>
							<option value="katzenmilch">KatzenMilch</option>
						</optgroup>
						<optgroup label="Dark">
							<option value="ambiance">Ambiance</option>
							<option value="chaos">Chaos</option>
							<option value="clouds_midnight">Clouds Midnight</option>
							<option value="cobalt">Cobalt</option>
							<option value="idle_fingers">Idle Fingers</option>
							<option value="krtheme">krTheme</option>
							<option value="merbivore">Merbivore</option>
							<option value="merbivore_soft">Merbivore Soft</option>
							<option value="mono_industrial">Mono Industrial</option>
							<option value="monokai">Monokai</option>
							<option value="pastel_on_dark">Pastel on Dark</option>
							<option value="solarized_dark">Solarized Dark</option>
							<option value="terminal">Terminal</option>
							<option value="tomorrow_night">Tomorrow Night</option>
							<option value="tomorrow_night_blue">Tomorrow Night Blue</option>
							<option value="tomorrow_night_bright">Tomorrow Night Bright</option>
							<option value="tomorrow_night_eighties">Tomorrow Night 80s</option>
							<option value="twilight">Twilight</option>
							<option value="vibrant_ink">Vibrant Ink</option>
						</optgroup>
					</select>
				</div>
				<div style="position: absolute; left: 5.0%; top: calc(10% - 28px);">
					<select class="command-select" style="">
						<option value="tcpclient">tcpclient</option>
						<option value="udpclient">udpclient</option>
						<option value="require">require</option>
						<option value="module">module</option>
						<option value="gotopanel">gotopanel</option>
						<option value="tcpopen">tcpopen</option>
						<option value="tcpsend">tcpsend</option>
						<option value="tcpclose">tcpclose</option>
						<option value="get">get</option>
						<option value="self">self</option>
						<option value="asciitohex">asciiToHex</option>
						<option value="hextoascii">hexToAscii</option>
					</select>
					<span style="margin-right: 4px;" ng-show="scripteditor.iptext">
						<input class="iptextinput" type="textbox" style="width: 110px;" placeholder="192.168.1.12" value="" />
					</span>
					<span style="margin-right: 4px;" ng-show="scripteditor.porttext">
						<input class="porttextinput" type="textbox" style="width: 60px;" placeholder="50001" value="" />
					</span>
					<span style="margin-right: 4px;" ng-show="scripteditor.msgtext">
						<input class="msgtextinput" type="textbox" placeholder="message/data" value="" />
					</span>
					<span style="margin-right: 4px;" ng-show="scripteditor.itemtext">
						<input class="itemtextinput" type="textbox" placeholder="Button-1" value="" />
					</span>
					<select class="select1" style="margin-right: 4px;" ng-show="scripteditor.select1">
						<option ng-repeat="item in scripteditor.select1" value="{{item.value}}">{{item.text}}</option>
					</select>
					<span style="margin-right: 4px;" ng-show="scripteditor.file1">
						<input class="file1" type="file" />
					</span>
					<span style="margin-right: 4px;" ng-show="scripteditor.textbox1">
						<input class="textbox1" type="textbox" style="{{scripteditor.textbox1.style}}"
							placeholder="{{scripteditor.textbox1.placeholder}}" value="" />
					</span>
					<span style="margin-right: 4px;" ng-show="scripteditor.textbox2">
						<input class="textbox2" type="textbox" style="{{scripteditor.textbox2.style}}"
							placeholder="{{scripteditor.textbox2.placeholder}}" value="" />
					</span>
					<span style="margin-right: 4px;" ng-show="scripteditor.textbox3">
						<input class="textbox3" type="textbox" style="{{scripteditor.textbox3.style}}"
							placeholder="{{scripteditor.textbox3.placeholder}}" value="" />
					</span>
					<select class="select2" style="margin-right: 4px;" ng-show="scripteditor.select2">
						<option ng-repeat="item in scripteditor.select2" value="{{item.value}}">{{item.text}}</option>
					</select>
					<select class="select3" style="margin-right: 4px;" ng-show="scripteditor.select3">
						<option ng-repeat="item in scripteditor.select3" value="{{item.value}}">{{item.text}}</option>
					</select>
					<select class="select4" style="margin-right: 4px;" ng-show="scripteditor.select4">
						<option ng-repeat="item in scripteditor.select4" value="{{item.value}}">{{item.text}}</option>
					</select>
					<input class="add-command" style="margin-right: 4px;" type="button" value="add" />
				</div>
				<div style="width: 90%; height: 79%; border: 1px solid black;
					position: absolute; right: 5%; top: 10%; overflow: hidden; background: #eeeeee;">
					<div id="scripteditor_code" style="width: 100%; height: 100%;"></div>
				</div>
				<div id="assets-script-addsave" 
					onmouseover="$(this).css({background: 'white', color: 'black'});"
					onmouseout="if ($(this).data('active') != true)
						$(this).css({background: '#333', color: 'white'});"
					style="position: absolute; right: calc(7% + 140px); top: 91%; width: 120px; height: 45px; color: white;
						background: #333; line-height: 45px; font-size: 22px; text-align: center; border-radius: 25px;
						cursor: pointer; display: inline-block;">Save</div>
				<div id="assets-script-addcancel" onmouseover="$(this).css({background: 'white', color: 'black'});"
					onmouseout="if ($(this).data('active') != true)
						$(this).css({background: '#333', color: 'white'});"
					style="position: absolute; right: 7%; top: 91%; width: 120px; height: 45px; color: white;
						background: #333; line-height: 45px; font-size: 22px; text-align: center; border-radius: 25px;
						cursor: pointer; display: inline-block;">Cancel</div>
			</div>
		<!-- End of Script Editor -->
		
		<!-- Panel Builder Wizard -->
			<div id="wizard" style="background: black; position: absolute; left: 0px; top: 0px;
				width: 100%; height: 100%; z-index: 500000000; display: none; color: black; overflow: auto;">
				<div id="wizard_step2" style="position: relative; display: none; width: 100%; height: 100%;">
					<div id="wizard_ntouch" style="width: 493px; height: 498px;
							overflow: visible; left: calc(0% + 490px); top: 77px; position: absolute;">
						
						<div id="ntouch-panels" class="ntouch-panels" style="width: 240px; height: 320px;
							left: 126px; top: 80px; position: absolute; z-index: 40;">
							<div id="ntouch-panel-1" class="ntouch-panel" style="width: 240px; height: 320px;
								background: white; left: 0px; top: 0px; position: absolute; z-index: 40;">
								<div id="button1" style="width: 90px; height: 40px; left: 8px;
									top: 19px; position: absolute;">
									<img id="button1img" src="images/buttons/Buttons-1.png"
										style="width: 100%; height: 100%; position: absolute;" />
									<span id="button1text" style="position: absolute; top: 0px;
										width: 100%; text-align: center; line-height: 40px;"></span>
								</div>
								<div id="button2" style="width: 90px; height: 40px; left: 8px;
									top: 102px; position: absolute; ">
									<img id="button2img" src="images/buttons/Buttons-1.png"
										style="width: 100%; height: 100%; position: absolute;" />
									<span id="button2text" style="position: absolute; top: 0px;
										width: 100%; text-align: center; line-height: 40px;"></span>
								</div>
								<div id="button3" style="width: 90px; height: 40px; left: 8px;
									top: 183px; position: absolute; ">
									<img id="button3img" src="images/buttons/Buttons-1.png"
										style="width: 100%; height: 100%; position: absolute;" />
									<span id="button3text" style="position: absolute; top: 0px;
										width: 100%; text-align: center; line-height: 40px;"></span>
								</div>
								<div id="button4" style="width: 90px; height: 40px; left: 8px;
									top: 262px; position: absolute; ">
									<img id="button4img" src="images/buttons/Buttons-1.png"
										style="width: 100%; height: 100%; position: absolute;" />
									<span id="button4text" style="position: absolute; top: 0px;
										width: 100%; text-align: center; line-height: 40px;"></span>
								</div>
								<div id="button5" style="width: 90px; height: 40px; left: 142px;
									top: 19px; position: absolute;">
									<img id="button5img" src="images/buttons/Buttons-1.png"
										style="width: 100%; height: 100%; position: absolute;" />
									<span id="button5text" style="position: absolute; top: 0px;
										width: 100%; text-align: center; line-height: 40px;"></span>
								</div>
								<div id="button6" style="width: 90px; height: 40px; left: 142px;
									top: 102px; position: absolute;">
									<img id="button6img" src="images/buttons/Buttons-1.png"
										style="width: 100%; height: 100%; position: absolute;" />
									<span id="button6text" style="position: absolute; top: 0px;
										width: 100%; text-align: center; line-height: 40px;"></span>
								</div>
								<div id="button7" style="width: 90px; height: 40px; left: 142px;
									top: 183px; position: absolute;">
									<img id="button7img" src="images/buttons/Buttons-1.png"
										style="width: 100%; height: 100%; position: absolute;" />
									<span id="button7text" style="position: absolute; top: 0px;
										width: 100%; text-align: center; line-height: 40px;"></span>
								</div>
								<div id="button8" style="width: 90px; height: 40px; left: 142px;
									top: 262px; position: absolute;">
									<img id="button8img" src="images/buttons/Buttons-1.png"
										style="width: 100%; height: 100%; position: absolute;" />
									<span id="button8text" style="position: absolute; top: 0px;
										width: 100%; text-align: center; line-height: 40px;"></span>
								</div>
							</div>
						</div>
												
						<img src="images/ntouch/ntouch.png" style="width: 100%; height: 100%;
							left: 0px; top: 0px; position: absolute;"></img>
							
						<div id="ntouchdiv5" class="ntouchbutton" style="width: 7.5%; height: 6.8%; background: rgba(255,255,255,0.7); z-index: 50;
							left: 83%; top: 20.5%; position: absolute; border-radius: 8px; opacity: 0;"></div>
						<img id="ntouchimg5" class="ntouchimgr" src="images/ntouch/redline.png" style="width: 24%; height: 16%;
							left: 86%; top: 9%; position: absolute; display: none;"></img>
						
						<div id="ntouchdiv6" class="ntouchbutton" style="width: 7.5%; height: 6.8%; background: rgba(255,255,255,0.7); z-index: 50;
							left: 83%; top: 37%; position: absolute; border-radius: 8px; opacity: 0;"></div>				
						<img id="ntouchimg6" class="ntouchimgr" src="images/ntouch/redline.png" style="width: 24%; height: 16%;
							left: 86%; top: 25.5%; position: absolute; display: none;"></img>
							
						<div id="ntouchdiv7" class="ntouchbutton" style="width: 7.5%; height: 6.8%; background: rgba(255,255,255,0.7); z-index: 50;
							left: 82.9%; top: 53.4%; position: absolute; border-radius: 8px; opacity: 0;"></div>
						<img id="ntouchimg7" class="ntouchimgr" src="images/ntouch/redline.png" style="width: 24%; height: 16%;
							left: 86%; top: 42%; position: absolute; display: none;"></img>
							
						<div id="ntouchdiv8" class="ntouchbutton" style="width: 7.5%; height: 6.8%; background: rgba(255,255,255,0.7); z-index: 50;
							left: 82.5%; top: 70.2%; position: absolute; border-radius: 8px; opacity: 0;"></div>
						<img id="ntouchimg8" class="ntouchimgr" src="images/ntouch/redline.png" style="width: 24%; height: 16%;
							left: 86%; top: 58.5%; position: absolute; display: none;"></img>
							
						<div id="ntouchdiv1" class="ntouchbutton" style="width: 7.5%; height: 6.8%; background: rgba(255,255,255,0.7); z-index: 50;
							left: 9.8%; top: 20.5%; position: absolute; border-radius: 8px; opacity: 0;"></div>	
						<img id="ntouchimg1" class="fliph ntouchimgl" src="images/ntouch/redline.png" style="width: 24%; height: 16%;
							left: -9%; top: 9%; position: absolute; -moz-transform: scaleX(-1);
							-webkit-transform: scaleX(-1); -o-transform: scaleX(-1); display: none;
							transform: scaleX(-1);"></img>
						
						<div id="ntouchdiv2" class="ntouchbutton" style="width: 7.5%; height: 6.8%; background: rgba(255,255,255,0.7); z-index: 50;
							left: 9.8%; top: 37%; position: absolute; border-radius: 8px; opacity: 0;"></div>					
						<img id="ntouchimg2" class="fliph ntouchimgl" src="images/ntouch/redline.png" style="width: 24%; height: 16%;
							left: -9%; top: 25.5%; position: absolute; -moz-transform: scaleX(-1);
							-webkit-transform: scaleX(-1); -o-transform: scaleX(-1); display: none;
							transform: scaleX(-1);"></img>
							
						<div id="ntouchdiv3" class="ntouchbutton" style="width: 7.5%; height: 6.8%; background: rgba(255,255,255,0.7); z-index: 50;
							left: 9.8%; top: 53.5%; position: absolute; border-radius: 8px; opacity: 0;"></div>
						<img id="ntouchimg3" class="fliph ntouchimgl" src="images/ntouch/redline.png" style="width: 24%; height: 16%;
							left: -9%; top: 42%; position: absolute; -moz-transform: scaleX(-1);
							-webkit-transform: scaleX(-1); -o-transform: scaleX(-1); display: none;
							transform: scaleX(-1);"></img>
							
						<div id="ntouchdiv4" class="ntouchbutton" style="width: 7.5%; height: 6.8%; background: rgba(255,255,255,0.7); z-index: 50;
							left: 9.6%; top: 69.6%; position: absolute; border-radius: 8px; opacity: 0;"></div>
						<img id="ntouchimg4" class="fliph ntouchimgl" src="images/ntouch/redline.png" style="width: 24%; height: 16%;
							left: -9%; top: 58.5%; position: absolute; -moz-transform: scaleX(-1);
							-webkit-transform: scaleX(-1); -o-transform: scaleX(-1); display: none;
							transform: scaleX(-1);"></img>
							
						<div id="ntouchleditor" style="width: 445px; min-height: 474px; background: rgba(40,40,40,1);
							left: -460px; top: -1px; position: absolute; z-index: 40; display: none;">
							<br><div style="text-align: center; line-height: 2em; margin-left: 4.8%; margin-right: 4.8%;">
								<span style="color: white; font-weight: bold;">Command:</span> 
								<select class="command-select" style="background: #444; color: white;">
									<option value="tcpclient">tcpclient</option>
									<option value="udpclient">udpclient</option>
									<option value="module">module</option>
									<option value="gotopanel">gotopanel</option>
								</select>
								<span style="margin-right: 4px;" ng-show="ntouchleditor.iptext">
									<select class="iptextinput" style="width: 110px; background: #444; color: white;" />
										<option value="">[SVSi Unit...]</option>
										<option ng-repeat="unit in unitlist" value="{{unit.ip}}">{{unit.name}}</option>
									</select>
								</span>
								<span style="margin-right: 4px;" ng-show="ntouchleditor.iptext">
									<input class="ip-button" style="" type="button" style="width: 70px;" value="discover" />
								</span>
								<span style="margin-right: 4px;" ng-show="ntouchleditor.porttext">
									<input class="porttextinput" style="width: 60px;background: #444; color: white;" type="textbox" placeholder="50001" value="" />
								</span>
								<span style="margin-right: 4px;" ng-show="ntouchleditor.msgtext">
									<input class="msgtextinput" style="background: #444; color: white;" type="textbox" placeholder="message/data" value="" />
								</span>
								<span style="margin-right: 4px;" ng-show="ntouchleditor.itemtext">
									<input class="itemtextinput" style="background: #444; color: white;" type="textbox" placeholder="Button-1" value="" />
								</span>
								<select class="select1" style="margin-right: 4px; background: #444; color: white;" ng-show="ntouchleditor.select1">
									<option ng-repeat="item in ntouchleditor.select1" value="{{item.value}}">{{item.text}}</option>
								</select>
								<span style="margin-right: 4px;" ng-show="ntouchleditor.file1">
									<input class="file1" type="file" />
								</span>
								<span style="margin-right: 4px;" ng-show="ntouchleditor.textbox1">
									<input class="textbox1" type="textbox" style="{{ntouchleditor.textbox1.style}}; background: #444; color: white;"
										placeholder="{{ntouchleditor.textbox1.placeholder}}" value="" />
								</span>
								<span style="margin-right: 4px;" ng-show="ntouchleditor.textbox2">
									<input class="textbox2" type="textbox" style="{{ntouchleditor.textbox2.style}}; background: #444; color: white;"
										placeholder="{{ntouchleditor.textbox2.placeholder}}" value="" />
								</span>
								<span style="margin-right: 4px;" ng-show="ntouchleditor.textbox3">
									<input class="textbox3" type="textbox" style="{{ntouchleditor.textbox3.style}}; background: #444; color: white;"
										placeholder="{{ntouchleditor.textbox3.placeholder}}" value="" />
								</span>
								<select class="select2" style="margin-right: 4px; background: #444; color: white;" ng-show="ntouchleditor.select2">
									<option ng-repeat="item in ntouchleditor.select2" value="{{item.value}}">{{item.text}}</option>
								</select>
								<select class="select3" style="margin-right: 4px; background: #444; color: white;" ng-show="ntouchleditor.select3">
									<option ng-repeat="item in ntouchleditor.select3" value="{{item.value}}">{{item.text}}</option>
								</select>
								<select class="select4" style="margin-right: 4px; background: #444; color: white;" ng-show="ntouchleditor.select4">
									<option ng-repeat="item in ntouchleditor.select4" value="{{item.value}}">{{item.text}}</option>
								</select>
								<select class="selectnum" style="display: none; background: #444; color: white;"></select>
								<input class="add-command" type="button" value="add"></input>
							</div><br>
							<div id="ntouchleditor_code" value="" style="width: 400px; height: 300px;
								margin-left: 4.8%;"></div>
							<br><div style="color: white; text-align: center; font-weight: bold;">Visual Button State: <select id="ntouchleditor-state"
								style="background: #444; color: white;">
								<option value="0">visible</option>
								<option value="-1">hidden</option>
							</select></div>
							<div id="ntouchleditor-text" style="text-align: center; color: white; font-weight: bold; position: relative; top: 5px;
								margin-bottom: 20px;">
								Button Text: <input id="ntouchleditor-textinput" style="background: #444; color: white;" type="text" value="" />
							</div>
						</div>
							
						<div id="ntouchreditor" style="width: 445px; min-height: 474px; background: rgba(40,40,40,1);
							right: -460px; top: -1px; position: absolute; z-index: 40; display: none;">
							<br><div style="text-align: center; line-height: 2em; margin-left: 4.8%; margin-right: 4.8%;">
								<span style="color: white; font-weight: bold;">Command:</span> 
								<select class="command-select" style="background: #444; color: white;">
									<option value="tcpclient">tcpclient</option>
									<option value="udpclient">udpclient</option>
									<option value="module">module</option>
									<option value="gotopanel">gotopanel</option>
								</select>
								<span style="margin-right: 4px;" ng-show="ntouchreditor.iptext">
									<select class="iptextinput" style="width: 110px; background: #444; color: white;" />
										<option value="">[SVSi Unit...]</option>
										<option ng-repeat="unit in unitlist" value="{{unit.ip}}">{{unit.name}}</option>
									</select>
								</span>
								<span style="margin-right: 4px;" ng-show="ntouchreditor.iptext">
									<input class="ip-button" type="button" style="width: 70px;" value="discover" />
								</span>
								<span style="margin-right: 4px;" ng-show="ntouchreditor.porttext">
									<input class="porttextinput" type="textbox" style="width: 60px; background: #444; color: white;" placeholder="50001" value="" />
								</span>
								<span style="margin-right: 4px;" ng-show="ntouchreditor.msgtext">
									<input class="msgtextinput" type="textbox" style="background: #444; color: white;" placeholder="message/data" value="" />
								</span>
								<span style="margin-right: 4px;" ng-show="ntouchreditor.itemtext">
									<input class="itemtextinput" type="textbox" placeholder="Button-1" value="" />
								</span>
								<select class="select1" style="margin-right: 4px; background: #444; color: white;" ng-show="ntouchreditor.select1">
									<option ng-repeat="item in ntouchreditor.select1" value="{{item.value}}">{{item.text}}</option>
								</select>
								<span style="margin-right: 4px;" ng-show="ntouchreditor.file1">
									<input class="file1" type="file" />
								</span>
								<span style="margin-right: 4px;" ng-show="ntouchreditor.textbox1">
									<input class="textbox1" type="textbox" style="{{ntouchreditor.textbox1.style}}; background: #444; color: white;"
										placeholder="{{ntouchreditor.textbox1.placeholder}}" value="" />
								</span>
								<span style="margin-right: 4px;" ng-show="ntouchreditor.textbox2">
									<input class="textbox2" type="textbox" style="{{ntouchreditor.textbox2.style}}; background: #444; color: white;"
										placeholder="{{ntouchreditor.textbox2.placeholder}}" value="" />
								</span>
								<span style="margin-right: 4px;" ng-show="ntouchreditor.textbox3">
									<input class="textbox3" type="textbox" style="{{ntouchreditor.textbox3.style}}; background: #444; color: white;"
										placeholder="{{ntouchreditor.textbox3.placeholder}}" value="" />
								</span>
								<select class="select2" style="margin-right: 4px; background: #444; color: white;" ng-show="ntouchreditor.select2">
									<option ng-repeat="item in ntouchreditor.select2" value="{{item.value}}">{{item.text}}</option>
								</select>
								<select class="select3" style="margin-right: 4px; background: #444; color: white;" ng-show="ntouchreditor.select3">
									<option ng-repeat="item in ntouchreditor.select3" value="{{item.value}}">{{item.text}}</option>
								</select>
								<select class="select4" style="margin-right: 4px; background: #444; color: white;" ng-show="ntouchreditor.select4">
									<option ng-repeat="item in ntouchreditor.select4" value="{{item.value}}">{{item.text}}</option>
								</select>
								<select class="selectnum" style="display: none; background: #444; color: white;">
									</select>
								<input class="add-command" type="button" value="add"></input>
							</div><br>
							<div id="ntouchreditor_code" value="" style="width: 400px; height: 300px; margin-left: 4.8%;"></div>
							<br><div style="color: white; text-align: center; font-weight: bold;">Visual Button State: <select id="ntouchreditor-state" 
								style="background: #444; color: white;">
								<option value="0">visible</option>
								<option value="-1">hidden</option>
							</select></div>
							<div id="ntouchreditor-text" style="text-align: center; color: white; font-weight: bold; position: relative; top: 5px;
								margin-bottom: 20px;">
								Button Text: <input id="ntouchreditor-textinput" type="text" value=""
									style="background: #444; color: white;" />
							</div>
						</div>
						
						<img id="ntouchminus" class="ntouchminus" src="images/ntouch/whiteminus.png" title="Remove this panel"
							style="width: 4.5%; height: 4.5%; left: 43.5%; top: -8.7%; position: absolute;
							cursor: pointer;"></img>
						<img id="ntouchplus" class="ntouchplus" src="images/ntouch/whiteplus.png" title="Add a panel"
							style="width: 4.5%; height: 4.5%; left: 50.5%; top: -8.7%; position: absolute;
							cursor: pointer;"></img>
							
						<img id="ntouchlarrow" class="ntoucharrow" src="images/ntouch/whitearrow.png"
							style="width: 3.5%; height: 6.5%; left: 58.5%; top: -9.75%; position: absolute;
							cursor: pointer;"></img>
						<img id="ntouchrarrow" class="ntoucharrow" src="images/ntouch/whitearrow.png"
							style="width: 3.5%; height: 6.5%; transform: scaleX(-1); cursor: pointer;
							left: 95%; top: -9.75%; position: absolute; -moz-transform: scaleX(-1);
							-webkit-transform: scaleX(-1); -o-transform: scaleX(-1);"></img>
							
						<div id="ntouchlabel" style="width: 31%; height: 7%; left: 63%; top: -10%; border-radius: 5px;
							position: absolute; background: white; color: black; text-align: center;
							font-size: 19px; font-weight: bold;">
							<span id="ntouchlabeltext" style="position: relative; top: 8px;">panel-1</span>
						</div>
						
						<div id="ntouchdefault" style="width: 28%; height: 7%; left: 64.5%; top: -17%; border-radius: 5px;
							position: absolute; background: black; color: white; text-align: center;
							font-size: 19px; font-weight: bold;">
							<a href="#" id="ntouchdefaultlabel" style="text-decoration: none; position: relative; top: 8px;">(set default)</a>
						</div>
						
					</div>
					<div id="ntouchsave" style="width: 100px; height: 40px; left: calc(75% - 50px); bottom: 3%; border-radius: 25px;
						position: fixed; background: black; color: white; text-align: center; z-index: 90000;
						cursor: pointer;">
						<span style="font-size: 19px; position: relative; font-weight: bold;
							top: 8px;">Save</span>
					</div>
					<div id="ntouchtoeditor" style="width: 150px; height: 40px; left: calc(90% - 75px); bottom: 3%; border-radius: 25px;
						position: fixed; background: black; color: white; text-align: center; z-index: 90000;
						cursor: pointer;">
						<span style="font-size: 19px; position: relative; font-weight: bold;
							top: 8px;">Send to Editor</span>
					</div>
					<div id="ntouchopen" style="width: 100px; height: 40px; left: calc(10% - 50px); bottom: 3%; border-radius: 25px;
						position: fixed; background: black; color: white; text-align: center; z-index: 90000;
						cursor: pointer;">
						<span style="font-size: 19px; position: relative; font-weight: bold;
							top: 8px;">Open</span>
					</div>
					<div id="ntouchsetup" style="width: 140px; height: 40px; left: calc(10% - 50px); top: 3%; border-radius: 25px;
						position: fixed; background: black; color: white; text-align: center; z-index: 90000; cursor: pointer;">
						<span style="font-size: 19px; position: relative; font-weight: bold;
							top: 8px;">Setup Script</span>
					</div>
					<div id="ntouchunits" style="width: 140px; height: 40px; right: calc(10% - 50px); top: 3%; border-radius: 25px;
						position: fixed; background: black; color: white; text-align: center; z-index: 90000; cursor: pointer; display: none;">
						<span style="font-size: 19px; position: relative; font-weight: bold;
							top: 8px;">Import Units</span>
					</div>
					<div id="ntouchhelp" data-open="false" style="width: 100px; height: 40px; left: calc(26% - 50px); top: 3%; border-radius: 25px;
						position: fixed; background: black; color: white; text-align: center; z-index: 90000; cursor: pointer;">
						<span style="font-size: 19px; position: relative; font-weight: bold;
							top: 8px;">Help</span>
					</div>
					<div id="ntouchhelp_wizard" style="width: 180px; height: 40px; left: calc(26% - 50px); top: calc(3% + 47px); border-radius: 25px;
						display: none; position: fixed; background: rgb(51,51,51); color: white; text-align: center; z-index: 90000; cursor: pointer;">
						<span style="font-size: 19px; position: relative; font-weight: bold;
							top: 8px;">Wizard Help</span>
					</div>
					<div id="ntouchhelp_module" style="width: 180px; height: 40px; left: calc(26% - 50px); top: calc(3% + 94px); border-radius: 25px;
						display: none; position: fixed; background: rgb(51,51,51); color: white; text-align: center; z-index: 90000; cursor: pointer;">
						<span style="font-size: 19px; position: relative; font-weight: bold;
							top: 8px;">Module Help</span>
					</div>
					<div id="ntouchhelp_command" style="width: 180px; height: 40px; left: calc(26% - 50px); top: calc(3% + 141px); border-radius: 25px;
						display: none; position: fixed; background: rgb(51,51,51); color: white; text-align: center; z-index: 90000; cursor: pointer;">
						<span style="font-size: 19px; position: relative; font-weight: bold;
							top: 8px;">Command Help</span>
					</div>

					<div id="ntouchstyle" style="width: 100px; height: 40px; left: calc(50% - 50px); bottom: 3%; border-radius: 25px;
						position: fixed; background: black; color: white; text-align: center; z-index: 900000;
						cursor: pointer;">
						<span style="font-size: 19px; position: relative; font-weight: bold;
							top: 8px;">Style</span>
					</div>
					
					<div id="ntouchstyler" style="background: white; position: fixed; width: 700px; height: 200px; z-index: 300;
						bottom: -200px; left: calc(50% - 350px); border-top-left-radius: 35px; border-top-right-radius: 35px; z-index: 900000;">
						<div style="position: absolute; left: 42%; top: 9%; font-weight: bold; font-size: 22px;">
							Panel Style
						</div>
						<div style="position: absolute; left: 23%; top: 35%;">
							Button BG: <input id="ntouchbuttonstate1bg" type="file" style="border: none;" />
						</div>
						<div style="position: absolute; left: 52%; top: 35%;">
							Panel BG: <input id="ntouchpanelbg" type="file" style="border: none;" />
						</div>
						<div style="position: absolute; left: 8%; top: 55%;">
							Font Size: <select id="ntouchfontsize">
								<option value="8">8</option>
								<option value="10">10</option>
								<option value="12">12</option>
								<option value="14">14</option>
								<option value="16">16</option>
								<option value="18">18</option>
								<option value="24">24</option>
							</select>
						</div>
						<div style="position: absolute; left: 30%; top: 55%;">
							Font Color: <input id="wizard-bgColorSelector" class="color {pickerFaceColor:'#111'}">
						</div>
						<div style="position: absolute; left: 60%; top: 55%;">
							Font Type: <select id="ntouchfonttype">
								<option value="Arial">Arial</option>
								<option value="Georgia">Georgia</option>
								<option value="Times New Roman">Times New Roman</option>
								<option value="Impact">Impact</option>
								<option value="Verdana">Verdana</option>
							</select>
						</div>
						<input id="ntouchstylereset" type="button" value="reset"
							style="position: absolute; left: 84%; top: 80%;" />
						<input id="ntouchstyleok" type="button" value="ok"
							style="position: absolute; left: 92%; top: 80%;" />
					</div>
					
				</div>
				
			</div>
			<div id="ntouchmeditor" style="width: 745px; height: 604px; background: rgba(40,40,40,1.0);
					left: 0px; top: 0px; position: absolute; z-index: 40000000000; display: none;">
				<br><div style="text-align: center; line-height: 2em; margin-left: 4.8%; margin-right: 4.8%;">
					<span style="color: white; font-weight: bold;">Command:</span> 
					<select class="command-select" style="background: #444; color: white;">
						<option value="tcpclient">tcpclient</option>
						<option value="udpclient">udpclient</option>
						<option value="module">module</option>
						<option value="gotopanel">gotopanel</option>
					</select>
					<span style="margin-right: 4px;" ng-show="ntouchmeditor.iptext">
						<select class="iptextinput" style="width: 110px; background: #444; color: white;" />
							<option value="">[SVSi Unit...]</option>
							<option ng-repeat="unit in unitlist" value="{{unit.ip}}">{{unit.name}}</option>
						</select>
					</span>
					<span style="margin-right: 4px;" ng-show="ntouchmeditor.iptext">
						<input class="ip-button" type="button" style="width: 70px;" value="discover" />
					</span>
					<span style="margin-right: 4px;" ng-show="ntouchmeditor.porttext">
						<input class="porttextinput" type="textbox" style="width: 60px; background: #444; color: white;" placeholder="50001" value="" />
					</span>
					<span style="margin-right: 4px;" ng-show="ntouchmeditor.msgtext">
						<input class="msgtextinput" type="textbox" placeholder="message/data" value="" style="background: #444; color: white;" />
					</span>
					<span style="margin-right: 4px;" ng-show="ntouchmeditor.itemtext">
						<input class="itemtextinput" type="textbox" placeholder="Button-1" value="" style="background: #444; color: white;" />
					</span>
					<select class="select1" style="margin-right: 4px; background: #444; color: white;" ng-show="ntouchmeditor.select1">
						<option ng-repeat="item in ntouchmeditor.select1" value="{{item.value}}">{{item.text}}</option>
					</select>
					<span style="margin-right: 4px;" ng-show="ntouchmeditor.file1">
						<input class="file1" type="file" />
					</span>
					<span style="margin-right: 4px;" ng-show="ntouchmeditor.textbox1">
						<input class="textbox1" type="textbox" style="{{ntouchmeditor.textbox1.style}}; background: #444; color: white;"
							placeholder="{{ntouchmeditor.textbox1.placeholder}}" value="" />
					</span>
					<span style="margin-right: 4px;" ng-show="ntouchmeditor.textbox2">
						<input class="textbox2" type="textbox" style="{{ntouchmeditor.textbox2.style}}; background: #444; color: white;"
							placeholder="{{ntouchmeditor.textbox2.placeholder}}" value="" />
					</span>
					<span style="margin-right: 4px;" ng-show="ntouchmeditor.textbox3">
						<input class="textbox3" type="textbox" style="{{ntouchmeditor.textbox3.style}}; background: #444; color: white;"
							placeholder="{{ntouchmeditor.textbox3.placeholder}}" value="" />
					</span>
					<select class="select2" style="margin-right: 4px; background: #444; color: white;" ng-show="ntouchmeditor.select2">
						<option ng-repeat="item in ntouchmeditor.select2" value="{{item.value}}">{{item.text}}</option>
					</select>
					<select class="select3" style="margin-right: 4px; background: #444; color: white;" ng-show="ntouchmeditor.select3">
						<option ng-repeat="item in ntouchmeditor.select3" value="{{item.value}}">{{item.text}}</option>
					</select>
					<select class="select4" style="margin-right: 4px; background: #444; color: white;" ng-show="ntouchmeditor.select4">
						<option ng-repeat="item in ntouchmeditor.select4" value="{{item.value}}">{{item.text}}</option>
					</select>
					<select class="selectnum" style="display: none; background: #444; color: white;">
						</select>
					<input class="add-command" type="button" value="add"></input>
				</div><br>
				<div id="ntouchmeditor_code" value="" style="width: 670px; height: 420px; margin-left: 4.8%;"></div>
				<input id="ntouchmeditor-savebutton" type="button" value="save" style="position: absolute; right: 80px; bottom: 30px;"></input>
				<input id="ntouchmeditor-cancelbutton" type="button" value="cancel" style="position: absolute; right: 20px; bottom: 30px;"></input>
			</div>
			<div id="ntouchmeditorbg" style="display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;
				background: rgba(0,0,0,0.5); z-index: 500000001;"></div>
		<!-- End of Panel Builder Wizard -->

		<!-- Kickstart Everything (ie. Main) -->
			<script>
				document.write('<script src="js/main.js?v='+version+'"\><\/script>');
				document.write('<script src="js/sandbox.js?v='+version+'"\><\/script>');
			</script>
		<!-- End of Kickstart Everything (ie. Main) -->
		
	</body>
</html>
