<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title><%= title %></title>
	<style>
	body {
		font-family: Consolas, Menlo, Monaco, monospace;
		font-size: 8pt;
	}
	.diff, .marker { white-space: pre; }
	.diff:hover    { background-color: #ff9; }
	.delete        { background-color: #fdd; }
	.insert        { background-color: #dfd; }
	.divider {
		position: relative;
		background-color: #cce5ff; /* hsl(210, 100%, 90%) */
		background-image: -webkit-linear-gradient(top, hsl(210, 100%, 95%) 0%, hsl(210, 100%, 90%) 100%);
		background-image: -moz-linear-gradient(top, hsl(210, 100%, 95%) 0%, hsl(210, 100%, 90%) 100%);
		background-image: -o-linear-gradient(top, hsl(210, 100%, 95%) 0%, hsl(210, 100%, 90%) 100%);
		background-image: linear-gradient(top, hsl(210, 100%, 95%) 0%, hsl(210, 100%, 90%) 100%);
		font-family: Calibri, "Lucida Grande", sans-serif;
		border: solid 1px #b3cce6; /* hsl(210, 50%, 80%) */
		padding: 0 2px;
		border-radius: 3px;
		cursor: default;
	}
	.toggle:hover {
		background-image: -webkit-linear-gradient(top, hsl(210, 100%, 90%) 0%, hsl(210, 100%, 80%) 100%);
		background-image: -moz-linear-gradient(top, hsl(210, 100%, 90%) 0%, hsl(210, 100%, 80%) 100%);
		background-image: -o-linear-gradient(top, hsl(210, 100%, 90%) 0%, hsl(210, 100%, 80%) 100%);
		background-image: linear-gradient(top, hsl(210, 100%, 90%) 0%, hsl(210, 100%, 80%) 100%);
		border: solid 1px #39f; /* hsl(210, 100%, 60%) */
	}
	.marker { 
		color: #000080; 
		font-family: Consolas, Menlo, Monaco, monospace;
		position: absolute;
	}
	.hint {
		color: #999;
		text-align: center;
	}
	.divider:hover .hint                  { color: black; }
	.down_arrow, .up_arrow                { position: relative; }
	.down_arrow:after, .down_arrow:before { top: 100%; }
	.up_arrow:after, .up_arrow:before     { bottom: 100%; }
	.down_arrow:after, .down_arrow:before, .up_arrow:after, .up_arrow:before {
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		left: 50%;
	}
	.down_arrow:after, .up_arrow:after   { border-width: 5px; margin-left: -5px; }
	.down_arrow:before, .up_arrow:before { border-width: 6px; margin-left: -6px; }
	.down_arrow:after                    { border-top-color:    hsl(210, 100%, 90%); }
	.up_arrow:after                      { border-bottom-color: hsl(210, 100%, 95%); }
	.down_arrow:before                   { border-top-color:    hsl(210,  50%, 80%); }
	.up_arrow:before                     { border-bottom-color: hsl(210,  50%, 80%); }
	.toggle:hover .down_arrow:after      { border-top-color:    hsl(210, 100%, 80%); }
	.toggle:hover .down_arrow:before     { border-top-color:    hsl(210, 100%, 60%); }
	.toggle:hover .up_arrow:after        { border-bottom-color: hsl(210, 100%, 90%); }
	.toggle:hover .up_arrow:before       { border-bottom-color: hsl(210, 100%, 60%); }
	.left_header                { page-break-before: always; }
	.left_header, .right_header { background-color: #ddd; color: #222; }
	#content .collapsed {
		-webkit-transition: bottom .5s, height .5s;
		-moz-transition:    bottom .5s, height .5s;
		-o-transition:      bottom .5s, height .5s;
		transition:         bottom .5s, height .5s;
		height: 0;
    overflow: hidden
  }
	#nav_container {
		position: fixed;
		top: 0;
		right: 0;
		border-radius: 4px 0 0 4px / 50% 0 0 50%;
		box-shadow: 0 0 8px 0 rgba(0,0,0,.5);
		-webkit-transition: opacity 1s, bottom .5s, height .5s;
		-moz-transition:    opacity 1s, bottom .5s, height .5s;
		-o-transition:      opacity 1s, bottom .5s, height .5s;
		transition:         opacity 1s, bottom .5s, height .5s;
	}
	#nav {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		border-left: solid 1px #999;
		overflow: hidden;
		background: #eee;
		background-image: -webkit-linear-gradient(left, #e7e7e7 0%, #eee 25%, #eee 75%, #e7e7e7 100%);
		background-image: -moz-linear-gradient(left, #e7e7e7 0%, #eee 25%, #eee 75%, #e7e7e7 100%);
		background-image: -o-linear-gradient(left, #e7e7e7 0%, #eee 25%, #eee 75%, #e7e7e7 100%);
		background-image: linear-gradient(left, #e7e7e7 0%, #eee 25%, #eee 75%, #e7e7e7 100%);
		font-family: Calibri, "Lucida Grande", sans-serif;
		font-size: 10pt;
	}
	#nav_scroll {
		position: absolute;
		top: 1.75em;
		bottom: 0;
		right: 0;
		overflow-x: hidden;
		overflow-y: auto;
	}
	#nav button {
		height: 1.75em;
		margin: 0;
		width: 100%;
		background: #ddd;
		background-image: -webkit-linear-gradient(top, #eee 0%, #ccc 100%);
		background-image: -moz-linear-gradient(top, #eee 0%, #ccc 100%);
		background-image: -o-linear-gradient(top, #eee 0%, #ccc 100%);
		background-image: linear-gradient(top, #eee 0%, #ccc 100%);
		border: none;
		border-top: solid white 1px;
		border-bottom: solid #999 1px;
		font-family: Calibri, "Lucida Grande", sans-serif;
		font-size: 10pt;
		text-shadow: 0 1px 0 white;
	}
	#nav button:hover {
		background: #eee;
		background-image: -webkit-linear-gradient(top, #fff 0%, #ddd 100%);
		background-image: -moz-linear-gradient(top, #fff 0%, #ddd 100%);
		background-image: -o-linear-gradient(top, #fff 0%, #ddd 100%);
		background-image: linear-gradient(top, #fff 0%, #ddd 100%);
	}
	#nav button:active {
		border-top: solid black 1px;
		background: #333;
		background-image: -webkit-linear-gradient(top, #333 0%, #666 100%);
		background-image: -moz-linear-gradient(top, #333 0%, #666 100%);
		background-image: -o-linear-gradient(top, #333 0%, #666 100%);
		background-image: linear-gradient(top, #333 0%, #666 100%);
		color: white;
		text-shadow: 0 1px 0 black;
	}
	#nav_container.collapsed { opacity: 0.33; }
	#nav_container.collapsed:hover {
		opacity: 1;
		-webkit-transition: opacity 0s, bottom .5s, height .5s;
		-moz-transition:    opacity 0s, bottom .5s, height .5s;
		-o-transition:      opacity 0s, bottom .5s, height .5s;
		transition:         opacity 0s, bottom .5s, height .5s;
	}
	#nav ol      { margin: 0.5em; padding: 0 15px 0 30px; }
	#nav a       { color: black; text-decoration: none; display: block; width: 100%; }
	#nav a:hover { color: gray; }
	#nav_container.no_animation {
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: all 0 none;
		transition: none;
	}
	</style>
	<script>
	function $(id) {
		return document.getElementById(id);
	}
	function show(id) {
		$(id).style.display = "";
	}
	function hide(id) {
		$(id).style.display = "none";
	}
	function hasClass(el, classname) {
		var classes = el.className.split(/\s+/);
		for (var i = 0, len = classes.length; i < len; i++) {
			if (classes[i] == classname)
				return true;
		}
		return false;
	}
	function init() {
		// Set nav container width to the natural width of its absolutely positioned content
		var navWidth = $("nav_scroll").offsetWidth;
		var container = $("nav_container");
		container.style.width = navWidth + "px";
		if (container.addEventListener) {
			container.addEventListener("webkitTransitionEnd", page.navTransitioned);
			container.addEventListener("transitionend", page.navTransitioned);
			container.addEventListener("oTransitionEnd", page.navTransitioned);
		}
		$("nav_hide").onclick = page.hideNav;
		$("nav_show").onclick = page.showNav;
		
		// set up nav links
		function createJump(id) {
			return function() {
				page.jump(id);
				return false;
			}
		}
		var jumps = $("nav_list").getElementsByTagName("a");
		for (var i = 0, len = jumps.length; i < len; i++) {
			jumps[i].onclick = createJump("header_" + i);
		}
		
		// set up toggling of collapsed lines
		function createToggle(hunkStart) {
			return function() {
				page.toggleCollapse(hunkStart);
				return false;
			}
		}
		var divs = $("content").getElementsByTagName("div");
		for (var i = 0, len = divs.length; i < len; i++) {
			var div = divs[i];
			if (hasClass(div, "toggle")) {
				var hunkStart = parseInt(div.id.replace(/^[^\d]*/,""));
				if (hunkStart) {
					div.onclick = createToggle(hunkStart);
				}
			}
		}
	}
	function windowHeight() {
		return window.innerHeight || document.documentElement.clientHeight;
	}
	page = {
		hideNav: function() {
			hide("nav_hide");
			show("nav_show");
			var container = $("nav_container");
			var buttonHeight = $("nav_buttons").offsetHeight + "px";
			container.className = "no_animation";
			// set a fixed height, and clear the bottom
			container.style.height = windowHeight() + "px";
			container.style.bottom = "auto";
			// this is a hack to make sure the height is recalculated so that the transition animation triggers
			setTimeout(function() {
				container.className = "";
				container.style.height = buttonHeight;
			}, 10);
		},
		showNav: function() {
			hide("nav_show");
			show("nav_hide");
			var container = $("nav_container");
			container.className = "no_animation";
			// set a fixed bottom, and clear the height
			container.style.bottom = (windowHeight() - $("nav_buttons").offsetHeight) + "px";
			container.style.height = "auto";
			setTimeout(function() {
				container.className = "";
				container.style.bottom = "0";
			}, 10);
		},
		navTransitioned: function() {
			var container = $("nav_container");
			if (!container.classList)
				return;
			if (container.style.bottom === "auto") {
				container.classList.add("collapsed");
			} else {
				container.classList.remove("collapsed");
			}
		},
		jump: function(id) {
			scrollTo(0,$(id).offsetTop);
		},
		toggleCollapse: function(line) {
			var growDiv = $("hunk_" + line);
			if (growDiv.offsetHeight) {
				growDiv.style.height = 0;
				hide("collapse_" + line);
				show("expand_" + line);
			} else {
				var wrapper = growDiv.getElementsByTagName("div")[0];
				growDiv.style.height = wrapper.offsetHeight + "px";
				hide("expand_" + line);
				show("collapse_" + line);
			}
		}
	}
	</script>
	<!--[if lte IE 7]>
	<style>
	.unicode { font-family: "Lucida Sans Unicode"; }
	</style>
	<![endif]-->
</head>
<body onload="init();">
	<div id="content"><%= format %></div>
	<% if names.count > 1 %>
	<div id="nav_container" style="bottom: 0; height: 100%"><div id="nav">
		<div id="nav_buttons">
			<button id="nav_hide"><span class="unicode">&#x25be;</span> Navigation</button>
			<button id="nav_show" style="display: none"><span class="unicode">&#x25b8;</span> Navigation</button>
		</div>
		<div id="nav_scroll">
			<ol id="nav_list">
			<% names.each_with_index do |name, i| %>
				<li><a href="#header_<%= i %>"><%= name %></a></li>
			<% end %>
			</ol>
		</div>
	</div></div>
	<% end %>
</body>
</html>
