<!doctype html>
<html>
<head>
  <title>Network | Localization</title>

  <style type="text/css">
    body, select {
      font: 10pt sans;
    }
    #mynetwork {
      position:relative;
      width: 600px;
      height: 600px;
      border: 1px solid lightgray;
    }
    table.legend_table {
      font-size: 11px;
      border-width:1px;
      border-color:#d3d3d3;
      border-style:solid;
    }
    table.legend_table,td {
      border-width:1px;
      border-color:#d3d3d3;
      border-style:solid;
      padding: 2px;
    }
    div.table_content {
      width:80px;
      text-align:center;
    }
    div.table_description {
      width:100px;
    }

    #operation {
      font-size:28px;
    }
    #network-popUp {
      display:none;
      position:absolute;
      top:350px;
      left:170px;
      z-index:299;
      width:250px;
      height:120px;
      background-color: #f9f9f9;
      border-style:solid;
      border-width:3px;
      border-color: #5394ed;
      padding:10px;
      text-align: center;
    }
  </style>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <link type="text/css" rel="stylesheet" href="../../dist/vis.css">

  <script type="text/javascript">
    var nodes = null;
    var edges = null;
    var network = null;

    function draw() {
      nodes = [];
      edges = [];
      var connectionCount = [];

      // randomly create some nodes and edges
      var nodeCount = 25;
      for (var i = 0; i < nodeCount; i++) {
        nodes.push({
          id: i,
          label: String(i)
        });

        connectionCount[i] = 0;

        // create edges in a scale-free-network way
        if (i == 1) {
          var from = i;
          var to = 0;
          edges.push({
            from: from,
            to: to
          });
          connectionCount[from]++;
          connectionCount[to]++;
        }
        else if (i > 1) {
          var conn = edges.length * 2;
          var rand = Math.floor(Math.random() * conn);
          var cum = 0;
          var j = 0;
          while (j < connectionCount.length && cum < rand) {
            cum += connectionCount[j];
            j++;
          }

          var from = i;
          var to = j;
          edges.push({
            from: from,
            to: to
          });
          connectionCount[from]++;
          connectionCount[to]++;
        }
      }

      // create a network
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {
        stabilize: false,
        dataManipulation: true,
        onAdd: function(data,callback) {
          var span = document.getElementById('operation');
          var idInput = document.getElementById('node-id');
          var labelInput = document.getElementById('node-label');
          var saveButton = document.getElementById('saveButton');
          var cancelButton = document.getElementById('cancelButton');
          var div = document.getElementById('network-popUp');
          span.innerHTML = "Add Node";
          idInput.value = data.id;
          labelInput.value = data.label;
          saveButton.onclick = saveData.bind(this,data,callback);
          cancelButton.onclick = clearPopUp.bind();
          div.style.display = 'block';
        },
        onEdit: function(data,callback) {
          var span = document.getElementById('operation');
          var idInput = document.getElementById('node-id');
          var labelInput = document.getElementById('node-label');
          var saveButton = document.getElementById('saveButton');
          var cancelButton = document.getElementById('cancelButton');
          var div = document.getElementById('network-popUp');
          span.innerHTML = "Edit Node";
          idInput.value = data.id;
          labelInput.value = data.label;
          saveButton.onclick = saveData.bind(this,data,callback);
          cancelButton.onclick = clearPopUp.bind();
          div.style.display = 'block';
        },
        onConnect: function(data,callback) {
          if (data.from == data.to) {
            var r=confirm("Do you want to connect the node to itself?");
            if (r==true) {
              callback(data);
            }
          }
          else {
            callback(data);
          }
        }
      };
      network = new vis.Network(container, data, options);

      // add event listeners
      network.on('select', function(params) {
        document.getElementById('selection').innerHTML = 'Selection: ' + params.nodes;
      });

      network.on("resize", function(params) {console.log(params.width,params.height)});

      function clearPopUp() {
        var saveButton = document.getElementById('saveButton');
        var cancelButton = document.getElementById('cancelButton');
        saveButton.onclick = null;
        cancelButton.onclick = null;
        var div = document.getElementById('network-popUp');
        div.style.display = 'none';
      }

      function saveData(data,callback) {
        var idInput = document.getElementById('node-id');
        var labelInput = document.getElementById('node-label');
        var div = document.getElementById('network-popUp');
        data.id = idInput.value;
        data.label = labelInput.value;
        clearPopUp();
        callback(data);

      }

      // update the locale when changing the select box value
      var select = document.getElementById('locale');
      select.onchange = function () {
        network.setOptions({
          locale: this.value
        });
      };
      select.onchange();
    }
  </script>
</head>

<body onload="draw();">
<h2>Editing the dataset (localized)</h2>
<p style="width: 700px; font-size:14px; text-align: justify;">
  This is the same example as <a href="21_data_manipulation.html">21_data_manipulation.html</a>, except that there is a select box added which allows to switch locale. The localization is only relevant to the manipulation buttons.
</p>

<p>
  <label for="locale">Select a locale:</label>
  <select id="locale">
    <option value="en" selected>en</option>
    <option value="nl">nl</option>
  </select>
</p>

<div id="network-popUp">
  <span id="operation">node</span> <br>
  <table style="margin:auto;"><tr>
    <td>id</td><td><input id="node-id" value="new value"></td>
  </tr>
    <tr>
      <td>label</td><td><input id="node-label" value="new value"> </td>
    </tr></table>
  <input type="button" value="save" id="saveButton"></button>
  <input type="button" value="cancel" id="cancelButton"></button>
</div>
<br />
<div id="mynetwork"></div>

<p id="selection"></p>
</body>
</html>