<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>{{ontology.uri}}</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />




<style type="text/css" media="screen">


path.arc {
  cursor: move;
  fill: #fff;
}

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node {
  font-size: 10px;
  pointer-events: none;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}


text {
  font-size: 11px;
  pointer-events: none;
}

text.parent {
  fill: #1f77b4;
}

circle {
  fill: #ccc;
  stroke: #999;
  pointer-events: all;
}

circle.parent {
  fill: #1f77b4;
  fill-opacity: .1;
  stroke: steelblue;
}

circle.parent:hover {
  stroke: #ff7f0e;
  stroke-width: .5px;
}

{#note: June 20, 2016 removed to allow mousetips on all circles #}
{#circle.child {#}
{#  pointer-events: none;#}
{# } #}


circle.child:hover {
  stroke: #ff7f0e;
  stroke-width: .5px;
  fill: #eaeaea;
  fill-opacity: .9;
}



</style>


</head>


<body>

	{# VISIBLE PAGE HTML #}

	{# note: showpanel arg is the ID of the div that is showing.. #}

	<h1 class="title">Ontology:&nbsp;<a href="javascript:showpanel('ontoinfo');">{{main_uri}}</a></h1>
	<h3>{{ontology.bestDescription}}</h3>

	<p><small>Ontology documentation automatically generated by <a class="greylink" href="http://ontospy.readthedocs.org/">OntoSpy</a> on {% now "jS F Y H:i" %}</small></p>

	<hr>


	{% if TOTAL_CLASSES %}
		<div class="row">
			<h3>Classes ({{TOTAL_CLASSES}})</h3>
			<div class="col-md-12" id="graph_classes" style="margin-top: 10px;">


			</div>


		</div>
	{% endif %}



	<hr>
	<small>Documentation automatically generated by <a href="https://github.com/lambdamusic/OntoSpy">OntoSpy</a> on {% now "jS F Y H:i" %}</small>







{# JAVASCRIPT #}

<script type="text/javascript" src="{{STATIC_URL}}libs/d3-v3/d3.min.js"></script>

<script type="text/javascript" src="{{STATIC_URL}}libs/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}libs/jquery/jquery.slidereveal.min.js"></script>

<script type="text/javascript">

    var json = {{JSON_DATA_CLASSES|safe}} ;

    var w = 1400,
	    h = 1100,
	    rx = w / 4,
	    ry = h / 4,
	    m0,
	    rotate = 0;

	var cluster = d3.layout.cluster()
	    .size([360, ry -30])
	    .sort(null);

    var diagonal = d3.svg.diagonal.radial()
        .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

    var svg = d3.select("#graph_classes").append("div")
        .style("width", w + "px")
        .style("height", w + "px");

    var vis = svg.append("svg:svg")
        .attr("width", w)
        .attr("height", w)
        .append("svg:g")
        .attr("transform", "translate(" + rx + "," + ry + ")");

    vis.append("svg:path")
        .attr("class", "arc")
        .attr("d", d3.svg.arc().innerRadius(ry - 120).outerRadius(ry).startAngle(0).endAngle(2 * Math.PI))
        .on("mousedown", mousedown);

    // d3.json(JSON_FILE, function(json) {
      var nodes = cluster.nodes(json);

      var link = vis.selectAll("path.link")
          .data(cluster.links(nodes))
        .enter().append("svg:path")
          .attr("class", "link")
          .attr("d", diagonal);

      var node = vis.selectAll("g.node")
          .data(nodes)
        .enter().append("svg:g")
          .attr("class", "node")
          .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })

      node.append("svg:circle")
          .attr("r", 3);

      node.append("svg:text")
          .attr("dx", function(d) { return d.x < 180 ? 8 : -8; })
          .attr("dy", ".31em")
          .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
          .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
          .text(function(d) { return d.name; });
        // });

    d3.select(window)
        .on("mousemove", mousemove)
        .on("mouseup", mouseup);

    function mouse(e) {
      return [e.pageX - rx, e.pageY - ry];
    }

    function mousedown() {
      m0 = mouse(d3.event);
      d3.event.preventDefault();
    }

    function mousemove() {
      if (m0) {
        var m1 = mouse(d3.event),
            dm = Math.atan2(cross(m0, m1), dot(m0, m1)) * 180 / Math.PI,
            tx = "translate3d(0," + (ry - rx) + "px,0)rotate3d(0,0,0," + dm + "deg)translate3d(0," + (rx - ry) + "px,0)";
        svg
            .style("-moz-transform", tx)
            .style("-ms-transform", tx)
            .style("-webkit-transform", tx);
      }
    }

    function mouseup() {
      if (m0) {
        var m1 = mouse(d3.event),
            dm = Math.atan2(cross(m0, m1), dot(m0, m1)) * 180 / Math.PI,
            tx = "rotate3d(0,0,0,0deg)";

        rotate += dm;
        if (rotate > 360) rotate -= 360;
        else if (rotate < 0) rotate += 360;
        m0 = null;

        svg
            .style("-moz-transform", tx)
            .style("-ms-transform", tx)
            .style("-webkit-transform", tx);

        vis
            .attr("transform", "translate(" + rx + "," + ry + ")rotate(" + rotate + ")")
          .selectAll("g.node text")
            .attr("dx", function(d) { return (d.x + rotate) % 360 < 180 ? 8 : -8; })
            .attr("text-anchor", function(d) { return (d.x + rotate) % 360 < 180 ? "start" : "end"; })
            .attr("transform", function(d) { return (d.x + rotate) % 360 < 180 ? null : "rotate(180)"; });
      }
    }

    function cross(a, b) {
      return a[0] * b[1] - a[1] * b[0];
    }

    function dot(a, b) {
      return a[0] * b[0] + a[1] * b[1];
    }


    </script>



</body>
</html>
