Embed resources into templates

res/include/img/spinner.svg

@@ -0,0 +1,33 @@
+<svg version="1.1"
+	class="svg-loader"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	x="0px"
+	y="0px"
+	viewBox="0 0 80 80"
+	xml:space="preserve">
+	<path
+		fill="#D43B11"
+		d="M10,40c0,0,0-0.4,0-1.1c0-0.3,0-0.8,0-1.3c0-0.3,0-0.5,0-0.8c0-0.3,0.1-0.6,0.1-0.9c0.1-0.6,0.1-1.4,0.2-2.1
+		c0.2-0.8,0.3-1.6,0.5-2.5c0.2-0.9,0.6-1.8,0.8-2.8c0.3-1,0.8-1.9,1.2-3c0.5-1,1.1-2,1.7-3.1c0.7-1,1.4-2.1,2.2-3.1
+		c1.6-2.1,3.7-3.9,6-5.6c2.3-1.7,5-3,7.9-4.1c0.7-0.2,1.5-0.4,2.2-0.7c0.7-0.3,1.5-0.3,2.3-0.5c0.8-0.2,1.5-0.3,2.3-0.4l1.2-0.1
+		l0.6-0.1l0.3,0l0.1,0l0.1,0l0,0c0.1,0-0.1,0,0.1,0c1.5,0,2.9-0.1,4.5,0.2c0.8,0.1,1.6,0.1,2.4,0.3c0.8,0.2,1.5,0.3,2.3,0.5
+		c3,0.8,5.9,2,8.5,3.6c2.6,1.6,4.9,3.4,6.8,5.4c1,1,1.8,2.1,2.7,3.1c0.8,1.1,1.5,2.1,2.1,3.2c0.6,1.1,1.2,2.1,1.6,3.1
+		c0.4,1,0.9,2,1.2,3c0.3,1,0.6,1.9,0.8,2.7c0.2,0.9,0.3,1.6,0.5,2.4c0.1,0.4,0.1,0.7,0.2,1c0,0.3,0.1,0.6,0.1,0.9
+		c0.1,0.6,0.1,1,0.1,1.4C74,39.6,74,40,74,40c0.2,2.2-1.5,4.1-3.7,4.3s-4.1-1.5-4.3-3.7c0-0.1,0-0.2,0-0.3l0-0.4c0,0,0-0.3,0-0.9
+		c0-0.3,0-0.7,0-1.1c0-0.2,0-0.5,0-0.7c0-0.2-0.1-0.5-0.1-0.8c-0.1-0.6-0.1-1.2-0.2-1.9c-0.1-0.7-0.3-1.4-0.4-2.2
+		c-0.2-0.8-0.5-1.6-0.7-2.4c-0.3-0.8-0.7-1.7-1.1-2.6c-0.5-0.9-0.9-1.8-1.5-2.7c-0.6-0.9-1.2-1.8-1.9-2.7c-1.4-1.8-3.2-3.4-5.2-4.9
+		c-2-1.5-4.4-2.7-6.9-3.6c-0.6-0.2-1.3-0.4-1.9-0.6c-0.7-0.2-1.3-0.3-1.9-0.4c-1.2-0.3-2.8-0.4-4.2-0.5l-2,0c-0.7,0-1.4,0.1-2.1,0.1
+		c-0.7,0.1-1.4,0.1-2,0.3c-0.7,0.1-1.3,0.3-2,0.4c-2.6,0.7-5.2,1.7-7.5,3.1c-2.2,1.4-4.3,2.9-6,4.7c-0.9,0.8-1.6,1.8-2.4,2.7
+		c-0.7,0.9-1.3,1.9-1.9,2.8c-0.5,1-1,1.9-1.4,2.8c-0.4,0.9-0.8,1.8-1,2.6c-0.3,0.9-0.5,1.6-0.7,2.4c-0.2,0.7-0.3,1.4-0.4,2.1
+		c-0.1,0.3-0.1,0.6-0.2,0.9c0,0.3-0.1,0.6-0.1,0.8c0,0.5-0.1,0.9-0.1,1.3C10,39.6,10,40,10,40z">
+		<animateTransform
+			attributeType="xml"
+			attributeName="transform"
+			type="rotate"
+			from="0 40 40"
+			to="360 40 40"
+			dur="0.6s"
+			repeatCount="indefinite"/>
+	</path>
+</svg>

res/include/script/ListNavigator.js

@@ -0,0 +1,229 @@
+/* global Viewer */
+
+var ListNavigator = {
+	length: 0,
+	position: 0,
+	data: [],
+	history: [],
+	shuffle: false,
+
+	nextItem: function(){
+		if(!Viewer.isList){
+			return;
+		}
+		if(this.shuffle){
+			this.randItem();
+			return;
+		}
+
+		if(this.position >= this.length){
+			this.position = 0;
+		}else{
+			this.position++;
+		}
+
+		this.setItem(this.position);
+	},
+
+	previousItem: function(){
+		if(!Viewer.isList){
+			return;
+		}
+
+		if(this.position === 0){
+			this.position = this.length - 1;
+		}else{
+			this.position--;
+		}
+
+		this.setItem(this.position);
+	},
+
+	randItem: function(){
+		if(!Viewer.isList){
+			return;
+		}
+
+		// Avoid viewing the same file multiple times
+		var rand;
+		do {
+			rand = Math.round(Math.random() * this.length);
+			console.log("rand is " + rand);
+		} while(this.inHistory(rand));
+
+		this.setItem(rand);
+	},
+
+	setItem: function(index){
+		if(index >= this.length){
+			this.position = 0;
+		}else{
+			this.position = index;
+		}
+
+		// Set the URL hash
+		location.hash = "item=" + this.position;
+		Viewer.setFile(this.data[this.position]);
+
+		this.addToHistory(index);
+
+		$("#list_navigator").find("*").removeClass("file_button_selected");
+		var selectedItem = $("#list_navigator div").eq(this.position);
+		selectedItem.addClass("file_button_selected");
+		var itemWidth = selectedItem.outerWidth(true);
+
+		// This centers the scroll bar exactly on the selected item
+		$("#list_navigator").animate(
+			{scrollLeft: ((this.position * itemWidth) + (itemWidth / 2)) - ($("#list_navigator").width() / 2)},
+			{duration: 1000, queue: false}
+		);
+
+		this.loadThumbnails(index);
+	},
+
+	addToHistory: function(index){
+		if(this.history.length >= (this.length - 6)){
+			this.history.shift();
+		}
+
+		this.history.push(index);
+	},
+
+	inHistory: function(index){
+		var i = $.inArray(index, this.history); // Returns -1 when the item is not found
+
+		return (i !== -1); // Return false when it's not in the array
+	},
+
+	toggleShuffle: function(){
+		this.shuffle = !this.shuffle; // :P
+
+		if(this.shuffle){
+			$("#btnShuffle > span").html(" Shuffle ☑"); // Check icon
+			$("#btnShuffle").addClass("button_highlight");
+		}else{
+			$("#btnShuffle > span").html(" Shuffle ☐"); // Empty checkbox
+			$("#btnShuffle").removeClass("button_highlight");
+		}
+	},
+
+	loadThumbnails: function(index){
+		var startPos = +index - 50;
+		var endPos = +index + 50;
+		// fyi, the + is to let javascript know it's actually a number instead of a string
+
+		if(startPos < 0){
+			startPos = 0;
+		}
+
+		if(endPos >= this.length){
+			endPos = this.length - 1;
+		}
+		console.log(endPos);
+
+		var navigatorItems = document.getElementById("list_navigator").children
+
+		for (i = startPos; i <= endPos; i++){
+			if (navigatorItems[i].innerHTML.includes("list_item_thumbnail")) {
+				continue; // Thumbnail already loaded
+			}
+
+			var thumb = "/api/file/" + this.data[i].id + "/thumbnail?width=48&height=48";
+			var name = this.data[i].name;
+
+			var itemHtml = "<img src=\"" + thumb + "\" "
+				+ "class=\"list_item_thumbnail\" alt=\"" + escapeHTML(name) + "\"/>"
+				+ escapeHTML(name);
+
+			navigatorItems[i].innerHTML = itemHtml;
+		}
+	},
+
+	init: function(data){
+		this.data = data;
+		this.length = data.length;
+
+		var listHTML = "";
+		data.forEach(function(item, i){
+			var filename;
+			if(item.name !== "null"){
+				filename = item.name;
+			}else{
+				filename = "Removed File";
+			}
+
+			listHTML += "<div class=\"file_button list_item\" "
+				+ "onClick=\"ListNavigator.setItem('" + i + "')\">"
+				+ escapeHTML(filename) + "<br>"
+				+ "</div>";
+		});
+		document.getElementById("list_navigator").innerHTML = listHTML;
+
+		var btnLastItem = document.createElement("button");
+		btnLastItem.innerText = "◀";
+		btnLastItem.setAttribute("id", "button_last_item");
+		btnLastItem.setAttribute("class", "button_highlight");
+		btnLastItem.setAttribute("onClick", "ListNavigator.previousItem();");
+
+		var btnNextItem = document.createElement("button");
+		btnNextItem.innerText = "▶";
+		btnNextItem.setAttribute("id", "button_next_item");
+		btnNextItem.setAttribute("class", "button_highlight");
+		btnNextItem.setAttribute("onClick", "ListNavigator.nextItem();");
+
+		var headerbar = document.getElementById("list_navigator_buttons");
+		headerbar.appendChild(btnLastItem);
+		headerbar.appendChild(btnNextItem);
+
+		// Add the list download button to the toolbar
+		var btnDownloadList = document.createElement("button");
+		btnDownloadList.setAttribute("id", "btnDownloadList");
+		btnDownloadList.setAttribute("class", "toolbar_button button_full_width");
+		btnDownloadList.setAttribute("onClick", "Toolbar.downloadList();");
+
+		var btnDownloadListImg = document.createElement("img");
+		btnDownloadListImg.setAttribute("src", "{{template `floppy_small.png`}}");
+		btnDownloadListImg.setAttribute("alt", "Download List");
+
+		var btnDownloadListText = document.createElement("span");
+		btnDownloadListText.innerHTML = "&nbsp;All Files";
+
+		btnDownloadList.appendChild(btnDownloadListImg);
+		btnDownloadList.appendChild(btnDownloadListText);
+		document.getElementById("btnDownload").after(btnDownloadList);
+
+		// Add the shuffle button to the toolbar
+		var btnShuffle = document.createElement("button");
+		btnShuffle.setAttribute("id", "btnShuffle");
+		btnShuffle.setAttribute("class", "toolbar_button button_full_width");
+		btnShuffle.setAttribute("onClick", "ListNavigator.toggleShuffle();");
+
+		var btnShuffleImg = document.createElement("img");
+		btnShuffleImg.setAttribute("src", "{{template `shuffle_small.png`}}");
+		btnShuffleImg.setAttribute("alt", "Shuffle playback order");
+
+		var btnShuffleText = document.createElement("span");
+		btnShuffleText.innerHTML = "&nbsp;Shuffle&nbsp;&#x2610;";
+
+		btnShuffle.appendChild(btnShuffleImg);
+		btnShuffle.appendChild(btnShuffleText);
+		document.getElementById("btnShare").after(btnShuffle);
+
+		// Make the navigator visible
+		document.getElementById("list_navigator").style.display = "inline-block";
+
+		// Skip to the file defined in the link hash
+		if(Number.isInteger(parseInt(getHashValue("item")))){
+			this.setItem(parseInt(getHashValue("item")));
+		}else{
+			this.setItem(0);
+		}
+	}
+};
+
+
+// Misc function, don't really know where else to put it
+function getHashValue(key) {
+	var matches = location.hash.match(new RegExp(key + '=([^&]*)'));
+	return matches ? matches[1] : null;
+}

