<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>Eco</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- Header js-->
    <script src="inc/js/header.js?v=1"></script>
    <script src="inc/js/bluebird.min.js"></script>

    <!-- Jquery -->
    <script src="inc/js/jquery/jquery-latest.min.js"></script>
    <script src="inc/js/jquery/jquery-ui.js"></script>
    <link rel="stylesheet" href="inc/css/jquery/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="inc/css/range.css">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="inc/css/loader.css">

    <style>
        #election-info-tbl.flat-table td.election-rule {
            text-align: left;
            white-space: nowrap;
        }

        #election-info-tbl.flat-table td.election-rule-description {
            text-align: center;
        }

        .election-name .name-box {
            margin-bottom: 0px !important;
        }

        .highlight-row {
            background: #fff4a0d1;
            /*background-color: #aecea1;*/
            font-weight: bolder;
        }

        td.change-to, td.current {
            white-space: nowrap;
        }

        div.current-rankings {
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #position-for-winner-table {
            margin-bottom: 20px;
        }

        #candidates-results-wrapper .-color-1 {
            background: initial;
            border-top: initial;
        }

        .votes-per-round tbody {
            display: block;
            max-height: 550px;
            overflow-y: auto;
            overflow-x: auto;
        }

        .current-rankings tbody {
            display: block;
            max-height: 750px;
            overflow-y: auto;
        }

        .current-rankings table {
            display: table;
        }

        div.election-heading .flat-table > tbody > tr > td {
            padding: 3px 15px;
            margin: 0;
            font-size: 20px;
            position: relative;
        }

        #election-info-tbl.flat-table > tbody > tr > td {
            max-width: none;
        }

        .bool-choice-value {
            color: #36841c;
        }

        div.scroll-box {
            overflow-y: auto;
            max-height: 350px;
        }
    </style>
</head>

<body>

<!-- LOADING -->
<div id="loader">
    <div id="circleG">
        <div id="circleG_1" class="circleG"></div>
        <div id="circleG_2" class="circleG"></div>
        <div id="circleG_3" class="circleG"></div>
    </div>
</div>

<script>
    // Wait for window load
    $("#loader-text").fadeIn();
    
    $(window).load(function () {
        const isIE = /*@cc_on!@*/false || !!document.documentMode;

        if (isIE) {
            $("#wrapper").remove();
            $("#loader-text").html("Internet Explorer is not supported, please try another browser.");
        } else {
            $("#loader").fadeOut();
        }
    });
</script>

