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

{% block styles %}

<style>

input[type=range] {
    width: 300px;
    height: 10px;
    -webkit-appearance: none;
}

input[type=range]:focus {
    outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 10px;
    border: 1px solid #DCDCDC;
    border-radius: 5px;
    background: #DCDCDC;
}

input[type=range]::-webkit-slider-thumb {
    width: 0px;
    height: 0px;
    border: 0px;
    border-radius: 0px;
    -webkit-appearance: none;
}

.myclass::-webkit-slider-thumb {
    width: 10px !important;
    height: 30px !important;
    border: 1px solid black;
    border-radius: 5px !important;
    background: #306EFF !important;
    box-shadow: 1px 1px 1px black;
    cursor: pointer !important !important;
    margin-top: -15px !important;
    -webkit-appearance: none !important;
}

.bordered_small {
    width: 50px;
    height: 25px;
    border: 1px solid #DCDCDC;
    border-radius: 5px;
    display: inline-block;
}

.bordered_large {
    width: 480px;
    height: 298px;
    border: 1px solid black;
    border-radius: 5px;
    padding: 25px 0px 25px 0px;
}

</style>

{% endblock %}

{% block title %}

Period {{ player.round_number }} of {{ Constants.num_rounds }}

{% endblock %}

{% block content %}

<p align="center" style="height: 50px; border: 1px solid black; border-radius: 5px; line-height: 50px">
Time: <b> <label id="minutes">--</label>:<label id="seconds">--</label> </b>
</p>

<br />

<p align="center">
{% if player.perceived_similarity == 1 %} <img src="{% static 'GMTA1/IOS_A.jpg' %}" height="75"/> {% endif %}
{% if player.perceived_similarity == 2 %} <img src="{% static 'GMTA1/IOS_B.jpg' %}" height="75"/> {% endif %}
{% if player.perceived_similarity == 3 %} <img src="{% static 'GMTA1/IOS_C.jpg' %}" height="75"/> {% endif %}
{% if player.perceived_similarity == 4 %} <img src="{% static 'GMTA1/IOS_D.jpg' %}" height="75"/> {% endif %}
{% if player.perceived_similarity == 5 %} <img src="{% static 'GMTA1/IOS_E.jpg' %}" height="75"/> {% endif %}
{% if player.perceived_similarity == 6 %} <img src="{% static 'GMTA1/IOS_F.jpg' %}" height="75"/> {% endif %}
{% if player.perceived_similarity == 7 %} <img src="{% static 'GMTA1/IOS_G.jpg' %}" height="75"/> {% endif %}
</p>

<br />

<center>
<div class="bordered_large">
    <center>
    <b> {{ player.task_you }} </b> <br />
    <br />
        {% if player.position == 1 %}
        <img src="{% static player.label_left %}" width="150" height="150" style="border: 1px solid black; border-radius: 5px" /> <span style="display: inline-block; width: 50px;"> </span>
        {% endif %}
        {% if player.position == 2 %}
        <img src="{% static player.label_right %}" width="150" height="150" style="border: 1px solid black; border-radius: 5px" /> <span style="display: inline-block; width: 50px;"> </span>
        {% endif %}
        {% if player.position == 1 %}
        <img src="{% static player.label_right %}" width="150" height="150" style="border: 1px solid black; border-radius: 5px" /> <br />
        {% endif %}
        {% if player.position == 2 %}
        <img src="{% static player.label_left %}" width="150" height="150" style="border: 1px solid black; border-radius: 5px" /> <br />
        {% endif %}
    <br />
    <b> {{ player.task_other }} </b>
    </center>
</div>
</center>

<br />
<br />

<p align="center">
What is your best estimate of <i>ESTIMATE-other</i>'s choice?
</p>

<div id="formfields" style="display: none;">
{% formfield player.submitted_belief %}
</div>

<div class="value" style="color: transparent"> - </div>

<center>
Left Label &emsp;
<input type="range" min="0" max="100" step="1" value="0" id="id_submitted_belief">
&emsp; Right Label
</center>

<center>
<div class="bordered_small"> <span class="left" id="left"> </span>% </div>
&emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp;
<div class="bordered_small"> <span class="right" id="right"> </span>% </div>
</center>

<br />
<br />

<input type="hidden" name="new_time_belief" value="0"/>
<input type="hidden" name="new_time_belief_rounded" value="0"/>

<center> <button class="btn btn-primary btn-large" onclick="myFunction()"> Next </button> </center>

{% endblock %}

{% block scripts %}

<script>

$(document).ready(function () {
    $('input[type=range]').on('input change', function () {
        $('input[type=range]').addClass('myclass');
    });
});

var elem = document.querySelector('input[type="range"]');

var rangeValue = function(){
    var newValue = elem.value;
    document.querySelector('.value').innerHTML = newValue;
    var left = 100 - newValue;
    document.querySelector("#left").innerHTML = left;
    var right = newValue;
    document.querySelector("#right").innerHTML = right;
    document.getElementsByName("submitted_belief")[0].value = right;
}

elem.addEventListener("input", rangeValue);

startTime = new Date;

var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
if ({{ player.submitted_decision|json }} == 2) {
    var totalSeconds = 0;
}
if ({{ player.submitted_decision|json }} == 1) {
    var totalSeconds = {{ player.new_time_choice_rounded|json }};
}
setInterval(setTime, 1000);

function setTime() {
    ++totalSeconds;
    secondsLabel.innerHTML = pad(totalSeconds%60);
    minutesLabel.innerHTML = pad(parseInt(totalSeconds/60));
}

function pad(val) {
    var valString = val + "";
    if (valString.length < 2) {
        return "0" + valString;
    }
    else {
        return valString;
    }
}

function myFunction() {
    var local_time = new Date - startTime;
    document.getElementsByName("new_time_belief")[0].value = parseFloat(local_time/1000);
    document.getElementsByName("new_time_belief_rounded")[0].value = parseInt(Math.round(local_time/1000));
}

</script>

{% endblock %}