<!doctype html>
<title>Tetaneutral.net looking glass</title>
<meta charset="UTF-8">
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
<script type="text/javascript" src="{{url_for('static', filename='jquery.js') }}"></script>
<script type="text/javascript" src="{{url_for('static', filename='jquery-impromptu.3.2.min.js') }}"></script>
<script type="text/javascript">
$( function() {
		$("a.whois").click(function (event){
			event.preventDefault();
			link = $(this).attr('href')
			$.getJSON(link, function(data) {
				$.prompt("<h3>" + data.title + "</h3>" + data.output,{ show:'slideDown' });
			});
		});

		previous_req_type = "{{session.req_type}}".replace("_detail","")
		function update_view(nopopup){
			next_req_type = $("#req_type").val().replace("_detail","")
			if (previous_req_type != next_req_type) {
				$("#request_args").val("")
			}
			previous_req_type = next_req_type
			if (nopopup) {
				$("#submit").click()
				return 
			}
			switch(next_req_type)
			{
				case "summary":
					$("#submit").click()
					break;
				default:
					menu_html = ""
					data = {{session.history|tojson|safe}}[next_req_type]
					for (var item in data){
						menu_html += "<li>" + data[item] + "</li>"
					}
					txt = $("#" + $("#req_type").val() ).html().replace("...", 
						'<input type="text" id="ipopup" name="ipopup" value="' + $("#request_args").val() + '">') +
						'<br />History:' + 
						'<ul id="popup_menu">' + menu_html + '</ul>'
					$.prompt(txt, 
						{ 
						prefix: 'popup',
						callback: function(v,m,f){
							if ( f != undefined){
								$("#request_args").val(f.ipopup)
								$("#submit").click()
							}
						}
					});
					$("#popup_menu li").click(function(event){
						$("#ipopup").val($(this).html())
						$("#ipopup").focus()
					});
					$("#ipopup").keyup(function(event) {
						if (event.which == 13) {
							event.preventDefault();
							$("#request_args").val($("#ipopup").val())
							$("#submit").click() 
						}
					});

					$("#ipopup").focus()
					break;
			}
		}

		$("#menu ul li").click(function(){
			// set hiddent field with class value
			p = $(this).parent() // lu
			c = p.attr("class")
			
			$("#"+c).val($(this).attr("id"))

			$("ul."+p.attr("class") + " li").removeClass('selected')
			$(this).addClass('selected')

			switch(c){
				case "hosts":
				case "proto":
					update_view(true);
					break;
				default:
					update_view(false);
					break;
			}
		});
		//update_view(true)
			
		$("ul.proto li#{{session.proto}}").addClass('selected')
		$("ul.hosts li[id='{{session.hosts}}']").addClass('selected')
		$("ul.req_type li#{{session.req_type}}").addClass('selected')

		$("ul.proto li#{{session.proto}}").addClass('current')
		$("ul.hosts li[id='{{session.hosts}}']").addClass('current')
		$("ul.req_type li#{{session.req_type}}").addClass('current')

		$("#submit").click( function(){
			switch ($("#req_type").val())
			{
				case "summary":
					document.location = "/summary/" + $("#hosts").val() + "/" + $("#proto").val();
					break;
				default:
					document.location = "/" + $("#req_type").val() + "/" + $("#hosts").val() + "/" + $("#proto").val() + "?q=" + $("#request_args").val() ;
					break;
			}
			});


		if (document.location.pathname == "/"){
			$("#submit").click()
		}
});
</script>
<div id="page">
	<div id="header">
	<h1>{{config.DOMAIN|capitalize}}<br />Looking Glass</h1>
	<form id="menu">
		<input id="hosts" type="hidden" value="{{session.hosts}}" />
		<input id="proto" type="hidden" value="{{session.proto}}" />
		<input id="req_type" type="hidden" value="{{session.req_type}}" />
		<ul class="proto">
			<li id="ipv4">ipv4</li>
			<li id="ipv6">ipv6</li>
		</ul>
		<ul class="hosts">
			<li id="{{all_hosts}}">all</li>
			{% for host in config.PROXY %}
				<li id="{{host}}">{{host}}</li>
			{% endfor %}
		</ul>
		<ul class="req_type">
			<li id="traceroute">traceroute ...</li>
			<li id="summary">show protocols</li>
			<li id="detail">show protocols ... all</li>
			<li id="prefix">show route for ...</li>
			<li id="prefix_detail">show route for ... all</li>
			<li id="where">show route where net ~ [ ... ]</li>
			<li id="where_detail">show route where net ~ [ ... ] all</li>
		</ul>
		{% if session.request_args %}
		<p>... = {{session.request_args}}</p>
		{% endif %}
		<input type="hidden" id="request_args" style="display:none" value="{{session.request_args}}" />
		<input type="button" id="submit" value="submit" style="display:none" />
	</form>
	</div>
	<div id="content">
	{% if errors %}
	<div id="error">{{errors}}</div>
	{% endif %}
	{% block body %}{% endblock %}
	</div>
</div>