{%extends "rolodex/base.html" %}
{%load staticfiles%}
{%block head%}

<link rel="stylesheet" type="text/css" href="{% static 'rolodex/css/entity.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'rolodex/css/entity_map.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'rolodex/css/nodeMap.css'%}">
<script src="{% static 'rolodex/js/d3.v3.min.js'%}"></script>
<script src="{% static 'rolodex/js/bootbox.min.js'%}"></script>
{%endblock%}

{%block content%}




<div class="statSelect">
  <select>
    <option value="default">Scale by centrality?</option>
    <option value="degree">Degree</option>
    <option value="betweenness">Betweenness</option>
    <option value="closeness">Closenness</option>
  </select>
  <button class="btn info">?</button>
  <div class="sliderContainer">Size scale variance
    <div class="slider"></div>
  </div>
  
</div>

<div id="networkCanvas"></div>

<div class="change">
<a href="{%url 'rolodex_person' node.slug%}">Back to Page</a>
</div>



<script>
var replaceP = '{% url "rolodex_person" "foobarbaz" %}',
	replaceO = '{% url "rolodex_org" "foobarbaz" %}',
  nodeID="{{node.firstName}} {{node.lastName}}",
  nodePRIME = "{{node.primary}}",
  graphWidth = $(window).width()-50,
  graphHeight = $(window).height()-120,
  graphData={};
</script>
<script src="{% static 'rolodex/js/nodeNet.js'%}"></script>
<script type="text/javascript">
  $('#networkCanvas').html("<img class='waitingGIF' src=\"{%static 'rolodex/images/waiting.gif'%}\">");
  $.ajax({
    type:"GET",
    dataType:"json",
    url:"{%url 'rolodex_adv_person_network' node.slug %}?hops={{hops}}",
    success: function(d){
      $('#networkCanvas').html("");
      graphData = d;
      chartNetwork(d.links);
      $(".statSelect").css("visibility","visible");
      
    }
  });


$(document).ready(function(){

  $( ".slider" ).slider({ 
    range: "min",
    value:5,
    min: 0,
    max: 15,
    change: function( event, ui ) {
      //pass scale factor and measure value
      changeSize(ui.value,$( ".statSelect select option:selected" ).val())
    }
  });


  $(".statSelect select").change(function(){
    var centrality = $( ".statSelect select option:selected" ).val();
    if(centrality == 'default'){
      $(".sliderContainer").css("visibility","hidden");
       nodeDefault();

    }else{
      $(".sliderContainer").css("visibility","visible");
      nodeCentrality(centrality);
    } 
  })

  $(".btn.info").click(function(){
    bootbox.alert("<p>In social network theory, centrality measures are one way to assess the \"importance\" of any one person or org in a network. Which measure of importance you use depends on the question you're asking.<p><b>Degree</b> centrality is the simple number of relationships a person or org has to others in the network. Degree centrality assumes whoever has the most connections is the most important. <p><b>Betweenness</b> measures how crucial a conduit any one person or org is to others in the network. A person or org with high betweenness centrality is thought to be important to the transfer of information through the network, assuming people and orgs try to use the shortest path possible to distribute or receive information.<p><b>Closenness</b> measures how close to the \"middle\" of the network a person or org is. These people or orgs are not necessarily vital to information transfer or the most well-connected, but they are generally near the central points of information exchange and influence in the network.");

  })

})

</script>



<div class="breadcrumb-container">
<ul class="breadcrumb">
	<li><a href="{% url 'rolodex_home' %}">Home</a></li>
	<li><a href="{%url 'rolodex_person' node.slug%}">{{node.lastName}}, {{node.firstName}}</a></li>
  <li><a>Graph</a></li>
</ul>
</div>
{%endblock%}