{% extends "base.html" %}
{% block main %}

<div class='col-md-9'>
  <img id='loading-spinner' src="{{ url_for('static', filename='custom_img/ajax-loader.gif')}}">
  <div class='graph'>
  </div>
  <div class='hotkeys'>
    <ul>
      <li><strong>space</strong>: get node neighbors</li>
      <li><strong>e</strong>: find evil</li>
      <li><strong>u</strong>: unfix selected</li>
      <li><strong>shift</strong>: multiple selections</li>
      <li><strong>h</strong>: hide nodes</li>
      <li><strong>(shift+)arrows</strong>: move nodes</li>
    </ul>
    <table>
      <tr><td>Node distance:&nbsp;&nbsp;</td><td><div id='slider'></div></td>
      </tr>
    </table>
  </div>

  <script type="text/javascript">
    $("#slider").slider({
      range: 'max',
      min: 50,
      max: 1000,
      value: 110,
      slide: function (event, ui) {
        force.charge(-ui.value);
        start();
      }
    });
  </script>
</div>


<script type="text/javascript" src="{{ url_for('static', filename='custom_js/initialize_graph.js') }}" charset="utf-8"></script>
<script type="text/javascript" src="{{ url_for('static', filename='custom_js/d3_functions.js') }}" charset="utf-8"></script>
<script type="text/javascript">

initialize_graph();


setInterval(function() {uncomm_all()}, 500)

  // svg.append("svg:defs").selectAll("marker")
  //     .data(["arrow"])
  //     .enter().append("svg:marker")
  //       .attr("id", String)
  //       .attr("viewBox", "0 -5 10 10")
  //       .attr("markerUnits", "userSpaceOnUse")
  //       .attr("refX", 20)
  //       .attr("refY", 0)
  //       .attr("markerWidth", 7)
  //       .attr("markerHeight", 7)
  //       .attr("orient", "auto")
  //       .append("svg:path")
  //         .attr("d", "M0,-5L10,0L0,5");

d3.json(url_static_prefix+"api/neighbors/?field={{field}}&value={{value}}", function(error, graph) {
    push_nodes(graph.nodes)
    push_links(graph.edges)
    // spinner.toggleClass('show')
    start();
});


</script>
<script>
initSnifferWebSocket()
ws_sniffer.onopen = snifferInterfaceInit
</script>
{%endblock%}
{% block sidebar %}
<div class='data col-md-3 toolbar'>
  <h2>Highlight</h2>

  <!-- replace this as include template -->
  <div class="input-append input-group">
      <input id="query" class="form-control input-sm" type="text" onkeyup="highlight_query($('#query').val())">
      <span class="input-group-btn">
        <button class='btn btn-default btn-sm' type='button' onclick="highlight_query('clear'); $('#query').val('');">Clear</button>
      </span>
  </div>
  <span class="help-block">e.g. 'type:ip', 'google.com'</span>

  <div class="checkbox">
    <label style='font-size:small'><input id='curved-links' type="checkbox" onclick='javascript: curved_links = this.checked;start()'> Curved links</label>
  </div>
  <div class="checkbox">
    <label style='font-size:small'><input type="checkbox" id='link-labels' onclick='javascript: link_labels = this.checked; start()'> Link labels</label>
  </div>

  <div class="btn-group" role="group" aria-label="graph-operations">
    <button class='btn btn-sm btn-default' type='button' onclick='javascript:freeze_graph(true)'>Freeze graph</button>
    <button class='btn btn-sm btn-default' type='button' onclick='javascript:freeze_graph(false)'>Unfreeze graph</button>
  </div>

  <!-- end replace this -->

  <div id='message'></div>


  <h2>Info</h2>
  <table class='table table-condensed' id='node_info'></table>
  <div class='whois'></div>
</div>
{% endblock %}
