<!DOCTYPE html>

<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.css" type="text/css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis-network.min.js"> </script>

    <style type="text/css">
        #network {
            width: 100%;
            height: 100%;
            background-color: white;
            border: 1px lightgrey;
            position: relative;
        }

        #network_graph {
            width: 80%;
            height: 100vh;
            background-color: white;
            border-top: 0;
            border-left: 0;
            border-bottom: 0;
            border-right: 0;
            position: relative;
            top: 0;
            float: right;
        }

        #network_legend {
            width: 20%;
            height: 100vh;
            background-color: white;
            border-top: 0;
            border-left: 0;
            border-bottom: 0;
            border-right: 0;
            position: relative;
            top: 0;
            float: left;
        }

        {% if nodes|length > 100 and physics_enabled %}
        #loadingBar {
            position: relative;
            float: right;
            width: 80%;
            height: 100vh;
            background-color: rgba(200,200,200,0.8);
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -ms-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
            opacity:1;
        }

        #bar {
            position:absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 20px;
            margin: auto auto auto auto;
            border-radius: 11px;
            border: 2px solid rgba(30,30,30,0.05);
            background: rgb(0, 173, 246); /* Old browsers */
            box-shadow: 2px 0 4px rgba(0,0,0,0.4);
        }

        #border {
            position:absolute;
            top:10px;
            left:10px;
            width:500px;
            height:23px;
            margin:auto auto auto auto;
            box-shadow: 0px 0px 4px rgba(0,0,0,0.2);
            border-radius:10px;
        }

        #text {
            position:absolute;
            top:8px;
            left:530px;
            width:30px;
            height:50px;
            margin:auto auto auto auto;
            font-size:22px;
            color: #000000;
        }

        div.outerBorder {
            position:relative;
            top:400px;
            width:600px;
            height:44px;
            margin:auto auto auto auto;
            border:8px solid rgba(0,0,0,0.1);
            background: rgb(252,252,252); /* Old browsers */
            background: -moz-linear-gradient(top,  rgba(252,252,252,1) 0%, rgba(237,237,237,1) 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* IE10+ */
            background: linear-gradient(to bottom,  rgba(252,252,252,1) 0%,rgba(237,237,237,1) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
            border-radius:72px;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
        }
        {% endif %}

        {% if tooltip_link %}
        /* position absolute is important and the container has to be relative or absolute as well. */
	    div.popup {
            position:absolute;
            top:0px;
            left:0px;
            display:none;
            background-color:#f5f4ed;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            border: 1px solid #808074;
            box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
	    }

	    /* hide the original tooltip */
	    .vis-network-tooltip {
	      display:none;
	    }
        {% endif %}
</style>
</head>
<body>
    <div id="network">
        <div id="network_legend">
            <script type="text/javascript">
                var legend_nodes;
                var legend_edges;
                function drawLegend() {
                    var container = document.getElementById('network_legend');

                    {% if use_DOT %}

                    var DOTstring = "{{dot_lang|safe}}";
                    var parsedData = vis.network.convertDot(DOTstring);

                    data = {
                        nodes: parsedData.nodes,
                        edges: parsedData.edges
                    }

                    var options = parsedData.options;
                    options.nodes = {
                        shape: "dot"
                    }

                    {% else %}
                    // parsing and collecting nodes and edges from the python
                    legend_nodes = new vis.DataSet({{legend_nodes|tojson}});
                    legend_edges = new vis.DataSet({{legend_edges|tojson}});

                    // TODO: set legend node positions properly
                    const step_x = 120;
                    const step_y = 50;
                    const x = -container.clientWidth / 2 + 50;
                    const y = -container.clientHeight / 2 + 50;
                    const ids = legend_nodes.getIds();
                    for (const id in ids) {
                    // for (const i = 0; i < legend_nodes.length; i++) {
                        const c_node = legend_nodes.get(id)
                        const new_x = x + c_node.x * step_x;
                        const new_y = y + c_node.y * step_y;
                        legend_nodes.update(
                            {
                                id: c_node.id,
                                x: new_x,
                                y: new_y
                            }
                        )
                    }

                    data = {nodes: legend_nodes, edges: legend_edges};

                    var options = {{options|safe}};

                    {% endif %}

                    legend = new vis.Network(container, data, options);

                    return legend
                }
                drawLegend();
            </script>
        </div>
        {% if nodes|length > 100 and physics_enabled %}
        <div id="loadingBar">
            <div class="outerBorder">
                <div id="text">0%</div>
                <div id="border">
                    <div id="bar"></div>
                </div>
            </div>
        </div>
        {% endif %}
        <div id="network_graph">
            <script type="text/javascript">
                // initialize global variables.
                var edges;
                var nodes;
                var network;
                var container;
                var options, data;

                // This method is responsible for drawing the graph, returns the drawn network
                function drawGraph() {
                    var container = document.getElementById('network_graph');

                    {% if use_DOT %}

                    var DOTstring = "{{dot_lang|safe}}";
                    var parsedData = vis.network.convertDot(DOTstring);

                    data = {
                      nodes: parsedData.nodes,
                      edges: parsedData.edges
                    }

                    var options = parsedData.options;
                    options.nodes = {
                        shape: "dot"
                    }

                    {% else %}

                    // parsing and collecting nodes and edges from the python
                    nodes = new vis.DataSet({{nodes|tojson}});
                    edges = new vis.DataSet({{edges|tojson}});

                    // adding nodes and edges to the graph
                    data = {nodes: nodes, edges: edges};

                    var options = {{options|safe}};

                    {% endif %}

                    network = new vis.Network(container, data, options);

                    {% if tooltip_link %}
                    // make a custom popup
                    var popup = document.createElement("div");
                    popup.className = 'popup';
                    popupTimeout = null;
                    popup.addEventListener('mouseover', function () {
                        console.log(popup)
                        if (popupTimeout !== null) {
                            clearTimeout(popupTimeout);
                            popupTimeout = null;
                        }
                    });
                    popup.addEventListener('mouseout', function () {
                        if (popupTimeout === null) {
                            hidePopup();
                        }
                    });
                    container.appendChild(popup);


                    // use the popup event to show
                    network.on("showPopup", function (params) {
                        showPopup(params);
                    });

                    // use the hide event to hide it
                    network.on("hidePopup", function (params) {
                        hidePopup();
                    });


                    // hiding the popup through css
                    function hidePopup() {
                        popupTimeout = setTimeout(function () { popup.style.display = 'none'; }, 500);
                    }

                    // showing the popup
                    function showPopup(nodeId) {
                        // get the data from the vis.DataSet
                        var nodeData = nodes.get([nodeId]);
                        popup.innerHTML = nodeData[0].title;

                        // get the position of the node
                        var posCanvas = network.getPositions([nodeId])[nodeId];

                        // get the bounding box of the node
                        var boundingBox = network.getBoundingBox(nodeId);

                        //position tooltip:
                        posCanvas.x = posCanvas.x + 0.5 * (boundingBox.right - boundingBox.left);

                        // convert coordinates to the DOM space
                        var posDOM = network.canvasToDOM(posCanvas);

                        // Give it an offset
                        posDOM.x += 10;
                        posDOM.y -= 20;

                        // show and place the tooltip.
                        popup.style.display = 'block';
                        popup.style.top = posDOM.y + 'px';
                        popup.style.left = posDOM.x + 'px';
                    }
                    {% endif %}


                    {% if nodes|length > 100 and physics_enabled %}
                    network.on("stabilizationProgress", function(params) {
                  		document.getElementById('loadingBar').removeAttribute("style");
	                    var maxWidth = 496;
	                    var minWidth = 20;
	                    var widthFactor = params.iterations/params.total;
	                    var width = Math.max(minWidth,maxWidth * widthFactor);

	                    document.getElementById('bar').style.width = width + 'px';
	                    document.getElementById('text').innerHTML = Math.round(widthFactor*100) + '%';
	                });
	                network.once("stabilizationIterationsDone", function() {
	                    document.getElementById('text').innerHTML = '100%';
	                    document.getElementById('bar').style.width = '496px';
	                    document.getElementById('loadingBar').style.opacity = 0;
	                    // really clean the dom element
	                    setTimeout(function () {document.getElementById('loadingBar').style.display = 'none';}, 500);
	                });
                    {% endif %}

                    return network;
                }
                drawGraph();
            </script>
        </div>
    </div>
</body>
</html>