res/include/script/Toolbar.js

@@ -0,0 +1,343 @@
+/*
+ * Time for a more Java-like approach.
+ *
+ *  Feel free to use this of course
+ *
+ *  Made by Fornax
+ */
+
+/* global Viewer */
+
+var Toolbar = {
+	visible: false,
+	toggle: function () {
+		if (this.visible) {
+			if (Sharebar.visible) {
+				Sharebar.toggle();
+			}
+
+			document.getElementById("toolbar").style.left = "-8em";
+			document.getElementById("filepreview").style.left = "0px";
+			document.getElementById("button_toggle_toolbar").classList.remove("button_highlight");
+
+			this.visible = false;
+		} else {
+			document.getElementById("toolbar").style.left = "0px";
+			document.getElementById("filepreview").style.left = "8em";
+			document.getElementById("button_toggle_toolbar").classList.add("button_highlight");
+
+			this.visible = true;
+		}
+	},
+	download: function () {
+		var triggerDL = function(){
+			document.getElementById("download_frame").src = "/api/file/" + Viewer.currentFile + "?download";
+		}
+
+		if (captchaKey === "a"){
+			// If the server doesn't support captcha there's no use in checking
+			// availability
+			triggerDL();
+			return;
+		}
+
+		$.getJSON(
+			apiEndpoint + "/file/" + Viewer.currentFile + "/availability"
+		).done(function(data){
+			if(data.success === true){
+				// Downloading is allowed, start the download
+				triggerDL();
+			}
+		}).fail(function(data){
+			if(data.responseJSON.success === false) {
+				var popupDiv = document.getElementById("captcha_popup");
+				var popupTitle = document.getElementById("captcha_popup_title");
+				var popupContent = document.getElementById("captcha_popup_content");
+				var popupCaptcha = document.getElementById("captcha_popup_captcha");
+
+				if(data.responseJSON.value === "file_rate_limited_captcha_required") {
+					popupTitle.innerText = "Rate limiting enabled!";
+					popupContent.innerText = "This file is using a suspicious "+
+						"amount of bandwidth relative to its popularity. To "+
+						"continue downloading this file you will have to "+
+						"prove that you're a human first.";
+				}else if(data.responseJSON.value === "virus_detected_captcha_required"){
+					popupTitle.innerText = "Malware warning!";
+					popupContent.innerText = "According to our scanning "+
+						"systems this file may contain a virus  of type '"+
+						data.responseJSON.extra+"'. You can continue "+
+						"downloading this file at your own risk, but you will "+
+						"have to prove that you're a human first.";
+				}
+
+				// Load the recaptcha script with a load function
+				$.getScript("https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit");
+
+				popupDiv.style.opacity = "1";
+				popupDiv.style.visibility = "visible";
+			}else{
+				// No JSON, try download anyway
+				triggerDL();
+			}
+		});
+	},
+	downloadList: function(){
+		if(!Viewer.isList){
+			return;
+		}
+		document.getElementById("download_frame").src = "/api/list/" + Viewer.listId + "/zip";
+	},
+	copyUrl: function () {
+		if(copyText(window.location.href)) {
+			console.log('Text copied');
+			$("#btnCopy>span").text("Copied!");
+			document.getElementById("btnCopy").classList.add("button_highlight")
+		} else {
+			console.log('Copying not supported');
+			$("#btnCopy>span").text("Error!");
+			alert("Your browser does not support copying text.");
+		}
+
+		// Return to normal
+		setTimeout(function(){
+			$("#btnCopy>span").text("Copy");
+			document.getElementById("btnCopy").classList.remove("button_highlight")
+		}, 60000);
+	},
+	setStats: function(views, downloads){
+		document.getElementById("stat_views").innerText = views
+		document.getElementById("stat_downloads").innerText = Math.round(downloads*10)/10;
+	}
+};
+
+
+var Sharebar = {
+	visible: false,
+
+	toggle: function(){
+		if (navigator.share) {
+			navigator.share({
+				title: Viewer.title,
+				text: "Download " + Viewer.title + " here",
+				url: window.location.href
+			});
+			return;
+		}
+
+		if (!Toolbar.visible){
+			Toolbar.toggle();
+		}
+
+		if(this.visible){
+			document.getElementById("sharebar").style.left = "-8em";
+			document.getElementById("btnShare").classList.remove("button_highlight")
+			this.visible = false;
+		}else{
+			document.getElementById("sharebar").style.left = "8em";
+			document.getElementById("btnShare").classList.add("button_highlight")
+			this.visible = true;
+		}
+	}
+};
+
+function copyText(text) {
+	// Create a textarea to copy the text from
+	var ta = document.createElement("textarea");
+	ta.setAttribute("readonly", "readonly")
+	ta.style.position = "absolute";
+	ta.style.left = "-9999px";
+	ta.value = text; // Put the text in the textarea
+
+	// Add the textarea to the DOM so it can be seleted by the user
+	document.body.appendChild(ta);
+	ta.select(); // Select the contents of the textarea
+	var success = document.execCommand("copy"); // Copy the selected text
+	document.body.removeChild(ta); // Remove the textarea
+	return success;
+}
+
+function loadCaptcha(){
+	grecaptcha.render("captcha_popup_captcha", {
+		sitekey: captchaKey,
+		theme: "dark",
+		callback: function(token){
+			document.getElementById("download_frame").src = "/api/file/" + Viewer.currentFile +
+				"?download&recaptcha_response="+token;
+
+			setTimeout(function(){
+				var popupDiv = document.getElementById("captcha_popup");
+				popupDiv.style.opacity = "0";
+				popupDiv.style.visibility = "hidden";
+			}, 1000)
+		}
+	});
+}
+
+var DetailsWindow = {
+	visible:       false,
+	fileID:        "",
+	graph:         0,
+	popupDiv:      document.getElementById("details_popup"),
+	detailsButton: document.getElementById("btnDetails"),
+	toggle: function () {
+		if (this.visible) {
+			this.popupDiv.style.opacity = "0"
+			this.popupDiv.style.visibility = "hidden"
+			this.detailsButton.classList.remove("button_highlight")
+			this.visible = false;
+		} else {
+			this.popupDiv.style.opacity = "1"
+			this.popupDiv.style.visibility = "visible"
+			this.detailsButton.classList.add("button_highlight")
+			this.visible = true;
+
+			// This is a workaround for a chrome bug which makes it so hidden
+			// windows can't be scrolled after they are shown
+			this.popupDiv.focus();
+
+			if (this.graph === 0) {
+				this.renderGraph();
+			}
+			this.updateGraph(this.fileID);
+		}
+	},
+	setDetails: function (file) {
+		var that = this;
+		if (Viewer.isList) {
+			// Lists give incomplete file information, so we have to request
+			// more details in the background. File descriptions only exist in
+			// lists, so for that we use the data provided in the page source
+			$.ajax({
+				dataType: "json",
+				url: apiEndpoint + "/file/" + file.id + "/info",
+				success: function(data){
+					that.fileID = data.id;
+					$("#info_file_details").html(
+						"<table>"
+						+ "<tr><td>Name<td><td>" + escapeHTML(data.name) + "</td></tr>"
+						+ "<tr><td>URL<td><td><a href=\"/u/" + data.id + "\">/u/" + data.id + "</a></td></tr>"
+						+ "<tr><td>Mime Type<td><td>" + escapeHTML(data.mime_type) + "</td></tr>"
+						+ "<tr><td>ID<td><td>" + data.id + "</td></tr>"
+						+ "<tr><td>Size<td><td class=\"bytecounter\">" + data.size + "</td></tr>"
+						+ "<tr><td>Bandwidth<td><td class=\"bytecounter\">" + data.bandwidth_used + "</td></tr>"
+						+ "<tr><td>Upload Date<td><td>" + data.date_upload + "</td></tr>"
+						+ "<tr><td>Description<td><td>" + escapeHTML(file.description) + "</td></tr>"
+						+ "</table>"
+					);
+					Toolbar.setStats(data.views, data.bandwidth_used/data.size);
+					if(that.visible) {
+						that.updateGraph(that.fileID);
+					}
+				}
+			});
+		} else {
+			this.fileID = file.id;
+			$("#info_file_details").html(
+				"<table>"
+				+ "<tr><td>Name<td><td>" + escapeHTML(file.name) + "</td></tr>"
+				+ "<tr><td>Mime Type<td><td>" + escapeHTML(file.mime_type) + "</td></tr>"
+				+ "<tr><td>ID<td><td>" + file.id + "</td></tr>"
+				+ "<tr><td>Size<td><td class=\"bytecounter\">" + file.size + "</td></tr>"
+				+ "<tr><td>Bandwidth<td><td class=\"bytecounter\">" + file.bandwidth_used + "</td></tr>"
+				+ "<tr><td>Upload Date<td><td>" + file.date_upload + "</td></tr>"
+				+ "</table>"
+			);
+			Toolbar.setStats(file.views, file.bandwidth_used/file.size);
+			if(this.visible) {
+				this.updateGraph(file.id);
+			}
+		}
+	},
+	updateGraph: function(fileID) {
+		var that = this;
+		console.log("updating graph "+fileID);
+		$.get(apiEndpoint+"/file/" + fileID + "/timeseries?interval=60?days=14", function(response){
+			console.log(response);
+			if (response.success) {
+				that.graph.data.labels = response.labels;
+				that.graph.data.datasets[0].data = response.downloads;
+				that.graph.data.datasets[1].data = response.views;
+				that.graph.update();
+			}
+		});
+	},
+	renderGraph: function() {
+		console.log("rendering graph");
+		Chart.defaults.global.defaultFontColor = "#b3b3b3";
+		Chart.defaults.global.defaultFontSize = 15;
+		Chart.defaults.global.defaultFontFamily = "Ubuntu";
+		Chart.defaults.global.aspectRatio = 2.5;
+		Chart.defaults.global.elements.point.radius = 0;
+		Chart.defaults.global.tooltips.mode = "index";
+		Chart.defaults.global.tooltips.axis = "x";
+		Chart.defaults.global.tooltips.intersect = false;
+		this.graph = new Chart(
+			document.getElementById('bandwidth_chart'),
+			{
+				type: 'line',
+				data: {
+					datasets: [
+						{
+							label: "Downloads",
+							backgroundColor: "rgba(64, 255, 64, .05)",
+							borderColor: "rgba(128, 255, 128, 1)",
+							borderWidth: 1.5,
+							lineTension: 0.1,
+							fill: true,
+							yAxisID: "y_bandwidth",
+						}, {
+							label: "Views",
+							backgroundColor: "rgba(64, 64, 255, .1)",
+							borderColor: "rgba(128, 128, 255, 1)",
+							borderWidth: 1.5,
+							lineTension: 0.1,
+							fill: true,
+							yAxisID: "y_views",
+						}
+					]
+				},
+				options: {
+					scales: {
+						yAxes: [
+							{
+								type: "linear",
+								display: true,
+								position: "left",
+								id: "y_bandwidth",
+								scaleLabel: {
+									display: true,
+									labelString: "Downloads"
+								},
+								gridLines: {
+									color: "rgba(100, 255, 100, .1)"
+								}
+							}, {
+								type: "linear",
+								display: true,
+								position: "right",
+								id: "y_views",
+								scaleLabel: {
+									display: true,
+									labelString: "Views"
+								},
+								gridLines: {
+									color: "rgba(128, 128, 255, .2)"
+								}
+							}
+						],
+						xAxes: [
+							{
+								ticks: {
+									maxRotation: 20
+								},
+								gridLines: {
+									display: false
+								}
+							}
+						]
+					}
+				}
+			}
+		);
+	}
+};

