
<html xmlns:py="http://genshi.edgewall.org/" xmlns:xi="http://www.w3.org/2001/XInclude">
	<xi:include href="../layout.html" />
	<head>
		<title>Manage Hours</title>
		<link rel="stylesheet" type="text/css" href="/data/manager.css" />
		<script type="text/javascript">
			//<![CDATA[
			function update(index) {
				if (!$('input[name=' + index + '-open]').attr('checked')) {
					$('input[name$=opentime]').eq(index).attr('disabled', 'disabled')
					$('input[name$=closetime]').eq(index).attr('disabled', 'disabled')
				} else {
					$('input[name$=opentime]').eq(index).removeAttr('disabled')
					$('input[name$=closetime]').eq(index).removeAttr('disabled')
				}
			}

			function validate_time(element) {
				if (!/^(0?[1-9]|1[0-2]):([0-5][0-9]) (AM|PM)$/.test(element.value)) {
					$(element).css('background-color', 'red');
					$('#submit-button').attr('disabled', 'disabled')
				} else {
					$(element).css('background-color', 'white');
					$('#submit-button').removeAttr('disabled')
				}
			}
				
			$(document).ready(function () {
				for (i = 0; i < 7; i++) update(i);
				$('form input[type!=checkbox]').keyup(function (e) {
					validate_time(e.target)
				})
			})
			//]]>
		</script>
	</head>
	<body id="hours-manager">
		<?python
			import calendar
			import datetime
			days_of_week = [calendar.day_name[6]] + calendar.day_name[0:6]
			is_open = lambda day: all(hour != datetime.time(0, 0) for hour in day)
		?>
		<navheader>/manager/hours/</navheader>
		<h2>Hours</h2>
		<p>Note: all times must be entered in the format 7:00 AM</p>
		<form action="" method="POST">
			<table id="hours">
				<thead><tr><th>Day</th><th>Open</th><th>Opening Time</th><th>Closing Time</th></tr></thead>
				<tbody>
					<tr py:for="i, day in enumerate(result)">
						<th>${days_of_week[i]}</th>
						<td><input type="checkbox" name="${i}-open" onchange="update($i)" py:attrs="{'checked': 'checked'} if is_open(day) else {}" /></td>
						<td><input name="${i}-opentime" value="${day[0].strftime('%I:%M %p')}" /></td>
						<td><input name="${i}-closetime" value="${day[1].strftime('%I:%M %p')}" /></td>
					</tr>
				</tbody>
			</table>
			<button id="submit-button" type="submit">Save</button>
		</form>
	</body>
</html>
