{% 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 %}

<h3>Crawl run {{crawl.pk}} from {{crawl.startTime}}</h3>

<div id="plotwin"></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%}}{%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 = 800;

var svg = d3.select('#plotwin')
			.append('svg')
			.attr('width', width)
			.attr('height', height);

console.log(asdata);
var force = d3.layout.force()
	.nodes(asdata)
	.links(peerings)
    .charge(-500)
//	.chargeDistance(300)
//    .linkDistance(70)
	.linkStrength(0.65)
	.linkDistance(function(l) {
		console.log(l);
		neighs = Math.min(l.source.neighbors, l.target.neighbors);
		console.log(neighs, "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")
			.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; });

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; });
});

force.start();

</script>

{% endblock %}