<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-save" type="button" value="<%:Switch System%>" onclick="switchopenwrt(this)" />
			<p style="display:none">
				<img id="img_loading" style="display:block" src="<%=resource%>/amlogic/loading.gif" alt="<%:Loading%>" class="imgLeft" />
				<img id="img_switch" style="display:none" src="<%=resource%>/amlogic/switch.png" alt="<%:PowerOff%>" class="imgLeft" />
				<span id="msg_switch" class="contentRight"><%:System is switching...%></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_switch = document.getElementById("img_switch");
		var msg = document.getElementById("msg_switch");
		var set = setInterval(function() {
			time--;
			msg.innerHTML = "<%:Waiting for system switching...%>";
			if(time === 0) {
				img_loading.style.display = 'none';
				img_switch.style.display = 'block';
				msg.innerHTML = "<%:System switchover succeeded, restarting...%>";
				clearInterval(set);
			}
		}, 1000);
	}

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

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

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


//]]></script>
