let el = {
	console: document.querySelector("#console"),
	state: document.querySelector("#state"),
	targetScript: document.querySelector("#target-script"),
	inputForm: document.querySelector("#input-form"),
	input: document.querySelector("#input"),
};

let id = location.href.split("?")[1];

let conn = new Conn(id);

function print(msg) {
	el.console.innerText = msg + "\n" + el.console.innerText;
}

conn.onstatechange = state => {
	el.state.innerText = state;
	if (state == "Ready")
		el.input.disabled = "";
	else
		el.input.disabled = "disabled";
}

conn.onjsresult = (err, res) => {
	if (err)
		print("Error: "+err);
	else
		print(res);
};

conn.onlog = log => {
	print(log);
}

el.targetScript.innerText =
	`<script src='${location.protocol}//${location.host}/target.js?${id}'></script>`;

el.inputForm.addEventListener("submit", evt => {
	evt.preventDefault();
	conn.runJavascript(el.input.value);
	print("> "+el.input.value);
	el.input.value = "";
});