<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<style>
			{% include 'style.css' %}
		</style>
	</head>
	<body>
		<script language="javascript" type="text/javascript">
			{% include 'jquery-1.11.3.min.js' %}
			{% include 'jquery.maphilight.min.js' %}
			{% include 'imageMapResizer.min.js' %}
		</script>
		<script>
			$(document).ready(function() {
				// resize image map based on scaled
				$('map').imageMapResize();
				$('img[usemap]').maphilight({"fill": false});

				// focus text fields when lines/words are clicked + mouseover
				$('area').click(function(e) {
					$('#' + $(this).attr('alt')).focus();
				}).mouseover(function(e) {
					$('#' + $(this).attr('alt')).toggleClass("hovered");;
				}).mouseout(function(e) {
					$('#' + $(this).attr('alt')).toggleClass("hovered");;
				});
				// create mouseover effect on text fields
				$('li[contenteditable=true], span').mouseover(function(e) {
					$('area[alt=' + this.id + ']').mouseover();
				}).mouseout(function(e) {
					$('area[alt=' + this.id + ']').mouseout();
				}).focusin(function(e) {
					$('area[alt=' + this.id + ']').data('maphilight', {'alwaysOn': true}).trigger('alwaysOn.maphilight');
				}).focusout(function(e) {
					$('area[alt=' + this.id + ']').data('maphilight', {'alwaysOn': false}).trigger('alwaysOn.maphilight');
				}).keydown(function(e) {
					if(e.which == 13) {
						e.preventDefault();
						$(this).addClass('corrected');
						var $els = $('[contenteditable=true]');
						$els.eq($els.index(this) + 1).focus();
					}
				});
			
				// smooth scrolling between anchor links
				$('a[href*=#]').on('click', function(event) {     
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
				});

				$('#download_button').on('click', function(event) {
					path = window.location.pathname
					$(this).attr('download', path.substr(path.lastIndexOf('/') + 1))
					$(this).attr('href', 'data:text/html,;charset=utf-8,' + $('html')[0].outerHTML);
				});
			});
		</script>
		<nav>
			<ul>
			{% for page in pages %}
				<li><a href='#page_{{ page.index }}'>{{ page.index }}</a></li>
			{% endfor %}
			</ul>
			<a id="download_button" href="">Download</a>
		</nav>
		{% for page in pages %}
		<section class="page container" id="page_{{ page.index }}">
			<div class="column">
				<img class="page_image" usemap="#elements_{{ page.index }}" src='{{ page.img }}' alt="photo"/>
			</div>
			<div class="column">
				<ul>
				{% for line in page.lines %}
					{% if line.recognition %}
						<li data-bbox="{{ line.bbox }}">
							{% for segment in line.recognition %}
							<span id="segment_{{ segment.index }}" contenteditable="true" spellcheck="true" data-bbox="{{ segment.bbox }}">{{ segment.text }}</span>
							{% endfor %}
						</li>
					{% else %}
					<li id="line_{{ line.index }}" contenteditable="true" spellcheck="true" data-bbox="{{ line.bbox }}" data-placeholder="Enter text for line {{ line.index }}"></li>
					{% endif %}
				{% endfor %}
				</ul>
			</div>
			<map name="elements_{{ page.index}}">
				{% for line in page.lines %}
					{% if line.recognition %}
						{% for segment in line.recognition %}
						<area shape="rect" coords="{{ segment.bbox }}" alt="segment_{{ segment.index }}"/>
						{% endfor %}
					{% else %}
						<area shape="rect" coords="{{ line.bbox }}" alt="line_{{ line.index }}"/>
					{% endif %}
				{% endfor %}
			</map>
		</section>
		{% endfor %}
	</body>
</html>
