{% extends "base.html" %}
{% load staticfiles %}
{% block content %}
                        {% include "analysis/analysis_tabs.html" %} 
                        
                        <div id="run">
                            <!-- TODO: create custom template tag to make it work for a generic number of page levels
                                 https://docs.djangoproject.com/en/dev/howto/custom-template-tags/#inclusion-tags      -->
                            <ul>
                            {% for p in methodology_version.page_set.all %}
                                <li><a href="#page{{ p.id }}">{{ p.name }}</a></li>
                            {% endfor %}
                            </ul>
                            {% for p in methodology_version.page_set.all %}
                                <div id="page{{ p.id }}">
                                    <ul>
                                      {% for p1 in p.page_set.all %}
                                        <li><a href="#page{{ p1.id }}">{{ p1.name }}</a></li>
                                      {% endfor %}
                                    </ul>
                                    {% for p1 in p.page_set.all %}
                                        <div id="page{{ p1.id }}"><form>
                                        {% for q in p1.question_set.all %}
                                            <label>{{ q.text }}:</label> <span id="msgq{{ q.id }}"></span><br>
                                            {% for c in q.choice_set.all %}
                                                 <label><input type="radio" class="radioquestion" name="radioquestion{{ q.id }}" question_id="{{ q.id }}" id="question{{ q.id }}_{{ c.order }}" value="{{ c.order }}" /> {{ c.text }}</label><br>
                                            {% endfor %}
                                            <label>Notes": </label><input class="questionnotes" id="notes{{ q.id }}" question_id="{{ q.id }}" type="text" size="80" id="questionnotes{{ q.id }}" value=" " /><br>
                                            <div id="MetadataInfo{{ q.id }}"><img src="{% static "images/wait1.gif" %}"/></div><hr>
                                        {% endfor %}
                                        </form></div>
                                    {% endfor %}
                                </div>
                                <script type="text/javascript">
                                    $('div#page{{ p.id }}').tabs();
                                </script>
                            {% endfor %}
                            <script type="text/javascript">
                                //f cannot be moved to osseval.js as we have csrf_token
                                var save_answer_success = function(data, textStatus, jqXHR) { $('span#msgq'+data.question_id).show('slow');$('span#msgq'+data.question_id).html('Saved').css("color","green").delay(3000).fadeOut(); }
                                var save_answer_error = function(data, textStatus, jqXHR) { $('span#msgq'+data.question_id).show('slow');$('span#msgq'+data.question_id).html('Error: ' + data.response).css("color","green").delay(6000).fadeOut(); }
                                var f=function() {
                                  $.ajax({
                                    async: true, type: 'POST',
                                    url: 'save_answer',
                                    dataType: 'json',
                                    success: save_answer_success,
                                    error: save_answer_error,
                                    data: {csrfmiddlewaretoken: '{{ csrf_token }}', question_id  : $(this).attr('question_id'), id_selected_instance: id_selected_instance, value: $(this).val(), notes: $('input#notes'+$(this).attr('question_id')).val() }
                                  });
                                }
                                $('input.radioquestion').bind('click', f);
                                var timeout;
                                $('input.questionnotes').bind('input', function () {
                                    clearTimeout(timeout);
                                    var self = this;
                                    timeout = setTimeout(function () {
                                    question_id = $(self).attr('question_id');
                                    $.ajax({
                                      async: true, type: 'POST',
                                      url: 'save_answer',
                                      dataType: 'json',
                                      success: save_answer_success,
                                      error: save_answer_error,
                                      data: {csrfmiddlewaretoken: '{{ csrf_token }}', question_id: question_id, id_selected_instance: id_selected_instance, value: $('input:radio[name=radioquestion'+question_id+']:checked').val(), notes: $(self).val() }
                                    });
                                  }, 1500);
                                });
                            </script>
                        </div>
                        <script type="text/javascript">
                            $('div#run').tabs();
                            updateAnswers(id_selected_instance);
                            updateMetadata(id_selected_instance);
                        </script>
{% endblock %}
{% block left_menu %}
                {% include "analysis/analysis_left_menu.html" %}
                <script type="text/javascript">$("#analysis_questions").addClass("active");</script>
{% endblock %}