if (!("controller" in window)) {
	let socket;

	let volumeMeterLeft;
	let volumeMeterRight;

	function connect(url) {
		if (socket) {
			socket.close();
		}

		socket = new WebSocket(url);

		socket.onmessage = function (event) {
			var data = JSON.parse(event.data);

			switch (data.event) {
				case "device-list":
					if (data.data.devices.length > 0) {
						socket.send(JSON.stringify({
							"event": "open-device",
							"data": {
								"name": data.data.devices[0]
							}
						}));
					}
					break;
				case "signal":
					onSignal(event, data.data.name, data.data.value);
					break;
				default:
					break;
			}
		};

		socket.onopen = function () {
			socket.send(JSON.stringify({
				"event": "load-driver",
				"data": {
					"name": "linux-rawmidi"
				}
			}));
			socket.send(JSON.stringify({
				"event": "load-mappings",
				"data": {
					"name": "numark-mixtrackplatinum"
				}
			}));
			socket.send(JSON.stringify({
				"event": "list-devices"
			}));
		};
	}

	function sendControl(name, value = 0x00) {
		socket.send(JSON.stringify({
			"event": "control",
			"data": {
				"name": name,
				"value": value
			}
		}));
	}

	window.controller = {
		"load": function (deckIndex) {
			sendControl("deck" + String(deckIndex) + ".load");
		},
		"play_pause": function (deckIndex) {
			sendControl("deck" + String(deckIndex) + ".play_pause");
		},
		"volume": function (deckIndex, value) {
			sendControl("deck" + String(deckIndex) + ".volume", value);
		},
		"speed": function (deckIndex, value) {
			sendControl("deck" + String(deckIndex) + ".speed", value);
		},
		"pad": function (deckIndex, padIndex) {
			sendControl("deck" + String(deckIndex) + ".pad" + String(padIndex));
		},
		"crossfade": function (value) {
			sendControl("master.crossfade", value);
		}
	};

	var onSignal = function (event, name, value = 0x00) {
		switch (name) {
			case "master.volume.left":
				volumeMeterLeft.style.height = String(Math.round((value / 80) * 100)) + "%";
				break;
			case "master.volume.right":
				volumeMeterRight.style.height = String(Math.round((value / 80) * 100)) + "%";
				break;
			default:
				break;
		}
	};

	window.onload = function (event) {
		volumeMeterLeft = document.querySelector("#volume-meter-left");
		volumeMeterRight = document.querySelector("#volume-meter-right");

		connect("ws://" + window.location.host + "/socket");
	};
}