{% extends "base.html" %}

{% block js %}
<script>
  var start_show = false;
  var done_list = [];
  $(function() {
      $(".slider").each(function(index, elm){
        var slider = $(elm).selectToUISlider({
            labels: {{num_labels}},
            slide: function(event, ui) {
                var id = $(ui.handle).attr("id");
                var value = ui.handle.text;

                $('.nextbutton').show();
                var sid = $('.screen:not(.hidden)').attr("id");
                if(done_list.indexOf(sid) == -1){
                  done_list.push(sid);
                }

                {% if not preview %}
                $.ajax({
                  dataType: "json",
                  url: "/update/atributo/"+id+"/"+value,
                  success: function(data){}
                 });
                {% endif %}

            }
          }).hide();
      });
    $('.nextbutton').hide();

    $(".end_session").click(function(e){
      var link = $(this);
      var href = link.attr("href");
      var comment = link.parent().find("#comments textarea");
      if(comment.attr("name") != undefined){
        var par = comment.parent();
        if(par.css("display") == "none"){
          par.show();
          par.parent().find(".slider-container").hide();
          par.parent().find(".atributo-name").hide();
          $('.nextbutton').show();
          link.text("End Session");
          return false;
        }
        var data = comment.val();
        var session = comment.attr("name");

        {% if not preview %}
        $.ajax({
          type: "POST",
          dataType: "json",
          url: "/session/comment/"+session,
          data: {comment: data},
          success: function(ret){
              //console.log("RET: " + ret);
          }
        });
        {% endif %}
      }
    });

  });

  function showscreen(id, newid, prev){
    last = false;
    var comment = $('#comment-'+id);
    if(done_list.indexOf(newid) != -1){
      $('.nextbutton').show();
    }else{
      $('.nextbutton').hide();
    }
    if(comment.attr("name")!= undefined){
        var par = comment.parent();
        if(par.css("display") == "none"){
          if(!prev){
            par.show();
            par.parent().find(".slider-container").hide();
            par.parent().find(".atributo-name").hide();
            $('.nextbutton').show();
            return;
          }
        }else{
          if(prev){
            par.hide();
            par.parent().find(".atributo-name").show();
            par.parent().find(".slider-container").show();
            return;
          }
        }

        var data = comment.val();
        var session = comment.attr("name");

        {% if not preview %}
        $.ajax({
          type: "POST",
          dataType: "json",
          url: "/session/comment/"+session,
          data: {comment: data},
          success: function(ret){
              //console.log("RET: " + ret);
          }
         });
         {% endif %}
    }

    var next_comment = $('#comment-'+newid);
    if(next_comment.attr("name")!= undefined){
        var par = next_comment.parent().parent();
        var link = par.find(".nextbutton");
        if(link.text() != "Next"){
            link.text("Next");
            last = true;
        }
    }

    $('#'+newid).show();
    $('#'+id).hide();
    $('#'+id).addClass("hidden");
    $('#'+newid).removeClass("hidden");

    //if(comment.attr("name")!= undefined){
    //  $('.nextbutton').show();
    //}
    //if(!prev){
    //  $('.nextbutton').hide();
    //}else{
    //  $('.nextbutton').show();
    //}
  }
  </script>
{% endblock %}

{% block content %}

{% for id, screen in screens.iteritems() %}
{% if screen['show'] %}
<div id="screen-{{id}}" class="screen">
  {#<script>start_show = true;</script> #}
{%else%}
<div id="screen-{{id}}" class="screen hidden" style="display:none">
  {# <script>if(!start_show){done_list.push("screen-{{id}}");}</script> #}
{%endif%}
    {% if screen['first'] == False %}
     <a href="javascript:showscreen('screen-{{id}}', 'screen-{{id-1}}', true)">Previous</a>
    {% else %}
     <script>done_list.push("screen-{{id}}");</script>
    {%endif%}

    {% if screen['last'] == False %}
    <a class="nextbutton{%if panel['end_muestra']%}{%endif%}", false 
        href="javascript:showscreen('screen-{{id}}', 'screen-{{id+1}}', false)">Next</a>
    {%endif%}
    {% if screen['last'] == True %}
      {% if not preview %}
      <a class="nextbutton end_session{%if panel['end_muestra']%} end_muestra{%endif%}" 
          href="/session/usuario/close/{{panel.id}}/{{screen['session'].id_evaluador}}/{{screen['session'].session_id}}">End Session</a>
      {% else %}
      <a class="nextbutton end_session" href="#">End Session</a>
      {% endif %}
    {%endif%}
    <br />

    <h1>{{screen['session']['vasito']}}</h1>
    <h2 class="atributo-name">{{screen['atributo']['nombre']}}</h2>
    <div class="slider-container">
    <h2 class="desc_title">{{screen['descriptor']}}</h2>

    <div style="float:left"><h3>{{screen["ancla_left"]}}</h3></div>
    <div style="float:right"><h3>{{screen["ancla_rigth"]}}</h3></div>
    <div style="clear:both"></div>

    <select class="slider"
        id="{{screen['id']}}"
        name="{{screen['id']}}">
        {% for opt in screen['values'] %}
        <option value="{{ opt }}" {%if opt == screen['selected'] %} selected="selected"{%endif%}>{{ opt }}</option>
        {% endfor %}
    </select>

    </div>
    <br />
    {% if screen['end_muestra'] == True and panel.tipo == "muestra" %}
        <div id="comments" style="display:none">
        <h1>Any comments on the sample?</h1>
        <textarea id="comment-screen-{{id}}" 
            name="{{panel.id}}/{{screen['session'].id_evaluador}}/{{screen['session'].session_id}}/{{screen['session'].muestra}}"></textarea>
        </div>
    {% endif %}

</div>
{% endfor %}

</div>
{% endblock %}