{% extends "global/Page.html" %}
{% load otree %}
{% block title %}
Bonus Lottery <hr> {% endblock %}

{% block content %}
<h3> Screen 1</h3>

    <div id="lottery_div" style="text-align: center; width: 100%;">
    <table class="table table-bordered" align="center" style="border-spacing: 0; width: 50%;">
<tr>


    <td style="vertical-align: middle; text-align: center"  >
        With probability <b>30% : </b> <b style="color: green"> Get</b> <b> $  24</b> <br>
                   With probability <b>70% : </b> <b style="color: green"> Get</b> <b>  $ 2</b>
    </td>

</tr></table>
    </div>


 <p id="valuation_div" style="width: 100%;">
How certain are you about how much this lottery is worth to you?
     <div id="qn_pre">

    <b>Level of certainty</b>: <output id="text_conf_intro"> </output>
    <b style="color: red">
        <output id="text_conf_range"><text>Use the slider! </text></output></b>
      <table class="w3-table w3-white" style="border-spacing: 0; width: 100%">
        <colgroup>
            <!--<col width="25%">-->
            <col width="100%">
        </colgroup>
          <tr>
              <td style="text-align: center;">
                  <b><output id="text_conf"><text style="color: black"> </text> </output></b>
              </td>
          </tr>
<tr>
<td> <input type="range" class="myclassRed" name="load_confidence" id="load_confidence" value="20" style="width: 100%" min="0" max="20" step="1";/> </td>
</tr>
          <tr><td>
          <div class="sliderticks">
      <p>    </p>
        <p> </p>
      </td> </tr>
      <tr>
          <td style="padding: 0" >
              <div style="display: inline; float: left" ><b>very uncertain</b></div> <div style="display: inline; float: right"><b>completely certain</b></div>
          </td></tr>

          <br></table><br>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<br><br>
   <div style="text-align: right;">
       <button type="submit" class="btn btn-primary" id="confirm" disabled >Next</button>
   </div>





        {{form.errors}}

{% endblock %}


{% block styles %}
<style>
  .myclass::-webkit-slider-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 36px !important;
        width: 4px !important;
        border-radius: 3px !important;
        background: #ffffff !important;
        cursor: pointer !important !important;
        -webkit-appearance: none !important;
        margin-top: -14px !important;
    }

    input[type=range] {
        -webkit-appearance: none;
        margin: 0 0;
        width: 100%;
    }

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

    .myclassBlue::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        animate: 0;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: white;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }
       .myclassRed::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        animate: 0;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: gray;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

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

.sliderticks {
  display: flex;
  justify-content: space-between;
  padding: 0px 0 0px 0px;
}

.sliderticks p {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 2px;
  background: black ;
  height: 12px;
  line-height: 45px;
  margin: 0 0 0 0;
}

</style>

{% endblock %}


{% block scripts %}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script>