<div id="wrapper">
    <!-- HEADER -->
    <div id="header-scripts"></div>

    <script>
        var currentPage = 'elections';

        // Global Header
        $.get("header.html", data => {
            $(data).prependTo("#header-scripts");
        });
    </script>

    <script src="inc/js/jsRender/jsrender.js"></script>
    <script src="inc/js/bindEvents.js?v=1"></script>
    <script src="inc/js/convertSeconds.js"></script>
    <script src="inc/js/Election.js?v=3"></script>

    <!-- Graph js-->
    <script src="inc/js/highcharts/highcharts.js"></script>
    <script src="graph_composer/script/graph.js?v=1"></script>
    <!-- end Graph js-->

    <script src="inc/js/graph-discussion.js?v=1"></script>

    <!-- Map js -->
    <script src="inc/js/Map.js"></script>
    <script src="inc/js/three.min.js"></script>
    <script src="inc/js/postprocessing/EffectComposer.js"></script>
    <script src="inc/js/postprocessing/RenderPass.js"></script>
    <script src="inc/js/postprocessing/ShaderPass.js"></script>
    <script src="inc/js/shaders/CopyShader.js"></script>
    <script src="inc/js/OrbitControls.js"></script>
    <script src="inc/js/Detector.js"></script>
    <script src="inc/js/dat.gui.min.js"></script>
    <script src="inc/js/ecomap.js"></script>
    <script src="inc/js/mapcontrols.js"></script>
    <script src="inc/js/lawAdd.js"></script>
    <script src="inc/js/localize.js"></script>
    <!-- end Map js -->

    <!-- CONTENT -->
    <div id="page-wrapper">
        <canvas id="c"></canvas>
        <h4 id="status" class="error"></h4>
        <div class="container-fluid">
            <div class="row">
                <div class="elections-wrapper col-lg-12">
                    <!-- Current Election -->
                    <!-- No Current Election -->
                    <div id="elections-page-instructions-wrapper" class="section-wrapper ">
                        <div id="section-title"><p>Eco Elections </p></div>
                        <p>Select an election from the menu.</p>
                    </div>

                    <div id="election-wrapper" style="display: none">

                        <div class="section-wrapper" style="width: 100%;">
                            <!-- Election Name -->
                            <div id="election-name-wrapper" class="election-name" style="display: none"></div>
                        </div>

                        <div id="position-for-winner-table" style="width: auto;display: inline-block;vertical-align: top;"></div>

                        <div class="election-heading ">
                            <!-- Election Process -->
                            <div class="election-action-on-complete">
                                <div id="election-action-on-complete-table-wrapper" style="display: none"></div>
                            </div>
                        </div>

                        <!-- Candidates -->
                        <div id="candidates-results-wrapper" class="">
                            <div class="candidates-wrapper section-wrapper" id="choise-election-wrapper">

                                <!-- Voting -->
                                <div id="choice-election-vote-wrapper" class="voting-wrapper">

                                    <div class="vote" id="election-vote">
                                        <div class="add-self-wrapper" style="position:relative;">
                                            <button class="eco-button vote-button">
                                                <span class="localize" translate-key="30">Submit Vote</span>
                                            </button>
                                            <!--<a href='#' id="add-self" class="eco-button" data-action="add" style="display: none;"> <span class="localize" translate-key="52">Run For Office</span> </a>-->
                                            <a href='#' id="remove-self" class="eco-button"
                                               style="display: none;">
                                                <span class="localize" translate-key="32">Remove Self</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Vote Chart -->
                        <div class="voted-wrapper">
                            <div class="votes-per-round multi-choice-election">
                                <p class='no-votes' style="display:none">
                                    <span class="localize" translate-key="34">No one has voted yet</span>.
                                </p>
                                <table class="flat-table table" style="text-align: center;">
                                    <thead>
                                    <tr class="title-heading">
                                        <td class="th">
                                            <span class="localize" translate-key="35">Votes per round</span>
                                        </td>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                            <div id="election-chart-voting-results-container" class="votes-per-round"></div>
                        </div>

                        <!--- Details -->
                        <div class="election-info-wrapper">
                            <ul id="election-info-results-wrapper"
                                class="election-info section-info-wrapper">
                            </ul>
                        </div>
                        <input type="hidden" id="candidate-names">

                        <!-- Discussion -->
                        <div class="election-discussion section-wrapper ">
                            <div class="section-wrapper-2">

                                <!-- Comments -->
                                <div class="discussion-user"></div>

                                <!-- New Comment -->
                                <textarea class="election-comment form-control localize" translate-key="39" id="comment" placeholder="Enter your response"></textarea>

                                <!-- Add -->
                                <div class="add-comment-buttons">
                                    <input type="button" class="eco-button fancy-add-graph localize" style="display:none;" value="Add Graph" translate-key="80">
                                    <button id="addGraph" class="fa fa-bar-chart comment-button add-graph-button"></button>
                                    <input type="button" class="remove-graph eco-button localize" style="display:none;" value="Remove Graph" translate-key="40">
                                    <button class="fa fa-bar-chart comment-button remove-graph-button" style="display:none;"></button>

                                    <input type="button" class="eco-button fancy-add-map localize" style="display:none;" value="Add Map" translate-key="81">
                                    <button class="fa fa-globe comment-button add-map-button"></button>
                                    <input type="button" class="remove-map eco-button localize" style="display:none;" value="Remove Map" translate-key="41">
                                    <button class="fa fa-globe comment-button remove-map-button" style="display:none;color: #ababab;text-decoration: line-through;"></button>

                                    <button id="pushComment" class="eco-button">
                                        <span class="localize" translate-key="42">Submit</span>
                                    </button>
                                    <div id="law-add-graph" style="display:inline-block;"><input type="hidden" id="graph-data" value=""></div>
                                </div>

                                <!-- Edit -->
                                <div class="edit-comment-buttons" style="display:none;">
                                    <button id="cancel-edit" class="eco-button">
                                        <span class="localize" translate-key="43">Cancel</span>
                                    </button>
                                    <button id="removeGraph" class="remove-graph eco-button">
                                        <span class="localize" translate-key="40">Remove Graph</span>
                                    </button>
                                    <button id="submit" class="eco-button" style="display: block;">
                                        <span class="localize" translate-key="42">Submit</span>
                                    </button>
                                </div>

                                <div class="row" style="clear: both; margin-right: 0;">
                                    <!-- <iframe class="comment-graph" id="graph_composer" style="display:none; height: 536px;" src="graph_composer/index.html"></iframe> -->
                                    <div class="map-wrapper-1 col-xl-4" id="map-control-wrapper" style="display:none;">
                                        <!-- Start map control panel -->
                                        <div class="map-control-panel">
                                            <!-- Map Layer -->
                                            <div class="map-layer-select-wrapper">
                                                <i class="fa fa-fw fa-caret-down"></i>
                                                <select class="map-layer-select" style="width: 100%">
                                                    <option value="" class="localize" translate-key="59">
                                                        Select Map Layer
                                                    </option>
                                                </select>
                                            </div>

                                            <!-- Map & Info -->
                                            <div style="line-height: 16px;position: absolute;bottom: 82px;left: 134px;border-radius: 3px;overflow: hidden;">
                                <img src="inc/images/map-key.png" style="width: 218px;">
                                <div style="position: absolute;color: white;top: -3px;padding: 8px;font-size: 14px;">Low</div>
                                <div style="position: absolute;color: black;top: -3px;padding: 8px;font-size: 14px;right: 0;">High</div>
                            </div>
                                            <div id="main-map" class="view-map">
                                                <p id="map-position-text"></p>
                                                <p id="map-info-text">.</p>
                                                <div type="text" class="progress-day" name="progress-day">
                                                    <span class="localize" translate-key="64">Day</span> 0, 00:00
                                                </div>
                                                <input type="button" data-type="2" value="2D" id="map-toggle-2d">
                                            </div>

                                            <div class="map-controls-wrapper">

                                                <!-- Play Button -->
                                                <div class="play-button-wrapper">
                                                    <div id="map-toggle-play"><i class="fa fa-play" aria-hidden="true"></i></div>
                                                </div>

                                                <!-- Range Controls -->
                                                <div class="range-controls-wrapper">
                                                    <div class="map-progress-bar-wrapper">
                                                        <progress id="map-progress-bar" value="0.75" max="1.0"></progress>
                                                    </div>

                                                    <div class="range-controls-wrapper-2">
                                                        <div id="range-controls-time-wrapper">
                                                            <div id="range-controls-time-1">
                                                                <!-- <span class="localize" translate-key="64">Day</span> 0<br>00:00 -->
                                                                <span class="localize range-control-time-span-day" translate-key="64">Day</span>
                                                                <span class="range-controls-time-span-1"> 0<br>00:00 </span>
                                                            </div>
                                                        </div>
                                                        <div class="multi-range-content">
                                                            <div id="slider-range"></div>
                                                        </div>
                                                        <div id="range-controls-time-wrapper">
                                                            <div id="range-controls-time-2">
                                                                <!-- <span class="localize" translate-key="64">Day</span> 0<br>00:00 -->
                                                                <span class="localize range-control-time-span-day"
                                                                      translate-key="64">Day</span>
                                                                <span class="range-controls-time-span-2"> 0<br>00:00 </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Speed Controls -->
                                                <div class="speed-controls-wrapper">
                                                    <div id="speed-button">
                                                        <span class="speed-button">0.5</span><br>
                                                        <span class="localize" translate-key="70">days/sec</span>
                                                    </div>
                                                    <input type="range" name="speed" id="map-play-speed" class="renge" min="-10" max="10" value="5" step="0.01">
                                                </div>
                                                <!-- <div class="speed-controls-wrapper">
                                                    <div id="speed-button">0.5<br>days/sec</div>
                                                    <input type="range" name="speed" id="map-play-speed" class="renge" min="-10" max="10" value="5">
                                                </div> -->
                                            </div>
                                            <input id="map-data" type="hidden">
                                        </div><!-- End map control panel -->
                                    </div>

                                    <div id="graphContainer" class="election-wrapper-right col-xl-8 col-lg-12"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- All Votes Modal -->
