<html lang="en">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="assets/css/shell.css">
		<link rel="stylesheet" href="assets/css/keyboard.css">
		<!-- <link rel="stylesheet" href="assets/css/nanoscroller.css"> -->
		<link rel="stylesheet" type="text/css" href="assets/css/level.css">
	</head>
	<body>
		<div class="shell-wrap">
			<p class="shell-top-bar">Editor</p>
			<ul class="shell-body">
				<li contenteditable="true" id="write"></li>
				<div id="popup" class="modalDialog" onclick="location.href='#close';">
					<div>
						<h2><img src="images/exclamation.png" alt="" height="24" width="24"> Modal Box</h2>
						<p>This is a sample modal box that can be created using the powers of CSS3.</p>
						<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
					</div>
				</div>
				<div class="printout"></li>
				<!-- <li contenteditable="true" id="write">
				println(input1 + input2);
				println(input1 - input2);
				</li> -->
			</ul>
				<button class="shell-submit" type="submit" onclick="submit()">Submit</button>
		</div>
		<div id="board" align="center">
			<ul id="keyboard">
				<div id="row">
					<li class="digit">1</li>
					<li class="digit">2</li>
					<li class="digit">3</li>
					<li class="digit">4</li>
					<li class="digit">5</li>
					<li class="digit">6</li>
					<li class="digit">7</li>
					<li class="digit">8</li>
					<li class="digit">9</li>
					<li class="digit">0</li>
					<li class="symbol">+</li>
					<li class="symbol">-</li>
				</div>
				<div id="row">
					<li class="symbol">*</li>
					<li class="symbol">/</li>
					<li class="symbol">%</li>
					<li class="symbol">++</li>
					<li class="symbol">--</li>
					<li class="symbol">^</li>
					<li class="symbol">==</li>
					<li class="symbol">!=</li>
					<li class="symbol">&lt;</li>
					<li class="symbol">&gt;</li>
					<li class="symbol">&lt;=</li>
					<li class="symbol">&gt;=</li>
				</div>
				<div id="row">
					<li class="letter firstitem">a</li>
					<li class="letter">b</li>
					<li class="letter">c</li>
					<li class="letter">d</li>
					<li class="letter">e</li>
					<li class="letter">f</li>
					<li class="letter">x</li>
					<li class="letter">y</li>
					<li class="letter">z</li>
					<li class="letter">i</li>
					<li class="letter">j</li>
					<li class="letter">k</li>
				</div>
				<div id="row">
					<li class="keyword firstitem">true</li>
					<li class="keyword">false</li>
					<li class="keyword println">println</li>
					<li class="keyword">if</li>
					<li class="keyword">else</li>
					<li class="keyword">var</li>
					<li class="keyword">for</li>
					<li class="keyword">while</li>
					<li class="keyword">function</li>
					<li class="keyword">input1</li>
					<li class="keyword">input2</li>
					<li class="keyword">return</li>
				</div>
				<div id="row">
					<li class="symbol firstitem">[</li>
					<li class="symbol">]</li>
					<li class="symbol">{</li>
					<li class="symbol">}</li>
					<li class="symbol paren">(</li>
					<li class="symbol paren">)</li>
					<li class="symbol semicolon">;</li>
					<li class="symbol">=</li>
					<li class="symbol quote">'</li>
					<li class="symbol quote">&quot;</li>
					<li class="symbol">.</li>
					<li class="symbol">,</li>
				</div>
				<div id="row">
					<li class="delete firstitem">delete</li>
					<li class="space">space</li>
					<li class="return">enter</li>
				</div>
			</ul>
		</div>
	</div>
	<script type="text/javascript" src="assets/js/jquery.min.js"></script>
	<script type="text/javascript" src="assets/js/keyboard.js"></script>
	<script type="text/javascript" src="assets/js/interpreter.js"></script>
	<script type="text/javascript">
		var input1s = [1, 2, 3, 4, 5, 6, 7, 8, 9],
			input2s = [91, 81, 71, 61, 51, 41, 31, 21, 11],
			outputs = [],
			lvl = 14, difficulty = 5;
		var checker = checkFunc;

		function checkFunc(text) {
			return zip(input1s, input2s).reduce(function(acc, elem) {
			    input1 = elem[0];
			    input2 = elem[1];
			    eval("(function() { " + text + " })()");
			    return acc && (elem[0] == input2 && elem[1] == input1);
			}, true);
		}
	</script>
</body>
</html>