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

{{block of scripts}}
<! -- source of the slider: https://gitlab.com/gr0ssmann/otree_slider/-/blob/main/mgslider.js-->
<! -- Copyright (C) 2022 Max R. P. Grossmann-->
<script>
var mgsliders = Array();

mgsliders.lookup = function (which) {
    for (var j = 0; j < mgsliders.length; j++) {
        if (mgsliders[j].field == which) {
            return mgsliders[j].obj;
        }
    }

    return undefined;
};

function mgslider(field, min, max, step) {
    this.field = field;
    this.min = parseFloat(min);
    this.max = parseFloat(max);
    this.step = parseFloat(step);
    this.digits = this.suggest_digits(step);

    this.prefix = "mgslider_yF5sTZLy";
    this.yourvalue = "Beneficiary 1" + " receives:";
    this.yourvalue2 = "Beneficiary 2 receives: "

    mgsliders.push({field: field, obj: this});
}

mgslider.prototype.fzero = function (s) {
    for (var c = s.length-1; c >= 0; c--) {
        if (s[c] != "0") {
            return c;
        }
    }

    return 0;
};

mgslider.prototype.suggest_digits = function (x) {
    x = x.toFixed(10);
    return this.fzero(x) - x.search(/\./);
};

mgslider.prototype.f2s = function (val, detect) {
    if (detect) {
        return val.toFixed(this.suggest_digits(val)).replace("-", "&ndash;");
    }
    return val.toFixed(this.digits).replace("-", "&ndash;");
};

mgslider.prototype.id = function (id_) {
    if (id_ === undefined) {
        id_ = "";
    }

    return this.prefix + "_" + this.field + "_" + id_;
};

mgslider.prototype.markup = function () {
    return "\
        <table id='" + this.id("wrapper") + "' class='mgslider-wrapper' border='0'>\
            <tr>\
                \
                <td width='80%'>\
                    <div id='" + this.id("before") + "' class='mgslider-before' onclick='mgsliders.lookup(\"" + this.field + "\").reveal(event)'></div>\
                    <input type='range' id='" + this.id() + "' min='" + this.min + "' max='" + this.max + "' step='" + this.step + "' value='' class='mgslider form-range' oninput='mgsliders.lookup(\"" + this.field + "\").change()' onchange='mgsliders.lookup(\"" + this.field + "\").change()'>\
                </td>\
                <td class='mgslider-limit'> Beneficiary 2 <img class='positioning1' src=\"\"></td>\
            </tr>\
            <tr class='mgslider-feedback'>\
                  <td id='" + this.id("show") + "' class='mgslider-show' colspan='3'><i>" + this.yourvalue + "</i> CZK + <img class='positioning1' src=\"\"> <b><span id='" + this.id("cur") + "' class='mgslider-value'></span></b></td>\
            </tr>\
           \
                  <td id='" + this.id("show2") + "' class='mgslider-show2' colspan='3'><i>" + this.yourvalue2 + "</i> CZK <b><span id='" + this.id("cur2") + "' class='mgslider-value'></span></b></td>\
            </tr>\
            \
        </table>\
        \
        <input type='hidden' id='" + this.id("input") + "' name='" + this.field + "' value='' />";
};

mgslider.prototype.hide = function () {
    document.getElementById(this.id()).style.display = "none";
    document.getElementById(this.id("show")).style.visibility = "hidden";
    document.getElementById(this.id("show2")).style.visibility = "hidden";
    document.getElementById(this.id("show")).style.textAlign = "center";
    document.getElementById(this.id("show2")).style.textAlign = "center";
    document.getElementById(this.id("before")).style.display = "block";
    document.getElementById("bt2").style.display = "hidden"
};

mgslider.prototype.print = function (el) {
    el.innerHTML += this.markup();
    this.hide();
};

mgslider.prototype.value = function () {
    return parseFloat(document.getElementById(this.id()).value);
};

mgslider.prototype.change = function () {
    document.getElementById(this.id("cur")).innerHTML = this.f2s(this.value(), false);
    document.getElementById(this.id("cur2")).innerHTML = 100 - this.f2s(this.value(), false);
    document.getElementById(this.id("input")).value = this.value();
    x = this.value()
};

mgslider.prototype.reveal = function (event) {
    var now;

    if (event !== undefined && typeof event.offsetX !== undefined) {
        var max = parseInt(getComputedStyle(document.getElementById(this.id("before"))).width.replace("px", ""));
        var cur = event.offsetX;


        now = (cur/max)*(this.max-this.min) + this.min;
    }
    else {
        now = this.min + Math.random()*(this.max - this.min);
    }

    now = Math.round(now/this.step)*this.step;

    document.getElementById(this.id()).style.display = "block";
    document.getElementById(this.id("before")).style.display = "none";
    document.getElementById(this.id("show")).style.visibility = "visible";
    document.getElementById(this.id("show2")).style.visibility = "visible";
    document.getElementById("bt2").style.display = "visible"

    document.getElementById(this.id()).value = now;
    this.change();
};

$("button").on("click",function (){
            liveSend({'t':'final','v': x});
            this.blur();

        });
function liveRecv(data) {
        let t = data.t
        if (t === 'submit') {
            $('#form')[0].submit();

        }}


</script>
{{endblock}}
{% block of styles %}
<style>
.text {
    font-family: Serif;
    font-style: Normal;
    font-size: large;
    line-height: 1.7;
    text-align: justify;

}
.title {
    font-size: xx-large;
    font-weight: bold;
    font-family: Serif;
}
.text_b {
    font-family: Serif;
    font-style: Normal;
    font-size: large;
    line-height: 1.7;
    text-align: justify;
    font-weight: bold;
}

.positioningava{
    width: 5%;
    position: absolute;
    top: 0px;
    left: 0px;
}
.positioningava1{
    width: 10%;
    position: relative;



}
#slider{
        width: 70%;
        height: 70px;
        outline: none;
        border-radius: 3px;
}
.positioning1{
    float: left; width: 100%;



}
.bt2{}
</style>
{% endblock %}

{{ block content }}


    <style>
        .mgslider-wrapper {
            border-spacing: 10px;
        }
        .mgslider-limit {
            width: 10%;
            min-width: 75px;
            height: 40px;
            margin: 100px;
            text-align: center;
            background: #eee;
            border: 1px solid #888;
        }
        .mgslider-limit, .mgslider-value {
            font-variant-numeric: tabular-nums;
        }
        .mgslider-before {
            height: 16px;
            width: 100%;
            background: #1e5bff;
        }
    </style>
<br>



<div class="title">
   Decision 1
</div>
<br>

<div class="text">Please select how to distribute CZK 100 between Beneficiary 1 and Beneficiary 2 by clicking anywhere on the slider. Note that both beneficiaries are actual participants in this session and your decision will contribute toward their earnings from this study.
Your decision will be recorded only after you click next.
</div>

    <div id="sliders_here"></div>
<div id="bt2">
<button type="button">Next </button>
    </div>
    <script>
        $(document).ready(function (event) {
            let slider = new mgslider("price", 0, 100,1);
            slider.print(document.getElementById("sliders_here"));

        });



    </script>



{{ endblock }}