<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Presentation Timer</title>
		<link rel="stylesheet" href="pyradium.css" />
		<link rel="stylesheet" href="pyradium_menu.css" />
		<link rel="stylesheet" href="pyradium_timer.css" />
	</head>
	<body>
		<div class="timermenu ui-element" id="timer_inactive_menu">
			<div class="menugrid">
				<div class="menucell">
					<label for="presentation_end_time">End of presentation:</label>
					<input type="text" value="" id="presentation_end_time" class="control ui-element" style="width: 150px" title="Can be in the following example forms: '14:30', '+0:45', '1/3', '125%'" />
				</div>
				<div class="menucell">
					<label for="slide_subset">Slide subset:</label>
					<input type="text" value="" id="slide_subset" class="control ui-element" style="width: 150px" title="Can be in the following example forms: 'all', '1-20', '21-end', '1-40%', '1/3'." />
				</div>
				<div class="menucell">
					<button id="btn_arm_timer" class="control ui-element">Arm Timer</button>
				</div>
				<div class="menucell">
					Effective end: <span class="ui-element" id="presentation_end_time_display"></span><br />
					Duration: <span class="ui-element" id="presentation_duration_display"></span><br />
					Presentation pace: <span class="ui-element" id="presentation_pace_display"></span>
				</div>
				<div class="menucell">
					Slide selection: <span class="ui-element" id="slide_subset_display"></span><br />
					Slide count: <span class="ui-element" id="slide_count_display"></span><br />
					Average slide duration: <span class="ui-element" id="average_slide_duration_display"></span>
				</div>
				<div class="menucell">
					<button id="btn_start_timer" class="control ui-element">Start Timer</button>
				</div>
			</div>
		</div>
		<div class="sub_indicator">
			<div class="topgrid">
				<div class="top">
					Presentation mode
				</div>
				<div class="bottom">
					<div class="ui-element" id="presentation_mode_display"></div>
				</div>

				<div class="top">
					Presentation time
				</div>
				<div class="bottom">
					<div class="ui-element" id="presentation_time_display"></div>
				</div>

				<div class="top">
					Elapsed time
				</div>
				<div class="bottom">
					<div class="ui-element" id="elapsed_time_display"></div>
				</div>

				<div class="top">
					Remaining
				</div>
				<div class="bottom">
					<div class="ui-element" id="remaining_display"></div>
				</div>

				<div class="top">
					Slide time
				</div>
				<div class="bottom">
					<div class="ui-element" id="slide_time_display"></div>
				</div>

				<div class="top">
					Position
				</div>
				<div class="bottom">
					<div class="ui-element" id="slide_position_display"></div>
				</div>

				<div class="top">
					Now
				</div>
				<div class="bottom">
					<div class="ui-element" id="datetime_now"></div>
				</div>
			</div>
		</div>

		<div class="main_indicator ui-element" id="main_indicator">
			<div class="ui-element" id="dynamic_delta_time_display"></div>
			<div class="sub_indicator ui-element" id="nominal_delta_time_display"></div>
		</div>

		<script type="module">
			const url = new URL(location.href);
			if (url.hash == "") {
				console.log("Error: timer has no session ID to attach to.");
			}
			const session_id = url.hash.substr(1);

			import {PresentationTimer} from "./pyradium_timer.js";
			let ui_elements = { };
			document.querySelectorAll(".ui-element").forEach((element) => {
				ui_elements[element.id] = element;
			});
			const pt = new PresentationTimer(ui_elements, session_id);
		</script>
	</body>
</html>