<div id="allVotes" class="modal fade" role="dialog" style="">
    <div class="modal-dialog modal-xl">
        <div class="fancy-all-votes">
            <div class="current-rankings">
                <table class="flat-table table">
                    <thead>
                    <tr>
                        <!--TODO: need to add translation for Candidate Ranks For Each Voter-->
                        <td class="th" colspan="5"><span class="localize" translate-key="100">Candidate Ranks For Each Voter</span>
                        </td>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Election Process Modal -->
<div id="election-process-modal" class="modal fade" role="dialog" style="">
    <div class="modal-dialog  modal-xl modal-dialog-centered">
        <div class="modal-body">
            <div id="election-process-modal-table-placeholder" class="fancy-election-process-contents">

            </div>
        </div>
    </div>
</div>

<!-- FOOTER -->
<div id="footer-scripts"></div>
<script>
    $(window).load(function () {

        $('.current-rankings').show();
        // Global Footer
        $.get("footer.html", function (data) {
            $(data).prependTo("#footer-scripts");
        });

        // creating the current results table
        // setupTable();

        // automatically load corresponding page when the url contains guid parameter
        // if(getURLParameter('guid') != null){
        // 	setTimeout(function(){
        // 		$('a.previous-election[data-guid=' + getURLParameter('guid') + ']' ).trigger('click');
        // 	}, 50);
        // }
    });
