<html>
	<head>
		<title>Mountain Car Problem in Reinforcement Learning</title>
		<!-- include the resource file -->
		<!-- first: the libraries -->
		<script type="application/javascript" src="../jquery-1.11.3.js"></script>
		<script type="application/javascript" src="../flot/jquery.flot.js"></script>
		
		  
				
		
		<!-- include the other file -->
		
		<script type="application/javascript" src="../util.js"></script>
		<script type="application/javascript" src="mountain_car.js"></script>
		<script type="application/javascript" src="mountain_car_view.js"></script>
		
		<link rel="stylesheet" type="text/css" href="mountain_car.css">
		<link rel="stylesheet" type="text/css" href="../frame.css">
		<link rel="stylesheet" type="text/css" href="../about.css">
		
		<!--  meta data -->
		<meta name="description" content="Reinforcement Learning in Javascript" />
		<meta name="description" content="Mountain Car Problem in Reinforcement learning" />
		<meta name="keywords" content="RL, reinforcement learning, machine learning, javascript">
	</head>
	<body>
		<img src="../logo.png" alt="RLScript">
		<div class="nav">
			<ul>
				<li><a href="../about.html">About</a></li>
				<li><a href="../taxi/taxi.html">Taxi</a></li>
				<li><a href="mountain_car.html">Mountain Car</a></li>
				<li><a href="../grid_world/grid_world.html">Grid World</a></li>
			</ul>
		</div>
		<div id="main">
			<div id="title">The Mountain Car Problem</div>
			<div id="description"> The Mountain Car Problem originally came from the book
			"Reinforcement Learning: An Introduction", <a href="https://webdocs.cs.ualberta.ca/~sutton/book/ebook/node89.html">Section 8.4</a>
			</div>
			<div id="game">
				<div id="view">
					<canvas width="500" height="500" id="car"></canvas>
				</div>
				<div id="panel">
					<div id="control">
						<select id="learners"></select>
						<div id="buttons">
							<button id="start" title="start learning">Start</button>
							<button id="stop" title="stop learning">Stop</button>
							<button id="next" title="take a step">Next</button>
							<button id="reset" title="restart the game and reset the agent">Reset</button>
						</div>
					</div>
					<div id="info">iteration:0</div>
					<div id="placeholder" class="demo-placeholder"></div>
				</div>
				<div class="clearfix"></div>
			</div>
			<script>
    
    		
				var inLearning = false;
				var interval = 20;
				var items = [];
				var currentAgent;

				function stopLearning() {
					clearInterval(inLearning);
					inLearning = false;
				}

				function selectLearner(index) {
					MountainCar.view.initGame(items[index].agent);
				}

				$(document).ready(
						function(event) {
							var canvas = $("#car").get(0);
							MountainCar.view.initializeView(canvas);
							MountainCar.view.drawBackground();
							$.getJSON("agents/agents.json", function(data) {
								var i = 0;
								items = [];
								$.each(data, function(key, value) {
									items[i] = {};
									items[i].name = key;
									$.each(value, function(subkey, subValue) {
										items[i][subkey] = subValue;
									});
									i++;
								});

								// initialize the items in the selections and load the file
								$.ajaxSetup({
									async : false
								});
								for (i = 0; i < items.length; ++i) {
									//console.log(items[i].name);
									// only append the option if the script is downloaded
									$.getScript(items[i].file, function() {
										$("#learners").append(
												"<option>" + items[i].name
														+ "</option>");
									});
									//console.log(currentAgent);
									items[i].agent = currentAgent;
									//console.log(items[i].agent);
								}
								$.ajaxSetup({
									async : true
								});

								// select the first learner as default
								selectLearner(0);

							});

							//$.getScript("agents/q/qlearning.js",function(){Taxi.view.initGame(Taxi.agents.q);});
							//Taxi.view.initGame();
						});

				// bound the listener for the select
				$("#learners").change(function() {
					var index = $("#learners")[0].selectedIndex;
					selectLearner(index);
				})

				$("#next").on("click", function(event) {
					if (typeof inLearning === 'number') {
						stopLearning();
					}
					MountainCar.view.nextStep();
				});

				$("#start").on("click", function(event) {
					inLearning = setInterval(MountainCar.view.nextStep, interval);
				});

				$("#stop").on("click", function(event) {
					stopLearning();
				});

				$("#reset").on("click", function(event) {

					if (typeof inLearning === 'number') {
						stopLearning();
					}

					//Taxi.view.initGame();
				});
				
				
				
				
			</script>
			<div id="paperlist"></div>
		</div>
		<div id="footer">Developed by Ermo Wei</div>
	</body>
</html>