res/include/script/Viewer.js

@@ -0,0 +1,106 @@
+/* global ListNavigator, Toolbar, DetailsWindow */
+
+var Viewer = {
+	currentFile: "",
+	title: "", // Contains either the file name or list title
+	listId: "",
+	isList: false,
+	isFile: false,
+	initialized: false,
+
+	init: function(type, data){
+		if(this.initialized){
+			return;
+		}
+
+		// On small screens the toolbar takes too much space, so it collapses automatically
+		if($("#filepreview").width() > 500 && !Toolbar.visible){
+			Toolbar.toggle();
+		}
+
+		// The close button only works if the window has an opener. So we hide
+		// the button if it does not
+		if (window.opener === null && window.history.length !== 1) {
+			$("#button_close_file_viewer").remove();
+		}
+
+		if(type === "file"){
+			this.isFile = true;
+			this.currentFile = data.id;
+			this.title = data.name;
+			this.setFile(data);
+		} else if (type === "list") {
+			this.isList = true;
+			this.listId = data.id;
+			this.title = data.title;
+			ListNavigator.init(data.data);
+		}
+
+		this.initialized = true;
+	},
+	setFile: function(file){
+		this.currentFile = file.id;
+		var title = "";
+		if (this.isList) {
+			document.getElementById("file_viewer_headerbar_title").style.lineHeight = "1em";
+			document.getElementById("file_viewer_list_title").innerText = this.title;
+			document.getElementById("file_viewer_file_title").innerText = file.name;
+			document.title = this.title + " ~ " + file.name + " ~ PixelDrain";
+		} else {
+			document.getElementById("file_viewer_file_title").innerText = file.name;
+			document.title = file.name + " ~ PixelDrain";
+		}
+
+		$.get("/u/" + file.id + "/preview", function(response){
+			$("#filepreview").html(response);
+		});
+
+		DetailsWindow.setDetails(file);
+	}
+};
+
+// Against XSS attacks
+function escapeHTML(str) {
+    return String(str)
+		.replace(/&/g, '&')
+		.replace(/</g, '&lt;')
+		.replace(/>/g, '&gt;')
+		.replace(/"/g, '&quot;');
+}
+
+// Register keyboard shortcuts
+document.addEventListener("keydown", function(event){
+	if (event.ctrlKey || event.altKey) {
+		return // prevent custom shortcuts from interfering with system shortcuts
+	}
+
+	switch (event.which) {
+	case 65: // A or left arrow key go to previous file
+	case 37:
+		ListNavigator.previousItem();
+		break;
+	case 68: // D or right arrow key go to next file
+	case 39:
+		ListNavigator.nextItem();
+		break;
+	case 83:
+		if (event.shiftKey) {
+			Toolbar.downloadList(); // SHIFT + S downloads all files in list
+		} else {
+			Toolbar.download(); // S to download the current file
+		}
+		break;
+	case 82: // R to toggle list shuffle
+		ListNavigator.toggleShuffle();
+		break;
+	case 67: // C to copy to clipboard
+		Toolbar.copyUrl();
+		break;
+	case 73: // I to open the details window
+		DetailsWindow.toggle();
+		break;
+	case 81: // Q to close the window
+		window.close();
+		break;
+	}
+});

res/include/script/compiled/home.js

@@ -0,0 +1,385 @@
+var FinishedUpload = /** @class */ (function () {
+    function FinishedUpload() {
+    }
+    return FinishedUpload;
+}());
+var uploader = null;
+var finishedUploads = new Array();
+var totalUploads = 0;
+var queueDiv = document.getElementById("uploads_queue");
+var UploadProgressBar = /** @class */ (function () {
+    function UploadProgressBar(file) {
+        this.file = file;
+        this.name = file.name;
+        this.queueNum = totalUploads;
+        this.uploadDiv = document.createElement("a");
+        totalUploads++;
+        this.uploadDiv.classList.add("file_button");
+        this.uploadDiv.style.opacity = "0";
+        this.uploadDiv.innerText = "Queued\n" + this.file.name;
+        queueDiv.appendChild(this.uploadDiv);
+        // Browsers don't render the transition if the opacity is set and
+        // updated in the same frame. So we have to wait a frame (or more)
+        // before changing the opacity to make sure the transition triggers
+        var d = this.uploadDiv; // `this` stops working after constructor ends
+        window.setTimeout(function () { d.style.opacity = "1"; }, 100);
+    }
+    UploadProgressBar.prototype.onProgress = function (progress) {
+        this.uploadDiv.innerText = "Uploading... " + Math.round(progress * 1000) / 10 + "%\n" + this.file.name;
+        this.uploadDiv.style.background = 'linear-gradient('
+            + 'to right, '
+            + 'var(--file_background_color) 0%, '
+            + 'var(--highlight_color) ' + ((progress * 100)) + '%, '
+            + 'var(--file_background_color) ' + ((progress * 100) + 1) + '%)';
+    };
+    UploadProgressBar.prototype.onFinished = function (id) {
+        finishedUploads[this.queueNum] = {
+            id: id,
+            name: this.file.name
+        };
+        this.uploadDiv.style.background = 'var(--file_background_color)';
+        this.uploadDiv.href = '/u/' + id;
+        this.uploadDiv.target = "_blank";
+        var fileImg = document.createElement("img");
+        fileImg.src = apiEndpoint + '/file/' + id + '/thumbnail';
+        fileImg.alt = this.file.name;
+        var linkSpan = document.createElement("span");
+        linkSpan.style.color = "var(--highlight_color)";
+        linkSpan.innerText = window.location.hostname + "/u/" + id;
+        this.uploadDiv.innerHTML = ""; // Remove uploading progress
+        this.uploadDiv.appendChild(fileImg);
+        this.uploadDiv.appendChild(document.createTextNode(this.file.name));
+        this.uploadDiv.appendChild(document.createElement("br"));
+        this.uploadDiv.appendChild(linkSpan);
+    };
+    UploadProgressBar.prototype.onFailure = function (error) {
+        this.uploadDiv.innerHTML = ""; // Remove uploading progress
+        this.uploadDiv.style.background = 'var(--danger_color)';
+        this.uploadDiv.appendChild(document.createTextNode(this.file.name));
+        this.uploadDiv.appendChild(document.createElement("br"));
+        this.uploadDiv.appendChild(document.createTextNode("Upload failed after three tries:"));
+        this.uploadDiv.appendChild(document.createElement("br"));
+        this.uploadDiv.appendChild(document.createTextNode(error));
+    };
+    return UploadProgressBar;
+}());
+function handleUploads(files) {
+    if (uploader === null) {
+        uploader = new UploadManager();
+    }
+    for (var i = 0; i < files.length; i++) {
+        uploader.uploadFile(new UploadProgressBar(files.item(i)));
+    }
+}
+// List creation
+function createList(title, anonymous) {
+    if (uploader.uploading()) {
+        var cont = confirm("Some files have not finished uploading yet. Creating a list now " +
+            "will exclude those files.\n\nContinue?");
+        if (!cont) {
+            return;
+        }
+    }
+    var postData = {
+        "title": title,
+        "anonymous": anonymous,
+        "files": new Array()
+    };
+    for (var i = 0; i < finishedUploads.length; i++) {
+        postData.files.push({
+            "id": finishedUploads[i].id
+        });
+    }
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", apiEndpoint + "/list");
+    xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState !== 4) {
+            return;
+        }
+        var resp = JSON.parse(xhr.response);
+        if (xhr.status < 400) {
+            // Request is a success
+            var div = document.createElement("div");
+            div.className = "file_button";
+            div.innerHTML = '<img src="' + apiEndpoint + '/list/' + resp.id + '/thumbnail"/>'
+                + "List creation finished!<br/>"
+                + title + "<br/>"
+                + '<a href="/l/' + resp.id + '" target="_blank">' + window.location.hostname + '/l/' + resp.id + '</a>';
+            document.getElementById("uploads_queue").appendChild(div);
+            window.open('/l/' + resp.id, '_blank');
+        }
+        else {
+            console.log("status: " + xhr.status + " response: " + xhr.response);
+            var div = document.createElement("div");
+            div.className = "file_button";
+            div.innerHTML = "List creation failed<br/>"
+                + "The server responded with:<br/>"
+                + resp.message;
+            document.getElementById("uploads_queue").append(div);
+        }
+    };
+    xhr.send(JSON.stringify(postData));
+}
+// Form upload handlers
+// Relay click event to hidden file field
+document.getElementById("select_file_button").onclick = function () {
+    document.getElementById("file_input_field").click();
+};
+document.getElementById("file_input_field").onchange = function (evt) {
+    handleUploads(evt.target.files);
+    // This resets the file input field
+    document.getElementById("file_input_field").nodeValue = "";
+};
+/*
+ * Drag 'n Drop upload handlers
+ */
+document.ondragover = function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+};
+document.ondragenter = function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+};
+document.addEventListener('drop', function (e) {
+    if (e.dataTransfer && e.dataTransfer.files.length > 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        handleUploads(e.dataTransfer.files);
+    }
+});
+function copyText(text) {
+    // Create a textarea to copy the text from
+    var ta = document.createElement("textarea");
+    ta.setAttribute("readonly", "readonly");
+    ta.style.position = "absolute";
+    ta.style.left = "-9999px";
+    ta.value = text; // Put the text in the textarea
+    // Add the textarea to the DOM so it can be seleted by the user
+    document.body.appendChild(ta);
+    ta.select(); // Select the contents of the textarea
+    var success = document.execCommand("copy"); // Copy the selected text
+    document.body.removeChild(ta); // Remove the textarea
+    return success;
+}
+// Create list button
+document.getElementById("btn_create_list").addEventListener("click", function (evt) {
+    var title = prompt("You are creating a list containing " + finishedUploads.length + " files.\n"
+        + "What do you want to call it?", "My New Album");
+    if (title === null) {
+        return;
+    }
+    createList(title, false);
+});
+var btnCopyLinks = document.getElementById("btn_copy_links");
+btnCopyLinks.addEventListener("click", function () {
+    var text = "";
+    // Add the text to the textarea
+    for (var i = 0; i < finishedUploads.length; i++) {
+        // Example: https://pixeldrain.com/u/abcd1234: Some_file.png
+        text += window.location.protocol + "//" + window.location.hostname + "/u/" + finishedUploads[i].id +
+            " " + finishedUploads[i].name + "\n";
+    }
+    var defaultButtonText = btnCopyLinks.innerHTML;
+    // Copy the selected text
+    if (copyText(text)) {
+        btnCopyLinks.classList.add("button_highlight");
+        btnCopyLinks.innerHTML = "Links copied to clipboard!";
+        // Return to normal
+        setTimeout(function () {
+            btnCopyLinks.innerHTML = defaultButtonText;
+            btnCopyLinks.classList.remove("button_highlight");
+        }, 60000);
+    }
+    else {
+        btnCopyLinks.classList.add("button_red");
+        btnCopyLinks.innerHTML = "Copying links failed";
+        setTimeout(function () {
+            btnCopyLinks.innerHTML = defaultButtonText;
+            btnCopyLinks.classList.remove("button_red");
+        }, 60000);
+    }
+});
+var btnCopyBBCode = document.getElementById("btn_copy_bbcode");
+btnCopyBBCode.addEventListener("click", function () {
+    var text = "";
+    // Add the text to the textarea
+    for (var i = 0; i < finishedUploads.length; i++) {
+        // Example: [url=https://pixeldrain.com/u/abcd1234]Some_file.png[/url]
+        text += "[url=" + window.location.protocol + "//" + window.location.hostname +
+            "/u/" + finishedUploads[i].id + "]" +
+            finishedUploads[i].name + "[/url]\n";
+    }
+    var defaultButtonText = btnCopyBBCode.innerHTML;
+    // Copy the selected text
+    if (copyText(text)) {
+        btnCopyBBCode.classList.add("button_highlight");
+        btnCopyBBCode.innerHTML = "BBCode copied to clipboard!";
+        // Return to normal
+        setTimeout(function () {
+            btnCopyBBCode.innerHTML = defaultButtonText;
+            btnCopyBBCode.classList.remove("button_highlight");
+        }, 60000);
+    }
+    else {
+        btnCopyBBCode.classList.add("button_red");
+        btnCopyBBCode.innerHTML = "Copying links failed";
+        setTimeout(function () {
+            btnCopyBBCode.innerHTML = defaultButtonText;
+            btnCopyBBCode.classList.remove("button_red");
+        }, 60000);
+    }
+});
+var Cookie;
+(function (Cookie) {
+    function read(name) {
+        var result = new RegExp('(?:^|; )' + encodeURIComponent(name) + '=([^;]*)').exec(document.cookie);
+        return result ? result[1] : null;
+    }
+    Cookie.read = read;
+    function write(name, value, days) {
+        if (!days) {
+            days = 365 * 20;
+        }
+        var date = new Date();
+        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+        var expires = "; expires=" + date.toUTCString();
+        document.cookie = name + "=" + value + expires + "; path=/";
+    }
+    Cookie.write = write;
+    function remove(name) {
+        write(name, "", -1);
+    }
+    Cookie.remove = remove;
+})(Cookie || (Cookie = {}));
+var UploadManager = /** @class */ (function () {
+    function UploadManager() {
+        this.uploadQueue = new Array();
+        this.uploadThreads = new Array();
+        this.maxThreads = 3;
+    }
+    UploadManager.prototype.uploadFile = function (file) {
+        console.debug("Adding upload to queue");
+        this.uploadQueue.push(file);
+        if (this.uploadThreads.length < this.maxThreads) {
+            console.debug("Starting upload thread");
+            var thread_1 = new UploadWorker(this);
+            this.uploadThreads.push(thread_1);
+            setTimeout(function () { thread_1.start(); }, 0); // Start a new upload thread
+        }
+        else {
+            for (var i = 0; i < this.uploadThreads.length; i++) {
+                this.uploadThreads[i].start();
+            }
+        }
+    };
+    UploadManager.prototype.uploading = function () {
+        for (var i = 0; i < this.uploadThreads.length; i++) {
+            if (this.uploadThreads[i].isUploading()) {
+                return true;
+            }
+        }
+        return false;
+    };
+    UploadManager.prototype.grabFile = function () {
+        if (this.uploadQueue.length > 0) {
+            return this.uploadQueue.shift();
+        }
+        else {
+            return undefined;
+        }
+    };
+    return UploadManager;
+}());
+var UploadWorker = /** @class */ (function () {
+    function UploadWorker(manager) {
+        this.tries = 0;
+        this.uploading = false;
+        this.manager = manager;
+    }
+    UploadWorker.prototype.isUploading = function () { return this.uploading; };
+    UploadWorker.prototype.start = function () {
+        if (!this.uploading) {
+            this.newFile();
+        }
+    };
+    UploadWorker.prototype.newFile = function () {
+        var file = this.manager.grabFile();
+        if (file === undefined) { // No more files in the queue. We're finished
+            this.uploading = false;
+            console.debug("No files left in queue");
+            return; // Stop the thread
+        }
+        this.uploading = true;
+        this.tries = 0;
+        this.upload(file);
+    };
+    UploadWorker.prototype.upload = function (file) {
+        console.debug("Starting upload of " + file.name);
+        var that = this; // jquery changes the definiton of "this"
+        var formData = new FormData();
+        formData.append("name", file.name);
+        formData.append('file', file.file);
+        var xhr = new XMLHttpRequest();
+        xhr.open("POST", apiEndpoint + "/file");
+        xhr.timeout = 21600000; // 6 hours, to account for slow connections
+        // Update progess bar on progress
+        xhr.upload.addEventListener("progress", function (evt) {
+            if (evt.lengthComputable) {
+                file.onProgress(evt.loaded / evt.total);
+            }
+        });
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState !== 4) {
+                return;
+            }
+            console.log("status: " + xhr.status);
+            if (xhr.status >= 100 && xhr.status < 400) {
+                var resp = JSON.parse(xhr.response);
+                // Request is a success
+                file.onFinished(resp.id);
+                that.setHistoryCookie(resp.id);
+                that.newFile(); // Continue uploading on this thread
+            }
+            else {
+                var value, message;
+                if (xhr.status >= 400) {
+                    var resp = JSON.parse(xhr.response);
+                    value = resp.value;
+                    message = resp.message;
+                }
+                console.log("Upload error. status: " + xhr.status + " response: " + xhr.response);
+                if (that.tries === 3) {
+                    file.onFailure(value, message);
+                    setTimeout(function () { that.newFile(); }, 2000); // Try to continue
+                    return; // Upload failed
+                }
+                // Try again
+                that.tries++;
+                setTimeout(function () { that.upload(file); }, that.tries * 5000);
+            }
+        };
+        xhr.send(formData);
+    };
+    UploadWorker.prototype.setHistoryCookie = function (id) {
+        // Make sure the user is not logged in, for privacy. This keeps the
+        // files uploaded while logged in and anonymously uploaded files
+        // separated
+        if (Cookie.read("pd_auth_key") !== null) {
+            return;
+        }
+        var uc = Cookie.read("pduploads");
+        // First upload in this browser
+        if (uc === null) {
+            Cookie.write("pduploads", id + ".", undefined);
+            return;
+        }
+        if (uc.length > 2000) {
+            // Cookie is becoming too long, drop the oldest two files
+            uc = uc.substring(uc.indexOf(".") + 1).substring(uc.indexOf(".") + 1);
+        }
+        Cookie.write("pduploads", uc + id + ".", undefined);
+    };
+    return UploadWorker;
+}());

