{% load staticfiles %}
{% load hash %}

<script>

    var roles_display = []
    {% for role_id in role_children %}
        roles_display[{{ role_id }}] = []
        {% for role in role_children|hash:role_id %}
            roles_display[{{ role_id }}].push({ id: {{ role.id }}, role: "{{ role.role }}" })
        {% endfor %}
    {% endfor %}

    function display_subroles(role_id, checked) {
        if (checked) {
            text = ''
            
            for (i = 0; i < roles_display[role_id].length; i++) {
                input_text = '<input type="checkbox" name="roles" value="' +
                             roles_display[role_id][i]["id"] +
                             '" onclick="display_subroles(' +
                             roles_display[role_id][i]["id"] +
                             ', 1, this.checked)"><label>' +
                             roles_display[role_id][i]["role"] +
                             '</label><div id="subroles_' +
                             roles_display[role_id][i]["id"] +
                             '"></div>'
                text += input_text
            }
            
            $("#subroles_" + role_id).html(text)
            $("#subroles_" + role_id).css('position', 'absolute')
            $("#subroles_" + role_id).css('left', 50)
        } else {
            $("#subroles_" + role_id).html('')
        }
    }

    function dodaj() {
        if (highlighted_id) {
            if (highlighted_id.split('_').length == 3) {/* frame selected, new complement */
                var dodaj_dopełnienie = {
	                state0: {
		                title: 'Nowy argument',
		                html:'Wybierz role dla nowego argumentu:<br>' +
		                     '<table border="1" style="font-size: 11px">' +
				             {% for row in roles_display %}
				                '<tr>' +
			                    {% for rowspan, colspan, roles in row %}
			                        '<td rowspan="{{ rowspan }}" colspan="{{ colspan }}">' +
			                        {% for role in roles %}
			                            '<div><input type="checkbox" name="roles" value="{{ role.id }}"><label>{{ role.role }}</label></div>' +
			                        {% endfor %}
			                        '</td>' +
			                    {% endfor %}
				                '</tr>' +
				             {% endfor %}
				             '</table>',
		                buttons: { Anuluj: 0, Zatwierdź: 1 },
		                focus: 1,
		                submit:function(e,v,m,f){ 
			                if (v > 0) {
                                if (f.roles.length > 0) {
                                    $("#semantic_right").load(ajax_create_complement, "lemma_id=" + {{ lemma.id }} + "&frame=" + highlighted_id.split('_')[1] + "&roles=" + f.roles);
                                }
			                }

			                e.preventDefault();
			                $.prompt.close();
		                }
	                },
                };

                $.prompt(dodaj_dopełnienie);
            } else { /* complement selected, new selective_preference */
                var dodaj_preferencje = {
	                state0: {
		                title: 'Nowe preferencje selekcyjne',
		                html:'Chwilowo niedostępne',
		                buttons: { Anuluj: 0 },
		                focus: 1,
		                submit:function(e,v,m,f){ 
			                e.preventDefault();
			                $.prompt.close();
		                }
	                },
                };
                
                $.prompt(dodaj_preferencje);
            }
        } else {
            var dodaj_rame = {
	            state0: {
		            title: 'Nowa rama',
		            html:'Wybierz jednostki leksykalne, dla których chcesz stworzyć ramę:<br>'+
				            {% for lexical_unit  in lexical_units %}
				            '<input type="checkbox" name="lexical_units" value="{{ lexical_unit.id }}"><label>{{ lexical_unit.base }}-{{ lexical_unit.sense }}</label><br>' +
				            {% endfor %}
			            '</select>',
		            buttons: { Anuluj: 0, Zatwierdź: 1 },
		            focus: 1,
		            submit:function(e,v,m,f){ 
                        if (v > 0) {
                            if (f.lexical_units.length > 0) {
                                $("#semantic_right").load(ajax_create_frame, "lexical_units=" + f.lexical_units + "");
                            }
                        }

			            e.preventDefault();
			            $.prompt.close();
		            }
	            },
            };

            $.prompt(dodaj_rame);
        }
    }
    
    function zapisz_powiazania() {
    }
    
    $(document).ready(function(){
    
        control="modify"
        
        $("#select_modify_frames").click(function(e) {
            $("#connect").addClass("ui-tabs-hide")
            $("#select_connect").parent().removeClass("ui-state-active")
            $("#select_connect").parent().removeClass("ui-state-focus")
            $("#modify_frames").removeClass("ui-tabs-hide")
            $("#select_modify_frames").parent().addClass("ui-state-active")
            $("#select_modify_frames").parent().addClass("ui-state-focus")
            control="modify"
            frameClick("","")
        });
        
        $("#select_connect").click(function(event){
            $("#modify_frames").addClass("ui-tabs-hide")
            $("#select_modify_frames").parent().removeClass("ui-state-active")
            $("#select_modify_frames").parent().removeClass("ui-state-focus")
            $("#connect").removeClass("ui-tabs-hide")
            $("#select_connect").parent().addClass("ui-state-active")
            $("#select_connect").parent().addClass("ui-state-focus")
            control="connect"
            frameClick("","")
        });
    }) 
    
</script>

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
        <a id="select_modify_frames" href="#">Modyfikacja ramek</a>
    </li>
    <li class="ui-state-default ui-corner-top">
        <a id="select_connect" href="#">Edycja połączeń</a>
    </li>
</ul>
<div id="modify_frames" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
    <button type="button" onclick="dodaj()" id="create">Nowa</button>
</div>
<div id="connect" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
    <button type="button" onclick="zapisz_powiazania()" id="create">Zapisz</button>
</div>