{% extends "global/Base.html" %}
{% load staticfiles %}
{% load otree_tags %}
{% block styles %}
    <style type="text/css">

      table#longtable {
          margin-left:auto;
          margin-right:auto;
          left: 0px;
          width: 540px;
          border-collapse: collapse;
      }



        button:disabled{
            background-color: #aaa;
        }

        .center {
            margin:auto;
        }
        .form-group{display:inline-block; margin-right:-5%;}
        #element2 {display:inline-block;}
        ul{  list-style-type: none;}
        .legend { list-style: vertical; }
        .legend li { float: top; margin-left: 10px; z-index:-1;}
        .value { list-style: none; }
        .value li {  display:inline;  padding: 25px; z-index:-1; top: -87px; left: 130px;position: relative;}
        .valueN { list-style: none; }
        .valueN li {  display:inline;  padding: 25px; z-index:-1; top: 5px; left: 88px;position: relative; }

		html, body {
			height: 100%;
		}
        table tr:not(:first-child) {
        border-top: 1px solid black;
    }
    table td{
        border-left: 2px solid black;
        height: 336px;
    }

    table tr:first-child th {
        border-top: 0;
    }

    table th {
        border: 2px solid black;
    }
    table tr:last-child td {
        border-bottom: 0;
    }
    table tr td:first-child,
    table tr th:first-child {
        border-left: 0;
    }
    table tr td:last-child,
    table tr th:last-child {
        border-right: 0;
    }
    </style>

{% endblock %}


{% block title %}{% endblock %}