res/include/script/compiled/textupload.js

@@ -0,0 +1,187 @@
+var uploader = null;
+var TextUpload = /** @class */ (function () {
+    function TextUpload(file, name) {
+        this.file = file;
+        this.name = name;
+    }
+    TextUpload.prototype.onProgress = function (progress) { return; };
+    TextUpload.prototype.onFinished = function (id) {
+        setTimeout(window.location.href = "/u/" + id, 100);
+    };
+    TextUpload.prototype.onFailure = function (response, error) {
+        alert("File upload failed! The server told us this: " + response);
+    };
+    return TextUpload;
+}());
+function uploadText() {
+    var text = $("#textarea").val();
+    var blob = new Blob([text], { type: "text/plain" });
+    var filename = prompt("What do you want to call this piece of textual art?\n\n"
+        + "Please add your own file extension, if you want.", "Pixeldrain_Text_File.txt");
+    if (filename === null) {
+        return;
+    }
+    if (uploader === null) {
+        uploader = new UploadManager();
+    }
+    uploader.uploadFile(new TextUpload(blob, filename));
+}
+/**
+ * Prevent the Tab key from moving the cursor outside of the text area
+ */
+$(document).delegate('#textarea', 'keydown', function (e) {
+    var keyCode = e.keyCode || e.which;
+    if (keyCode === 9) {
+        e.preventDefault();
+        var start = $(this).get(0).selectionStart;
+        var end = $(this).get(0).selectionEnd;
+        // set textarea value to: text before caret + tab + text after caret
+        $(this).val($(this).val().substring(0, start)
+            + "\t"
+            + $(this).val().substring(end));
+        // put caret at right position again
+        $(this).get(0).selectionStart =
+            $(this).get(0).selectionEnd = start + 1;
+    }
+});
+// Upload the file when ctrl + s is pressed
+$(document).bind('keydown', function (e) {
+    if (e.ctrlKey && (e.which === 83)) {
+        e.preventDefault();
+        uploadText();
+        return false;
+    }
+});
+var Cookie;
+(function (Cookie) {
+    function read(name) {
+        var result = new RegExp('(?:^|; )' + encodeURIComponent(name) + '=([^;]*)').exec(document.cookie);
+        return result ? result[1] : null;
+    }
+    Cookie.read = read;
+    function write(name, value, days) {
+        if (!days) {
+            days = 365 * 20;
+        }
+        var date = new Date();
+        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+        var expires = "; expires=" + date.toUTCString();
+        document.cookie = name + "=" + value + expires + "; path=/";
+    }
+    Cookie.write = write;
+    function remove(name) {
+        write(name, "", -1);
+    }
+    Cookie.remove = remove;
+})(Cookie || (Cookie = {}));
+var UploadManager = /** @class */ (function () {
+    function UploadManager() {
+        this.uploadQueue = new Array();
+        this.uploadThreads = new Array();
+        this.maxThreads = 3;
+    }
+    UploadManager.prototype.uploadFile = function (file) {
+        console.debug("Adding upload to queue");
+        this.uploadQueue.push(file);
+        if (this.uploadThreads.length < this.maxThreads) {
+            console.debug("Starting upload thread");
+            var thread_1 = new UploadWorker(this);
+            this.uploadThreads.push(thread_1);
+            setTimeout(function () { thread_1.start(); }, 0); // Start a new upload thread
+        }
+        else {
+            for (var i = 0; i < this.uploadThreads.length; i++) {
+                this.uploadThreads[i].start();
+            }
+        }
+    };
+    UploadManager.prototype.grabFile = function () {
+        if (this.uploadQueue.length > 0) {
+            return this.uploadQueue.shift();
+        }
+        else {
+            return undefined;
+        }
+    };
+    return UploadManager;
+}());
+var UploadWorker = /** @class */ (function () {
+    function UploadWorker(manager) {
+        this.tries = 0;
+        this.uploading = false;
+        this.manager = manager;
+    }
+    UploadWorker.prototype.start = function () {
+        if (!this.uploading) {
+            this.newFile();
+        }
+    };
+    UploadWorker.prototype.newFile = function () {
+        var file = this.manager.grabFile();
+        if (file === undefined) {
+            this.uploading = false;
+            console.debug("No files left in queue");
+            return; // Stop the thread
+        }
+        this.uploading = true;
+        this.tries = 0;
+        this.upload(file);
+    };
+    UploadWorker.prototype.upload = function (file) {
+        console.debug("Starting upload of " + file.name);
+        var formData = new FormData();
+        formData.append('file', file.file);
+        formData.append("name", file.name);
+        var that = this; // jquery changes the definiton of "this"
+        $.ajax({
+            url: "/api/file",
+            data: formData,
+            cache: false,
+            crossDomain: false,
+            contentType: false,
+            processData: false,
+            type: 'POST',
+            xhr: function () {
+                var xhr = new XMLHttpRequest();
+                xhr.upload.addEventListener("progress", function (evt) {
+                    if (evt.lengthComputable) {
+                        file.onProgress(evt.loaded / evt.total);
+                    }
+                }, false);
+                return xhr;
+            },
+            success: function (data) {
+                file.onFinished(data.id);
+                that.setHistoryCookie(data.id);
+                console.log("Done: " + data.id);
+                that.newFile(); // Continue uploading on this thread
+            },
+            error: function (xhr, status, error) {
+                console.log("status: " + status + " error: " + error);
+                if (that.tries === 3) {
+                    alert("Upload failed: " + status);
+                    file.onFailure(status, error);
+                    setTimeout(function () { that.newFile(); }, 2000); // Try to continue
+                    return; // Upload failed
+                }
+                // Try again
+                that.tries++;
+                setTimeout(function () { that.upload(file); }, that.tries * 3000);
+            }
+        });
+    };
+    UploadWorker.prototype.setHistoryCookie = function (id) {
+        var uc = Cookie.read("pduploads");
+        // First upload in this browser
+        if (uc === null) {
+            Cookie.write("pduploads", id + ".", undefined);
+            return;
+        }
+        if (uc.length > 2000) {
+            // Cookie is becoming too long, drop the oldest two files
+            uc = uc.substring(uc.indexOf(".") + 1).substring(uc.indexOf(".") + 1);
+        }
+        Cookie.write("pduploads", uc + id + ".", undefined);
+    };
+    return UploadWorker;
+}());

