{% extends "base.html" %}

{% block title %}
	Upload World Backgrounds | Our World of Text
{% endblock %}

{% block header %}
	<h1>Upload World Backgrounds</h1>
	<span><a href="/administrator/">« Back to Admin Panel</a></span>
{% endblock %}

{% block content %}
	<div class="content_set" style="width: auto; display: table;">
		<div class="content_set_title">Backgrounds</div>
		<div class="content_set_content">
			<table>
				<tbody>
					<tr style="font-weight: bold;">
						<th>
							ID
						</th>
						<th>
							Image
						</th>
						<th>
							Mime
						</th>
						<th>
							Name
						</th>
						<th>
							Date Created
						</th>
						<th>
							Size (bytes)
						</th>
					</tr>
					{% for img in images %}
						<tr>
							<td>
								{{ img.id }}
							</td>
							<td>
								<a href="/other/backgrounds/{{ img.name }}/">
									<image src="/other/backgrounds/{{ img.name }}/" style="width: 32px; height: 32px;"></image>
								</a>
							</td>
							<td>
								{{ img.mime }}
							</td>
							<td>
								<a href="/other/backgrounds/{{ img.name }}/">/other/backgrounds/{{ img.name }}/</a>
							</td>
							<td>
								{{ img.date_created }}
							</td>
							<td>
								{{ img.len }}
							</td>
						</tr>
					{% endfor %}
				</tbody>
			</table>
		</div>
	</div>
	<div class="content_set">
		<div class="content_set_title">Upload</div>
		<div class="content_set_content">
			<div>
				<label>Image Name: </label><input id="img_name" maxlength="256">
				<div>
					<span>
						Type:
					</span>
					<input type="radio" id="rd_png" name="rd_type" checked><label>PNG</label>
					<input type="radio" id="rd_jpg" name="rd_type"><label>JPEG</label>
				</div>
				<input type="file" id="back_input">
				<button style="float: right;" onclick="upload_background();">Upload</button>
			</div>
			<span style="color: red; display: none;" id="server_error"></span>
			<span style="display: none;" id="server_success"></span>
			<span style="display: none;" id="server_pending">Uploading...</span>
		</div>
	</div>
	<script>
		var csrftoken = "{{csrftoken}}";

		var back_input = document.getElementById("back_input");
		var img_name = document.getElementById("img_name");
		var rd_png = document.getElementById("rd_png");
		var rd_jpg = document.getElementById("rd_jpg");
		var server_error = document.getElementById("server_error");
		var server_success = document.getElementById("server_success");
		var server_pending = document.getElementById("server_pending");
		var is_uploading = false;
		var img_data;
		back_input.onchange = function(e) {
			if(!back_input.files.length) return;
			var fReader = new FileReader();
			fReader.onload = function() {
				img_data = new Uint8Array(fReader.result);
				var name = back_input.files[0].name;
				var ext = name.split(".").slice(-1)[0].toLowerCase();
				if(!img_name.value) img_name.value = name;
				if(ext == "png") {
					rd_png.checked = true;
					rd_jpg.checked = false;
				} else if(ext == "jpg" || ext == "jpeg") {
					rd_png.checked = false;
					rd_jpg.checked = true;
				}
			}
			fReader.readAsArrayBuffer(back_input.files[0]);
		}
		function upload_background() {
			if(!img_data || is_uploading || !img_name.value) return;
			is_uploading = true;
			server_error.style.display = "none";
			server_success.style.display = "none";
			server_pending.style.display = "";
			var name = img_name.value;
			var is_png = rd_png.checked;
			var is_jpg = rd_jpg.checked;
			var len = name.length;
			var img_len = img_data.length;
			var data = new Uint8Array(3 + len + img_len);
			data[0] = len;
			for(var i = 0; i < len; i++) {
				data[1 + i] = name.charCodeAt(i);
			}
			data[1 + len] = is_png;
			data[2 + len] = is_jpg;
			for(var i = 0; i < img_len; i++) {
				data[3 + len + i] = img_data[i];
			}
			var xhr = new XMLHttpRequest();
			xhr.open("POST", "/administrator/backgrounds/", true);
			xhr.setRequestHeader("X-CSRF-Token", csrftoken);
			xhr.onload = function() {
				server_pending.style.display = "none";
				img_name.value = "";
				is_uploading = false;
				var res = xhr.responseText;
				if(res == "DONE") {
					server_success.style.display = "";
					server_success.innerText = "File \"" + name + "\" uploaded successfully.";
				} else {
					server_error.style.display = "";
					var err_msg = "Error";
					if(res == "NAME") {
						err_msg = "The file name already exists.";
					}
					server_error.innerText = err_msg;
				}
			}
			xhr.send(data);
		}
	</script>
{% endblock %}