{% extends "base.html" %}
{% block head %}
{% load static from staticfiles %}
<script src="{% static "js/d3.js" %}" charset="utf-8"></script>
<style>
.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}
</style>
{% endblock %}
{% block body %}
<div class="page-header">
	<h3>Crawl run {{crawl.pk}} from {{crawl.startTime}}</h3>
</div>

<div id="plotwin" class="container"></div>
<div id="infowin"><div class="alert alert-info" role="alert">Click on a node for more information</div></div>
<script type="text/javascript" charset="utf-8">

var asdata = [
{% for AS in ASses %}
	{id: {{AS.pk}}, nodetype: "AS", asnumber: {{AS.number}}, label: "{{AS.number}}", neighbors: {{AS.getPeerings.count}}, crawled: {%if AS.directlyCrawled%}true{%else%}false{%endif%}, online: {%if AS.online%}true{%else%}false{%endif%}, lastSeenDate: "{{AS.formatLastSeen}}", lastSeen: {%if AS.lastSeen%}{{AS.lastSeen.pk}}{%else%}null{%endif%}, dismiss: true}{%if not forloop.last%},{%endif%}
{%endfor%}
];

var asdict = {
{% for AS in ASses %}
	{{AS.number}}: {{forloop.counter0}}{%if not forloop.last%},{%endif%}
{% endfor %}
};

var peerings = [
{% for p in peerings %}
	{
		source: asdict[{{p.as1.number}}],
		target: asdict[{{p.as2.number}}],

		id: {{p.pk}},
		as1id: {{p.as1.id}},
		as1number: {{p.as1.number}},
		as2id: {{p.as2.id}},
		as2number: {{p.as2.number}},

		origin: "{{p.get_origin_display}}"
	}{%if not forloop.last%},{%endif%}
{%endfor%}
];


var width = 960,
    height = 700;

var svg = d3.select('#plotwin')
			.append('svg')
//			.attr("preserveAspectRatio", "xMidYMid meet")
//			.attr("viewBox", "0 0 " + width + " " + height );
			.attr('width', width)
			.attr('height', height);

var force = d3.layout.force()
	.nodes(asdata)
	.links(peerings)
    .charge(-500)
//	.chargeDistance(300)
//    .linkDistance(70)
	.linkStrength(0.65)
	.linkDistance(function(l) {
		neighs = Math.min(l.source.neighbors, l.target.neighbors);
		switch(neighs) {
			case 0: return 40;
			case 1: 
			case 2: return 120;
			case 3:
			case 4: return 200;
			default: return 250;
		}
	})
    .size([width, height])
	.start();


var link = svg.selectAll(".link")
			.data(peerings)
			.enter()
			.append("line")
			.attr("class", "link")
			.style("stroke-width", function(l) {
				neighs = Math.min(l.source.neighbors, l.target.neighbors);
				return 1 + Math.min(5, neighs);
			});
			//.style("stroke-width", 3);

var node = svg.selectAll('.node')
			.data(asdata)
			.enter()
			.append("g")
			.attr("id", function(d) { return "node-" + d.id; })
			.call(force.drag);

node.append("ellipse")
	.attr("rx", 40)
	.attr("ry", 20)
	.attr("fill", function(d) {
		if(d.crawled)
			return "#94FF70";
		else if(d.online)
			return "#D1FFC2";
			// return "#F0FFEB";
		else
			return "#FFCCCC";
	})
	.attr("stroke", "black")
	.attr("stroke-width", "1px");


node.append('text')
	.attr("font-family", "sans-serif")
	.attr("font-size", "13px")
	.attr("font-weight", "bold")
	.attr("dy", "4")
	.attr("text-anchor", "middle")
	.text(function(d) { return d.label; });

var lastMouseNode = null;
node.on("mouseover", function(d) {
		if(lastMouseNode) {
			if(!d.dismiss && lastMouseNode.id == d.id)
				return;
			else
				$("#node-"+lastMouseNode.id).tipsy("hide");
		}

		d.dismiss = true;
		$("#node-"+d.id).tipsy("show");

		lastMouseNode = d;
	})
	.on("mouseout", function(d) {
		if(d.dismiss)
			$("#node-"+d.id).tipsy("hide");
	});

