<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
	overflow: hidden;
	margin: 0;
	padding: 0;
}
td {
	vertical-align: top;
}
table ul {
	margin: 0;
	padding-left: 0;
	list-style: none;
}
#content {
	position: absolute;
	left:0;
	top: 0;
	right: 0;
	bottom: 0;
	overflow: auto;
	background: gray;
}
iframe {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: 100%;
	border: none;
	margin: 0;
	padding: 0;
	background: white;
}
#overlay {
	position: absolute;
	z-index: 10;
	right: 20px;
	top: 40px;
	width: auto;
	height: auto;
	overflow: hidden;
	background: black;
	color: white;
	padding: 10px;
	font-size: 10px;
	font-family: monospace;
}
#overlay a {
	color: white;
	text-decoration: none;
}
#overlay a:hover {
	background: gray;
	color: black;
}
a.active {
	background: white !important;
	color: black !important;
}
td.key {
	font-style: italic;
}
#overlay.open {}
#overlay .closedcontent { display: block; }
#overlay.open .closedcontent { display: none; }
#overlay .opencontent { display: none; }
#overlay.open .opencontent { display: block; }
</style>
</head>
<body>
<div id="content">
	<iframe src="{{padid}}.html" id="frame" name="frame"></iframe>
	<div id="overlay">
		<div class="closedcontent">
			versions
		</div>
		<table class="opencontent">
			<tr><td class="key">padid</td><td>{{padid}}</td></tr>
			<tr><td class="key">lastedited</td><td>{{lastedited_iso}}</td></tr>
			<tr><td class="key">revisions</td><td>{{revisions}}</td></tr>
			<tr>
				<td class="key">versions</td>
				<td>
					<ul>
						<li><a href="{{padurl}}" target="frame">Etherpad (editable)</a><li>
						<li><a href="{{padid}}.html" target="frame">HTML</a></li>
						<li><a href="{{padid}}.txt" target="frame">plain text</a></li>
						<li><a href="{{padid}}.diff.html" target="frame">HTML with authorship colors</a></li>
						<li><a href="{{padid}}.meta.json" target="frame">Meta data (JSON)</a></li>
					</ul>
				</td>
			</tr>
		</table>
	</div>

<script>
(function () {
	var frame = document.getElementById("frame"),
		overlay = document.getElementById("overlay");
	frame.addEventListener("load", function () {
		var loaded_href = frame.contentDocument.location.href,
			links = document.querySelectorAll("#overlay a");
		// console.log("load", loaded_href);
		for (var i=0, len=links.length; i<len; i++) {
			var linkhref = links[i].href;
			// console.log("*", linkhref);
			if (linkhref == loaded_href) {
				links[i].classList.add("active");
			} else {				
				links[i].classList.remove("active");
			}
		}
	});
	overlay.addEventListener("mouseenter", function () {
		overlay.classList.add("open");
	}, false);
	overlay.addEventListener("mouseleave", function () {
		overlay.classList.remove("open");
	}, false);

})()
</script>
</body>
</html>