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

{% block title %}
    Part 2
{% endblock %}

{% block content %}
    <div class="info_box">
        <div class="header">
            <p class="formatting_header">
                Information:
            </p>
        </div>
        <div class="content">
            <p class="formatting_content">
                In Part 2, we want to know your identification with Group A.
                On the scale below you can see two circles:
                One representing you and one representing Group A.
                You can change the distance between the two circles by moving the blue slider on the scale.
                Moving the slider to the left moves the circles further apart and signals that you identify very
                little with Group A.
                Moving the slider to the right moves the circles closer to each other and signals that
                    you identify very much with Group A.
                Please move the slider to a position in which the distance between the two circles most accurately
                    describes your identification with Group A.
                Please zoom out if the scale is only displayed partially.
            </p>
        </div>
    </div>
    <div class="task_box">
        <div style="width: 875px; margin: 50px auto 50px auto">
            <div style="position: relative; height: 100px">
                <div style="position: relative; margin: 50px 0px 25px 0px">
                    <div id ="self" class="self"></div>
                    <div id ="self_label" class="self_label" style="text-align:center">You</div>
                    <div id ="group" class="group"></div>
                    <div id ="group_label" class="group_label" style="text-align:center">Group A</div>
                </div>
                <div class="line"></div>
            </div>
            <div style="width: 100%; height: 50px; position: relative">
                <div style="width: 125px; top: 25px; left:0%; position:absolute";>Identify Weakly</div>
                <div style="width: 125px; top: 25px; left:100%; margin-left: -120px; position:absolute">Identify Strongly</div>
            </div>
            <div style="width: 100%; height: 50px; position: relative">
                <div class="start_point"></div>
                <input type="range" min="0" max="400" value="200" class="slider" id="slider">
            </div>
        </div>
    </div>

    <div class="button_box">
        <br>
        <span style="margin-right: 10px"> Click on the "Continue" button to continue with the study! </span>
        <input class="btn btn-primary" type="submit" value="Continue" onclick="transcribe()"/>
        <br><br>
    </div>

    <div style ="display:none;">
        <input type="hidden" name="identification" id="otree_identification" class="form-control">
        <input type="hidden" name="overlap" id="otree_overlap" class="form-control">
    </div>
{% endblock %}

{% block styles %}
    <style>
        .self{
            position: absolute;
            height: 50px;
            width: 50px;
            margin-top: 25px;
            left: 200px;
            border: solid black 2px;
            border-radius: 50%;
        }
        .group {
            position: absolute;
            height: 100px;
            width: 100px;
            left: 600px;
            margin-left: -25px;
            border: solid black 2px;
            border-radius: 50%;
        }
        .self_label {
            position: absolute;
            width: 100px;
            left: 200px;
            margin-left: -25px;
        }
        .group_label {
            position: absolute;
            width: 100px;
            margin-top: -25px;
            left: 600px;
            margin-left: -25px;
        }
        .line {
            position:absolute;
            height:2px;
            width:100%;
            top: 50px;
            background: #27001f;
        }
        .start_point {
            position: absolute;
            height: 30px;
            width: 30px;
            margin-left: -15px;
            margin-top: -1px;
            left: 50%;
            border: medium solid #d3d3d3;
            border-radius: 5px;
            background: #d3d3d3;
            z-index: -100;
        }
        .slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 10px;
            outline: none;
            border-radius: 5px;
            background: #d3d3d3;
        }
        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 25px;
            height: 25px;
            background: #1123af;
            cursor: pointer;
        }
        .slider::-moz-range-thumb {
            width: 25px;
            height: 25px;
            background: #1123af;
            cursor: pointer;
        }
    </style>
{% endblock %}

{% block scripts %}
    <script>
        var self = document.getElementById('self');
        var group = document.getElementById('group');

        var self_label = document.getElementById('self_label');
        var group_label = document.getElementById('group_label');

        var slider = document.getElementById("slider");

        var last_position = -100;
        var overlap = 0;
        var start_self = '0';
        var start_group = '800';

        function transcribe() {
            document.getElementById('otree_identification').value = last_position;
            document.getElementById('otree_overlap').value = overlap;
        }

        slider.oninput = function() {
            self.style.left = start_self + parseInt(this.value) + 'px';
            group.style.left = start_group - parseInt(this.value) + 'px';

            self_label.style.left = start_self + parseInt(this.value) + 'px';
            group_label.style.left = start_group - parseInt(this.value) + 'px';

            last_position = (this.value - 200)/200;

            d = 800 - 2*parseInt(this.value);
            r = 25;
            R = 50;

            if (d > r + R){
                overlap = 0;
            }
            else if (d <= R - r){
                overlap = 1;
            }
            else{
                overlap = (r*r*Math.acos((d*d + r*r - R*R)/(2*d*r)) + R*R*Math.acos((d*d + R*R - r*r)/(2*d*R)) - 0.5*
                    Math.sqrt((-d+r+R)*(d+r-R)*(d-r+R)*(d+r+R)))/(r*r*Math.PI);
            }
        }
    </script>
{% endblock %}