<!DOCTYPE html>
<html lang="en">
<head>
	
	<meta charset="utf-8">
	
	<title>::APP_TITLE::</title>
	
	<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	
	::if favicons::::foreach (favicons)::
	<link rel="::__current__.rel::" type="::__current__.type::" href="::__current__.href::">::end::::end::
	
	::if linkedLibraries::::foreach (linkedLibraries)::
	<script type="text/javascript" src="::__current__::"></script>::end::::end::
	<script type="text/javascript" src="./::APP_FILE::.js"></script>
	
	<script>
		window.addEventListener ("touchmove", function (event) { event.preventDefault (); }, { capture: false, passive: false });
		if (typeof window.devicePixelRatio != 'undefined' && window.devicePixelRatio > 2) {
			var meta = document.getElementById ("viewport");
			meta.setAttribute ('content', 'width=device-width, initial-scale=' + (2 / window.devicePixelRatio) + ', user-scalable=no');
		}
	</script>
	
	<style>
		html,body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

		.right { text-align: right; }
		#inputBox { margin-top: 8px; margin-bottom: 8px; width: 400px; } 
		#swfFile {  }
		#swftySave {  }

		#tilemap { max-height: 200px; background-color: #666666 }
		#tilemapInfo { font-weight: bold; margin-bottom: 4px; }

		#names { margin-bottom: 10px; width: 400px; }

		#content { background: #666666; width: ::if (WIN_RESIZABLE)::100%::elseif (WIN_WIDTH > 0)::::WIN_WIDTH::px::else::100%::end::; height: ::if (WIN_RESIZABLE)::100%::elseif (WIN_WIDTH > 0)::::WIN_HEIGHT::px::else::100%::end::; }
::foreach assets::::if (type == "font")::::if (cssFontFace)::::cssFontFace::::end::::end::::end::
	</style>
	
</head>
<body>
	::foreach assets::::if (type == "font")::
	<span style="font-family: ::id::"> </span>::end::::end::
	
	<div>
		<div id="inputBox">
			<div>
				<input type="file" id="swfFile" name="swfFile" width="100%" />
			</div>
			<div class="right">
				<input type="button" id="swftySave" name="swftySave" value="SWFTY" disabled />
				<input type="button" id="abstractsSave" name="abstractsSave" value="Abstracts" disabled />
				<input type="button" id="swftyStress" name="swftyStress" value="Stress Test" disabled />
			</div>
		</div>

		<div>
			<image id="tilemap" />
			<div id="tilemapInfo">Tilemap: not loaded</div>
		</div>

		<div>
			<select id="names" size="6" selected-index="0" required disabled>
				<option value="Not loaded">Not loaded</option>
			</select>
		</div>

	</div>
	
	<div id="content"></div>
	
	<script type="text/javascript">
		var config = {};
		var exporter = null;
		var swfty = null;

		var swfFileInput = document.getElementById('swfFile');
		var swftySaveInput = document.getElementById('swftySave');
		var abstractsSaveInput = document.getElementById('abstractsSave');
		var stressInput = document.getElementById('swftyStress');
		var namesInput = document.getElementById('names');
		var tilemapImage = document.getElementById('tilemap');
		var tilemapInfo = document.getElementById('tilemapInfo');

		lime.embed ("::APP_FILE::", "content", ::WIN_WIDTH::, ::WIN_HEIGHT::, config);

		function handleFileSelect(evt) {
			var files = evt.target.files; // FileList object

			// TODO: Handle more than one files
			// Loop through the FileList and render image files as thumbnails.
			for (var i = 0, f; f = files[i]; i++) {
				var reader = new FileReader();
				reader.onload = (function(theFile) {
					return function(e) {
						SWFTY.processSWF(e.target.result, theFile.name, function(_exporter) {
							exporter = _exporter;
							abstractsSaveInput.disabled = false;

							SWFTY.getTilemap(exporter, function(src, width, height, size) {
								tilemapImage.src = src;

								tilemapInfo.innerHTML = 'Tilemap: ' + width + 'x' + height + ', (' + (Math.round(size/1024/1024*100) / 100) + 'MB)';
							});

							for(var i = namesInput.options.length - 1 ; i >= 0 ; i--) {
								namesInput.remove(i);
							}

							var names = SWFTY.exportNames(exporter);
							for (var i = 0; i < names.length; i++) {
								var name = names[i];
								var option = document.createElement("option");
								option.text = name;
								option.value = name;
								namesInput.add(option);
							}

							namesInput.selectedIndex = 0;
							
							SWFTY.exportSWF(exporter, function(_swfty) {
								console.log('Export SWF!');
								swfty = _swfty;
								swftySaveInput.disabled = false;
								
								SWFTY.renderSWFTY(swfty, function() {
									SWFTY.renderMC(namesInput.value);
									stressInput.disabled = false;
									namesInput.disabled = false;
								});
							});
						});
					};
				})(f);
				reader.readAsArrayBuffer(f);

				// Only one file
				break;
			}
		}

		function handleFileSave(evt) {
			if (swfty != null && exporter != null) {
				saveAs(new Blob([swfty], {type: "application/octet-stream"}), exporter.name + '.swfty');
			}
		}

		function handleAbstractsSave(evt) {
			if (exporter != null) {
				var abstracts = SWFTY.exportAbstracts(exporter);
				saveAs(new Blob([abstracts], {type: "text/plain;charset=utf-8"}), exporter.name + '.hx');
			}
		}

		function handleNameSelect(evt) {
			if (exporter != null) {
				SWFTY.renderMC(namesInput.value);
			}
		}

		function handleStress(evt) {
			if (exporter != null) {
				SWFTY.stress();
			}
		}

		namesInput.addEventListener('change', handleNameSelect, false);
		swfFileInput.addEventListener('input', handleFileSelect, false);
		swftySaveInput.addEventListener('click', handleStress, false);
		abstractsSaveInput.addEventListener('click', handleAbstractsSave, false);
		stressInput.addEventListener('click', handleStress, false);
	</script>
	
</body>
</html>