<!doctype html>
<html>
<head>
  <title>Network | DOT language playground</title>

  <script type="text/javascript" src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    body, html {
      font: 10pt sans;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      color: #4d4d4d;
    }

    #frame {
      width: 100%;
      height: 99%;
    }
    #frame td {
      padding: 10px;
      height: 100%;
    }
    #error {
      color: red;
    }

    #data {
      width: 100%;
      height: 100%;
      border: 1px solid #d3d3d3;
    }

    #mynetwork {
      float: left;
      width: 100%;
      height: 100%;
      border: 1px solid #d3d3d3;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      overflow: hidden;
    }

    textarea.example {
      display: none;
    }
  </style>
</head>
<body onload="drawExample('example1')">

<table id="frame">
  <col width="50%">
  <col width="50%">
  <tr>
    <td colspan="2" style="height: 50px;">
      <h1>DOT language playground</h1>
      <div>
        <a href="javascript: drawExample('example1')">example 1</a>
        <a href="javascript: drawExample('example2')">example 2</a>
        <a href="javascript: drawExample('example3')">example 3</a>
      </div>
      <div>
        <br>
        <button id="draw">Draw</button>
        <span id="error"></span>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <textarea id="data"></textarea>
    </td>
    <td>
      <div id="mynetwork"></div>
    </td>
  </tr>
</table>

<script type="text/javascript">
  var network, data;

  var btnDraw = document.getElementById('draw');
  var txtData = document.getElementById('data');
  var txtError = document.getElementById('error');
  btnDraw.onclick = draw;

  // resize the network when window resizes
  window.onresize = function () {
    network.redraw()
  };

  function destroy() {
    if (network !== null) {
      network.destroy();
      network = null;
    }
  }

  // parse and draw the data
  function draw () {
    destroy();
    try {
      txtError.innerHTML = '';

      // Provide a string with data in DOT language
      data = {
        dot: txtData.value
      };

      // create a network
      var container = document.getElementById('mynetwork');
      var options = {};
      network = new vis.Network(container, data, options);
    }
    catch (err) {
      // set the cursor at the position where the error occurred
      var match = /\(char (.*)\)/.exec(err);
      if (match) {
        var pos = Number(match[1]);
        if(txtData.setSelectionRange) {
          txtData.focus();
          txtData.setSelectionRange(pos, pos);
        }
      }

      // show an error message
      txtError.innerHTML =  err.toString();
    }
  }

  /**
   * Draw an example
   * @param {String} id HTML id of the textarea containing the example code
   */
  function drawExample(id) {
    txtData.value = document.getElementById(id).value;
    draw();
  }
</script>

<textarea id="example1" class="example">
  digraph {
  node [shape=circle fontSize=16]
  edge [length=100, color=gray, fontColor=black]

  A -> A[label=0.5];
  B -> B[label=1.2] -> C[label=0.7] -- A;
  B -> D;
  D -> {B; C}
  D -> E[label=0.2];
  F -> F;
  A [
  fontColor=white,
  color=red,
  ]
  }
</textarea>

<textarea id="example2" class="example">
  digraph topology
  {
  node[shape=circle fontSize=12]
  edge[length=170 fontSize=12]
  "10.0.255.1" -> "10.0.255.3"[label="1.000"];
  "10.0.255.1" -> "10.0.255.2"[label="1.000"];
  "10.0.255.1" -> "10.0.255.2"[label="1.000"];
  "10.0.255.1" -> "10.0.255.3"[label="1.000"];
  "10.0.255.2" -> "10.0.255.1"[label="1.000"];
  "10.0.255.2" -> "10.0.255.3"[label="1.000"];
  "10.0.255.3" -> "10.0.255.1"[label="1.000"];
  "10.0.255.3" -> "10.0.255.2"[label="1.000"];
  "10.0.255.3" -> "10.0.3.0/24"[label="HNA", shape=solid];
  "10.0.3.0/24"[shape=box];
  "10.0.255.2" -> "10.0.2.0/24"[label="HNA"];
  "10.0.2.0/24"[shape=box];
  "10.0.255.1" -> "10.0.1.0/24"[label="HNA"];
  "10.0.1.0/24"[shape=box];
  }
</textarea>

<textarea id="example3" class="example">
  digraph G  {
  // note: not all attributes are recognized and supported by Network
  //       unrecognized attributes are ignored

  node[width=.25,height=.375,fontsize=15]
  node [shape=filled fillcolor=#F1AAF0]
  0-> 0 ;
  1-> 1 ;
  2-> 2 ;
  3-> 3 ;
  4-> 4 ;
  5-> 5 ;
  6-> 6 ;
  7-> 5 ;
  8-> 8 ;
  9-> 9 ;
  10-> 10 ;
  11-> 10 ;
  12-> 12 ;
  13-> 5 ;
  14-> 10 ;
  15-> 0 ;
  }
</textarea>

</body>
</html>