{{ block title }}Title{{ endblock }}
{{ block content }}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<style>
.highcharts-figure, .highcharts-data-table table {
    min-width: 360px; 
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}
    .con {
        display: flex;
    }
</style>
<style>
#init{
  width: 279px;
  height: 20px;
  margin: 0;
  transform-origin: 75px 75px;
  transform: rotate(-90deg);
  position: absolute;
  z-index: 21;
}
</style>
<p id="paytext">
    The payoff is 
</p>
<div style="position:relative；z-index: 0">
<img id="grepbar" src="{% static "stickman_walk/grepbarr.JPG" %}"style="position: absolute; z-index: 20"/>
<img id="emptybar" src="{% static "stickman_walk/emptybar.JPG" %}"style="position: absolute; z-index: 22"/>
<input id="init" type="range" name="Action" min="0" max="5" step="0.1">
<figure class="highcharts-figure">
    <div id="container"></div>
</figure>
</div>
<script>
    document.getElementById("init").style.top = 337 + "px";
    document.getElementById("init").addEventListener("input", function () {
        document.getElementById("paytext").textContent = "The payoff is " + (5 - document.getElementById("init").value + (0.5 * js_vars.tot));
        document.getElementById("grepbar").style.top =  (470 - (2.7 * (document.getElementById("init").value * 20))) + "px";
    })
</script>
<script>
    document.getElementById("grepbar").style.top = 335 + "px";
    document.getElementById("grepbar").style.left = 365 + "px";
    document.getElementById("emptybar").style.left = 400 + "px";
    document.getElementById("emptybar").style.top = 525 + "px";
    all_data = [];
    var p1_data = js_vars.p1_act.split(",").map(Number);
    var p2_data = js_vars.p2_act.split(",").map(Number);
    var p3_data = js_vars.p3_act.split(",").map(Number);
    var p4_data = js_vars.p4_act.split(",").map(Number);
    
    for (var i = 0; i < js_vars.sub_count; i++) {
        tmp_data1 = [];
        tmp_data2 = [];
        tmp_data3 = [];
        tmp_data4 = [];
        for (var j = 0; j < i; j++) {
            tmp_data1[j] = null;
            tmp_data2[j] = null;
            tmp_data3[j] = null;
            tmp_data4[j] = null;
        }
        tmp_data1[i] = p1_data[i]
        tmp_data1[i+1] = p1_data[i]
        tmp_data2[i] = p2_data[i]
        tmp_data2[i+1] = p2_data[i]
        tmp_data3[i] = p3_data[i]
        tmp_data3[i+1] = p3_data[i]
        tmp_data4[i] = p4_data[i]
        tmp_data4[i+1] = p4_data[i]
        all_data[(i * 4) + 0] = {data : tmp_data1}
        all_data[(i * 4) + 1] = {data : tmp_data2}
        all_data[(i * 4) + 2] = {data : tmp_data3}
        all_data[(i * 4) + 3] = {data : tmp_data4}
    }
    
    Highcharts.setOptions({
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00']
});
    Highcharts.chart('container', {

    title: {
        text: 'Your action is in '
    },
    
    accessibility: {
        enabled: false
    },
        
    xAxis: {
        accessibility: {
            rangeDescription: 'Range: 0 to ' + String(js_vars.max_time)
        },
        max: 60
    },
    
    yAxis: {
        floor: 0,
        ceiling: 5,
        min: 0,
        max: 5
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false,
                enabled: false
            },
            pointStart: 0,
            enableMouseTracking: false
        }
    },

    series: all_data,

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            }
        }]
    }

});
</script>

        <p>
            <button class="otree-btn-next btn btn-primary">Next</button>
        </p>

{{ endblock }}