<!doctype html>
<html>
<head>
  <title>IDEA</title>

  <style type="text/css">
    body {
      font: 10pt arial;
    }
    #mynetwork {
      width: {{ WIDTH }};
      height: {{ HEIGHT }};
      border: 1px solid lightgray;
      background-color: {{ BACKGROUND_COLOR }};
    }
  </style>

  <style text/css">
    {{ SLIDER_CSS }}
  </style>

  <script type="text/javascript">
    {{ VIS_JS }}
  </script>

  <script type="text/javascript">
    {{ CANVAS2SVG_JS }}
  </script>

  <style type="text/css">
    {{  VIS_CSS }}
  </style>

  <!-- Generated by IDEA -->
  <script type = "text/javascript">
    var nodes = null;
    var edges = null;
    var network = null;
    var options = null;

    function draw() {

      nodes = {{ NODES }};
      edges = {{ EDGES }};

      // create a network
      var container = document.getElementById('mynetwork');
      var data = {
        nodes: nodes,
        edges: edges
      };
      options = {
        nodes: {
          borderWidth:1,
          color: {
            border: '#222222',
            background: '#666666'
          },
        },
        physics: {{ OPTIONS_PHYSICS }},
      };
      network = new vis.Network(container, data, options);
    }
    C2S.prototype.circle = CanvasRenderingContext2D.prototype.circle;
    C2S.prototype.square = CanvasRenderingContext2D.prototype.square;
    C2S.prototype.triangle = CanvasRenderingContext2D.prototype.triangle;
    C2S.prototype.triangleDown = CanvasRenderingContext2D.prototype.triangleDown;
    C2S.prototype.star = CanvasRenderingContext2D.prototype.star;
    C2S.prototype.diamond = CanvasRenderingContext2D.prototype.diamond;
    C2S.prototype.roundRect = CanvasRenderingContext2D.prototype.roundRect;
    C2S.prototype.ellipse_vis = CanvasRenderingContext2D.prototype.ellipse_vis;
    C2S.prototype.database = CanvasRenderingContext2D.prototype.database;
    C2S.prototype.arrowEndpoint = CanvasRenderingContext2D.prototype.arrowEndpoint;
    C2S.prototype.circleEndpoint = CanvasRenderingContext2D.prototype.circleEndpoint;
    C2S.prototype.dashedLine = CanvasRenderingContext2D.prototype.dashedLine;

    function exportSvg()
    {
        var networkContainer = network.body.container;
        var ctx = new C2S({width: networkContainer.clientWidth, height: networkContainer.clientWidth, embedImages: true});

        var canvasProto = network.canvas.__proto__;
        var currentGetContext = canvasProto.getContext;
        canvasProto.getContext = function()
        {
            return ctx;
        }
        var svgOptions = {
            nodes: {
                shapeProperties: {
                    interpolation: false //so images are not scaled svg will get full image
                },
                scaling: { label: { drawThreshold : 0} },
                font:{color:'#000000'}
            },
            edges: {
                scaling: { label: { drawThreshold : 0} }
            }
        };
        network.setOptions(svgOptions);
        network.redraw();
        network.setOptions(options);
        canvasProto.getContext = currentGetContext;
        ctx.waitForComplete(function()
            {
                var svg = ctx.getSerializedSvg();
                showSvg(svg);
            });
    }

    function showSvg(svg)
    {
        var svgBlob = new Blob([svg], {type: 'image/svg+xml'});
        openBlob(svgBlob, "network.svg");
    }
    
    function openBlob(blob, fileName)
	  {
		if(window.navigator && window.navigator.msSaveOrOpenBlob)
        {

            //blobToDataURL(blob, function(dataurl){window.open(dataurl);});
            window.navigator.msSaveOrOpenBlob(blob,fileName);
        }
        else
        {
			var a = document.getElementById("blobLink");
			if(!a)
			{
				a = document.createElement("a");
				document.body.appendChild(a);
				a.setAttribute("id", "blobLink");
				a.style = "display: none";
			}
			var data = window.URL.createObjectURL(blob);
			a.href = data;
			a.download = fileName;
			a.click();
			setTimeout(function()
				{
				// For Firefox it is necessary to delay revoking the ObjectURL
				window.URL.revokeObjectURL(data);
				}
				, 100);
        }
    }

    function togglePhysics()
    {
        options.physics.enabled = !options.physics.enabled;
        network.setOptions(options);
    }

  </script>
  
</head>

<body onload="draw()">
<div id="mynetwork"></div>
<input type="button" onclick="exportSvg();" value="Export SVG"/>
<input type="button" onclick="togglePhysics();" value="Toggle Physics"/>
<div id="physicsValues">
  <div class="slider">
    <input type="range" min="-50000" max="-100" step="1" value="-2000" onchange="network.setOptions({physics:{barnesHut:{gravitationalConstant: this.value}}})"/>
    <label>Gravitational Constant</label>
  </div>
  <div class="slider">
    <input type="range" min="0" max="5" step="0.1" value="0.3" onchange="network.setOptions({physics:{barnesHut:{centralGravity: this.value}}})"/>
    <label>Central Gravity</label>
  </div>
  <div class="slider">
    <input type="range" min="0" max="1.0" step="0.01" value="0.0" onchange="network.setOptions({physics:{barnesHut:{avoidOverlap: this.value}}})"/>
    <label>Avoid Overlap</label>
  </div>
  <div class="slider">
    <input type="range" min="1" max="1000" step="5" value="95" onchange="network.setOptions({physics:{barnesHut:{springLength: this.value}}})"/>
    <label>Spring Length</label>
  </div>
  <div class="slider">
    <input type="range" min="0.001" max="1000" step="0.001" value="0.04" onchange="network.setOptions({physics:{barnesHut:{springLength: this.value}}})"/>
    <label>Spring Constant</label>
  </div>
</div>
</body>
</html>