</script>

<script id="election-process-info-template" type="text/x-jsrender">
  <p>
    <span>{{>Name}} - <span>{{>State}}</span> </span>
  </p>

</script>

<script id="election-name-template" type="text/x-jsrender">
  <div class="election-name">
    <h2><span class="name-box"><span class="election-name-title">{{>Name}}</span></span></h2>
    <span class="election-info section-info-wrapper"><span class="election-name-description">{{:ElectionDescription}}</span></span>
    {{if Finished}}
        <span class="election-info section-info-wrapper"><span class="election-name-description">{{:Results.Result}}</span></span>
    {{/if}}
  </div>
</script>

<script id="election-action-on-complete-table-template" type="text/x-jsrender">
    <div class="panel-group" id="accordion">
        {{for Provisions}}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion" href="#provisionBody{{:#index}}">
                            {{if ActionOnCompleteTableHeader}}
                                {{:ActionOnCompleteTableHeader}}
                            {{else}}
                                Provision #{{:#getIndex()+1}}
                            {{/if}}
                            <span class="glyphicon glyphicon-chevron-{{if !#index}}up{{else}}down{{/if}} pull-right"></span>
                        </a>
                    </h4>
                </div>
                <div id="provisionBody{{:#index}}" class="panel-collapse collapse {{if !#index}}in{{/if}}">
                    <div class="panel-body">
                        <table id="election-info-tbl" class="flat-table table" style="width: auto; margin-bottom:0px; border:none;">
                            {{if ActionOnCompleteTable}}
                                <tbody class="collapsible">
                                    <tr class="table-top">
                                    {{for ActionOnCompleteTable.splice(0, 1)}}
                                        <td class="table-top-left election-rule">{{:#data[0]}}</td>
                                        <td class="table-top-left election-rule-description">{{:#data[2]}}</td>
                                        {{if #data[3] !== undefined}}
                                            <td class=" table-top-left election-rule-description">{{:#data[3]}}</td>
                                        {{/if }}
                                    {{/for }}
                                    </tr>
                                    {{for ActionOnCompleteTable }}
                                        <tr class="table-middle
                                            {{if (#data[3] !== undefined) && (#data[2] !== #data[3])}} highlight-row {{/if}}"
                                            {{if (#data[3] !== undefined) && (#data[2] !== #data[3])}} style="background: #fff4a0d1" {{/if}}>
                                        <td class="table-left election-rule" data-toggle="tooltip" data-container="body" data-placement="left" title="{{:#data[1]}}">{{:#data[0]}}</td>

                                        <td class="table-left change-to"><span class="change-to">{{:#data[2]}}</span></td>
                                        {{if #data[3] !== undefined }}
                                            <td class="table-left current"><span class="current">{{:#data[3]}}</span></td>
                                        {{/if}}
                                        </tr>
                                    {{/for}}
                                </tbody>
                            {{else ActionOnCompleteFullDescription}}
                                <tbody style="display:table-row-group">
                                   <tr class="table-top">
                                   <td class="table-top-left" style="text-align:left;">{{:ActionOnCompleteFullDescription}}</td>
                                    </tr>
                                 </tbody>
                            {{else}}
                                 <tbody style="display:table-row-group">
                                   <tr class="table-top">
                                   <td class="table-top-left">No Data</td>
                                    </tr>
                                 </tbody>
                            {{/if}}
                        </table>
                    </div>
                </div>
            </div>
        {{/for }}
    </div>
</script>

<script id="position-for-winner-table-template" type="text/x-jsrender">
    <table id="election-info-tbl" class="flat-table table" style="width: auto; border-top:none; margin-bottom:0px;">
        <tbody>
            <tr class="table-top">
                {{for Table.splice(0, 1) }}
                    <td class=" table-top-left election-rule">{{:#data[0]}}</td>
                    <td class=" table-top-left election-rule-description">{{:#data[2]}}</td>
                {{/for}}
            </tr>
            {{for Table }}
                <tr class="table-middle">
                    <td class="table-left election-rule" data-toggle="tooltip" data-container="body" data-placement="left" title="{{:#data[1]}}">{{:#data[0]}}</td>
                    <td class="table-left election-rule-description change-to"><span class="change-to">{{:#data[2]}}</span></td>
                </tr>
            {{/for}}
        </tbody>
    </table>
</script>

<script id="election-process-table-template" type="text/x-jsrender">
    <table id="election-info-tbl" class="flat-table table" style="width: auto" >
        <thead>
            <tr class="title-heading">
                <td class="th" colspan="3" data-toggle="tooltip" data-container="body" data-placement="left" title="" data-original-title="These are the settings which determine how this election is run."><span>{{>Name}}&nbsp; state: {{>State}} </span></td>
            </tr>
        </thead>
        <tbody>
            {{for Table.slice(1)}}
                <tr class="table-middle">
                    <td class="table-left election-rule" data-toggle="tooltip" data-container="body" data-placement="left" title="{{:#data[1]}}">{{:#data[0]}}</td>
                    <td class="table-left ">{{:#data[2]}}</td>
                </tr>
            {{/for}}
        </tbody>
    </table>
</script>


<script id="boolean-election-voting-template" type="text/x-jsrender"></script>
<script id="choice-election-voting-template" type="text/x-jsrender">
</script>

<script id="yes-no-vote-items" type="text/x-jsrender">
    <div class="btn-group btn-group-toggle bool-choice-controls vote-item vote-button" data-toggle="buttons">
        {{for Choices}}
            <label class="btn btn-success form-check-label bool-choice-control eco-button">
                <input id="bool-choice-input-{{:Id}}" class="form-check-input boolean-choice-input" type="radio" name="options" value="{{>Name}}" data-choice-id="{{:Id}}"> {{>Name}}
            </label>
        {{/for}}
    </div>
</script>

<script id="election-process-link-template" type="text/x-jsrender">
    <li>
        <span>This election is conducted using the rules of</span><a href="javascript: void(0);" class="election-process-info" style="text-decoration: none"> {{>Name}}</a>.
    </li>
</script>

<script id="election-run-off-voting-template" type="text/x-jsrender">
    <li>
        This election is conducted with Instant Runoff Voting. This means that if a citizen's first choice candidate doesn't have enough votes to win, their vote goes instead to their second choice candidate, then third choice, and so on. This table shows each round of removal and how many votes each candidate has. For more info, see
        <a href="https://en.wikipedia.org/wiki/Instant%E2%80%90runoff_voting" target="_blank" class="localize" translate-key="29">
            Instant Runoff Voting
        </a>
    </li>
</script>

<script src="inc/js/graph-election-voting.js"></script>
<script src="inc/bootstrap/js/popper.min.js"></script>
<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    });

    $('body').tooltip({selector: '[data-toggle=tooltip]'});
</script>
</body>
</html>