{% load hash %}
{% load jsonify %}

<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-impromptu.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/semantics_core.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/semantics_connections.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/semantics_examples.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/semantics_frames.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/semantics_lexical_units.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/semantics_roles.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/semantics_schemas.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/semantics_view.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/semantics_preferences.js"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}css/jquery-impromptu.min.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/semantics.css"/>
<script>

	{% if js_vars %}
	    {% for name,var in js_vars.iteritems %}
	      var {{ name }} = {{ var|jsonify }};
	    {% endfor %}
	{% endif %}

    $(document).ready( function() {
	
        createHSplitter();
        createVTopSplitter();
        {% if can_modify %}
          createVBottomSplitter();
        {% endif %}
        
        $.getJSON(ajax_units, {lemma_id: {{ lemma.id }}}, function(data){
            memorizeLexicalUnits(data.lexical_units);
            basicLexicalUnitsData(data.informations);
        });
        
        $.getJSON(ajax_roles, function(data){
            memorizeRoles(data.roles_display, data.roles_full);
            $.getJSON(ajax_opinions, {lemma_id: {{ lemma.id }}}, function(data){
	        memorizeOpinions(data.opinions);
                $.getJSON(ajax_frames, {lemma_id: {{ lemma.id }}}, function(data){
                    getFrames(data.frames_display);
                    memorizeConnections(data.connections.connected,
	                                data.connections.connected_reverse);
          	    alternationCounts(data.alternations);
	            displayFrames();
                    $("#semantic-frames-count").empty();
      	            $("#semantic-frames-count").append(data.frames_count);
	        });
            });
        });

        $.getJSON(ajax_relations, function(data){
            memorizeRelations(data.relations);
        });
        
        $.getJSON(ajax_schemas, {lemma_id: {{ lemma.id }}}, function(data){
            memorizeRanks(data.ranks);
            displaySchemas(data.lemma, data.schemas_display);
            $.getJSON(ajax_examples, {lemma_id: {{ lemma.id }}}, function(data){
                memorizeExamples(data.examples, true)
            });
        });

        
        {% if can_modify%}
          prepareControl();
        {% endif %}
        
        getPredefinedSelections();
    });
    
</script>

<div id="semantics-hsplit">
  <div id="semantics-hsplit-top" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <div id="semantics-vsplit-top">
    
	  	<div id="frames">
		</div>
		
		<div id="schemas">
		</div>
		
	</div>
  </div>  
  <div id="semantics-hsplit-bottom" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  	<div id="semantics-vsplit-bottom">
  	
  		{% if can_modify %}
	  	<div id="control" class="semantics-control-tabs" style="overflow: auto;">
	  	  <ul>
        	  <li><a href="#select_meanings">Znaczenia</a></li>
                  <li><a href="#select_creating">Tworzenie</a></li>
		  <li><a href="#select_connected">Powiązane</a></li>
                  </ul>
		  <div id="select_meanings">
		    <button type="button" onclick="openMeaningsMenu()" id="create">Modyfikuj</button>
		  </div>
		  <div id="select_creating">
		    <button type="button" onclick="createFrame()" id="create_frame">Nowa rama</button>
    		<button type="button" onclick="removeFromFrame()" id="delete" disabled="True">Usuń</button>
    		<br/>
    		<button type="button" onclick="changeLexicalUnits()" id="change_lus" disabled="True">Zmień jednostki</button>
    		<button type="button" onclick="changeOpinion()" id="change_opinion" disabled="True">Ustaw ocenę</button>
    		<br/>
    		<button type="button" onclick="assignRole()" id="assign_role" disabled="True">Zmień rolę</button>
    		<button type="button" onclick="addSelectivePreference()" id="add_preference" disabled="True">Dodaj preferencje</button>
    		<br/>
    		<button type="button" onclick="saveFrames()" id="save_frames">Zapisz</button>
		  </div>  
                  <div id="select_connected" style="overflow: auto;">
    		<button type="button" onclick="shareFrame()" id="share_frames">Kopiuj</button>		    
		  </div>
		</div>
		{% endif %}
	
		<div id="semantics-examples" style="overflow: auto;">
		</div>
		
	</div>
  </div>
</div>