res/include/script/embedupload.css

@@ -0,0 +1,22 @@
+/* 
+    Created on : Oct 21, 2015, 1:15:03 PM
+    Author     : Fornax
+*/
+.uploadQueueSideBar{
+	
+}
+
+.uploadQueueToggleButton{
+	
+}
+
+.uploadNotification{
+	position: fixed;
+	background-color: #333;
+	border: 2px #555 outset;
+	
+	height: 100px;
+	width: 200px;
+	right: 10px;
+	bottom: 10px;
+}

res/include/script/embedupload.js

@@ -0,0 +1,14 @@
+/* 
+ * Made by Fornax
+ */
+
+$(document).ready(function () {
+	// Add the stylesheet
+	$("head").append('<link rel="stylesheet" type="text/css" href="/res/script/embedupload.css">');
+});
+
+var ModularUploader = {
+	doUpload: function(){
+		
+	}
+};

res/include/script/history.js

@@ -0,0 +1,52 @@
+var uploads;
+
+$(document).ready(function () {
+	var uploadString = $.cookie("pduploads");
+	uploadString = uploadString.slice(0, -1);
+	uploads = uploadString.split(".");
+
+	uploads.reverse();
+
+	var timeout = 250;
+	var itemcount = 0;
+	$.each(uploads, function (nr, id) {
+		setTimeout(function () {
+			$.ajax({
+				type: "GET",
+				dataType: "json",
+				url: apiEndpoint + "/file/" + id + "/info",
+				async: true,
+				success: function(data) {
+					historyAddItem(data);
+				},
+				error: function(data) {
+					historyAddItem(data.responseJSON);
+				}
+			});
+		}, timeout);
+
+		timeout = timeout + 100;
+		itemcount++;
+		if (itemcount > 1000) {
+			return false;
+		}
+	});
+});
+
+function historyAddItem(json) {
+	if(!json.success){return;}
+
+	var date = new Date(json.date_upload);
+
+	var uploadItem =  '<a href="/u/'+ json.id +'" target="_blank" class="file_button">'
+		+ '<img src="'+ apiEndpoint + json.thumbnail_href + '?width=80&height=80"'
+		+ "alt=\"" + json.name + "\" />"
+		+ '<span style="color: var(--highlight_color);">'+json.name+'</span>'
+		+ "<br/>"
+		+ date.getFullYear() + "-"
+		+ ("00" + (date.getMonth() + 1)).slice(-2) + "-"
+		+ ("00" + date.getDate()).slice(-2)
+		+ "</a>";
+
+	$("#uploadedFiles").append($(uploadItem).hide().fadeIn(500));
+}

