<!DOCTYPE html>
<html>

<head>
	<title>MCDU</title>
	<meta charset="utf-8">
	<script>
		let screen;
		let screen_src;
		let loading = 0;
		let scheduled_load = 0;
		function refresh_screen() {
			if (loading) {
				scheduled_load = 1;
			}
			else {
				loading = 1;
				screen.src = screen_src + '&random=' + (new Date).getTime()
			}
		}
		function press_button(type, text) {
			let request = new XMLHttpRequest;
			request.open(
				"POST",
				window.location.protocol + "//" + window.location.host + "/run.cgi?value=nasal"
			);
			request.setRequestHeader("Content-Type", "application/json");
			let body = JSON.stringify({
				"name": "",
				"children": [
					{
						"name": "script",
						"index": 0,
						"value": "mcdu." + type + "(\"" + text + "\", 0);"
					}
				]
			});
			request.send(body);
			request.addEventListener('load', function () {
				refresh_screen();
			}, true);
		}
		window.addEventListener('load', function () {
			let tds = document.querySelectorAll('.input td');
			for (const td of tds) {
				td.addEventListener('click', function () {
					press_button("button", td.textContent);
				}, true);
			}
			tds = document.querySelectorAll('.enter td');
			for (const td of tds) {
				td.addEventListener('click', function () {
					press_button(td.getAttribute("button-side") == "l" ? "lskbutton" : "rskbutton", td.getAttribute("button-id"));
				}, true);
			}
			tds = document.querySelectorAll('.menu td');
			for (const td of tds) {
				td.addEventListener('click', function () {
					press_button("pagebutton", td.className);
				}, true);
			}
			tds = document.querySelectorAll('.arrows td');
			for (const td of tds) {
				td.addEventListener('click', function () {
					press_button(td.className == 'airport' ? "pagebutton" : "arrowbutton", td.className);
				}, true);
			}
			screen = document.querySelector('img');
			screen.addEventListener('load', function () {
				loading = 0;
				if (scheduled_load) {
					scheduled_load = 0;
					refresh_screen();
				}
			});
			screen_src = screen.src;
			window.setInterval(refresh_screen, 1000);
		}, true);
	</script>
	<style>
		body {
			font-size: 5rem;
			margin: 0;
			padding: 0;
			background-color: black;
			color: white;
			font-family: sans-serif;
		}

		table {
			margin: 0;
			padding: 0
		}

		tr {
			margin: 0;
			padding: 0
		}

		td {
			margin: 0;
			padding: 0;
			text-align: center;
			outline: 1px solid gray;
		}

		td:active {
			background-color: white;
			color: black
		}

		.enter {
			font-size: 60%
		}

		.enter tr:first-child {
			font-size: 70%
		}

		.enter tr:last-child {
			font-size: 50%
		}

		.enter td:first-child,
		.enter td:last-child {
			padding: 0 0.55em;
		}

		.menu,
		.arrows .airport {
			font-size: 40%;
			line-height: 1em;
		}

		.menu td {
			height: 2.5em;
		}

		.arrows td {
			width: 50%;
			padding: 0;
			font-size: 60%;
		}

		img {
			display: block;
		}
	</style>
</head>

<body style="width: 100%">
	<table class="enter" style="width: 100%">
		<tr>
			<td><br></td>
			<td rowspan="8" style="vertical-align: top"><img src="/screenshot?canvasindex=10&type=png"
					style="width: 100%" /></td>
			<td><br></td>
		</tr>
		<tr>
			<td button-id="1" button-side="l">—</td>
			<td button-id="1" button-side="r">—</td>
		</tr>
		<tr>
			<td button-id="2" button-side="l">—</td>
			<td button-id="2" button-side="r">—</td>
		</tr>
		<tr>
			<td button-id="3" button-side="l">—</td>
			<td button-id="3" button-side="r">—</td>
		</tr>
		<tr>
			<td button-id="4" button-side="l">—</td>
			<td button-id="4" button-side="r">—</td>
		</tr>
		<tr>
			<td button-id="5" button-side="l">—</td>
			<td button-id="5" button-side="r">—</td>
		</tr>
		<tr>
			<td button-id="6" button-side="l">—</td>
			<td button-id="6" button-side="r">—</td>
		</tr>
		<tr>
			<td><br></td>
			<td><br></td>
		</tr>
	</table>
	<table class="menu" style="width: 100%">
		<tr>
			<td class="dirto">DIR</td>
			<td class="prog">PROG</td>
			<td class="perf">PERF</td>
			<td class="init">INIT</td>
			<td class="data">DATA</td>
			<td></td>
			<td>BRT</td>
		</tr>
		<tr>
			<td class="f-pln">F-PLN</td>
			<td class="radnav">RAD<br>NAV</td>
			<td class="fuel-pred">FUEL<br>PRED</td>
			<td>SEC<br>F-PLN</td>
			<td class="atc">ATC<br>COMM</td>
			<td class="mcdu">MCDU<br>MENU</td>
			<td>DIM</td>
		</tr>
	</table>
	<table class="input" style="float: right; width: 62.5%">
		<tr>
			<td>A</td>
			<td>B</td>
			<td>C</td>
			<td>D</td>
			<td>E</td>
		</tr>
		<tr>
			<td>F</td>
			<td>G</td>
			<td>H</td>
			<td>I</td>
			<td>J</td>
		</tr>
		<tr>
			<td>K</td>
			<td>L</td>
			<td>M</td>
			<td>N</td>
			<td>O</td>
		</tr>
		<tr>
			<td>P</td>
			<td>Q</td>
			<td>R</td>
			<td>S</td>
			<td>T</td>
		</tr>
		<tr>
			<td>U</td>
			<td>V</td>
			<td>W</td>
			<td>X</td>
			<td>Y</td>
		</tr>
		<tr>
			<td>Z</td>
			<td>/</td>
			<td style="font-size: 50%">SP</td>
			<td style="font-size: 33%">OVFY<br>△</td>
			<td style="font-size: 33%">CLR</td>
		</tr>
	</table>
	<table class="arrows" style="width: 29.5%">
		<tr>
			<td class="airport">AIR<br>PORT</td>
			<td></td>
		</tr>
		<tr>
			<td class="left">←</td>
			<td class="up">↑</td>
		</tr>
		<tr>
			<td class="right">→</td>
			<td class="down">↓</td>
		</tr>
	</table>
	<table class="input" style="width: 30%">
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
		</tr>
		<tr>
			<td>4</td>
			<td>5</td>
			<td>6</td>
		</tr>
		<tr>
			<td>7</td>
			<td>8</td>
			<td>9</td>
		</tr>
		<tr>
			<td>.</td>
			<td>0</td>
			<td
				style="font-size: 3vw; width: 33.333333333333333333333333333333333333333333333333333333333333333333333%; /* :) */">
				+/-
			</td>
		</tr>
	</table>
</body>

</html>