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

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

    <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;
        }

        #mygraph {
            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="mygraph"></div>
        </td>
    </tr>
</table>

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

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

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

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

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

            // create a graph
            var container = document.getElementById('mygraph');
            var options = {};
            graph = new vis.Graph(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>