res/include/script/openlist.js

@@ -0,0 +1,25 @@
+var listItems = new Array();
+
+function addToList(id, desc){
+	var listEntry = {id: id, desc: desc};
+
+	listItems.push(listEntry);
+}
+
+function openList(){
+    var arrayLength = listItems.length;
+    
+    var url = "/u/"
+	for (var i = 0; i < arrayLength; i++) {
+        if (i != 0) {
+            url = url + ","
+        }
+        url = url + listItems[i]["id"]
+    }
+    
+    window.open(url)
+}
+
+$("#btnOpenAsList").click(function (evt) {
+	openList();
+});

res/include/script/paste.js

@@ -0,0 +1,107 @@
+/**
+ * Made by Fornax
+ * Use if you need to
+ */
+
+function uploadText() {
+	var text = $("#textarea").val();
+	if(!text.endsWith("\n")){
+		text += "\n";
+	}
+
+	var blob = new Blob([text], {type: "text/plain"});
+
+	startFileUpload(blob);
+}
+
+/*
+ * Upload functions
+ */
+function startFileUpload(blob) {
+	formData = new FormData();
+	formData.append('file', blob);
+
+	var filename = prompt("What do you want to call this piece of textual art?\n\n"
+		+ "Please add your own file extension, if you want.",
+		"Pixeldrain_Text_File.txt");
+	
+	if(filename === null){
+		return;
+	}
+	
+	formData.append("name", filename);
+
+	jQuery.ajax({
+		url: "/api/file",
+		data: formData,
+		cache: false,
+		crossDomain: true,
+		contentType: false,
+		processData: false,
+		type: 'POST',
+		success: function (data) {
+			fileUploadComplete(data);
+		}
+	});
+}
+
+function fileUploadComplete(json) {
+	if (json.success) {
+		setHistoryCookie(json.id)
+		setTimeout(window.location.href = "/u/" + json.id, 100);
+	} else {
+		alert("File upload failed! The server told us this: " + json.message);
+	}
+}
+
+function setHistoryCookie(id){
+	uc = Cookie.get("pduploads");
+
+	// First upload in this browser
+	if (uc === null) {
+		Cookie.set("pduploads", id + ".");
+		return;
+	}
+
+	if (uc.length > 2000){
+		// Cookie is becoming too long, drop the oldest two files
+		uc = uc.substring(
+			uc.indexOf(".") + 1
+		).substring(
+			uc.indexOf(".") + 1
+		);
+	}
+	
+	Cookie.set("pduploads", uc + id + ".");
+}
+
+/**
+ * Prevent the Tab key from moving the cursor outside of the text area
+ */
+$(document).delegate('#textarea', 'keydown', function (e) {
+	var keyCode = e.keyCode || e.which;
+
+	if (keyCode === 9) {
+		e.preventDefault();
+		var start = $(this).get(0).selectionStart;
+		var end = $(this).get(0).selectionEnd;
+
+		// set textarea value to: text before caret + tab + text after caret
+		$(this).val($(this).val().substring(0, start)
+			+ "\t"
+			+ $(this).val().substring(end));
+
+		// put caret at right position again
+		$(this).get(0).selectionStart =
+			$(this).get(0).selectionEnd = start + 1;
+	}
+});
+
+// Upload the file when ctrl + s is pressed
+$(document).bind('keydown', function (e) {
+	if (e.ctrlKey && (e.which === 83)) {
+		e.preventDefault();
+		uploadText();
+		return false;
+	}
+});

res/include/style/layout.css

