{% extends "layout.html" %}
{% block content %}
<script type="text/javascript">
$(document).ready(function () {

  $('#loading').hide();

  $.getJSON('/Scenarios', function (result) {
    var optionsValues = '<select id="routes">';
    $.each(result, function (item) {
      optionsValues += '<option value="' + result[item].value + '">' +
			result[item].name + '</option>';
    });

    optionsValues += '</select>';
    $('#routes').replaceWith(optionsValues);
  });

  $('#speed1, #speed2, #speed4').change(function () {
    if ($(this).is(':checked')) {
      var speed = $(this).val();
      changeSpeed(speed);
    }
  });

  $('#selectRoute').click(function (event) {
    $('#routeChooser').fadeOut(500);
    $('#loading').fadeIn(500);
    $('#previews').hide();
    var route = $('#routes').val();
    var realistic = $('#realistic').val();
    if (realistic == 1){
      $('#speedChooser').hide();
    }
    addStartingEndingStates(route);
    getInstructions(route, realistic);
  });

  $('#hamburger').click(function (event) {
    $('#previews').toggle("slow");
  });

  $('#homeBtn').click(function (event) {
    window.location.replace('/');
  })

  $('#opacity').on('change', function () {
    $('#opVal').text($('#opacity').val() + '%');
    ALPHA = $('#opacity').val() / 100;
  });

  $('#theme').change(
    function(){
        if ($(this).is(':checked')) {
          setTheme('Dark');
        } else {
          setTheme('Light');
        }
    });

    $('#grid').change(
      function(){
          if ($(this).is(':checked')) {
            GRID = true;
          } else {
            GRID = false;
          }
      });

      $('#help').click(
        function() {
          $('.helpOverlay').fadeIn(500);
        }
      );

      $('#closeHelp').click(
        function() {
          $('.helpOverlay').fadeOut(500);
        }
      );
});
</script>

<p id="help">?</p>

<div class="helpOverlay">
  <p>Instructions to use the application</p>
  <ul>
    <li>To see the visualization, choose the scenario and the mode.</li>
    <li>In the next screen, start the visualization by pressing either automatic or step-by-step visualization button.</li>
	  <li>The visualization can be resumed automatically and vice versa at any time during visualization.</li>
    <li>To see settings, press hamburger menu on the top left corner of the screen.</li>
    <li>To go back to the scenario selection, press on the robot icon on the top left of the screen.</li>
  </ul>
  <button class="btn" id="closeHelp">Close help</button>
  <div id="licensing">
    <p>The creators of car designs and parking lot space texture are given credit here:</p>
    <a rel="nofollow" target="_blank" href="http://www.vecteezy.com">Vector Art by www.Vecteezy.com</a><br/>
    Graphics Provided by <a rel="nofollow" href="http://www.vecteezy.com/">Vecteezy</a><br/>
    <a href="http://www.brusheezy.com/">Free Brushes by Brusheezy</a>
  </div>

</div>

<div class="overlay">
	<div id="loading" class="centered">
		<p>Loading</p>
		<img src="/public/assets/ajax-loader.gif" id="loadgif" class="loadgif" alt="Loading">
	</div>
	<div id="routeChooser" class="centered">
		<p>Robot Car Parking System Simulation</p>
		<div id="selector" class="selector">
			<select id="routes"></select>
      <select id="realistic">
        <option value="1">Realistic visualization</option>
        <option value="0">Speed selection</option>
      </select>
			<button class="btn" id="selectRoute">Choose scenario</button>
		</div>
	</div>
</div>

<div id="simulation" class="simulation">
  <input type="image" src="/public/assets/hamburger.png" width="25px" height="20px" id="hamburger"/>
  <input type="image" src="/public/assets/home_light.png" width="25px" height="25px" id="homeBtn"/>

	<div id="previews" class="previews">
		<div id="startingPoint" class="verticalPreview">
			<p>Visualization start state</p>
		</div>
		<div id="endingPoint" class="verticalPreview">
			<p>Visualization end state</p>
		</div>
    <div id="speedChooser">
      <p>Please choose the speed before starting visualization!</p>
      <input type="radio" id="speed1" name="speed" value="1" checked>1x speed<br>
      <input type="radio" id="speed2" name="speed" value="2">2x speed<br>
      <input type="radio" id="speed4" name="speed" value="4">4x speed
    </div>
    <div id="carOpacity">
      <p>Opacity of machines</p>
      <input id="opacity" type="range" min="50" max="100" defaultValue="75">
      <p id="opVal">75%</p>
    </div>
    <div id="themeChooser">
      <input type="checkbox" id="theme" name="theme" value="Darktheme"/>
      <label for="theme">Dark theme</label>
      <input type="checkbox" id="grid" value="1" checked="true" />
      <label for="grid">Grid</label>
    </div>
		<div id="instructions" class="instructions">
			<p id="instr" class="instr"> </p>
		</div>
		<div id="FPS">
			<p id ="FPSno"> </p>
		</div>
	</div>
	<div class="verticalCanvas">
		<canvas id="simCanvas" ></canvas>
	</div>
  <div id="controls" class="verticalPreview,controls">
    <button class="btn" id="startSim">Start automatic visualization</button>
    <button class="btn" id="nextStep">Step-by-step visualization</button>
  </div>
</div>


<script type="text/javascript" src="./public/simulation.js"></script>
{% endblock %}