<!doctype html>
<title>Browsing trees of {{ text }}</title>
<script>
var selected = {{ sentno }};
var mintree = {{ mintree }};
var maxtree = {{ maxtree }};
var totalsents = {{ totalsents }};
var chunk = {{ chunk }};
document.onkeydown = checkkey

function init() {
	// hide all trees except requested one
	var pres = document.getElementsByTagName('pre');
	for (var n = 0; n < pres.length; n++)
		pres[n].style.display = 'none';
	var pre = document.getElementById('t' + selected);
	pre.style.display = 'block';
	// turn prev/next links into javascript links
	var lnk = document.getElementById('prev');
	lnk.href = "javascript: next(-1); ";
	var lnk = document.getElementById('next');
	lnk.href = "javascript: next(1); ";
	// pre-load next / previous chunk
	var dir = -1;
	var target = 0;
	if(selected % chunk == 0 || selected % chunk > Math.floor(chunk / 2)) {
		dir = 1;
		target = chunk;
	}
	target += (selected - selected % chunk) + dir;
	if(target >= 1 && target <= totalsents) {
		sent = '&sent=' + target;
		prm = '{{ "&nomorph"|safe if nomorph }}{{ "&nofunc"|safe if nofunc }}';
		url = 'browse?text={{ textno }}' + sent + prm;
		ajaxFunction(url + '&ajax', dir);
	}
}

function checkkey(e) {
	if(document.activeElement.name == 'sent') return;
	e = e || window.event;
	if (e.keyCode == '37' || e.keyCode == '8') { // left arrow; backspace
		next(-1);
	} else if (e.keyCode == '39' || e.keyCode == '32' ) { // right arrow; space
		next(1);
	}  // FIXME: both space and right arrow interfere with scrolling
}

function next(dir) {
	// out of bounds or AJAX call hasn't returned yet
	if (selected + dir < mintree || selected + dir > maxtree)
		return;
	// detect if we're half way, if so, pre-load next chunk of trees
	else if ((dir == -1 && mintree > 1
				&& selected % chunk == Math.floor(chunk / 2))
			|| (dir == 1 && maxtree < totalsents
				&& selected % chunk == Math.floor(chunk / 2) + 1)) {
		sent = '&sent=' + (selected + dir * Math.floor(chunk / 2));
		prm = '{{ "&nomorph"|safe if nomorph }}{{ "&nofunc"|safe if nofunc }}';
		url = 'browse?text={{ textno }}' + sent + prm;
		ajaxFunction(url + '&ajax', dir);
	}
	var pre = document.getElementById('t' + selected);
	pre.style.display = 'none';
	selected += dir;
	var pre2 = document.getElementById('t' + selected);
	pre2.style.display = 'block';
	document.frm.sent.value = selected;
}

function ajaxFunction(url, dir) {
	var xmlhttp;
	if(window.XMLHttpRequest) {
	  // code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	} else if(window.ActiveXObject) {
	  // code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	} else {
	  alert("Your browser does not support XMLHTTP!");
	}
	var div = document.getElementById('trees');

	xmlhttp.onreadystatechange=function() {
		if(xmlhttp.readyState==4) { // && xmlhttp.status==200) {
			// div.innerHTML = xmlhttp.responseText; // replace contents
			if (dir == -1) {
				div.innerHTML = xmlhttp.responseText + div.innerHTML;
				mintree -= chunk;
				if (mintree <= 0) mintree = 1;
			} else {
				div.innerHTML += xmlhttp.responseText;
				maxtree += chunk;
				if (maxtree > totalsents) maxtree = totalsents;
			}
		}
	};
	xmlhttp.open("GET", url, true);
	xmlhttp.send(null);
}

</script>
<body onLoad="init(); ">
<form name=frm><tt>
	<input type=hidden name=text value={{ textno }}>
	<input type=hidden name=nomorph value=on {{ 'disabled' if not nomorph }}>
	<input type=hidden name=nofunc value=on {{ 'disabled' if not nofunc }}>
	{{ prevlink|safe }}
	| <input type=text name=sent value={{ sentno }} size=3 style="text-align: right"> of {{ totalsents }}
	| {{ nextlink|safe }}
	| {{ text }} | <font color=gray>(use left &amp; right arrow keys to browse)</font>
</tt></form>

<div id=trees>
{% for tree in trees %}
{{ tree|safe }}
{% endfor %}
</div>
</body>
