{% load otree %}


<h6 class="my-3">For example, if each of you get {{ Constants.endowment|c }} and you contribute:</h6>

<div id="slider_you" class='sliders'>
    <div id="custom-handle" class="ui-slider-handle"></div>
</div>
<h6 class="my-3">... and average contribution of other {{ Constants.num_others_per_group }} participants:</h6>
<div id="slider_others" class='sliders'>
    <div id="custom-handle" class="ui-slider-handle"></div>
</div>
<h4 class="my-3">Then:</h4>
<table class="table table-striped ">
    <tr>
        <td>
            The others will earn an average of:
        </td>
        <th id='others_share'></th>
    </tr>
    <tr>
        <td>You will earn:</td>
        <th id='yourearnings'></th>
    </tr>
</table>




{% block scripts %}
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script type='text/javascript'>//<![CDATA[
    $(window).load(function () {
        var efficiency_factor = {{Constants.efficiency_factor}},
            group_size = {{Constants.players_per_group}},
            endowment ={{Constants.endowment}},
            $others_slider = $('#slider_others'),
            $you_slider = $('#slider_you'),
            default_value = {{ Constants.endowment }}/2;

        var changetab = function (start = false, who, curvalue = 0) {
            var val_others = default_value;
            var val_you = default_value;
            if (start == false) {
                if (who == 'slider_you') {
                    var val_others = $('#slider_others').slider("option", "value");
                    var val_you = curvalue;
                } else {
                    var val_others = curvalue;
                    var val_you = $('#slider_you').slider("option", "value");
                }
                ;
            }
            ;

            var total = val_others * (group_size - 1) + val_you;
            var indshare = total * efficiency_factor / group_size;
            var others_payoff = endowment - val_others + indshare;
            $('th#others_share').text(Math.round(others_payoff));
            $('th#yourearnings').text(Math.round(endowment - val_you + indshare));

        };
        $(".sliders").slider(
            {
                value: default_value,
                min: 0,
                max: endowment,
                step: 1,
                create: function () {
                    var handle = $(this).children("#custom-handle");
                    handle.text($(this).slider("value"));
                    curname = $(this).attr('id');
                    changetab(true, curname, default_value);
                },
                slide: function (event, ui) {
                    var handle = $(this).children("#custom-handle");
                    curname = $(this).attr('id');
                    handle.text(ui.value);
                    changetab(false, curname, ui.value);
                }
            }
        );


    });

    </script>
{% endblock %}
{% block styles %}

    <link rel="stylesheet" type="text/css"
          href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
    <style>

        #custom-handle {
            width: 3em;
            height: 1.6em;
            top: 50%;
            margin-top: -.8em;
            text-align: center;
            line-height: 1.6em;
        }
    </style>

{% endblock %}