<!DOCTYPE HTML>
<html>
	<head>
		<?php
			$wallcon = true;
		?>
		<script src="../js/libs/jquery.js"></script>
		<script src="../js/utils.js?v=<?php if ($wallcon) echo PHP_INT_MAX; else echo filemtime("../js/utils.js"); ?>"></script>
		<script src="../js/storage.js?v=<?php if ($wallcon) echo PHP_INT_MAX; else echo filemtime("../js/storage.js"); ?>"></script>
		
		<link rel="stylesheet" href="../js/libs/codemirror/codemirror.css?v=<?php if ($wallcon) echo $aeWebVersion; else echo filemtime("../js/libs/codemirror/codemirror.css"); ?>" type="text/css" />
		<script src="../js/libs/codemirror/codemirror.js?v=<?php if ($wallcon) echo $aeWebVersion; else echo filemtime("../js/libs/codemirror/codemirror.js"); ?>"></script>
		<script src="../js/libs/codemirror/mode/javascript/javascript.js?v=<?php if ($wallcon) echo $aeWebVersion; else echo filemtime("../js/libs/codemirror/mode/javascript/javascript.js"); ?>"></script>
		
		
		<script>
			var cmirror;
			var modulelist = [];
			var manufacturerlist = [];
			var str = '';
			
			$(document).ready(function(){
				server({
					opts: {command: 'read_allmodules'},
						callback: function(data){
							modulelist = json_decode(data);
							for (var i=0; i<modulelist.length; i++){
								if (!arrayContains(manufacturerlist, modulelist[i].manufacturer))
									manufacturerlist.push(modulelist[i].manufacturer);
							}
							for (var i=0; i<manufacturerlist.length; i++){
								if (manufacturerlist[i] == 'SVSi'){
									var t = manufacturerlist[0];
									manufacturerlist[0] = manufacturerlist[i];
									manufacturerlist[i] = t;
								}
							}
							str = '';
							for (var i=0; i<manufacturerlist.length; i++){
								str += '<option value="'+manufacturerlist[i]+'">'+manufacturerlist[i]+'</option>';
							}
							$('#modulemanufacturers').html(str);
							str = '';
							for (var i=0; i<modulelist.length; i++){
								if (modulelist[i].manufacturer == manufacturerlist[0])
									str += '<option value="'+modulelist[i].file+'">'+modulelist[i].make+'</option>';
							}
							$('#modules').html(str);
							$.get('../'+$('#modules').val(), function(val){
								cmirror = CodeMirror(document.getElementById('modulecode'), {
									value: val,
									mode:  "javascript"
								});
								$('.CodeMirror').css({height: '100%'});
							}, 'text');
							
							$('#modules').change(function(){
								$.get('../'+$('#modules').val(), function(value){
									cmirror.setValue(value);
								}, 'text');
							});
							$('#modulemanufacturers').change(function(){
								str = '';
								for (var i=0; i<modulelist.length; i++){
									if (modulelist[i].manufacturer == $('#modulemanufacturers').val())
										str += '<option value="'+modulelist[i].file+'">'+modulelist[i].make+'</option>';
								}
								$('#modules').html(str);
								$.get('../'+$('#modules').val(), function(value){
									cmirror.setValue(value);
								}, 'text');
							});
						}
				}, '../server.php');
			});
		</script>
	</head>
	<body style="background: black;">
		<div style="position: absolute; left: 4.8%; top: calc(10% - 28px);">
			<select id="modulemanufacturers"></select>
			<select id="modules"></select>
		</div>
		<img style="position: absolute; right: 4.8%; top: 3%; height: 5%;" src="../images/svsi/svsi2.png" />
		
		<div id="modulecontainer" style="width: 90%; height: 85%; border: 1px solid black;
			position: absolute; right: 5%; top: 10%; overflow: hidden; background: #eeeeee;">
			<div id="modulecode" style="width: 100%; height: 100%;"></div>
		</div>
	</body>
</html>