My Lighting

Home
Settings
Help
- Forums
- Wiki
- Support
- FAQs
- About
Admin Console

Load Config

<div id='nav'>
                        <div class="feedbar feedback">	
                        </div>
                        <div class='panel hidden' id='menuadv'>
                            <a class='nav' href="" onclick="$.jStorage.flush(); cache.html = []; alert('Cache Cleared'); return false;">Clear Cache</a>
                            {#if $T.modules.networking.isInstalled}{*networking*}
                                <a class='nav' href="#networking_resources" onclick="display('/networking/resources/'); return false;">Networking Resources</a>
                                <a class='nav' href="#networking_wol" onclick="display('/networking/wol/'); return false;">Networking WOL</a>
                            {#/if}
                            <a class='nav half' href="/admin.jnlp">Install Web App (Local)</a>
                            <a class='nav half' href="http://www.universal-devices.com/99i/{$T.app_version}/admin.jnlp">Install Web App (Internet)</a>
                            <a class='nav' href="#config&tmpl=options" onclick="display('/config/',false,'options'); return false;">Options</a>
                            <a class='nav' href="#config&tmpl=about" onclick="display('/config/',false,'about'); return false;">About</a>
                        </div>
                    
			<div class='panel'>
				<a class='nav' href="#nodes" onclick="display('/nodes/');return false;">My Devices & Scenes</a>
				<a class='nav' href="#nodes/devices" onclick="display('/nodes/devices/');return false;">My Devices</a>
				<a class='nav' href="#nodes/scenes" onclick="display('/nodes/scenes/'); return false;">My Scenes</a>
				{#if $T.modules.eMeter.isInstalled || $T.modules.eMeterSEP.isInstalled}{*eMeter*}
					<a class='nav' href="#emeter" onclick="display('/emeter/'); return false;">My Energy</a>
				{#/if}
				{#if $T.modules.climate.isInstalled}{*Wheather Module*}
					<a class='nav' href="#climate" onclick="display('/climate/'); return false;">My Weather</a>
				{#/if}
				<a class='nav' href="#programs" onclick="display('/programs/'); return false;">My Programs</a>
				{#if $T.modules.networking.isInstalled}
                                    <a class='nav' href="#networking_resources" onclick="display('/networking/resources/'); return false;">Networking Resources</a>
                                    <a class='nav' href="#networking_wol" onclick="display('/networking/wol/'); return false;">Networking WOL</a>
				{#/if}				
				{#if $T.modules.checkitPortal.isInstalled}
                                    <a class='nav' href="http://www.check-it.ca/monitor/s/check-it/start.html?from=isyajax">Check-it Energy Monitoring Portal</a>
				{#/if}
				{#if $T.modules.greennetPortal.isInstalled}
                                    <a class='nav' href="http://gmeter.greennet.com/monitor/s/greennet/my/power/summary.html?from=isyajax">gMeter Energy Monitoring Portal</a>
				{#/if}
                                <a class='nav' href="#conf/cams" onclick="display('/conf/cams.jsn');return false;">Cameras</a>
                                {#if $T.modules.elk.isInstalled || showElk == true}
                                    <a class='nav' href="#elk/get/topology" onclick="display('/elk/get/topology'); return false;">Elk</a>
				{#/if}
                                
				<a class='nav' href="#config&tmpl=varsPanel" onclick="display(false,false,'varsPanel'); return false;">Variables</a>

</div>
		</div>

{#if title('Options')}{#/if}
		<div class='panel'>
			<a class='back_link' onclick="display('/config/');">Back</a>
		</div>
		<div class='node'>
			<div class='property'>
				<span class="label">SubDevices:</span> <select onchange="$.cookie('showSubDevices',this.value);showSubDevices=bool(this.value);cache.html = [];">
					<option value="true" {#if showSubDevices}SELECTED{#/if}>Show</option>
					<option value="false" {#if !showSubDevices}SELECTED{#/if}>Hide</option>
				</select>
			</div>
			<div class='property'>
				<span class="label">Controllers:</span> <select onchange="$.cookie('showControllers',this.value);showControllers=bool(this.value);cache.html = [];">
					<option value="true" {#if showControllers}selected{#/if}>Show</option>
					<option value="false" {#if !showControllers}selected{#/if}>Hide</option>
				</select>
			</div>
			<div class='property'>
				<span class="label">Disabled:</span> <select onchange="$.cookie('showDisabled',this.value);showDisabled=bool(this.value);cache.html = [];">
					<option value="true" {#if showDisabled}selected{#/if}>Show</option>
					<option value="false" {#if !showDisabled}selected{#/if}>Hide</option>
				</select>
			</div>
                        <div class='property'>
				<span class="label">Labels:</span> <select onchange="$.cookie('showLabels',this.value);showLabels=bool(this.value);if(this.value=='true')$('body').addClass('showLabels');else $('body').removeClass('showLabels');">
					<option value="true" {#if showLabels}selected{#/if}>Show</option>
					<option value="false" {#if !showLabels}selected{#/if}>Hide</option>
				</select>
			</div>
			<div class='property'>
				<span class="label">Max Width:</span> <select onchange="$.cookie('bodyWidth',this.value);bodyWidth=this.value;$('body').css('max-width',bodyWidth);">
					<option value="463px" {#if bodyWidth=="463px"}selected{#/if}>Normal</option>
                                        <option value="560px" {#if bodyWidth=="560px"}selected{#/if}>Wider</option>
					<option value="960px" {#if bodyWidth=="960px"}selected{#/if}>2x</option>
					<option value="1440px" {#if bodyWidth=="1440px"}selected{#/if}>3x</option>
					<option value="100%" {#if bodyWidth=="100%"}selected{#/if}>Fill Page</option>
				</select>
			</div>
                        <div class='property'>
				<span class="label">Local Caching:</span> <select onchange="$.cookie('cacheLocal',this.value);cacheLocal=bool(this.value);">
					<option value="true" {#if cacheLocal}selected{#/if}>Enable</option>
					<option value="false" {#if !cacheLocal}selected{#/if}>Disable</option>
				</select>
			</div>
                        {#if !$T.modules.elk.isInstalled}{* if the elk module is not install give the option to show it anyways *}
                        <div class='property'>
				<span class="label">ELK:</span> <select onchange="$.cookie('showElk',this.value);showElk=bool(this.value);">
					<option value="true" {#if showElk}selected{#/if}>Show</option>
					<option value="false" {#if !showElk}selected{#/if}>Hide</option>
				</select>
			</div>
                        {#/if}
			<div class='property'>
				<span class="label"> </span>
				<button onclick="$.jStorage.flush(); cache.html = []; alert('Cache Cleared'); return false;">Clear Cache</button>
			</div>
			<div class='property'>
				<span class="label"> </span>
				<button onclick="window.location = 'http://www.universal-devices.com/99i/{$T.app_version}/admin.jnlp'; return false;">Install Admin Console (Internet)</button>
			</div>
		</div>

{#if title('Variables')}{#/if}
            <div class="feedbar">
                <div  class="back_holder"><a class='back_link' onclick="display('/config/');">Back</a></div>
                <div class="refresh_holder"><a class='refresh_link' onclick="update();">Refresh</a></div>
                <span  class="feedback"></span>
            </div>
            <div class='vars'>
                <div class='title'>INT Variables</div>
                <div id="intPanel" class="panelP">
                    <a class='nav' href="#/vars/definitions/1/" onclick="display('/vars/definitions/1/','#intPanel'); return false;">Loading Variables (INT)</a>
                    <input type="hidden" class="load" value="/vars/definitions/1/">
                </div>
                <div class='title'>STATE Variables</div>
                <div id="statePanel" class="panelP">
                    <a class='nav' href="#/vars/definitions/2/" onclick="display('/vars/definitions/2/','#statePanel'); return false;">Loading Variables (STATE)</a>
                    <input type="hidden" class="load" value="/vars/definitions/2/">
                </div>
            </div>
            <div class="feedbar">
                <div  class="back_holder"><a class='back_link' onclick="display('/config/');">Back</a></div>
                <div class="refresh_holder"><a class='refresh_link' onclick="update();">Refresh</a></div>
                <span  class="feedback"></span>
            </div>

{#if $P.url == "/nodes" || $P.url == "/nodes/"}
			{#param name=folderView value=true}
		{#/if}
		<div class="feedbar">
			{#if $T.id}
				{#if $T.parentType == 1}{* Parent is node *}
					<div  class="back_holder"><a class='back_link' onclick="display('/nodes/{$T.parent}',false,'nodes');">Back</a></div>
				{#elseif $T.parentType == 3}{* Parent is folder *}
				<div  class="back_holder"><a class='back_link' onclick="display2('/nodes/',false,false,'folder(\'{$T.parentId}\');');">Back</a></div>
				{#else}
				<div  class="back_holder"><a class='back_link' onclick="display('/nodes/');">Back</a></div>
				{#/if}
			{#else}
				<div  class="back_holder"><a class='back_link' onclick="display('/config/');">Back</a></div>
			{#/if}
			<div class="refresh_holder"><a class='refresh_link' onclick="update();">Refresh</a></div>
			<span  class="feedback"></span>	
		</div>
                
                <div id='titlebar'><span id='title'>{$T.name}{#if $P.folderView && !$T.name}Devices & Scenes{#/if}</span></div>
		{#if $T.id}
                    <input type="hidden" class="update" value="/nodes/{$T.address}">
			<div id="node{$T.id}" class='node nodeView {$T.nodeClass}'>
				<div class='properties'>
					{#foreach $T.properties as property}
					<div class='property node{$T.id}{$T.property.id}'>
						<a class='propertylabel'> {$T.property.label} </a>:
						<a id='node{$T.id}{$T.property.id}' class='{$T.property.pclass}'>{$T.property.formatted}</a>
					</div>
					{#/for}
				</div>
				<div class='commands' id='commands'>
					{#foreach $T.controls as control}
						{#if controls[$T.control].actions[0]}
							<select class="node{$T.id}{$T.control}" onchange="getCmd('{$T.address}', '{controls[$T.control].name}/' + this.value);">
							<option value="null">{controls[$T.control].label}</option>
							{#foreach controls[$T.control].actions as action}
								<option value="{$T.action.name}">{$T.action.label}</option>
							{#/for}
							</select>
                                                {#else}
							{#if controls[$T.control].name == 'DON' || controls[$T.control].name == 'DON' || controls[$T.control].name == 'DOF' || controls[$T.control].name == 'BRT' || controls[$T.control].name == 'DIM'  || controls[$T.control].name == 'ST'}
                                                            {#if controls[$T.control].action}
                                                                <div class="cmd cmd{controls[$T.control].name}" onclick="getCmd('{$T.address}','{controls[$T.control].name}/{controls[$T.control].action}');"></div>
                                                            {#else}
                                                                <div class="cmd cmd{controls[$T.control].name}" onclick="getCmd('{$T.address}','{controls[$T.control].name}');"></div>
                                                            {#/if}
							{#else}
                                                            {#if controls[$T.control].action}
                                                                <input type="button" class="node{$T.id}{$T.control}" onclick="getCmd('{$T.address}','{controls[$T.control].name}/{controls[$T.control].action}');" value="{controls[$T.control].label}">
                                                            {#else}
                                                                <input type="button" class="node{$T.id}{$T.control}" onclick="getCmd('{$T.address}','{controls[$T.control].name}');" value="{controls[$T.control].label}">
                                                            {#/if}
							{#/if}
						{#/if}
						{#cycle values=['', '<br/>']}
					{#/for}
				</div>
			</div>
		{#/if}
                {#if $T.id && $T.nodes}{*Children nodes are from cached data, update status as soon as page loads*}
                    <input type="hidden" class="load" value="/status/">
                {#/if}
		{#if $T.nodes}
                <input type="hidden" class="update" value="/status/">
		<div class="nodelist nodes">
			<table class="gridTable">
				{#foreach $T.nodes as node}
					<tbody id="node{$T.node.id}" class="p{$T.node.parentId} {$T.node.nodeClass}" {#if $T.node.parent && $P.folderView}style="display:none"{#/if}>
					<tr>
						{#if ($T.node.folder && $T.node.name.charAt(0) != nodeHideChar)}{* Show Folders *}
							<td class="col1">
								<div class="node folder">
									<div class="line1"><a href="#/nodes/&tmpl=nodes&folder={$T.node.id}" onclick="folder('{$T.node.id}','{$T.node.name}');return false;">{$T.node.name}</a></div>
								</div>
							</td>
							<td class="col2"> </td>
						{#/if}
			
						{#if ($T.node.cat != 0 || showControllers) && ($T.node.flag != 0 || showSubDevices)  && ($T.node.enabled != false || showDisabled) && !$T.node.folder && $T.node.name.charAt(0) != nodeHideChar}{* hides controlers, sub-devices,disabled nodes, folders (already shown above), nodes that start with '~' *}

<td class="col1">
								<div class="node">
									<div class="line1">
										{#if $P.folderView || $T.id}
											<a href="#nodes/{$T.node.address}&tmpl=nodes" onclick="display('/nodes/{$T.node.address}/',false,'nodes');return false;">{$T.node.name}
										{#else}
											<a href="#nodes/{$T.node.address}" onclick="display('/nodes/{$T.node.address}/',false,false,'setBack(\'{$P.url}\',\'{$T.node.parentId}\');');return false;">{$T.node.name}
										{#/if}
										{#if $T.node.cat}
											{#if $T.node.properties.length <= 1}
												<span id='node{$T.node.id}ST' class="{$T.node.statusClass}">{$T.node.status}</span></a>
											{#else}
												</a></div><div class="properties line1">
												{#foreach $T.node.properties as property}
													<span class='node{$T.node.id}{$T.property.id} {$T.property.id}'>
														<span id='node{$T.node.id}{$T.property.id}' class='{$T.property.pclass}'>{$T.property.formatted}</span>
														<span class='propertylabelshort'>{$T.property.labelShort}</span>
													</span>
												{#/for}
											{#/if}
										{#else}
											</a>
										{#/if}
									</div>
								</div>
							</td>
							<td class="col2">
								{#if !$T.node.folder && $T.node.cat !=0}
									<div class="commands">
                                                                                {#if $T.node.family == 4 && $T.node.subCat == 8}{*Zwave Thermostats, display no controls*}
										{#elseif $T.node.cat == 5}{*Thermostats*}
                                                                                    {#if $T.node.group == '1'}{* only show up down controls for main thermostat node not the other nodes *}
											<div class="cmd cmdBRT" onclick="getCmd('{$T.node.address}','BRT');"><div class='cmdLabel'>Up</div></div>
                                                                                        <div class="cmdSeparator"></div>
											<div class="cmd cmdDIM" onclick="getCmd('{$T.node.address}','DIM');"><div class='cmdLabel'>Down</div></div>
                                                                                    {#/if}
                                                                                {#elseif $T.node.cat == 1 && $T.node.subCat == 46 && $T.node.group == '2'}{*Fanlinc-Motor, on dosn't work without a speed so set to 100% high*}
                                                                                        <div class="cmd cmdDON" onclick="getCmd('{$T.node.address}','DON/255');"><div class='cmdLabel'>On</div></div>
                                                                                        <div class="cmdSeparator"></div>
											<div class="cmd cmdDOF" onclick="getCmd('{$T.node.address}','DOF');"><div class='cmdLabel'>Off</div></div>
                                                                                {#elseif !$T.node.family && $T.node.cat == 0}{*display no controls for insteon cat 0 (Generalized Controllers)*}
                                                                                {#elseif !$T.node.family && $T.node.cat == 3}{*display no controls for insteon cat 3 (Network Bridges)*}
                                                                                {#elseif !$T.node.family && $T.node.cat == 16}{*display no controls for insteon cat 16 (Security, Health, Safety) *}
                                                                                {#else}
											<div class="cmd cmdDON" onclick="getCmd('{$T.node.address}','DON');"><div class='cmdLabel'>On</div></div>
                                                                                        <div class="cmdSeparator"></div>
											<div class="cmd cmdDOF" onclick="getCmd('{$T.node.address}','DOF');"><div class='cmdLabel'>Off</div></div>
										{#/if}
									</div>
								{#/if}
							</td>
						{#/if}
					</tr>
				</tbody>
				{#/for}
			</table>
		</div>
		{#/if}
		<div class="feedbar">
			{#if $T.id}
				{#if $T.parentType == 1}{* Parent is node *}
					<div  class="back_holder"><a class='back_link' onclick="display('/nodes/{$T.parent}',false,'nodes');">Back</a></div>
				{#elseif $T.parentType == 3}{* Parent is folder *}
				<div  class="back_holder"><a class='back_link' onclick="display2('/nodes/',false,false,'folder(\'{$T.parentId}\');');">Back</a></div>
				{#else}
				<div  class="back_holder"><a class='back_link' onclick="display('/nodes/');">Back</a></div>
				{#/if}
			{#else}
				<div  class="back_holder"><a class='back_link' onclick="display('/config/');">Back</a></div>
			{#/if}
			<div class="refresh_holder"><a class='refresh_link' onclick="update();">Refresh</a></div>
			<span  class="feedback"></span>	
		</div>

<div class='feedbar panel'>
			{#if $T.cat}{* node is not a Scene*}
				<a class='back_link' onclick="display('/nodes/devices/');">Back</a>
				<input type="hidden" class="update" value="/nodes/{$T.address}/">
			{#elseif !$T.cat}
				<a class='back_link' onclick="display('/nodes/scenes/');">Back</a>
				{#/if}

<div class="refresh_holder"><a class='refresh_link' onclick="update('/nodes/{$T.address}/');">Refresh</a></div>
			<span  class="feedback"></span>	
		</div>
                <div id='titlebar'><span id='title'>{$T.name}</span></div>
		<div id="node{$T.id}" class='node nodeView {$T.nodeClass}'>
			<div class='properties'>
				{#foreach $T.properties as property}
				<div class='property node{$T.id}{$T.property.id}'>
					<a class='propertylabel'> {$T.property.label} </a>:
					<a id='node{$T.id}{$T.property.id}' class='{$T.property.pclass}'>{$T.property.formatted}</a>
				</div>
				{#/for}
			</div>
			<div class='commands' id='commands'>
				{#foreach $T.controls as control}
					{#if controls[$T.control].actions[0]}
						<select class="node{$T.id}{$T.control}" onchange="getCmd('{$T.address}', '{controls[$T.control].name}/' + this.value);">
						<option value="null">{controls[$T.control].label}</option>
						{#foreach controls[$T.control].actions as action}
							<option value="{$T.action.name}">{$T.action.label}</option>
						{#/for}
						</select>
						{#else}
						{#if controls[$T.control].name == 'DON' || controls[$T.control].name == 'DOF' || controls[$T.control].name == 'BRT' || controls[$T.control].name == 'DIM' || controls[$T.control].name == 'ST'}
							<div class="cmd cmd{controls[$T.control].name}" onclick="getCmd('{$T.address}','{controls[$T.control].name}');"></div>
							{#else}
							 <input type="button" class="node{$T.id}{$T.control}" onclick="getCmd('{$T.address}','{controls[$T.control].name}');" value="{controls[$T.control].label}">
							{#/if}
					 {#/if}
					 {#cycle values=['', '<br/>']}
				{#/for}
			</div>
		</div>

{#if title($T.name)}
	{#/if}
	<div class="feedbar">
		{#if $T.parentId}
			<div  class="back_holder"><a class='back_link' onclick="display('/programs/{$T.parentId}/');">Back</a></div>
		{#else}
			<div  class="back_holder"><a class='back_link' onclick="display('/config/');">Back</a></div>
		{#/if}
		<div class="refresh_holder"><a class='refresh_link' onclick="update('/programs/{$T.id}/');">Refresh</a></div>
		<input type="hidden" class="update" value="/programs/{$T.id}/">
		<span  class="feedback"></span>	
	</div>
        <div id='titlebar'><span id='title'>{$T.name}</span></div>
	{#if $T.folder}
	<div class="programlist">
		<table class="gridTable">
			{#foreach $T.programs as program}
			<tr>
			<td class="col1">
				<div {#if $T.program.folder}class="folder"{#else}class="program"{#/if}>
					<div class='line1'>
					<a href="#programs_{$T.program.id}" onclick="display('/programs/{$T.program.id}/');return false;">{$T.program.name} </a>
					</div>
				</div>
			</td>
			<td class="col2"><span id='program{$T.program.id}ST' class="{$T.program.statusClass}">{$T.program.status}</span></td>
		</tr>
		{#/for}
	</table>
		</div>
		<div class="feedbar">
		{#if $T.parentId}
			<div  class="back_holder"><a class='back_link' onclick="display('/programs/{$T.parentId}/');">Back</a></div>
		{#else}
			<div  class="back_holder"><a class='back_link' onclick="display('/config/');">Back</a></div>
		{#/if}
		<div class="refresh_holder"><a class='refresh_link' onclick="update('/programs/{$T.id}/');">Refresh</a></div>
		<input type="hidden" class="update" value="/programs/{$T.id}/">
		<span  class="feedback"></span>	
	</div>
	{#else}
		<div class='program'>
			<div class='properties'>
				<div class='property'>
				<table class="gridTable">
					{#foreach $T.properties as property}
					<tr>
						<td class="col1">
					
						<span class='peropetylabel'>{$T.property.label}</span>:
					</td><td class="col2">
					<span id="program{$T.id}{$T.property.id}" class="{$T.property.pclass}">{$T.property.formatted}</span>
				</td>
			</tr>
					</div>
					{#/for}
				</table>
			</div>
			<div class='commands'>
				<input type="button" onclick="update('/programs/{$T.id}/runIf/');" value="Run If"> 
				<input type="button" onclick="update('/programs/{$T.id}/runThen/');" value="Run Then"> 
				<input type="button" onclick="update('/programs/{$T.id}/runElse/');" value="Run Else"> 
				<input type="button" onclick="update('/programs/{$T.id}/stop/');" value="Stop">
				<br>
				<input type="button" onclick="update('/programs/{$T.id}/enable/');" value="Enable">
				<input type="button" onclick="update('/programs/{$T.id}/disable/');" value="Disable">
				<br>
				<input type="button" onclick="update('/programs/{$T.id}/enableRunAtStartup/');" value="Run At Startup">
				<input type="button" onclick="update('/programs/{$T.id}/disableRunAtStartup/');" value="Do Not Run at Startup">
			</div>
		</div>
	{#/if}

<div class="feedbar">
	{*#if $T.AMIMetering && $T.AMIMessage*}
        {#if $P.url == "/emeter" || $P.url == "/emeter/"}
		<div  class="back_holder"><a class='back_link' onclick="display('/config/');">Back</a></div>
	{#else}
		<div  class="back_holder"><a class='back_link' onclick="display('/emeter/');">Back</a></div>
	{#/if}	
		<div class="refresh_holder"><a class='refresh_link' onclick="update();">Refresh</a></div>
		<span  class="feedback"></span>
	</div>
		<div class='node'>
			{#if $T.AMIMetering}
				{#if $T.time}
				<div class='properties'>
					{#foreach $T.time.properties as property}
						<div class='property {$T.property.id}'>
							<span class='propertylabel'>{$T.property.label}</span> :
							<span id='{$T.property.id}' class='{$T.property.pclass}'>{$T.property.formatted}</span>
						</div>
					{#/for}
				</div>
				{#/if}
				{#if $T.AMIMetering.url}
				<div class ='amiTitle'>
					<a class='ami' href="javascript:display('{$T.AMIMetering.url}');">></a>
					Utility Metering
				</div>
				{#elseif title('Utility Metering');}
				{#/if}
				<div class='properties'>
					{#foreach $T.AMIMetering.properties as property}
						<div class='property {$T.property.id}'>
							<span class='propertylabel'>{$T.property.label}</span> :
							<span id='{$T.property.id}' class='{$T.property.pclass}'>{$T.property.formatted}</span>
						</div>
					{#/for}
				</div>
			{#/if}
			{#if $T.AMIPrice}
				{#if $T.AMIPrice.url}
					<div class ='amiTitle'>
						<a class='ami' href="javascript:display('{$T.AMIPrice.url}');">></a>
						Utility Price
					</div>
				{#elseif title('Utility Price');}
				{#/if}
				<div class='properties'>
					{#foreach $T.AMIPrice.properties as property}
						<div class='property {$T.property.id}'>
							<span id='label{$T.property.id}' class='propertylabel'>{$T.property.label}</span> :
							<span id='{$T.property.id}' class='{$T.property.pclass}'>{$T.property.formatted}</span>
						</div>
					{#/for}
				</div>
			{#/if}
			{#if $T.AMIMessage}
				{#if $T.AMIMessage.url}
					<div class ='amiTitle'>
						<a class='ami' href="javascript:display('{$T.AMIMessage.url}');">></a>
						Utility Message
					</div>
				{#elseif title('Utility Message');}
				{#/if}
				<div class='properties'>
					{#foreach $T.AMIMessage.properties as property}
						<div class='property {$T.property.id}'>
							<span class='propertylabel'> {$T.property.label} </span>:
							<span id='{$T.property.id}' class='{$T.property.pclass}'>{$T.property.formatted}</span>
						</div>
					{#/for}
				</div>
				<div class='commands'>
					{#foreach $T.AMIMessage.controls as control}
						<button class='{$T.control.id}' onclick="update('{$T.control.url}')">{$T.control.label}</button>
					{#/for}
				</div>
			{#/if}
			{#if $T.AMILoadControl}
				{#if $T.AMILoadControl.url}
					<div class ='amiTitle'>
						<a class='ami' href="javascript:display('{$T.AMILoadControl.url}');">></a>
						Utility Demand/Response 
					</div>
				{#elseif title('Utility Demand/Response');}
				{#/if}
				<div class='properties'>
					{#foreach $T.AMILoadControl.properties as property}
						<div class='property'>
							<span class='propertylabel'>{$T.property.label}</span> :
							<span id='{$T.property.id}' class='{$T.property.pclass}'>{$T.property.formatted}</span>
						</div>
					{#/for}
				</div>
				<div class='commands'>
					{#foreach $T.AMILoadControl.controls as control}
						<button class='{$T.control.id}' onclick="update('{$T.control.url}')">{$T.control.label}</button>
					{#/for}
				</div>
			{#/if}
		</div>

{#if $P.target == "#main"}
        <div class="feedbar">
            <div  class="back_holder"><a class='back_link' onclick="display('/config/');">Back</a></div>
            <div class="refresh_holder"><a class='refresh_link' onclick="update();">Refresh</a></div>
            <span  class="feedback"></span>
        </div>
    {#/if}
    <input type="hidden" class="update" value="/elk/get/status">
    <input type="hidden" class="load" value="update">
    <div id="elk" class='elk'>
        <div id="titlebar"><span id="title">ELK</span></div>
        <div id="DisconnectedError">
            Not connected to the Elk Security System!
        </div>
        {#if modules.elk.isInstalled}{* only show DisabledError if elk module is installed *}
            <div id="DisabledError">
                Elk Module is disabled!
            </div>
        {#/if}
        <table class="gridTable">
        {#foreach $T.areas as area}
            <tbody style="display: table-row-group;" class="area ae{$T.area.id}">
                <tr>
                    <td class="col1">
                        <div class="line1">
                            <a href="#/elk/get/topology/&elk=ae{$T.area.id}" id="ae{$T.area.id}Name" onclick="elk('ae{$T.area.id}');return false;" class="name basic">{$T.area.name}</a>
                        </div>
                        <div class="properties line1">
                            <div><span class="label advanced" style="display:none">Armed Status:</span><span id="ae{$T.area.id}ArmedState">?</span></div>
                            <div><span class="label advanced" style="display:none">Arm Up State:</span><span id="ae{$T.area.id}ArmUpState">?</span></div>
                            <div><span class="label advanced" style="display:none">Alarm State:</span><span id="ae{$T.area.id}AlarmState">?</span></div>
                        </div>
                    </td>
                    <td class="col2">
                        <div class="commands basic">
                            <div><input type="button" value="Arm Away" onclick="update('elk/area/{$T.area.id}/cmd/arm?armType=1')"></div>
                            <div><input type="button" value="Arm Stay" onclick="update('elk/area/{$T.area.id}/cmd/arm?armType=2')"></div>
                            <div><input type="button" value="Disarm" onclick="update('elk/area/{$T.area.id}/cmd/disarm')"></div>
                            
                        </div>
                    </td>
                </tr>
                <tr style="display:none" class="commands advanced">
                    <td class="col1" colspan="2">
                        <div class="commands">
                        <input type="button" value="Arm Away" onclick="update('elk/area/{$T.area.id}/cmd/arm?armType=1')">
                        <input type="button" value="Arm Stay" onclick="update('elk/area/{$T.area.id}/cmd/arm?armType=2')">
                        <input type="button" value="Disarm" onclick="update('elk/area/{$T.area.id}/cmd/disarm')">
                        <select onchange="updateFilter('elk/area/{$T.area.id}/cmd/arm?armType=' + this.value);this.value = 'null'">
                            <option value="null" onclick="return false;">Arm ...</option>
                            <option value = "1">Arm Away</option>
                            <option value = "2">Arm Stay</option>
                            <option value = "3">Arm Stay Instant</option>
                            <option value = "4">Arm Night</option>
                            <option value = "5">Arm Night Instant</option>
                            <option value = "6">Arm Vacation</option>
                            <option value = "7">Arm to Next Away Mode</option>
                            <option value = "8">Arm to Next Stay Mode</option>
                        </select>
                        <br><input type="button" value="Bypass" onclick="update('elk/area/{$T.area.id}/cmd/bypass')">
                        <input type="button" value="Unbypass" onclick="update('elk/area/{$T.area.id}/cmd/unbypass')">
                        <div onclick="update('/elk/areas/query')" class="cmd cmdST"></div>
                        </div>
                    </td>
                </tr>
                <tr style="display:none" class="commands advanced">
                    <td class="col1 full" colspan="2">
                        <div class="title">Display Text on all {$T.area.name} Keypads</div>
                        <div class="displayText">
                            <input type="text" size="26" id="ae{$T.area.id}Text">
                            <br>
                            <select id="ae{$T.area.id}Beep">
                                <option value="false">No Beep</option>
                                <option value="true">Beep</option>
                            </select>
                            <select id="ae{$T.area.id}Seconds">
                                <option value="null">Seconds</option>
                                <option value="15">15 Secs</option>
                                <option value="30">30 Secs</option>
                                <option value="60">60 Secs</option>
                            </select>
                            <input type="button" value="Display" onClick="elkKpText({$T.area.id});">
                        </div>
                    </td>
                </tr>
            </tbody>
            {#foreach $T.area.keypads as keypad}
                <tbody style="display: table-row-group;display:none;" class="keypad ae{$T.area.id} kp{$T.keypad.id}">
                    <tr>
                        <td class="col1 full" colspan="2">
                            <div class="line1">
                                <a href="#/elk/get/topology/&elk=ae{$T.area.id}.kp{$T.keypad.id}" id="kp{$T.keypad.id}Name" onclick="elk('ae{$T.area.id}.kp{$T.keypad.id}');return false;" class="name basic">{$T.keypad.name}</a>
                            </div>
                            <div class="properties line1">
                                <div><span class="label advanced">Temperature:</span><span id="ke{$T.keypad.id}KeypadTemperatureState"></span><div>
                            </div>
                        </td>
                    </tr>
                    <tr style="display:none" class="commands advanced">
                        
                        <td class="col1 full" colspan="2">
                            {#foreach $T.keypad.keys as key}
                                <input type="button" value="{$T.key.name}" onclick="update('elk/keypad/{$T.keypad.id}/cmd/press/funcKey/{$T.key.id}');">
                            {#/for}
                            <br>
                            <span onclick="update('elk/keypad/{$T.keypad.id}/query/temperature');" class="cmd cmdST"></span>
                        </td>
                    </tr>
                </tbody>
            {#/for}
            {#foreach $T.area.zones as zone}
                <tbody style="display:none;" class="zone ae{$T.area.id} ze{$T.zone.id}">
                    <tr>
                        <td class="col1">
                            <div class="line1">
                                <span class="name">{$T.zone.name}</span> <span class="na">{$T.zone.alarmDef}</span>
                            </div>
                            <div class="properties line1">
                                <div id="ze{$T.zone.id}LogicalZoneState">?</div>
                                <div id="ze{$T.zone.id}PhysicalZoneState">?</div>
                                <div id="ze{$T.zone.id}ZoneVoltageState">?</div>
                                <div id="ze{$T.zone.id}ZoneTemperatureState"></div>
                            </div>
                        </td>
                        <td class="col2">
                            <div class="commands">
                                <div><input type="button" value="Bypass" onclick="update('elk/zone/{$T.zone.id}/cmd/toggle/bypass')"></div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            {#/for}
        {#/for}
        {#if modules.elk.isInstalled}{* only show outputs and thermostats menu items if elk module is installed *}
            <tbody class="menu">
                <tr>
                    <td class="col1 full" colspan="2">
                        <div class="line1">
                        <a class="name" href="#/elk/get/topology/&elk=output" onclick="elk('output');return false;">Outputs</a> 
                        </div>
                    </td>
                </tr>
            </tbody>
            {#foreach $T.outputs as output}
                <tbody style="display: table-row-group;display:none" id="oe{$T.output.id}" class="output oe{$T.output.id}">
                    <tr>
                        <td class="col1">
                            <div class="line1">
                                <span class="name">{$T.output.name}</span>
                                <span id="oe{$T.output.id}ST"></span>
                            </div>
                        </td>
                        <td class="col2">
                            <div class="commands">
                                <div onclick="update('/elk/output/{$T.output.id}/cmd/on');" class="cmd cmdDON"><div class="cmdLabel">On</div></div>
                                <div class="cmdSeparator"></div>
                                <div onclick="update('/elk/output/{$T.output.id}/cmd/off');" class="cmd cmdDOF"><div class="cmdLabel">Off</div></div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            {#/for}
            <tbody class="menu">
                <tr>
                    <td class="col1 full" colspan="2">
                        <div class="line1">
                        <a class="name" href="#/elk/get/topology/&elk=tstat" onclick="elk('tstat');return false;">Thermostats</a> 
                        </div>
                    </td>
                </tr>
            </tbody>
            {#foreach $T.tstats as tstat}
                <tbody style="display: table-row-group;display:none;" id="te{$T.tstat.id}" class="tstat te{$T.tstat.id}">
                    <tr>
                        <td class="col1">
                            <div class="line1">
                                <a href="#/elk/get/topology/&elk=te{$T.tstat.id}" id="te{$T.tstat.id}Name" onclick="elk('te{$T.tstat.id}');return false;" class="name basic">{$T.tstat.name}</a>
                            </div>
                            <div class="properties line1">
                                <span class="label advanced">Status:</span><span id="te{$T.tstat.id}ThermostatTempState"></span>
                                <span class="label advanced"><br>Mode:</span><span id="te{$T.tstat.id}ThermostatModeState"></span>
                                <span class="advanced"><span class="label ThermostatHeatSetPoint"><br>Heat Setpoint:</span></span><span id="te{$T.tstat.id}ThermostatHeatSetPoint"></span>
                                <span class="autoLabel">(H)</span>
                                <span class="advanced"><span class="label ThermostatCoolSetPoint"><br>Cool Setpoint:</span></span><span id="te{$T.tstat.id}ThermostatCoolSetPoint"></span>
                                <span class="autoLabel">(C)</span>
                                <span class="advanced">

<br><span class="label">Hold:</span><span id="te{$T.tstat.id}ThermostatHoldState"></span>
                                    <Br><span class="label">Fan:</span><span id="te{$T.tstat.id}ThermostatFanState"></span>
                                    
                                </span>
                            </div>
                        </td>
                        <td class="col2">
                        </td>
                    </tr>
                    <tr style="display:none" class="commands advanced">
                        <td class="col1 full" colspan="2">
                            <div id="commands" class="commands">
                                <select onchange="updateFilter('/elk/tstat/{$T.tstat.id}/cmd/6?value=' + this.value);this.value = 'null';" class="">
                                    <option value="null">Heat Setpoint</option>
                                    {#for index = 36 to 85} 
                                    <option value="{$T.index}">{$T.index}</option>
                                    {#/for}
                                </select>
                                <select onchange="updateFilter('/elk/tstat/{$T.tstat.id}/cmd/5?value=' + this.value);this.value = 'null';" class="">
                                    <option value="null">Cool Setpoint</option>
                                    {#for index = 55 to 85} 
                                    <option value="{$T.index}">{$T.index}</option>
                                    {#/for}
                                </select>
                                <select onchange="updateFilter('/elk/tstat/{$T.tstat.id}/cmd/1?value=' + this.value);this.value = 'null';" class="">
                                    <option value="null">Thermostat Mode</option>
                                    <option value="0">Off</option>
                                    <option value="1">Heat</option>
                                    <option value="2">Cool</option>
                                    <option value="3">Auto</option>
                                    <option value="4">Emergency Heat</option>
                                </select>
                                <select onchange="updateFilter('/elk/tstat/{$T.tstat.id}/cmd/3?value=' + this.value);this.value = 'null';" class="">
                                    <option value="null">Fan State</option>
                                    <option value="0">Auto</option>
                                    <option value="1">On</option>
                                </select>
                                <select onchange="updateFilter('/elk/tstat/{$T.tstat.id}/cmd/2?value=' + this.value);this.value = 'null';" class="">
                                    <option value="null">Set Hold</option>
                                    <option value="0">Do not Hold</option>
                                    <option value="1">Hold</option>
                                </select>
                                <div onclick="update('/elk/tstat/{$T.tstat.id}/query')" class="cmd cmdST"></div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            {#/for}
        {#/if}
        <tbody class="menu">
            <tr>
                <td class="col1 full" colspan="2">
                    <div class="line1">
                       <a class="name refresh" href="#/elk/refresh/topology" onclick="display("/elk/refresh/topology");return false;">Refresh Topology</a> 
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
    </div>
    {#if $P.target == "#main"}
        <div class="feedbar">
            <div  class="back_holder"><a class='back_link' onclick="display('/config/');">Back</a></div>
            <div class="refresh_holder"><a class='refresh_link' onclick="update();">Refresh</a></div>
            <span  class="feedback"></span>
        </div>
    {#/if}

{#if $P.target == "#main"}
        <div class="feedbar">
            <div  class="back_holder"><a class='back_link' onclick="display('/conf/cams.jsn');">Back</a></div>
            
            <span  class="feedback"></span>
        </div>
    {#/if}
    <div id="cams" class='cams'>
        <div class="editCam">
            <div class="title">New Camera:</div>
            <div class="">
                <form onSubmit="editCam();return(false);">
                    <input type="hidden" class="id" name="id" value=""></input>
                <table>
                    <tr>
                        <td class="col1">Name:</td><td><input class="parse" type="text" name="name"></input></td>
                    </tr>
                    
                    <tr>
                        <td class="col1">Brand:</td><td>
                            <select name="brand" class="parse"  onChange="camSelectBrand(this.value);">
                                <option value="null">(Select Brand)</option>
                                {#foreach camTypes.list().sort(sortBy) as brand}
                                    <option value="{$T.brand.id}">{$T.brand.name}</option>                                    
                                {#/for}
                                <option value="raw">Other</option>
                            </select></td>
                    </tr>
                    <tbody class="cam-raw cb-raw hidden">
                        </tr><tr class="conf_snapshot">
                            <td colspan="2">
                                JPG Url:
                                <br>
                                <input class="" type="text" name="snapshot"></input>
                                <div class="desc">The complete http:// address of the snapshot or jpeg for the camera.</div>
                            </td>
                        </tr>
                    </tbody>
                    <tbody class="cam-normal">
                        <tr>
                            <td class="col1">Model:</td>
                            <td>
                                {#foreach camTypes as brand}
                                    {#if $T.brand.name}
                                        <select name="model" class="hidden camModel cb-{$T.brand$key}">
                                        {#foreach $T.brand.models.list().sort(sortBy) as model}
                                            <option value="{$T.model.id}">{$T.model.name}</option>
                                        {#/for}
                                        </select>
                                    {#/if}
                                {#/for}
                            </td>
                        </tr>
                        <tr>
                            <td class="col1">IP, Hostname:</td><td><input class="parse" type="text" name="ip"></input></td>
                        </tr>
                        <tr>
                            <td class="col1">Port:</td><td><input class="parse" type="text" name="port" size="4"></input></td>
                        </tr>
                        <tr>
                            <td class="col1">User:</td><td><input class="parse" type="text" name="user"></input></td>
                        </tr>
                        <tr>
                            <td class="col1">Password:</td><td><input class="parse" type="text" name="pass"></input></td>
                        </tr>
                    </tbody>
                </table>
                <input type="button" value="Delete" class="hidden delBtn" onclick="if (confirm('Delete Cam:'+conf.cams[$('.editCam .id').val()].name+ '?')) delete conf.cams[$('.editCam .id').val()];saveConf('/conf/cams.jsn','display(\'/conf/cams.jsn\');');"></input>
                <input type="submit" name="Ok" value="Ok" class="right"></input>
                <input type="button" name="Cancel" value="Cancel" class="right" onclick="display('/conf/cams.jsn');"></input>
                </form>
            </div>
        </div>
    </div>