<style>
.NewsTdHeight{ line-height:32px; }
.imgLeft{ float:left; margin-right:10px; vertical-align:middle; }
.contentRight{ align-items: center; }
</style>
<fieldset class="cbi-section">
	<table width="100%" class="NewsTdHeight">
		<tr><td width="100%" align="left">
			<input class="cbi-button cbi-button-remove" type="button" value="<%:Perform PowerOff%>" onclick="poweroff(this)" />
			<p style="display:none">
				<img id="img_loading" style="display:block" src="<%=resource%>/amlogic/loading.gif" alt="<%:Loading%>" class="imgLeft" />
				<img id="img_poweroff" style="display:none" src="<%=resource%>/amlogic/poweroff.png" alt="<%:PowerOff%>" class="imgLeft" />
				<span id="msg_poweroff" class="contentRight"><%:Device is shutting down...%></span>
			</p>
		</td></tr>
	</table>
</fieldset>

<script type="text/javascript">//<![CDATA[

	function status_check() {
		var time = 5;
		var img_loading = document.getElementById("img_loading");
		var img_poweroff = document.getElementById("img_poweroff");
		var msg = document.getElementById("msg_poweroff");
		var set = setInterval(function() {
			time--;
			msg.innerHTML = "<%:Waiting for the device to shut down...%>";
			if(time === 0) {
				img_loading.style.display = 'none';
				img_poweroff.style.display = 'block';
				msg.innerHTML = "<%:The device has been turned off%>";
				clearInterval(set);
			}
		}, 1000);
	}

	function poweroff(btn) {
		if (confirm('<%:Are you sure you want to shut down?%>') != true) { return false; }

		btn.style.display = 'none';
		document.getElementById('msg_poweroff').parentNode.style.display = 'block';

		(new XHR()).post('<%=luci.dispatcher.build_url("admin", "system", "amlogic", "start_poweroff")%>', { token: '<%=token%>' }, status_check);
	}


//]]></script>
