{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Click on Smiley Faces
{% endblock %}

{% block content %}


 <button type="button" onclick="f1()">Whatch Video!</button>
 <p id="bla"></p>
 <div class="boxed">

    <table  align="center" class="table_2">
    
                                   
    
        {% for row in my_list %}
            <tr align="center">
              
                            
                {% for smile, image_id, val_id, var_name in row %}
                    <td>
                        {% if smile == 1 %}
                            
                            <img src="{% static "global/smile_new.png" %}" id={{image_id|safe}} width=60% height=60% />
                        {% else %} 
                            <img src="{% static "global/sad_new.png" %}" id={{image_id|safe}} width=60% height=60%/>
                        {% endif %} 
                    </td>
                {% endfor %}
                        
               
                        
            </tr> 
            
        
        
        {% endfor %}
    </table>
   
   <hr style="width:50%;">
   
   
    
 {% next_button %}
    
</div>


 

{% endblock %}


{% block scripts %}

    
    <script type="text/javascript">

         
        var t_list = {{ click_time|safe }};
        var m_list = {{ image_list|safe }};
        var t = t_list[0];
        var m = "image_"+m_list[0].toString();
        var c = 1;
        var zero_happen = 0
        
      
    
        function changeTimer(){ 
            t = t_list[1];
            if (m_list[1]>0){
                m = "image_"+m_list[1].toString();
                c = 1;
                }
            else if (m_list[1]==0){
                m = "image_"+m_list[1].toString();
                if (zero_happen==0){
                    c = 1;
                    zero_happen = 1
                    }
                
                else{
                    c = 0
                    zero_happen = 0
                    }
            
            }
            else{
                
                m = "image_"+(m_list[1]*(-1)).toString();
                c = 0;
            
                }
            t_list.splice(0, 1);
            m_list.splice(0, 1);

        } 
      
        function f1() { 
            
            if (t_list.length>=1){
                if (c == 1){
                    document.getElementById(m).style.width="100%"; 
                    document.getElementById(m).style.height="100%"; 
                    }
                else{
                    document.getElementById(m).style.width="60%"; 
                    document.getElementById(m).style.height="60%";
                    }
                changeTimer(); 
                setTimeout(f1, t);
                }
                 
            else{
                clearTimeout();
                }
    
        }
        


    </script> 
    
    
{% endblock %}



{% block styles %}
    <style>
 
        
        td {
          height:60px;
          width:60px
          
        }
        
        .table_2{
          border-collapse: separate;
          border-spacing: 2px 2px;
          width: 90%
          }
        
    </style>
{% endblock %}