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



{% block styles %}


<style>
        .button_help{
  background-color: whitesmoke;
  border: none;
  color: blue;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
    border-radius: 8px;
}

button:hover {background-color: lightblue}



</style>

{% endblock %}

{% block title %}
Belief MPL
{% endblock %}

{% block content %}


<table>
    {% for ve, ide, vp, idp, st, cr, idr in zip_table %}
    <tr  {{st}}  id={{idr}} class={{cr}}  >
        <td>
              <input type="checkbox" id={{ide}} name="skewed0" value={{ve}} onclick="f2(this.value, this.id); toggleText(this.value, this.id)"  >
              <label for={{ide}}>get X if event Y </label><br>
         </td>
        <td>
            <input type="checkbox" id={{idp}} name="skewed1" value={{vp}} onclick="f2(this.value, this.id); toggleText(this.value, this.id)">
              <label for={{idp}}>get X with {{vp}}% </label><br>
        </td>
        <td>{{ve}}...{{vp}}</td>
        <td>{{ide}} {{idp}}</td>
        <td>{{cr}} {{idr}}</td>



    </tr>

    {% endfor %}

</table>

<input type="hidden" id="belief" name="belief" />
     <a style='display: none' id="belief_a"> </a>



<div id="display" >

</div>

<div id="display2" style='display: none'>
hello hello
</div>


<script>
    // var E1 = document.getElementById("E1").checked;
        function toggleText(val, id_field) {
        if (id_field.substring(0, 1)=="P") {
            value = val
        } else {
            value = val -1
        }
        if (value == 0 || value == 10 || value == 20 || value == 30 || value == 40 || value == 50 || value == 60
            || value == 70 || value == 80 || value == 90 || value == 100 ){
            tt = "I" + value.toString()
            var all_classes = ["I0"];
            for (let i = 1; i < 10; i++){
                all_classes.push("I" + i.toString() + "0");
            }
            tttt = [];
            for (let i = 0; i < all_classes.length; i++) {
                tttt.push(all_classes[i])

                if (all_classes[i]===tt) {
                    ERS = document.getElementsByClassName(all_classes[i])
                    for (let j = 0; j < ERS.length; j++) {
                        if (ERS[j].style.display === "none") {
                            ERS[j].style.display = "table";
                        }
                        // else {
                        //     ERS[j].style.display = "none";
                        // }
                    }
                }
                if (all_classes[i]!==tt) {
                         ERS2 = document.getElementsByClassName(all_classes[i])

                    for (let k = 0; k < ERS2.length; k++) {
                            ERS2[k].style.display = "none";
                    }
                }


            }



        }
               // document.getElementById('display').innerHTML = tttt;

}



    function f2(switchp, id_field) {
        switchp = Number(switchp)
        if (id_field.substring(0, 1)=="P") {
            value = switchp
            proba = value - 0.5
        } else {
            value = switchp -1
            proba = value + 0.5
        }
        // the following 2 lines are to record the value of belief as variables
        document.getElementById("belief_a").innerHTML = proba;
        document.getElementById("belief").value = proba;
        if (value == 0 || value == 10 || value == 20 || value == 30 || value == 40 || value == 50 || value == 60
            || value == 70 || value == 80 || value == 90 || value == 100 ) {
            var PS = [];
            var ES = [];
            for (let i = 0; i < 101; i++) {
                PS.push("P" + i.toString());
                ES.push("E" + i.toString());
            }
            s2 = [];
            for (let i = 0; i < PS.length; i++) {

                 if (i < value) {
                    document.getElementById(PS[i]).checked = false
                    document.getElementById(ES[i]).checked = true
                }
                if (i == value) {
                    if (id_field.substring(0, 1)=="P") {
                        document.getElementById(PS[i]).checked = true
                        document.getElementById(ES[i]).checked = false
                    } else {
                        document.getElementById(PS[i]).checked = false
                        document.getElementById(ES[i]).checked = true
                    }
                }

                if ( value +9 < i){
                    document.getElementById(PS[i]).checked = true
                    document.getElementById(ES[i]).checked = false

                }
                if (i > value && i <= value + 9) {
                        document.getElementById(PS[i]).checked = false
                        document.getElementById(ES[i]).checked = false

                    }
            }
        } else {
            var PS = [];
            var ES = [];
            for (let i = 0; i < 101; i++) {
                PS.push("P" + i.toString());
                ES.push("E" + i.toString());
            }
            for (let i = 0; i < PS.length; i++) {
                if (i < value) {
                    document.getElementById(PS[i]).checked = false
                    document.getElementById(ES[i]).checked = true
                }
                if (i == value) {
                    if (id_field.substring(0, 1)=="P") {
                        document.getElementById(PS[i]).checked = true
                        document.getElementById(ES[i]).checked = false
                    } else {
                        document.getElementById(PS[i]).checked = false
                        document.getElementById(ES[i]).checked = true
                    }
                }
                if (i > value) {
                    document.getElementById(PS[i]).checked = true
                    document.getElementById(ES[i]).checked = false
                }
            }

        }
       document.getElementById('display').innerHTML = s2;
    }

    //
    // function f1() {
    //     var array = [document.getElementById("try11").value, document.getElementById("try22").value];
    //     array.push(document.getElementById("try33").value);
    //    document.getElementById('display').innerHTML = array;
    //
    // }


    function myFunction() {
    var try11 =  document.getElementById("try11").checked;
    var skewed11 = document.getElementById("skewed1");
       document.getElementById('display').innerHTML = skewed11;
       // if (try11==true) {
       //     var checked2 = "checked"
       // } else{
       //     var checked2 = ""
       // }
       if (try11==true) {
           document.getElementById("try22").checked = true
           document.getElementById("try33").checked = true
       }
}

    function myFunction2() {
    var try22 =  document.getElementById("try22").checked;
       // if (try11==true) {
       //     var checked2 = "checked"
       // } else{
       //     var checked2 = ""
       // }
       if (try22==true) {
           document.getElementById("try11").checked = false
           document.getElementById("try33").checked = true
       } else {
           document.getElementById("try11").checked = false
       }
}

    function myFunction3() {
    var try33 =  document.getElementById("try33").checked;
       // if (try11==true) {
       //     var checked2 = "checked"
       // } else{
       //     var checked2 = ""
       // }
       if (try33==true) {
           document.getElementById("try11").checked = false
           document.getElementById("try22").checked = false
       }   else {
           document.getElementById("try11").checked = false
           document.getElementById("try22").checked = false
       }

}
    // console.log(try11)
</script>

    {% next_button %}

{% endblock %}