Tyriar/pathfinding-visualiser

<!--
pathfinding-visualiser <http://github.com/Tyriar/pathfinding-visualiser>
Copyright 2014 Daniel Imms <http://www.growingwiththeweb.com>
Released under the MIT license <http://github.com/Tyriar/pathfinding-visualiser/blob/master/LICENSE>
-->

<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../layout/layout.html">
<link rel="import" href="../../../paper-button/paper-button.html">
<link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../../paper-radio-button/paper-radio-button.html">
<link rel="import" href="../../../paper-radio-group/paper-radio-group.html">
<link rel="import" href="../../../paper-material/paper-material.html">
<link rel="import" href="../../../paper-slider/paper-slider.html">
<link rel="import" href="../../../paper-toggle-button/paper-toggle-button.html">

<dom-module id="pathfinding-visualiser-sidebar">
  <link rel="import" type="css" href="pathfinding-visualiser-sidebar.css">
  <template>
    <paper-material elevation="1" class="flex layout vertical">
      <menu  class="flex two">
        <div>
          <h1>Map</h1>

          <div>
            <div>Scale</div>
            <paper-slider pin min="1" max="20" value="{{ mapScale }}" id="mapScale"></paper-slider>
          </div>

          <div>
            <div>Obstacle density</div>
            <paper-slider pin min="0" max="50" value="{{ obstacleDensity }}" id="obstacleDensity"></paper-slider>
          </div>

          <div>
            <div>Obstacles size</div>
            <paper-slider pin min="1" max="10" value="{{ obstacleSize }}" id="obstacleSize"></paper-slider>
          </div>

          <paper-button raisedbutton class="colored" id="generateMap" on-click="generate">Generate</paper-button>
        </div>

        <div>
          <h1>Algorithm</h1>
          <paper-radio-group selected="a-star-binary-heap">
            <paper-radio-button data-algorithm="a-star-array" name="a-star-array" on-click="algorithmChange" title="The A* algorithm implemented using arrays for all collections">A* (array)</paper-radio-button>
            <paper-radio-button data-algorithm="a-star-binary-heap" name="a-star-binary-heap" on-click="algorithmChange" title="The A* algorithm implemented using a binary heap for the open list and hashmaps for the open and closed lists to track whether the items are in either">A* (binary heap)</paper-radio-button>
            <paper-radio-button data-algorithm="a-star-fibonacci-heap" name="a-star-fibonacci-heap" on-click="algorithmChange" title="The A* algorithm implemented using a Fibonacci heap for the open list and hashmaps for the open and closed lists to track whether the items are in either">A* (Fib heap)</paper-radio-button>
            <paper-radio-button data-algorithm="dijkstra-binary-heap" name="dijkstras-binary-heap" on-click="algorithmChange" title="Dijkstra's algorithm implemented using a binary heap">Dijkstra (binary heap)</paper-radio-button>
            <paper-radio-button data-algorithm="dijkstra-fibonacci-heap" name="dijkstras-fibonacci-heap" on-click="algorithmChange" title="Dijkstra's algorithm implemented using a Fibonacci heap">Dijkstra (Fib heap)</paper-radio-button>
          </paper-radio-group>
        </div>

        <div>
          <h1>Animation</h1>

          <div class="center horizontal layout spacer">
            <div class="flex">Enabled</div>
            <paper-toggle-button checked="{{ animationEnabled }}"></paper-toggle-button>
          </div>

          <div>Speed</div>
          <paper-slider pin min="1" max="{{ speedMax }}" value="{{ speed }}" id="animationSpeed"></paper-slider>
        </div>

        <paper-button raisedbutton class="colored" id="clearButton" on-click="clear">Clear</paper-button>
        <paper-button raisedbutton class="colored" id="runButton" on-click="run">Run</paper-button>
      </menu>

      <nav>
        <ul class="layout horizontal center">
          <li class="flex">
            <a href="http://www.growingwiththeweb.com/2012/06/a-pathfinding-algorithm.html" title="Go to article">
              <img src="../../images/logo.svg"/>
            </a>
          </li>
          <li class="flex">
            <a href="https://twitter.com/share?text=Pathfinding%20visualiser%20by%20@tyriar&url=http://www.growingwiththeweb.com/projects/pathfinding-visualiser/&related=tyriar" title="Tweet">
              <img src="../../images/twitter.svg"/>
            </a>
          </li>
          <li class="flex">
            <a href="https://plus.google.com/share?url=http://www.growingwiththeweb.com/projects/pathfinding-visualiser/" title="Share on Google+">
              <img src="../../images/google-plus.svg"/>
            </a>
          </li>
          <li class="flex">
            <a href="https://github.com/Tyriar/pathfinding-visualiser" title="View source on GitHub">
              <img src="../../images/github.svg"/>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </template>
</dom-module>
<script src="pathfinding-visualiser-sidebar.js" type="text/javascript"></script>