{% block content %}

    <!-- The area with the chart and the button. -->
         <ul class="legend" id='l' style="text-align:center; position: relative; z-index: -1;  top: 10px;display: none;">
            <!-- <font size="3" > Both Assets: Average Return = 5%  <strong>(same average return) </strong><br></font>
             <font size="3" > Asset 1: Low Volatility <strong> (lower risk) </strong> <br></font>
            <font size="3"> Asset 2: High Volatility <strong> (higher risk) </strong> </font> -->
         </ul>
    <div id='canvas' style='position:relative;width:1044px;height:336px; margin-left: auto; margin-right:auto; margin-top: 20px; display: none;'>
        <!-- The area for the chart-->
        <ul class="value" id='v' style="position: relative; z-index: -1; left: 223px; top: 100px; visibility: hidden;">
            <font size="6"><li id="re1">  </li></font>
            <font size="6"><li id="re2">  </li></font>
        </ul>
        <div 	id='contr2'
                style='	width: 416px; height: 320px; left: -50px;
                        position: relative;z-index: -2; margin-left: auto; margin-right:auto;
                    '
        >
{#            <img id="des" height="330px" width="600px" src="{% static image_path %}"/>#}
        </div>
{#        <ul id="horiLine" style="position: absolute; z-index: -1; left: 130px; top: 182px;visibility: hidden;">#}
{#            <hr width="448" style="height:2px;border:none;color:#333;background-color:#333;">#}
{#        </ul>#}


    </div>
{#  <div class="container" style='position: relative; '>#}

    <table id='longtable' class="center" style='display: none;  position: relative;'>
      <col width="440">
        <col width="100">
            <tr>
                <th style="text-align:center">&nbsp;&nbsp;&nbsp; Return <br> &nbsp;&nbsp;&nbsp; Asset 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Asset 2</th>
                <th style="text-align:center">expected in ... out of of 50 cases</th>
            </tr>
            <tr>
                <td style='	vertical-align: middle;'>
                    <ul class="valueN" id='vA1'>
                            <font size="6"><li id="reA11">  </li></font>
                            <font size="6"><li id="reA12">  </li></font>
                        </ul>
                        <div 	id='contrA1'
                            style='	width: 416px; height: 320px; left: 0px;
                                    position: relative; z-index: -2;
                                '
                                ></div>


                </td>
                <td > <font size="6" ><ul id='td1' style="text-align:center; margin-left: -40px;" >  </ul></font></td>
            </tr>
            <tr>
                <td style="vertical-align: middle;">
                    <ul class="valueN" id='vA2' >
                        <font size="6"><li id="reA21">  </li></font>
                        <font size="6"><li id="reA22">  </li></font>
                    </ul>
                    <div 	id='contrA2'
                            style='	width: 416px; height: 320px; left: 0px;
                                    position: relative; z-index: -2;
                                '
                            ></div>

                </td>
                <td > <font size="6" ><ul id='td2' style="text-align:center; margin-left: -40px;" >  </ul></font></td>

            </tr>
            <tr>
                <td style="vertical-align: middle;">
                    <ul class="valueN" id='vA3' >
                        <font size="6"><li id="reA31">  </li></font>
                        <font size="6"><li id="reA32">  </li></font>
                    </ul>
                    <div  id='contrA3'
                        style='	width: 416px; height: 320px; left: 0px;
                                    position: relative; z-index: -2;
                            '
                            ></div>

                </td>
                <td > <font size="6" ><ul id='td3' style="text-align:center; margin-left: -40px;" >  </ul></font></td>
            </tr>
                <tr>
                <td style="vertical-align: middle;">
                    <ul class="valueN" id='vA4' >
                        <font size="6"><li id="reA41">  </li></font>
                        <font size="6"><li id="reA42">  </li></font>
                    </ul><div	id='contrA4'
                        style='width: 416px; height: 320px; left: 0px;
                                    position: relative; z-index: -2;
                            '
                            ></div>
                </td>
                <td> <font size="6" ><ul id='td4' style="text-align:center; margin-left: -40px;" >  </ul></font></td>
            </tr>
            <tr>
                <td style="vertical-align: middle;">
                     <ul class="valueN" id='vA5'>
                        <font size="6"><li id="reA51">  </li></font>
                        <font size="6"><li id="reA52">  </li></font>
                    </ul>
                    <div	id='contrA5'
                        style='width: 416px; height: 320px; left: 0px;
                                    position: relative; z-index: -2;
                            '
                            ></div>

                </td>
                <td > <font size="6" ><ul id='td5' style="text-align:center; margin-left: -40px;" >  </ul></font></td>
            </tr>
            <tr>
                <td style="vertical-align: middle;">
                    <ul class="valueN" id='vA6'>
                        <font size="6"><li id="reA61">  </li></font>
                        <font size="6"><li id="reA62">  </li></font>
                    </ul>
                    <div	id='contrA6'
                        style='width: 416px; height: 320px; left: 0px;
                                    position: relative; z-index: -2;
                            '
                            ></div>

                </td>
                <td > <font size="6" ><ul id='td6' style="text-align:center; margin-left: -40px;" >  </ul></font></td>
            </tr>
                <tr>
                <td style="vertical-align: middle;">
                    <ul class="valueN" id='vA7'>

                     <font size="6"><li id="reA71">  </li></font>
                        <font size="6"><li id="reA72">  </li></font>
                    </ul><div	id='contrA7'
                            style='	width: 416px; height: 320px; left: 0px;
                                    position: relative; z-index: -2;
                            '
                            ></div>
                    <ul class="valueN" id='vA7'>

                </td>
                <td > <font size="6" ><ul id='td7' style="text-align:center; margin-left: -40px;" >  </ul></font></td>
            </tr>
            <tr>
                <td style="vertical-align: middle;">
                                        <ul class="valueN" id='vA8'>
                        <font size="6"><li id="reA81">  </li></font>
                        <font size="6"><li id="reA82">  </li></font>
                    </ul>
                    <div	id='contrA8'
                        style='	width: 416px; height: 320px; left: 0px;
                                    position: relative; z-index: -2;
                            '
                            ></div>

                </td>
                <td > <font size="6" ><ul id='td8' style="text-align:center; margin-left: -40px;" >  </ul></font></td>
            </tr>
        </table>
{#        </div>#}


        <div id = "bb1" style='position: relative; top: 40px; text-align: center;'>
        <div>
            <button id="b1" style="display: none; margin: 0 auto;" class="otree-btn-next btn btn-primary">Next</button>
            <div id="b" style='display: none; margin: auto; width: 50px; ' class="otree-btn-next btn btn-primary">Next</div>
        </div>
        </div>

        <div><p style="margin-left: 2.5em;height: 50px; "></p></div>


{% endblock %}

{% block scripts %}

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> <!-- for the draggable of the scrollbar -->
    <script src="//code.highcharts.com/highcharts.js"></script>
    <script src="//code.highcharts.com/highcharts-3d.js"></script>
    <script src="//code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript" src="https://blacklabel.github.io/custom_events/js/customEvents.js"></script>


    <script>
        {% include "PDE1/Treatment_Graph.js.html" %}
    </script>
    <script>

            (function ($) {
                console.log("aaaaaaa")

                document.getElementsByTagName('h2')[0].style.fontSize = "20px";
                document.getElementsByTagName('h2')[0].style.textAlign = "center";

                var logic = [func0, func1]; // the arrays of all chart-drawing functions

                var index = 0

                // returns False - > 50 sample graphs1
                if (1 == 0){
                    document.getElementById('l').style.display = 'block';

				    document.getElementsByTagName('h2')[0].innerHTML = 'Possible simultaneous returns:';
                    document.title = 'Possible simultaneous returns';

                }else{
                    document.getElementById('canvas').style.display = 'block';
                    document.getElementById('b').style.display = 'inline';
                    document.getElementById('l').style.display = 'block';


                    document.getElementsByTagName('h2')[0].innerHTML = 'Simulation of Returns: 1 of 50';
                    document.title = 'Simulation of Returns: 1 of 50';
                    document.getElementById('bb1').style.left = '35px';
                    //document.getElementsByClassName("legend")[0].style.visibility='visible';

                    index = 1

                }

                console.log("aaaaaaa")
                console.log(index)
                logic[index]();

                if(window.screen.width < 500){
                    document.getElementsByTagName('h2')[0].style.textAlign = "left";
                    document.getElementById('l').style.textAlign = "left";
                    document.getElementById('l').style.left = "-40px";

                    document.getElementById('longtable').style.marginLeft = "0";
                    document.getElementById('bb1').style.textAlign = "left";
                    document.getElementById('b1').style.margin = "0";
                    document.getElementById('contr2').style.margin = "0";
                    document.getElementById('contr2').style.left = "10px";
                    document.getElementById('v').style.left = "-26px";

                }




        }(jQuery));
        $( document ).ready(function() {

        });
    </script>
{% endblock %}