palesz/dashboard-looper.html

## dashboard-looper.html
<html>
<head>
	<title>Dashboard Looper</title>
	<script type="text/javascript">
var dashboards = [
{
	"title": "Palesz.org",
	"url": "http://palesz.org",
	"delay": "5"
},
{
	"title": "INDEX",
	"url": "http://index.hu",
	"delay": "10"
},
{
	"title": "Some PDF",
	"url": "http://www.pdf995.com/samples/pdf.pdf",
	"delay": "10"
}
];

var active = -1;
var state = window.performance.now();
var autoAdvance = false;

function switchTo(index) {
	var d = dashboards[index];

	var dbframe = document.getElementById("dashboard");
	dbframe.src = d.url;
	document.getElementById("dashboard-title").innerHTML = "<a href=\"" + d.url + "\" style='color: white; text-decoration: none; text-transform: uppercase;'>[" + (index+1) + "] " + d.title + "</a>";
}

function move(step, stepper) {
	var s = window.performance.now();
	state = s;
	active = (active+step+dashboards.length) % dashboards.length;
	switchTo(active);
	setTimeout(function() {
		if (autoAdvance && state == s) {
			stepper();
		}
	}, dashboards[active].delay * 1000);
}

function next() {
	move(1, next);
}

function previous() {
	move(-1, previous);
}

function toggleAutoAdvance() {
	autoAdvance = !autoAdvance;
	document.getElementById("toggle").innerHTML = autoAdvance ? "[STOP]" : "[START]";
	if (autoAdvance) {
		setTimeout(next, 1000);
	}
}

	</script>
</head>
<body style="margin: 0; padding: 0; overflow: hidden;">
	<div style="float: left;"><a href="#" onclick="previous();" style="text-decoration: none; color: white;">&lt;&lt; previous</a></div>
	<div style="float: right;">
		<a href="#" onclick="toggleAutoAdvance();" style="text-decoration: none; color: white;" id="toggle">[STOP]</a>
		<a href="#" onclick="next();" style="text-decoration: none; color: white;">next &gt;&gt;</a>
	</div>
	<div id="dashboard-title" style="text-align: center; height: 25px; background-color: black; color: white;"></div>
	<iframe id="dashboard" src="#" style="overflow:hidden;height:calc(100% - 25px);width:100%;border:0px;"></iframe>

	<script type="text/javascript">
	toggleAutoAdvance();
	</script>
</body>

</html>
	<html>
	<head>
	<title>Dashboard Looper</title>
	<script type="text/javascript">
	var dashboards = [
	{
	"title": "Palesz.org",
	"url": "http://palesz.org",
	"delay": "5"
	},
	{
	"title": "INDEX",
	"url": "http://index.hu",
	"delay": "10"
	},
	{
	"title": "Some PDF",
	"url": "http://www.pdf995.com/samples/pdf.pdf",
	"delay": "10"
	}
	];

	var active = -1;
	var state = window.performance.now();
	var autoAdvance = false;

	function switchTo(index) {
	var d = dashboards[index];

	var dbframe = document.getElementById("dashboard");
	dbframe.src = d.url;
	document.getElementById("dashboard-title").innerHTML = "<a href=\"" + d.url + "\" style='color: white; text-decoration: none; text-transform: uppercase;'>[" + (index+1) + "] " + d.title + "</a>";
	}

	function move(step, stepper) {
	var s = window.performance.now();
	state = s;
	active = (active+step+dashboards.length) % dashboards.length;
	switchTo(active);
	setTimeout(function() {
	if (autoAdvance && state == s) {
	stepper();
	}
	}, dashboards[active].delay * 1000);
	}

	function next() {
	move(1, next);
	}

	function previous() {
	move(-1, previous);
	}

	function toggleAutoAdvance() {
	autoAdvance = !autoAdvance;
	document.getElementById("toggle").innerHTML = autoAdvance ? "[STOP]" : "[START]";
	if (autoAdvance) {
	setTimeout(next, 1000);
	}
	}

	</script>
	</head>
	<body style="margin: 0; padding: 0; overflow: hidden;">
	<div style="float: left;"><a href="#" onclick="previous();" style="text-decoration: none; color: white;"><< previous</a></div>
	<div style="float: right;">
	<a href="#" onclick="toggleAutoAdvance();" style="text-decoration: none; color: white;" id="toggle">[STOP]</a>
	<a href="#" onclick="next();" style="text-decoration: none; color: white;">next >></a>
	</div>
	<div id="dashboard-title" style="text-align: center; height: 25px; background-color: black; color: white;"></div>
	<iframe id="dashboard" src="#" style="overflow:hidden;height:calc(100% - 25px);width:100%;border:0px;"></iframe>

	<script type="text/javascript">
	toggleAutoAdvance();
	</script>
	</body>

	</html>