@@ -0,0 +1,490 @@
+/*
+    Created on : Jun 3, 2015, 9:33:11 AM
+    Author     : Fornax
+*/
+
+:root {
+	--highlight_border: inset 0px 0px 5px 1px var(--highlight_color), 0px 0px 1px 0px var(--highlight_color);
+}
+
+/* Fonts */
+
+@font-face {
+	font-family: 'default';
+	font-display: fallback;
+	font-style: normal;
+	font-weight: normal;
+	text-rendering: optimizeLegibility;
+	src:
+		local('Cantarell'),
+		local('Cantarell Regular'),
+		local('Cantarell, Regular'),
+		local('Cantarell-Regular'),
+		url("/res/misc/Cantarell-Regular.otf") format("opentype");
+}
+@font-face {
+	font-family: 'light';
+	font-display: fallback;
+	font-style: normal;
+	font-weight: normal;
+	text-rendering: optimizeLegibility;
+	src:
+		local('Cantarell Light'),
+		local('Cantarell, Light'),
+		local('Cantarell-Light'),
+		url("/res/misc/Cantarell-Light.otf") format("opentype");
+}
+
+/* Page rendering configuration */
+html, body {
+	overflow-x: hidden;
+}
+body{
+	background-color: #0d0d0d; /* Fallback */
+	background-color: var(--body_color);
+	background-repeat: repeat;
+	font-family: "default";
+	margin: 0;
+	line-height: 1.5em;
+	color: #bfbfbf; /* Fallback */
+	color: var(--text_color);
+	padding: 0;
+}
+
+/* Page layout elements */
+.page_wrapper {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+}
+
+.button_toggle_navigation {
+	position: fixed;
+	backface-visibility: hidden;
+	z-index: 300;
+	top: 0;
+	left: 0;
+	padding: 10px 20px 15px 10px;
+	font-size: 2em;
+	margin: 0;
+	background: var(--input_color);
+	border-radius: 0;
+	border-bottom-right-radius: 90%;
+	box-shadow: 2px 2px 8px -3px var(--shadow_color);
+}
+.page_navigation {
+	position: fixed;
+	backface-visibility: hidden;
+	z-index: 100;
+	width: 250px;
+	height: 100%;
+	left: 0;
+	float: left;
+	background-color: var(--layer_1_color);
+	padding: 20px 0 0.5em 0;
+	box-sizing: border-box;
+	overflow-y: auto;
+	overflow-x: hidden;
+	text-align: left;
+	box-shadow: inset -10px 0px 10px -10px var(--shadow_color);
+	transition: left 0.5s;
+}
+.page_body {
+	position: absolute;
+	z-index: 200;
+	right: 0;
+	height: auto;
+	left: 250px;
+	min-width: 300px;
+	display: inline-block;
+	text-align: center; /* Center the header and body */
+	overflow-y: auto;
+	overflow-x: hidden;
+	z-index: 50;
+	transition: left 0.5s;
+	padding: 50px 0 50px 0;
+}
+@media (max-width: 600px) {
+	.page_navigation {
+		left: -250px;
+	}
+	.page_body {
+		left: 0;
+		width: 100%;
+	}
+}
+
+.page_body > .page_content {
+	position: relative;
+	display: inline-block;
+	width: 100%;
+	height: auto;
+	padding: 20px 0 20px 0;
+	background-color: var(--layer_2_color);
+	box-shadow: 1px 1px 20px 0 var(--shadow_color);
+	box-sizing: border-box;
+	clear: both;
+}
+.page_body > .page_content > .limit_width {
+	position: relative;
+	display: inline-block;
+	max-width: 1000px;
+	width: 100%;
+	height: auto;
+	padding: 0;
+	box-sizing: border-box;
+	text-align: left;
+	word-break: break-word;
+	clear: both;
+}
+.page_body > h1 {
+	text-shadow: 1px 1px 25px #000000;
+}
+
+/* Page contents */
+
+.header_image{
+	width: 100%;
+	max-width: 1200px;
+	margin-top: 30px;
+	margin-bottom: 30px;
+}
+
+.page_navigation a {
+	float: none;
+	display: block;
+	box-sizing: border-box;
+	color: #bfbfbf; /* Fallback */
+	color: var(--text_color);
+	text-align: center;
+	padding: 6px 6px;
+	margin: 0.3em 15px 0.3em 15px;
+	font-family: "light";
+	font-size: 1.6em;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	transition: background-color 0.5s;
+	border-radius: 5px;
+}
+.page_navigation a:hover {
+	background-color: var(--input_color);
+	color: var(--input_text_color);
+	text-decoration: none;
+}
+
+.inset {
+	box-shadow: inset 1px 1px 20px 0 var(--shadow_color);
+}
+.checkers {
+	text-shadow: 0 0 20px #000000;
+	padding: 30px 10px 30px 10px;
+}
+body, .checkers {
+	background-image: url("{{bgPattern}}");
+}
+
+.highlight_dark,
+.highlight_middle,
+.highlight_light,
+.highlight_headerbar,
+.highlight_green,
+.highlight_blue,
+.highlight_red,
+.highlight_1,
+.highlight_2,
+.highlight_3,
+.highlight_4 {
+	position: relative;
+	width: auto;
+	height: auto;
+	box-sizing: border-box;
+	overflow: hidden;
+	text-align: center;
+	padding: .5em;
+}
+.highlight_dark, .highlight_1 {
+	background-color: var(--layer_1_color);
+	box-shadow: 1px 1px var(--layer_1_shadow) 0 var(--shadow_color);}
+.highlight_middle, .highlight_2 {
+	background-color: var(--layer_2_color);
+	box-shadow: 1px 1px var(--layer_2_shadow) 0 var(--shadow_color);}
+.highlight_light, .highlight_3 {
+	background-color: var(--layer_3_color);
+	box-shadow: 1px 1px var(--layer_3_shadow) 0 var(--shadow_color);}
+.highlight_headerbar, .highlight_4 {
+	background-color: var(--layer_4_color);
+	box-shadow: 1px 1px var(--layer_4_shadow) 0 var(--shadow_color);}
+.highlight_green  {
+	background-color: rgba(0, 255, 0, 0.05);
+	border-color: #00d000;}
+.highlight_blue   {
+	background-color: rgba(32, 32, 255, 0.2);
+	border-color: rgb(54, 54, 255);}
+.highlight_red    {
+	background-color: rgba(255, 0, 0, 0.1);
+	border-color: #B00000;}
+
+.highlight_green,
+.highlight_blue,
+.highlight_red {
+	border-top-width: 1px;
+	border-top-style: solid;
+	border-bottom-width: 1px;
+	border-bottom-style: solid;
+}
+
+/* Common elements */
+
+h1, h2, h3, h4, h5, h6 {
+	line-height: 1em;
+	margin-left: 10px;
+	margin-right: 10px;
+}
+h1{font-size: 2em;    font-family: "light";   font-weight: normal;}
+h2{font-size: 1.75em; font-family: "light";   font-weight: normal;}
+h3{font-size: 1.5em;  font-family: "light";   font-weight: normal;}
+h4{font-size: 1.25em; font-family: "default"; font-weight: normal;}
+h5{font-size: 1em;    font-family: "default"; font-weight: normal;}
+h6{font-size: .75em;  font-family: "default"; font-weight: normal;}
+h3, h2{border-bottom: 1px var(--layer_3_color_border) solid;} /* Differentiate it a bit, else it just looks like bold text */
+
+p, .indent {
+	margin: 10px;
+}
+
+hr{
+	height: 1px;
+	border: none;
+	background-color: var(--input_color);
+	margin: 16px 16px 16px 16px;
+}
+
+::-webkit-scrollbar{
+	width: 1em;  /* for vertical scrollbars */
+	height: 1em; /* for horizontal scrollbars */
+}
+::-webkit-scrollbar-track {
+	background: var(--scrollbar_background_color);
+}
+::-webkit-scrollbar-thumb {
+	background-color: var(--scrollbar_foreground_color);
+	border-radius: 0.5em;
+	border: 0.22em solid var(--scrollbar_background_color);
+}
+::-webkit-scrollbar-thumb:hover {
+	background-color: var(--scrollbar_hover_color);
+}
+::-webkit-scrollbar-corner{background: var(--scrollbar_background_color);}
+
+a       {color: var(--highlight_color); text-decoration: none;}
+a:hover {color: var(--highlight_color); text-decoration: underline;}
+
+.form{
+	margin-left: auto;
+	margin-right: auto;
+	text-align: left;
+	max-width: 40em;
+}
+table:not(.form) {border-collapse: collapse; width: 100%;}
+tr:not(.form)    {border-bottom: 1px var(--layer_2_color_border) solid;}
+tr > td          {padding: 0.5em;}
+@media(max-width: 30em) {
+	tr > td {
+		box-sizing: border-box;
+		float: left;
+		width: 100%;
+		padding: 0.5em;
+	}
+}
+
+pre{
+	padding: 2px;
+	border-bottom: 1px var(--layer_2_color_border) solid;
+	overflow-x: scroll;
+}
+
+.big_button{
+	width: 40%;
+	min-width: 200px;
+	max-width: 400px;
+	margin: 10px !important;
+	border-radius: 5px;
+	font-size: 1.8em;
+}
+
+.progress_bar{
+	position: relative;
+	width: 100%;
+	height: 0;
+	background-color: #555;
+	overflow: hidden;
+	color: #eeeeee;
+	text-align: left;
+	white-space: nowrap;
+}
+.progressbar_inner{
+	position: absolute;
+	top: 0;
+	width: 0%;
+	left: 0;
+	height: 100%;
+	background-color: var(--highlight_color);;
+	overflow: hidden;
+	color: #000;
+	white-space: nowrap;
+}
+.progress_text{
+	overflow: hidden;
+	width: 100%;
+	white-space: nowrap;
+}
+
+.file_button{
+	position: relative;
+	box-sizing: border-box;
+	width: 300px;
+	max-width: 90%;
+	height: 3.6em;
+	margin: 10px;
+	padding: 0;
+	overflow: hidden;
+	border-radius: 2px;
+	box-shadow: 2px 2px 8px -3px var(--shadow_color);
+	background-color: var(--file_background_color);
+	color: #bfbfbf; /* Fallback */
+	color: var(--text_color);
+	word-break: break-all;
+	text-align: left;
+	line-height: 1.2em;
+	display: inline-block;
+	transition: box-shadow 0.3s, opacity 2s;
+	white-space: normal;
+	text-overflow: ellipsis;
+	vertical-align: top;
+}
+.file_button:hover,
+.file_button_selected {
+	box-shadow: 0px 0px 3px 3px var(--highlight_color);
+	text-decoration: none;
+	color: #bfbfbf; /* Fallback */
+	color: var(--text_color);
+}
+.file_button > img{
+	max-height: 100%;
+	max-width: 25%;
+	margin-right: 5px;
+	float: left;
+	display: block;
+}
+
+/* Form fields */
+
+.form_input {width: 100%;}
+
+/* BUTTONS */
+button,
+.button,
+input[type="submit"],
+input[type="button"],
+input[type="color"],
+select {
+	display: inline-block;
+	box-sizing: border-box;
+	border-radius: 2px;
+	border: none;
+	margin: 3px;
+	background: linear-gradient(var(--input_color), var(--input_color_dark));
+	padding: .4em .5em .4em .5em;
+	box-shadow: 2px 2px 6px -3px var(--shadow_color);
+	font-size: 0.9em;
+	line-height: 1em;
+	overflow: hidden;
+	text-decoration: none;
+	color: #bfbfbf; /* Fallback */
+	color: var(--input_text_color);
+	outline: 0;
+	vertical-align: middle;
+	cursor: pointer;
+	transition: padding 0.25s, box-shadow 0.25s;
+}
+button:hover,
+.button:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover,
+input[type="color"]:hover,
+select:hover,
+button:focus,
+.button:focus,
+input[type="submit"]:focus,
+input[type="button"]:focus,
+input[type="color"]:focus,
+select:focus {
+	color: #bfbfbf; /* Fallback */
+	color: var(--input_text_color);
+	text-decoration: none;
+	box-shadow: var(--highlight_border), 2px 2px 6px -3px var(--shadow_color);
+}
+button:active,
+.button:active,
+input[type="submit"]:active,
+input[type="button"]:active,
+input[type="color"]:active,
+select:active{
+	background: linear-gradient(var(--input_color_dark), var(--input_color));
+	box-shadow: inset 4px 4px 8px var(--shadow_color);
+	padding: .6em .3em .2em .7em; /* Exactly .2em offset compared to the inactive padding to give a depth effect */
+}
+.button_full_width      {width: calc(100% - 6px);}
+.button_highlight       {background: linear-gradient(var(--highlight_color),      var(--highlight_color_dark)) !important; color: var(--highlight_text_color) !important;}
+.button_highlight:active{background: linear-gradient(var(--highlight_color_dark), var(--highlight_color)) !important;      color: var(--highlight_text_color) !important;}
+.button_red             {background: linear-gradient(var(--danger_color),         var(--danger_color_dark)) !important;    color: var(--highlight_text_color) !important;}
+.button_red:active      {background: linear-gradient(var(--danger_color_dark),    var(--danger_color)) !important;         color: var(--highlight_text_color) !important;}
+
+/* Dropdown list of the select tag */
+option{
+	background-color: var(--input_color_dark);
+	color: #bfbfbf; /* Fallback */
+	color: var(--text_color);
+}
+
+/* TEXT FIELDS */
+textarea,
+.groove,
+input[type="text"],
+input[type="password"],
+input[type="email"],
+input[type="number"]{
+	border: none;
+	box-sizing: border-box;
+	border-radius: 4px;
+	background: linear-gradient(var(--input_color_dark), var(--input_color));
+	box-shadow: inset 2px 2px 6px -3px var(--shadow_color);
+	padding: 3px 5px;
+	color: var(--input_text_color);
+	height: 26px;
+	font-size: 1em;
+	vertical-align: middle;
+	outline: 0;
+	transition: box-shadow 0.3s;
+}
+textarea:active,
+input[type="text"]:active,
+input[type="password"]:active,
+input[type="email"]:active,
+input[type="number"]:active,
+textarea:focus,
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="email"]:focus,
+input[type="number"]:focus{
+	box-shadow: var(--highlight_border), inset 3px 3px 6px -3px var(--shadow_color);
+}
+
+input[type=file]{
+	visibility: hidden;
+	position: static;
+	width: 0;
+	height: 0;
+}

res/include/style/listview_embed.css

@@ -0,0 +1,87 @@
+/* 
+    Created on : Jul 30, 2015, 12:46:39 PM
+    Author     : Fornax
+*/
+
+.file-container{
+	position: absolute;
+	top: 100px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	width: 100%;
+	overflow: hidden;
+	border: none;
+}
+
+.file-container-frame{
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	border: none;
+}
+
+#listNavigator{
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: -100px;
+	height: 58px;
+	background-color: #000;
+	border-bottom: 2px ridge #9FCF6C;
+	text-align: center;
+	overflow-x: hidden;
+	overflow-y: hidden;
+	z-index: 1000;
+}
+
+#listNavigatorItems{
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 100%;
+	white-space: nowrap;
+	overflow-x: scroll;
+	overflow-y: hidden;
+	border: none;
+	padding: 0 40px;
+	z-index: 1001;
+	
+}
+
+.listItem{
+	display: inline-block;
+	position: relative;
+	height: 92%;
+	width: 100px;
+	margin-right: 5px;
+	text-align: center;
+	border: #333 solid 2px;
+	font-size: 12px;
+	overflow: hidden;
+	cursor: pointer;
+}
+
+.listItemThumbnail{
+	position: relative;
+	max-width: 100%;
+	max-height: 74%;
+	margin: 0;
+}
+
+#arrow-left{
+	position: fixed;
+	height: 58px;
+	width: 25px;
+	left: 0;
+	z-index: 1002;
+}
+
+#arrow-right{
+	position: fixed;
+	height: 58px;
+	width: 25px;
+	right: 0;
+	z-index: 1002;
+}

res/include/style/viewer.css

