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

  <style>
    body {
      font: 10pt arial;
    }
    #mynetwork {
      width: 600px;
      height: 600px;
      border: 1px solid lightgray;
      background: #F3F3F3;
    }
  </style>

  <script type="text/javascript" src="../../dist/vis.js"></script>

  <script type="text/javascript">
    var DIR = 'img/soft-scraps-icons/';

    var nodes = null;
    var edges = null;
    var network = null;

    function draw() {
      // create people
      nodes = [
        {id: 1,  label: 'Algie',   image: DIR + 'Smiley-Angry-icon.png', shape: 'image'},
        {id: 2,  label: 'Alston',  image: DIR + 'Smiley-Grin-icon.png', shape: 'image'},
        {id: 3,  label: 'Barney',  image: DIR + 'User-Administrator-Blue-icon.png', shape: 'image'},
        {id: 4,  label: 'Coley',   image: DIR + 'User-Administrator-Green-icon.png', shape: 'image'},
        {id: 5,  label: 'Grant',   image: DIR + 'User-Coat-Blue-icon.png', shape: 'image'},
        {id: 6,  label: 'Langdon', image: DIR + 'User-Coat-Green-icon.png', shape: 'image'},
        {id: 7,  label: 'Lee',     image: DIR + 'User-Coat-Red-icon.png', shape: 'image'},
        {id: 8,  label: 'Merlin',  image: DIR + 'User-Executive-Green-icon.png', shape: 'image'},
        {id: 9,  label: 'Mick',    image: DIR + 'User-Preppy-Blue-icon.png', shape: 'image'},
        {id: 10, label: 'Tod',     image: DIR + 'User-Preppy-Red-icon.png', shape: 'image'}
      ];

      // create connections
      var color = '#BFBFBF';
      edges = [
        {from: 2,   to: 8,  value: 3,   label: 3,   color: color},
        {from: 2,   to: 9,  value: 5,   label: 5,   color: color},
        {from: 2,   to: 10, value: 1,   label: 1,   color: color},
        {from: 4,   to: 6,  value: 8,   label: 8,   color: color},
        {from: 5,   to: 7,  value: 2,   label: 2,   color: color},
        {from: 4,   to: 5,  value: 1,   label: 1,   color: color},
        {from: 9,   to: 10, value: 2,   label: 2,   color: color},
        {from: 2,   to: 3,  value: 6,   label: 6,   color: color},
        {from: 3,   to: 9,  value: 4,   label: 4,   color: color},
        {from: 5,   to: 3,  value: 1,   label: 1,   color: color},
        {from: 2,   to: 7,  value: 4,   label: 4,   color: color}
      ];

      // create a network
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
      var options = {};
      network = new vis.Network(container, data, options);
    }
  </script>
</head>

<body onload="draw()">
<div id="mynetwork"></div>
<p>
  Icons: <a href="http://www.deleket.com/" target="_blank">Scrap Icons by Deleket</a>
</p>

<div id="info"></div>
</body>
</html>