[% site_config.title = c.loc('Call Flow for Call-ID [_1]', callid) -%]
<link rel="stylesheet" href="/css/callflow.css">
<link rel="stylesheet" href="/css/ui-lightness/jquery-ui-1.10.3.custom.min.css">

<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script src="/js/libs/aliaseditor.js"></script>
<script src="/js/libs/diagram.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="/js/libs/jquery-1.7.2.min.js"></script>

<div id="controls">
    <a class="btn btn-primary btn-small" href="[% c.uri_for('/back') %]"><i class="icon-arrow-left"></i> [% c.loc('Back') %]</a>
    <a class="btn btn-primary btn-small" href="[% c.uri_for_action('/subscriber/get_pcap', c.req.captures) %]"><i class="icon-file"></i> [% c.loc('Download PCAP') %]</a>
    <input id="considerPortsButton" type="button" class="btn-primary btn-small" value="Consider Ports"/>
    <input id="expandEditor" type="button" class="btn-primary btn-small" value="Node Editor"/>
    <div id="editorDiv">
    node|alias
    <textarea id="nodeEditor"></textarea>
    <input id="applyNodeEdit" type="button" value="Apply"/>
    </div>
</div>

<div id="diagram_wrapper">
    <div id="diagram_header">
    </div>
    <div id="diagram">
    </div>
    <div id="message-frame">
    </div>
</div>

<script>
    $(document).mouseup(function(e) {
        var container = $("#editorDiv");

        // if the target of the click isn't the container nor a descendant of the container
        if (!container.is(e.target) && container.has(e.target).length === 0)
        {
            container.hide();
        }
    });

    $( document ).ready(function() {
        $.getJSON("[% c.uri_for_action('/subscriber/get_uas_json', c.req.captures) %]", function(aliases) {

            $.getJSON("[% c.uri_for_action('/subscriber/get_json', c.req.captures) %]", function(frames) {
                var considerports = true;
                var data = {};
                data.frames = frames;
                data.aliases = aliases;
                data = prepareData(data, considerports);
                redraw(data, considerports);
             });
        });
    });
</script>

[% back_created = 1 -%]

[% # vim: set tabstop=4 syntax=html expandtab: -%]
