<!DOCTYPE html>
<html>
	<head>
		<title>Scoreboard</title>
		<link rel="stylesheet" href="style.css" type="text/css">
		<script src="scoreboard.js" async></script>
    <style>
      body, html {
        width: 100%;
        height: 100%;
        overflow: hidden;
        cursor: none;
      }
      iframe {
        width: 100%;
        height: 100%;
        border: none;
        margin: 0;
        padding: 0;
      }
    </style>
		<script>
var SECS = 1000, DELAY = 30*SECS;
var urls = ["scoreboard.html"];
var stack = [];
var i = 0;
var xmlhttp;
if (window.XMLHttpRequest){
	xmlhttp = new XMLHttpRequest();
}
xmlhttp.onreadystatechange = function(){
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
		// update urls
		urls = JSON.parse(xmlhttp.responseText);
		console.log("new urls:", urls);
	}
}
xmlhttp.open("GET", "projections.json", true);
xmlhttp.send();
function reload() {
  // alternate between scoreboard and other things
	if (i%2){
		url = urls[0];
	}
	else {
		if (stack.length === 0){
			xmlhttp.open("GET", "projections.json", true);
			xmlhttp.send();
			if (urls.length > 1){
				stack = urls.slice(1);
			}
			else {
				stack = urls;
			}
		}
		url = stack.pop();
		console.log("loading " + url + " of " + urls);
	}
	document.getElementById("reloader").src = url;
	i++;
}

function init() {
	setInterval(reload, DELAY);
}

window.addEventListener("load", init);
		</script>
	</head>
	<body>
		<iframe id="reloader" src="scoreboard.html"></iframe>
	</body>
</html>