g_pdf = function() {
    var bar_values = [];
    for (var j = -20; j <= 20; ++j) {
             {#bar_values.push(50  / (Math.sqrt(2*Math.PI* (standardDeviation * standardDeviation)))*Math.pow(Math.E, -Math.pow(j - mean, 2) / (2 * (standardDeviation * standardDeviation))));#}
             bar_values.push({y: 0, color: 'lightgray'});
     }
     return bar_values;
};
cats = function() {
    var c = [];
    for (var q = -20; q <= 20; ++q)  {
        if (q === 0) {
                 c.push("V in $")
        }
        else {
            c.push("");
        }
    }
  return c;
};

var init_categories = cats();
var init_values = g_pdf()

</script>
<script>myChart = Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: ''
  },
    tooltip: { enabled: false },
  subtitle: {
    text: ''
  },
  xAxis: {
      categories: init_categories,
      title: {
          text: 'Your valuation V',
           style: {
        color: 'black',
        fontSize:'15px'
    },
          tickInterval: 1,

      },
      labels: {
      formatter: function () {
        return this.value.replace(/ /g, '<br />');
    },
          step: 1,
        style: {
        color: 'red',
        fontSize:'17px',
    }
}

  },
  yAxis: {
      min: 0,
      max: 100,
      visible: true,
      tickInterval: 10,
      title: {
          text: 'Number of points',
          style: {
              color: 'black',
              fontSize: '15px'
          }
      },
      labels: {
          style: {
              color: 'black',
              fontSize: '15px'
          }
      },
  },
  plotOptions: {
    column: {
      pointPadding: 0,
      groupPadding: 0,
      shadow: false
    }
  },
  series: [{
    name: '',
    data: init_values,
    showInLegend: false
    }],
     credits: {
       enabled: false
            },
      exporting: {enabled: false}
});</script>
{#<script src="{% static 'global/risk_uncertainty_list_functions.js' %}"></script>#}
<script>
    get_category_names = function(c) {
        conf = parseInt(c);
        var c_inv = 20 - conf;
         var cat_names = [];
         for (var j = -20; j <= 20; ++j) {
             if (c_inv === 0 || c_inv === 20) {
                 if (j === 0) {
                     cat_names.push("V in $ ")
                 }
                 else {
                   cat_names.push("")
                 }
             }
             else {
             if (j === -c_inv) {
                 cat_names.push("V " + "- " + (-j * 0.5).toFixed(1).toString());
             }
             else if (j === 0) {
                 cat_names.push("V in $")
             }
             else if (j === c_inv) {
                  cat_names.push("V " + "+ " + (j * 0.5).toFixed(1).toString());
                {# if (j < 0) {#}
                {#     cat_names.push((-j * 0.5).toFixed(1).toString());#}
                {# }#}
                {# else if (j === 0) {#}
                {#     cat_names.push("$x");#}
                {# }#}
                {#else  {#}
                {#     cat_names.push((j * 0.5).toFixed(1).toString());#}
                {# }#}
             }
             else {
                 cat_names.push("");
             }
         }
             }
         return cat_names;
        };
    calc_bar_values = function(conf) {
        var bar_values = [];
        var c_inv = 20 - conf;
        var f = 1 - (conf * 0.03);
        {#var x = c_inv * 5 / 2;#}
        var x = (30 * Math.log(c_inv + 1)) / 2;
        if (conf === 0) {
            var uni = 100 / 41;
        for (var j = -20; j <= 20; ++j) {
            if (j !== 0) {
            bar_values.push({y: uni, color: 'gray'})
            }
            else {
            bar_values.push({y: uni, color: 'black'})
            }
        }
        } else {
            for (var j = -20; j <= 20; ++j) {
                if (j >= -c_inv && j <= c_inv) {
                    if (j !== 0) {
                        var j_abs = Math.abs(j);
                        var m = x * Math.pow(f, j_abs - 1) * (1 - f) / (1 - Math.pow(f, c_inv));
                        bar_values.push({y: m, color: 'gray'})
                    } else if (j === 0) {
                        var m = 100 - x * 2;
                        bar_values.push({y: m, color: 'black'})
                    }
                } else {
                    bar_values.push({y: 0, color: 'gray'})
                }
            }
        }

         return bar_values;
    };


     updateBars = function() {
         {#valuation = parseFloat(document.getElementById("own_valuation").value);#}
         slid_value = parseInt(document.getElementById("load_confidence").value); // change ("form")[1] if I want to have the slider without the guess on the same page
         myChart.series[0].setData(calc_bar_values(slid_value));
       myChart.xAxis[0].setCategories(get_category_names(slid_value));
     };

     $("#load_confidence").on("mouseup keyup", updateBars);
</script>
<script>

function displayRange() {
   {#var v = parseFloat(document.getElementById("own_valuation").value);#}
   var c = parseFloat(document.getElementById("load_confidence").value);
   range = ((20-c)*0.5).toFixed(2).toString();
   if (c==0) {
       document.getElementById("text_conf_intro").value = "I really don’t know what my valuation of this lottery is.";
       document.getElementById("text_conf_range").value = "";
   }
   else if (c === 20) {
       document.getElementById("text_conf_intro").value = "I know exactly what my valuation of this lottery is.";
       document.getElementById("text_conf_range").value = "";
   }
   else {
         document.getElementById("text_conf_intro").value = "I am certain that I can pin down my valuation of this lottery to a range of ";
       document.getElementById("text_conf_range").value = "+/- $" + range;
   }
}


</script>
<script>

$(document).ready(function () {


$('#load_confidence').on('mouseup keyup', function () {
    $('#load_confidence').addClass('myclass');
    $('#confirm').prop('disabled', false);
    displayRange();
});


    });
</script>




{% endblock %}