<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PathFinding.js</title>
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="./lib/themes/jquery.ui.all.css" />
<script type="text/javascript" src="./lib/raphael-min.js"></script>
<script type="text/javascript" src="./lib/es5-shim.min.js"></script>
<script type="text/javascript" src="./lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./lib/state-machine.min.js"></script>
<script type="text/javascript" src="./lib/async.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.draggable.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.accordion.min.js"></script>
<script type="text/javascript" src="./lib/ui/jquery.ui.slider.min.js"></script>
<script type="text/javascript" src="./lib/pathfinding-browser.min.js"></script>
<script type="text/javascript" src="./js/view.js"></script>
<script type="text/javascript" src="./js/controller.js"></script>
<script type="text/javascript" src="./js/panel.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<div id="draw_area"></div>
<div id="instructions_panel" class="panel">
<header>
<h2 class="header_title">Instructions</h2>
<span id="hide_instructions">hide</span>
</header>
Click within the <span class="white">white</span> grid and drag your mouse to draw obstacles. <br>
Drag the <span class="green">green</span> node to set the start position. <br>
Drag the <span class="red">red</span> node to set the end position. <br>
Choose an algorithm from the right-hand panel. <br>
Click Start Search in the lower-right corner to start the animation.
</div>
<div id="algorithm_panel" class="panel right_panel">
<header><h2 class="header_title">Select Algorithm</h2></header>
<div class="accordion">
<h3 id="astar_header"><a href="#">A*</a></h3>
<div id="astar_section" class="finder_section">
<header class="option_header">
<h3>Heuristic</h3>
</header>
<div id="astar_heuristic" class="sub_options">
<input type="radio" name="astar_heuristic" value="manhattan" checked />
<label class="option_label">Manhattan</label> <br>
<input type="radio" name="astar_heuristic" value="euclidean"/>
<label class="option_label">Euclidean</label> <br>
<input type="radio" name="astar_heuristic" value="octile"/>
<label class="option_label">Octile</label> <br>
<input type="radio" name="astar_heuristic" value="chebyshev"/>
<label class="option_label">Chebyshev</label> <br>
</div>
<header class="option_header">
<h3>Options</h3>
</header>
<div class="optional sub_options">
<input type="checkbox" class="allow_diagonal" checked>
<label class="option_label">Allow Diagonal</label> <br>
<input type="checkbox" class="bi-directional">
<label class="option_label">Bi-directional</label> <br>
<input type="checkbox" class="dont_cross_corners">
<label class="option_label">Don't Cross Corners</label> <br>
<input class="spinner" name="astar_weight" value="1">
<label class="option_label">Weight</label> <br>
</div>
</div>
<h3 id="ida_header"><a href="#">IDA*</a></h3>
<div id="ida_section" class="finder_section">
<header class="option_header">
<h3>Heuristic</h3>
</header>
<div id="ida_heuristic" class="sub_options">
<input type="radio" name="ida_heuristic" value="manhattan" checked />
<label class="option_label">Manhattan</label> <br>
<input type="radio" name="ida_heuristic" value="euclidean"/>
<label class="option_label">Euclidean</label> <br>
<input type="radio" name="ida_heuristic" value="octile"/>
<label class="option_label">Octile</label> <br>
<input type="radio" name="ida_heuristic" value="chebyshev"/>
<label class="option_label">Chebyshev</label> <br>
</div>
<header class="option_header">
<h3>Options</h3>
</header>
<div class="optional sub_options">
<input type="checkbox" class="allow_diagonal" checked>
<label class="option_label">Allow Diagonal</label> <br>
<input type="checkbox" class="dont_cross_corners">
<label class="option_label">Don't Cross Corners</label> <br>
<input class="spinner" name="astar_weight" value="1">
<label class="option_label">Weight</label> <br>
<input class="spinner" name="time_limit" value="10">
<label class="option_label">Seconds limit</label> <br>
<input type="checkbox" class="track_recursion" checked />
<label class="option_label">Visualize recursion</label> <br>
</div>
</div>
<h3 id="breadthfirst_header"><a href="#">Breadth-First-Search</a></h3>
<div id="breadthfirst_section" class="finder_section">
<header class="option_header">
<h3>Options</h3>
</header>
<div class="optional sub_options">
<input type="checkbox" class="allow_diagonal" checked>
<label class="option_label">Allow Diagonal</label> <br>
<input type="checkbox" class="bi-directional">
<label class="option_label">Bi-directional</label> <br>
<input type="checkbox" class="dont_cross_corners">
<label class="option_label">Don't Cross Corners</label> <br>
</div>
</div>
<h3 id="bestfirst_header"><a href="#">Best-First-Search</a></h3>
<div id="bestfirst_section" class="finder_section">
<header class="option_header">
<h3>Heuristic</h3>
</header>
<div id="bestfirst_heuristic" class="sub_options">
<input type="radio" name="bestfirst_heuristic" value="manhattan" checked />
<label class="option_label">Manhattan</label> <br>
<input type="radio" name="bestfirst_heuristic" value="euclidean"/>
<label class="option_label">Euclidean</label> <br>
<input type="radio" name="bestfirst_heuristic" value="octile"/>
<label class="option_label">Octile</label> <br>
<input type="radio" name="bestfirst_heuristic" value="chebyshev"/>
<label class="option_label">Chebyshev</label> <br>
</div>
<header class="option_header">
<h3>Options</h3>
</header>
<div class="optional sub_options">
<input type="checkbox" class="allow_diagonal" checked>
<label class="option_label">Allow Diagonal</label> <br>
<input type="checkbox" class="bi-directional">
<label class="option_label">Bi-directional</label> <br>
<input type="checkbox" class="dont_cross_corners">
<label class="option_label">Don't Cross Corners</label> <br>
</div>
</div>
<h3 id="dijkstra_header"><a href="#">Dijkstra</a></h3>
<div id="dijkstra_section" class="finder_section">
<header class="option_header">
<h3>Options</h3>
</header>
<div class="optional sub_options">
<input type="checkbox" class="allow_diagonal" checked>
<label class="option_label">Allow Diagonal</label> <br>
<input type="checkbox" class="bi-directional">
<label class="option_label">Bi-directional</label> <br>
<input type="checkbox" class="dont_cross_corners">
<label class="option_label">Don't Cross Corners</label> <br>
</div>
</div>
<h3 id="jump_point_header"><a href="#">Jump Point Search</a></h3>
<div id="jump_point_section" class="finder_section">
<header class="option_header">
<h3>Heuristic</h3>
</header>
<div id="jump_point_heuristic" class="sub_options">
<input type="radio" name="jump_point_heuristic" value="manhattan" checked />
<label class="option_label">Manhattan</label> <br>
<input type="radio" name="jump_point_heuristic" value="euclidean"/>
<label class="option_label">Euclidean</label> <br>
<input type="radio" name="jump_point_heuristic" value="octile"/>
<label class="option_label">Octile</label> <br>
<input type="radio" name="jump_point_heuristic" value="chebyshev"/>
<label class="option_label">Chebyshev</label> <br>
</div>
<header class="option_header">
<h3>Options</h3>
</header>
<div class="optional sub_options">
<input type="checkbox" class="track_recursion" checked>
<label class="option_label">Visualize recursion</label> <br>
</div>
</div>
<h3 id="orth_jump_point_header"><a href="#">Orthogonal Jump Point Search</a></h3>
<div id="orth_jump_point_section" class="finder_section">
<header class="option_header">
<h3>Heuristic</h3>
</header>
<div id="orth_jump_point_heuristic" class="sub_options">
<input type="radio" name="orth_jump_point_heuristic" value="manhattan" checked />
<label class="option_label">Manhattan</label> <br>
<input type="radio" name="orth_jump_point_heuristic" value="euclidean"/>
<label class="option_label">Euclidean</label> <br>
<input type="radio" name="orth_jump_point_heuristic" value="octile"/>
<label class="option_label">Octile</label> <br>
<input type="radio" name="orth_jump_point_heuristic" value="chebyshev"/>
<label class="option_label">Chebyshev</label> <br>
</div>
<header class="option_header">
<h3>Options</h3>
</header>
<div class="optional sub_options">
<input type="checkbox" class="track_recursion" checked>
<label class="option_label">Visualize recursion</label> <br>
</div>
</div>
</div><!-- .accordion -->
</div><!-- #algorithm_panel -->
<div id="play_panel" class="panel right_panel">
<button id="button1" class="control_button">Start Search</button>
<button id="button2" class="control_button">Pause Search</button>
<button id="button3" class="control_button">Clear Walls</button>
</div>
<div id="stats"></div>
<footer>
Project Hosted on <a href="http://github.com/qiao/PathFinding.js">Github</a>
</footer>
</body>
</html>