#from Plugins.Extensions.OpenWebif.local import tstrings
<body>
	<div data-role="page" id="mainPage">
		<div id="header">
			<div class="button" onClick="history.back()">$tstrings['back']</div>
			<h1><a style="color:#FFF;text-decoration:none;" href='/mobile'>OpenWebif</a></h1>
		</div>
		<div id="contentContainer">
			<ul data-role="listview" data-inset="true" data-theme="d">
				<li data-role="list-divider" role="heading" data-theme="b">$tstrings['volumecontrol']</li>
				<li>
					<table width="100%">
						<tr>
							<td><input type="range" name="slider" id="slider" value="0" min="0" max="100" data-theme="a" data-track-theme="b" /></td>
							<td width="50"><img id="volimage" src="/images/volume.png" border="0" alt="" /></td>
						</tr>
					</table>
				</li>
			</ul>
			<br><br>
			<ul data-role="listview" data-inset="true" data-theme="d">
				<li data-role="list-divider" role="heading" data-theme="b">$tstrings['instant_record']</li>
				<li><a href="#" onClick="startInstantRecord()">$tstrings['start_instant_record']</a></li>
			</ul>
			
			<br><br>
			
			<ul data-role="listview" data-inset="true" data-theme="d">
				<li data-role="list-divider" role="heading" data-theme="b">$tstrings['powercontrol']</li>
				<li><a href="#" onClick="jQuery.ajax('/api/powerstate?newstate=0'); return false">$tstrings['standby_toggle']</a></li>
				<li><a href="#" onClick="jQuery.ajax('/api/powerstate?newstate=1'); return false">$tstrings['deep_standby']</a></li>
				<li><a href="#" onClick="jQuery.ajax('/api/powerstate?newstate=2'); return false">$tstrings['reboot_box']</a></li>
				<li><a href="#" onClick="jQuery.ajax('/api/powerstate?newstate=3'); return false">$tstrings['restart_gui']</a></li>
			</ul>
		</div>
		
		<div id="footer">
			<p>OpenWebif Mobile</p>
			<a onclick="document.location.href='/index?mode=fullpage';return false;" href="#">$tstrings['show_full_openwebif']</a>
		</div>
	<script>
	function getStatusInfo() {
		jQuery.getJSON('/api/statusinfo')
		.success(function(statusinfo) {
			// Set Volume
			jQuery("#slider").val(statusinfo['volume']).slider('refresh');
			// Set Mute Status
			if (statusinfo['muted'] == true) {
				mutestatus = 1;
				jQuery("#volimage").attr("src","/images/volume_mute.png");
			} else {
				mutestatus = 0;
				jQuery("#volimage").attr("src","/images/volume.png");
			}
		});
	}
	function setVolume(vol) {
		var jqxhr = jQuery.ajax("/web/vol?set=set" + vol);
		return false;
	}
	function startInstantRecord(vol) {
		check = confirm("Really start instant record now?");
		if (check == true) {
			jQuery.ajax('/api/recordnow');
		}
		return false;
	}
	jQuery('#mainPage').on('pageinit', function(event) {
		var volupdate;
		jQuery("#slider").change(function() {
			clearTimeout(volupdate);
			volupdate = setTimeout("jQuery.ajax('/web/vol?set=set" + jQuery('#slider').val() + "')",1000);
		});
		
		var mutestatus = 0;
		jQuery('#volimage').click(function(){
			if (mutestatus == 0) {
				mutestatus = 1;
				jQuery("#volimage").attr("src","/images/volume_mute.png");
			} else  {
				mutestatus = 0;
				jQuery("#volimage").attr("src","/images/volume.png");
			}
			jQuery.ajax("/web/vol?set=mute")
		});
		
		getStatusInfo();
	});
	</script>
	</div>
</body>
</html>