@@ -0,0 +1,353 @@
+/*
+    Created on : May 22, 2015, 1:20:02 PM
+    Author     : Fornax
+*/
+
+/* Viewer container */
+.file_viewer {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	overflow: hidden;
+}
+
+/* Headerbar (row 1) */
+.file_viewer > .file_viewer_headerbar {
+	flex-grow: 0;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: row;
+	text-align: left;
+	padding: 8px;
+	z-index: 10;
+}
+
+/* Headerbar components */
+.file_viewer > .file_viewer_headerbar > * {
+	flex-grow: 0;
+	flex-shrink: 0;
+	margin-left: .4em;
+	margin-right: .4em;
+	display: inline-flex;
+}
+.file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title {
+	flex-grow: 1;
+	flex-shrink: 1;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	white-space: nowrap;
+	line-height: 2em;
+	text-overflow: ellipsis;
+}
+.file_viewer > .file_viewer_headerbar > .button_home::after {
+	content: "pixeldrain";
+}
+@media (max-width: 500px) {
+	.file_viewer > .file_viewer_headerbar > .button_home::after {
+		content: "pd";
+	}
+	.file_viewer > .file_viewer_headerbar > .list_navigator_buttons {
+		display: none;
+	}
+}
+.file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title > span {
+	flex-grow: 0;
+	flex-shrink: 0;
+	margin-right: 1em;
+}
+/* List Navigator (row 2) */
+.file_viewer > .list_navigator {
+	flex-grow: 0;
+	flex-shrink: 0;
+	position: relative;
+	display: none; /* Becomes visible if the page is a list */
+	width: 100%;
+	background-color: var(--layer_1_color);
+	box-shadow: 0 0 8px var(--shadow_color);
+	text-align: center;
+	line-height: 1em;
+	overflow-x: scroll;
+	overflow-y: hidden;
+	z-index: 50;
+	white-space: nowrap;
+}
+.file_viewer > .list_navigator > .list_item{
+	height: 2.6em !important;
+	width: 220px !important;
+}
+
+/* File preview area (row 3) */
+.file_viewer > .file_viewer_window {
+	flex-grow: 1;
+	flex-shrink: 1;
+	position: relative;
+	display: inline-block;
+	width: auto;
+	height: auto;
+	margin: 0;
+	z-index: 9;
+}
+.file_viewer > .file_viewer_window > .file_viewer_file_preview {
+	position: absolute;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	display: inline-block;
+	min-height: 100px;
+	min-width: 100px;
+	text-align: center;
+	vertical-align: middle;
+	transition: left 0.5s;
+	overflow: hidden;
+}
+
+/* Toolbars */
+.file_viewer > .file_viewer_window > .file_viewer_toolbar {
+	position: absolute;
+	width: 8em;
+	z-index: 49;
+	overflow: hidden;
+	float: left;
+	background-color: var(--layer_1_color);
+	left: -9em;
+	bottom: 0;
+	top: 0;
+	padding: 0;
+	text-align: left;
+	box-shadow: 1px 1px var(--layer_1_shadow) 0 var(--shadow_color);
+	transition: left 0.5s;
+}
+.file_viewer > .file_viewer_window > .file_viewer_sharebar{
+	position: absolute;
+	width: 7em;
+	left: -8em;
+	bottom: 0;
+	top: 0;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	float: left;
+	background-color: var(--layer_1_color);
+	box-shadow: 2px 2px 8px var(--shadow_color);
+	text-align: center;
+	z-index: 48;
+	overflow: hidden;
+	transition: left 0.5s;
+}
+
+/* =====================
+   == FILE CONTAINERS ==
+   =====================*/
+.image-container{
+	position: relative;
+	height: 100%;
+	width: 100%;
+	text-align: center;
+	overflow: hidden;
+}
+
+.image{
+	position: relative;
+	display: block;
+	margin: auto;
+	max-width: 100%;
+	max-height: 100%;
+}
+
+.text-container{
+	background: #333 none;
+	position: relative;
+	text-align: left;
+	height: 100%;
+	width: 100%;
+	padding: 5px 5px 5px 20px;
+	box-sizing: border-box;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+.text-container > pre {
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	overflow: hidden;
+
+}
+
+.pannable{
+	position: relative;
+	display: inline-block;
+	margin: auto;
+	max-width: 100%;
+	max-height: 100%;
+	cursor: move;
+	top: 50%;
+	transform: translateY(-50%);
+	-webkit-transform: translateY(-50%);
+}
+
+.center{
+	position: relative;
+	display: block;
+	margin: auto;
+	max-width: 100%;
+	max-height: 100%;
+	top: 50%;
+	transform: translateY(-50%);
+	-webkit-transform: translateY(-50%);
+}
+
+.drop-shadow{
+	box-shadow: var(--shadow_color) 10px 10px 50px;
+}
+
+/* ========================
+   || TOOLBAR COMPONENTS ||
+   ======================== */
+
+
+/* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
+.file_viewer_toolbar > div {
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	right: -30px;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+.file_viewer_toolbar > div > div {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 8em;
+	height: auto;
+}
+
+.toolbar_button{
+	text-align: left;
+}
+.toolbar_button > img {
+	width: 24px;
+	height: 24px;
+}
+.toolbar_button > span {
+	vertical-align: 6px;
+}
+
+.toolbar_label {
+	text-align: left;
+	padding-left: 10px;
+	font-size: 0.8em;
+	line-height: 0.7em;
+	margin-top: 0.5em;
+}
+
+/* =========================
+   || SHAREBAR COMPONENTS ||
+   ========================= */
+
+.sharebar-button {text-align: center;}
+
+/* =====================
+   || MISC COMPONENTS ||
+   ===================== */
+
+.popup {
+	position: absolute;
+	visibility: hidden;
+	display: flex;
+	flex-direction: column;
+	opacity: 0;
+	transition: visibility .5s, opacity .5s;
+	background-color: var(--layer_2_color);
+	border-color: var(--layer_2_color_border);
+	max-height: 100%;
+	max-width: 100%;
+	top: 20%;
+	left: 50%;
+	transform: translate(-50%, -20%);
+	padding: 0;
+	box-sizing: border-box;
+	text-align: left;
+	box-shadow: var(--shadow_color) 0px 0px 50px;
+}
+.popup > .highlight_light {
+	font-size: 1.2em;
+}
+.popup > .content_area {
+	flex: 1;
+	overflow-y: scroll;
+	padding: 10px;
+}
+
+.details_popup{
+	width: 1500px;
+	height: 800px;
+	z-index: 200;
+}
+.captcha_popup{
+	height: auto;
+	width: 450px;
+	z-index: 201;
+}
+#captcha_popup_captcha > div {
+	display: inline-block;
+}
+
+table {width: auto !important;}
+table > tbody > tr {border: none !important;}
+
+.corner-popup{
+	position: fixed;
+	background-color: var(--background_color);
+	right: 20px;
+	bottom: 20px;
+	width: fit-content;
+	height: fit-content;
+	overflow: hidden;
+	padding: 5px;
+
+	box-shadow: var(--shadow_color) 0px 0px 50px;
+	z-index: 200;
+}
+
+.bytecounter{
+	color: var(--text_color);
+	font-size: 16px;
+	font-family: 'Ubuntu', sans-serif;
+	line-height: 20px;
+	text-align: right;
+	display: inline-block;
+	background-image: url("/res/img/bytecounter.png");
+	background-position: top right;
+	width: 136px;
+	height: 36px;
+	padding: 0;
+	padding-right: 1px;
+}
+
+/* ====================
+   || LIST NAVIGATOR ||
+   ==================== */
+
+.file-container{
+	position: absolute;
+	top: 100px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	width: 100%;
+	overflow: hidden;
+	border: none;
+}
+
+.file-container-frame{
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	border: none;
+}

res/include/style/viewer_embed.css

@@ -0,0 +1,128 @@
+/* 
+    Created on : May 22, 2015, 1:20:02 PM
+    Author     : Fornax
+*/
+
+body{
+	background-color: #111;
+	background-image: url("img/checker.png");
+	background-repeat: repeat;
+	color: #eeeeee;
+	font-size: 16px;
+	font-family: 'Ubuntu', sans-serif;
+	margin: 0;
+	overflow: hidden;
+}
+
+a{
+	color: #9FCF6C;
+	text-decoration: none;
+}
+
+a:hover{
+	text-decoration: underline;
+	color: #9FCF6C;
+}
+
+::-webkit-scrollbar{
+	width: 10px;  /* for vertical scrollbars */
+	height: 10px; /* for horizontal scrollbars */
+}
+::-webkit-scrollbar-track{
+	background: #000;
+}
+::-webkit-scrollbar-thumb{
+	background-color: #444;
+}
+::-webkit-scrollbar-corner{
+	background: transparent;
+}
+
+button:active{
+	background-color: #111;
+}
+button:hover{
+	background-color: #333;
+}
+
+#filepreview{
+	position: absolute;
+	display: inline-block;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	min-height: 100px;
+	min-width: 100px;
+	text-align: center;
+	vertical-align: middle;
+}
+
+/* ===========================
+   == START FILE CONTAINERS ==
+   ===========================*/
+.image-container{
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	height: 100%;
+	width: 100%;
+	text-align: center;
+	overflow: hidden;
+}
+
+.image{
+	position: relative;
+	display: block;
+	margin: auto;
+	max-width: 100%;
+	max-height: 100%;
+}
+
+.text-container{
+	background: #333 none;
+	position: absolute;
+	overflow-y: scroll;
+	overflow-x: auto;
+	text-align: left;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	padding: 5px 5px 5px 20px;
+	box-sizing: border-box;
+}
+
+.pre-container{
+	white-space: pre-wrap;
+	word-wrap: break-word;
+}
+
+.pannable{
+	position: relative;
+	display: inline-block;
+	margin: auto;
+	max-width: 100%;
+	max-height: 100%;
+	cursor: move;
+	top: 50%;
+	transform: translateY(-50%);
+	-webkit-transform: translateY(-50%);
+}
+
+.center{
+	position: relative;
+	display: block;
+	margin: auto;
+	max-width: 100%;
+	max-height: 100%;
+	top: 50%;
+	transform: translateY(-50%);
+	-webkit-transform: translateY(-50%);
+}
+
+.drop-shadow{
+	box-shadow: #000 10px 10px 50px;
+}