(function(){
	function httpApi(url, method, callback) {
		var req = new XMLHttpRequest();
		req.onreadystatechange = function(e) {
			if (this.readyState === XMLHttpRequest.DONE)
				callback(this.status, JSON.parse(this.responseText));
		};
		req.open(method, url, true);
		req.send();
	}

	function setInputState(output, input, state) {
		httpApi("/api/setState?output=" +encodeURIComponent(output) +"&input=" +encodeURIComponent(input) +"&state=" +(state ? 1 : 0), "POST", (status, outputs) => {
			if (status !== 200)
				console.error("Cannot set output list");
			else
				displayOutputs(outputs);
		});
	}

	function makeOutputNode(data) {
		var child = document.createElement("fieldset"),
			inputList = document.createElement("ul");
		child.classList.add("output");
		child.innerHTML += "<legend>" +data.name +"</legend>";
		for (var i in data.inputs) {
			var inputItem = document.createElement("li");
			inputItem.classList.add("input");
			inputItem.classList.add(data.inputs[i] ? "input-enabled" : "input-disabled");
			inputItem.textContent = i;
			(function() {
				var output = data.id,
					input = i,
					state = data.inputs[i];
				inputItem.addEventListener("click", () => setInputState(output, input, !state));
			})();
			inputList.appendChild(inputItem);
		}
		child.appendChild(inputList);
		return child;
	}

	function displayOutputs(outputs) {
		var div = document.getElementById("outputs");
		div.innerHTML = "";
		outputs.forEach(i => div.appendChild(makeOutputNode(i)));
	}

	function refreshOutput() {
		httpApi("/api/outputs", "GET", (status, outputs) => {
			if (status !== 200)
				console.error("Cannot fetch output list");
			else
				displayOutputs(outputs);
		});
	}

	refreshOutput();
})()