{% extends simple.html %}
{% block javascripts %}
<style type=text/css>
#wngraph {
    position: relative;
    width: 100%;
    height: 70%;
    padding-left: 5px;
    /*min-height: 615px;*/
    min-height: 400px;
}

#wngraph-plugin {
    background-color:black;
    left:10px;
    width:100%;
    height:100%;
    min-height:100%;
    /*height:700px;*/
    text-align:left;
    /*min-height: 700px;*/
}
#wngraph-content {
    min-height:100%;
}
#wngraph-definition {
    position:absolute;
    /*margin-left:15px;*/
    padding-left:15px;
    border-top:2px solid white;
    background-color: rgba(0,0,0,0.6);
    height:100px;
    width:100%;
    min-width:100%;
    overflow:hidden;
    margin-top:-100px;
    text-align:left;
    color:white;
    font-size:12pt;
    font-family:"Times New Roman",Georgia,Serif;
    z-index: 5;
}

#wngraph-def-synset {
    font-weight:bold;
    font-size:16pt;
}

#wngraph-title {
    float:right;
    color:white;
/*    font-size:20pt;
    padding:10px;
    margin-top:20px;*/
    color:white;
    font-size:24pt;
    padding:10px;
    margin:20px;
    margin-top: 20px;
    /*border:2px solid rgba(255,255,255,0.4);*/
    text-shadow:none;
    background-color:rgba(0,0,0,0.6);
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border:2px solid #ffffff;
}

div#sidepanel {
    background-color:black;
}

table#wnbuttontable {
    position:relative;
    width:100%;
    margin-top:-50px;
    z-index: 10;
}
tr#wnbuttons td {
    text-align:center;
    width:50%;
}

</style>

<!-- WN graph stuff -->

<script type='text/javascript' src='resources/json/wngraph-nodenames.json'></script>
<script type='text/javascript' src='resources/json/wngraph-definitions.json'></script>
<script type='text/javascript' src='resources/json/wngraph-rgbcolors.json'></script>

<!-- Code -->
<script type='text/javascript' src='resources/js/hoverintent.min.js'></script>
<script type='text/javascript' src='resources/js/graphview.js'></script>
<script type="text/javascript" src="resources/js/jquery.svg.min.js"></script>
<script type="text/javascript" src="resources/js/jquery.svganim.min.js"></script>
{% end %}

{% block jsinit %}
    var viewer, sock, gr;
{% end %}

<script type='text/javascript'>
{% block onload %}
    if (JSON.stringify($.getUrlVars()) == '["vox","vert"]') {
        $("div#intro").toggle();
    }
    gr = setupGraph();
    gr.voxdir = '{{voxdir}}';
    gr.subject = '{{subjectid}}';
    gr.catmapdir = '{{catmapdir}}';
    gr.setrgbdata(colordata);

    var wngraph = $("#wngraph-plugin").detach();
    wngraph.css("visibility", "visible");

    viewer = new MRIview();
    viewer.load("{{ctmfile}}", function() {
        gr.viewer = viewer;
        viewer.picker.callback = gr.showvoxel.bind(gr);

        // Check if there are URL parameters
        if (JSON.stringify($.getUrlVars()) == '["vox","vert"]') {
            var vox = $.getUrlVar("vox");
            var vert = $.getUrlVar("vert");

            // Create marker
            viewer.picker.addMarker(vert, false);

            // Animate viewer to show voxel/vertex
            viewer.setMix(1.0);
            var vpos = viewer.getVert(vert).pos;
            viewer.setState("target", [vpos.y,vpos.x,vpos.z]);

            // Show voxel in graph
            setTimeout(function() {gr.showvoxel(vox,vert);}, 1000);
            
        }
        else {
            setTimeout(function() {
                viewer.setMix(0.667);
                viewer.animate([{idx:3, state:"azimuth", value:310},
                                {idx:3, state:"altitude", value:120},
                                {idx:3, state:"mix", value:0.0}]);
                            }, 1000);
        }
    });

    viewer.addData(classify({{data}}));
    viewer.addPlugin(wngraph, true);
    window.addEventListener("resize", function() {$('#pluginbox').height($('window').height());}, false);
    

{% end %}
</script>

{% block extrahtml %}
<div id="wngraph-plugin" style="visibility:hidden">
    <div id="wngraph-content">
        <div id="wngraph-title">Semantic Space</div>
        {% include wngraph-labeled.svg %}
    </div>
    <div id="wngraph-definition"></div>
    <table id="wnbuttontable">
        <tr id="wnbuttons">
           <td><button class="roundbutton" onclick='gr.showrgb()' title="Show colorful semantic space on tree">Show Semantic Space</button></td>
           <td><button class="roundbutton" id="wnlabelbutton" onclick="gr.togglelabels()" title="Hide/show labels on tree">Hide Labels</button></td>
       </tr>
   </table>
</div>

{% end %}