$('svg g').tipsy({
	gravity: 'e',
	offset: 20,
	html: true,
	trigger: 'manual',
	title: function() {
		var d = this.__data__;
		var content = '';
		if(d.nodetype == 'AS') {
			var state = null;
			if(d.online)
				state = '<span class="label label-success">Online</span>';
			else if(d.lastSeen)
				state = '<span class="label label-danger">Offline</span>';
			else
				state = '<span class="label label-default">Never seen</span>';

			content  = '<b>AS '+d.asnumber+'</b><br>';
			content += '<table style="opacity: 1.0" class="table table-bordered">';
			content += '<tr><th>State</th><td>'+state+'</td>';
			if(d.lastSeen) {
				content += '<tr><th>Last seen</th><td><a href="/map/'+d.lastSeen+'/">Crawl '+d.lastSeen+'<br>'+d.lastSeenDate+'</a></td></tr>';
			}
			if(d.crawled) {
				content += '<tr><th>Note</th><td>Directly crawled</td></tr>';
			}
			content += '</table>';
		}
		return content;
	}
});

force.on("tick", function() {
	//node.attr('cx', function(d) { return d.x; })
	//	.attr('cy', function(d) { return d.y; });
	node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

	link.attr("x1", function(d) { return d.source.x; })
		.attr("y1", function(d) { return d.source.y; })
		.attr("x2", function(d) { return d.target.x; })
		.attr("y2", function(d) { return d.target.y; });
});


var lastNode = null;
function click(d) {
	if(d3.event.defaultPrevented) return;

	//if(lastNode)
	//	$("#node-" + lastNode.id).tipsy("hide");
	d.dismiss = false;
	//$("#node-" + d.id).tipsy("show");


	$("#infowin").fadeOut('fast', function() {
		// set progress bar
		$("#infowin").html('<div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"><span class="sr-only">Loading...</span></div></div>');



		var content = '';
		if(d.nodetype == 'AS') {
			//$("#node-"+d.id).popover({content: "Hallo Katze! :)"});
			//$("#node-"+d.id).popover('show');
			//console.log("My element", $("#node-"+d.id));
			//$("#node-"+d.id).tipsy({
			//	gravity: 'e',
			//	html: true,
			//	//trigger: 'focus',
			//	trigger: 'hover',
			//	title: function() {
			//		var d = this.__data__;
			//		astable = '<table class="table table-bordered"><tr><td>FOOO</td><td>bar</td></table>';
			//		return astable;
			//	}
			//});

			if(d.crawled) {
				$.ajax({url: "/map/api/borderrouter/?AS__crawl={{crawl.pk}}&AS__number=" + d.asnumber, success: function(result) {
					$("#infowin").html('');
					$("#infowin").fadeIn('fast', function() {});
					for(var i=0; i<result.objects.length; i++) {
						(function(currRouter) {
							$.ajax({url:"/map/api/announcement/?router="+currRouter.id, success: function(result2) {
								astable  = 'Table for AS'+d.asnumber+' router ID ' + currRouter.routerID;
								astable += '<table class="table table-bordered">';
								astable += '<tr><th>Network</th><th>Next Hop</th><th>AS Path</th></tr>';
								for(var j=0; j<result2.objects.length; j++) {
									ann = result2.objects[j];
									astable += '<tr><td>'+ann.ip+'/'+ann.prefix+'</td><td>'+ann.nextHop+'</td><td>'+ann.ASPath+'</td></tr>';
								}
								astable += '</table>';
								$('#infowin').append(astable);
							}});
						})(result.objects[i]);
					}

				}});
			}


		} else {
			$("#infowin").html('');
			$("#infowin").fadeIn('fast', function() {});
		}
	});
	lastNode = d;
}
node.on("click", click);


force.start();


</script>

{% endblock %}