<!DOCTYPE html>
<html>
	<head>
		<title>Scoreboard</title>
		<link rel="stylesheet" href="style.css" type="text/css">
		<style>
#info {
	max-width: 20em;
	position: absolute;
	opacity: 0.8;
	bottom: 1em;
	right: 10em;
	text-align: center;
}
		</style>
		<script src="d3.js" async></script>
		<script src="scoreboard-llnl.js" async></script>
		<script>

var type = "original";
var interval = 60000;

function preinit()
{
	type = "time";
	interval = 60000;
}

function updateType(newType)
{
	type = newType;
	init();
}

function init() {
	var sb = document.getElementById("scoreboard");
	scoreboard(sb, true, type, interval);
	window.addEventListener("resize", reScoreboardCaller);
}

var resizeCallback;

function reScoreboardCaller()
{
	if(resizeCallback)
	{
		clearInterval(resizeCallback);
	}
	resizeCallback = setInterval(reScoreboard, 400);
}

function reScoreboard()
{
	clearInterval(resizeCallback);
	console.log("resizing");
	var sb = document.getElementById("scoreboard");
	scoreboard(sb, true, type, interval);
}

window.addEventListener("load", preinit);
window.addEventListener("load", init);

		</script>
	</head>
	<body>
		<h1 id="title">Scoreboard</h1>
		<div id="scoreboard"></div>
	</body>
</html>