{% extends 'visko2/base.html' %}
{% load staticfiles %}

{% block content %}

<h1 class="page-header">ISF DEMO</h1>

<div id="dmrs_text_holder" class="dmrs_sentence_text"></div>

<!-- Synset Information -->
<div id="synsets"></div>

<div class="row">
  <div class="col-md-12">
    <!-- DMRS column -->
    <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#dmrs">Visual DMRS</a></li>
      <li><a data-toggle="tab" href="#json">JSON</a></li>
    </ul>
    <div class="tab-content">
      <div id="dmrs" class="tab-pane fade in active">
        <h2>DMRS</h2>
        <div id="dmrs1_canvas"></div>
      </div>
      <div id="json" class="tab-pane fade">
        <pre><code id="dmrs1_json"></code></pre>
      </div>
    </div>
    <!-- End DMRS column -->
  </div>
</div>

{% endblock %}

{% block css %}
<style>
 .tab-pane {
   overflow: auto;
 }
</style>
<link rel="stylesheet" type="text/css" media="screen" href="{% static 'viz/demo.css' %}"/>
<link rel="stylesheet" type="text/css" media="screen" href="{% static 'viz/delphin-viz.css' %}"/>
<link rel="stylesheet" type="text/css" media="screen" href="{% static 'css/visko2.css' %}"/>
{% endblock %}

{% block script %}
<script type="text/javascript" src="{% static 'viz/svg-2.3.0.min.js' %}"></script>
<script type="text/javascript" src="{% static 'viz/d3.v3.min.js' %}" charset="utf-8"></script>
<script type="text/javascript" src="{% static 'viz/demo.js' %}"></script>
<script type="text/javascript" src="{% static 'viz/tree.js' %}"></script>
<script type="text/javascript" src="{% static 'viz/mrs.js' %}"></script>
<script type="text/javascript" src="{% static 'viz/dmrs.js' %}"></script>
<!-- ShinchanJS scripts -->
<script type="text/javascript" src="{% static 'js/raphael.js' %}"></script>
<script type="text/javascript" src="{% static 'js/console.js' %}"></script>
<script type="text/javascript" src="{% static 'js/shinchan.js' %}"></script>
<script type="text/javascript" src="{% static 'js/shinchan.debug.js' %}"></script>
<script type="text/javascript" src="{% static 'js/visko-2.0.js' %}"></script>
<!-- Yawol client -->
<script src="{% static 'js/yawol.js' %}"></script>
<!-- Yawol support -->
<script type="text/template" id="synsetbox_template">
     <div class="synsetbox container-fluid well">
     <div class="row">
     <div class="col-xs-12">
      <button type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
     </div>
     </div>
     <div class="row">
     <div class="col-xs-12 col-sm-2 col-md-2">
      <label>SynsetID</label>
     </div>
     <div class="col-xs-12 col-sm-2 col-md-2">
      <span class="synsetid"><%= synset.synsetid %></span>                
     </div>
     <div class="col-xs-12 col-sm-2 col-md-2">
      <label>Lemmas</label> <span class="lemma"></span>
     </div>
     <div class="col-xs-12 col-sm-6 col-md-6">
      <span class="lemmas"><%= _.join(synset.lemmas, ', ') %></span>
     </div>
     </div>
     <div class="row">
     <div class="col-xs-12 col-md-2">
      <label>Definition</label>
     </div>
     <div class="col-xs-12 col-md-10">
      <span class="definition"><%= synset.definition %></span>
     </div>
     </div>
     <div class="row">
     <div class="col-xs-12 col-md-2">
      <label>Examples</label>
     </div>
     <div class="col-xs-12 col-md-10">
       <span class="examples">
         <% if(synset.examples.length > 0) {  %>
         <ul>
           <% _.each(synset.examples, function(ex){ %>
           <li><%= ex %></li>
           <% }); %>
         </ul>
         <% } %>    
       </span>
     </div>
     </div>
     </div>
</script>
<script>
 var yawol;
 var yawol_root = '/yawol/';

 function get_yawol() {
   var yawol = undefined;
   if (yawol == undefined) {
     yawol = new Yawol("synsets", yawol_root, $("#synsetbox_template").html());
   }
   return yawol;
 }
</script>

<!-- DMRS related scripts -->
<script>
 var dmrs_json = {"nodes": [{"type": "realpred", "pos": "v", "lnk": {"from": 3, "to": 9}, "sortinfo": {"cvarsort": "e", "perf": "-", "mood": "indicative", "prog": "-", "tense": "pres", "sf": "prop"}, "predicate": "_rain_v_1", "nodeid": 10000, "senses": [{"type": "lelesk", "lemma": "rain", "synsetid": "11501381-n"}]}], "links": [{"rargname": null, "from": 0, "post": "H", "to": 10000}], "lnk": {"from": -1, "to": -1}, "text": "it rains."};
 var dmrs_canvas;
 
 function clearDMRS(){
   if (dmrs_canvas != undefined){
     dmrs_canvas.clear();
     dmrs_canvas = undefined;
   }
 }
 
 function showDMRS(){
   render_json(dmrs_json);
 }

 function render_json(json){
   // Store JSON raw
   json_str = JSON.stringify(json);
   $('#dmrs1_json').text(json_str);
   // Rendering
   dmrs_canvas = json2canvas(json, "dmrs1", find_synset);
   dmrs_canvas.visualise();
 }

 /** Sample synset link builder **/
 function find_synset(synsetid) {
   return function(){ 
     get_yawol().search_synset(synsetid);
   };
 }
</script>
<!-- Document ready -->
<script>
 $(document).ready(function(){       
   initialise();   
   showDMRS();
 });

 function initialise(){
   $('#synset_info').hide();   
   $("#btnHideSynset").click(function(){ $('#synset_info').hide(); });
 }     
</script>
{% endblock %}
