<!doctype html>
<html>
<head>
<title>WebSocket++ Telemetry Client</title>
</head>
<body>

<script type="text/javascript">
var ws;
var url;

function connect() {
	url = document.getElementById("server_url").value;
	
	if ("WebSocket" in window) {
		ws = new WebSocket(url);
	} else if ("MozWebSocket" in window) {
		ws = new MozWebSocket(url);
	} else {
		document.getElementById("messages").innerHTML += "This Browser does not support WebSockets<br />";
		return;
	}
	ws.onopen = function(e) {
		document.getElementById("messages").innerHTML += "Client: A connection to "+ws.url+" has been opened.<br />";
		
		document.getElementById("server_url").disabled = true;
		document.getElementById("toggle_connect").innerHTML = "Disconnect";
	};
	
	ws.onerror = function(e) {
		document.getElementById("messages").innerHTML += "Client: An error occured, see console log for more details.<br />";
		console.log(e);
	};
	
	ws.onclose = function(e) {
		document.getElementById("messages").innerHTML += "Client: The connection to "+url+" was closed. ["+e.code+(e.reason != "" ? ","+e.reason : "")+"]<br />";
	    cleanup_disconnect();
	};
	
	ws.onmessage = function(e) {
		document.getElementById("messages").innerHTML += "Server: "+e.data+"<br />";
	};
}

function disconnect() {
	ws.close();
	cleanup_disconnect();
}

function cleanup_disconnect() {
    document.getElementById("server_url").disabled = false;
	document.getElementById("toggle_connect").innerHTML = "Connect";
}

function toggle_connect() {
	if (document.getElementById("server_url").disabled === false) {
		connect();
	} else {
		disconnect();
	}
}
</script>

<style>
body,html {
	margin: 0px;
	padding: 0px;
}
#controls {
	float:right;
	background-color: #999;
}

</style>

<div id="controls">
	<div id="server">
	<input type="text" name="server_url" id="server_url" value="wss://localhost:9000?session_id=foobar" /><br />
	<button id="toggle_connect" onclick="toggle_connect();">Connect</button>
	</div>
</div>
<div id="messages"></div>

</body>
</html>