Move static resources up one level

res/static/viewer-scripts/audio.js

@@ -0,0 +1,5 @@
+/* global ListNavigator */
+
+$("#audioPlayer").bind("ended", function(){
+	ListNavigator.nextItem();
+});

res/static/viewer-scripts/image.js

@@ -0,0 +1,61 @@
+// Image zoom-in script
+
+var zoomed = false;
+// When a user clicks the image
+$("#displayImg").on("dblclick doubletap", function (event) {
+	if (zoomed) {
+		$("#displayImg").css("max-width", "100%");
+		$("#displayImg").css("max-height", "100%");
+		$("#displayImg").css("top", "50%");
+		$("#displayImg").css("left", "auto");
+		$("#displayImg").css("transform", "translateY(-50%)");
+		$(".image-container").css("overflow", "hidden");
+		zoomed = false;
+	} else {
+		$("#displayImg").css("max-width", "none");
+		$("#displayImg").css("max-height", "none");
+		$("#displayImg").css("transform", "none");
+		$(".pannable").css("top", "0");
+		$(".image-container").css("overflow", "scroll");
+		zoomed = true;
+	}
+	
+	
+	return false;
+});
+
+// Image dragging around the screen
+
+var drag = {
+	x: 0,
+	y: 0,
+	state: false
+};
+
+$(".pannable").on("mousedown", function (e) {
+	if (!drag.state && e.which === 1 && zoomed) {
+		drag.x = e.pageX;
+		drag.y = e.pageY;
+		drag.state = true;
+
+		return false;
+	}
+});
+
+var img = $(".image-container");
+
+$(document).on("mousemove", function (e) {
+	if (drag.state) {
+		img.scrollLeft(img.scrollLeft() - (e.pageX - drag.x));
+		img.scrollTop(img.scrollTop() - (e.pageY - drag.y));
+
+		drag.x = e.pageX;
+		drag.y = e.pageY;
+	}
+});
+
+$(document).on("mouseup", function () {
+	if (drag.state) {
+		drag.state = false;
+	}
+});

res/static/viewer-scripts/image_1.js

@@ -0,0 +1,79 @@
+// Image zoom-in script
+
+var zoomed = false;
+// When a user clicks the image
+$("#displayImg").on("contextmenu", function (event) {
+	// Trigger on a right click
+	if (event.which === 3) {
+		if (zoomed) {
+			$(".pannable").css("max-width", "100%");
+			$(".pannable").css("max-height", "100%");
+			$(".pannable").css("top", "50%");
+			$(".pannable").css("left", "auto");
+			$(".pannable").css("transform", "translateY(-50%)");
+			zoomed = false;
+		} else {
+			$(".pannable").css("max-width", "none");
+			$(".pannable").css("max-height", "none");
+			$(".pannable").css("transform", "none");
+			$(".pannable").css("top", "0");
+			zoomed = true;
+		}
+
+		return false;
+	}
+});
+
+// Image dragging around the screen
+// Grabbed this script from stackoverflow, thanks Alexander Mistakidis!
+// http://stackoverflow.com/questions/22187130/panning-div-element-around-using-javascript
+// Edited to fit my needs
+var deltaX = 0;
+var deltaY = 0;
+var scale = 1.0;
+
+var drag = {
+	elem: null,
+	x: 0,
+	y: 0,
+	state: false
+};
+var delta = {
+	x: 0,
+	y: 0
+};
+
+$(".pannable").on("mousedown", function (e) {
+	if (!drag.state && e.which === 1) {
+		drag.elem = $('.pannable');
+		drag.x = e.pageX;
+		drag.y = e.pageY;
+		drag.state = true;
+
+		return false;
+	}
+});
+
+
+$(document).on("mousemove", function (e) {
+	if (drag.state) {
+		delta.x = e.pageX - drag.x;
+		delta.y = e.pageY - drag.y;
+
+		var cur_offset = $(drag.elem).offset();
+
+		$(drag.elem).offset({
+			left: (cur_offset.left + delta.x),
+			top: (cur_offset.top + delta.y)
+		});
+
+		drag.x = e.pageX;
+		drag.y = e.pageY;
+	}
+});
+
+$(document).on("mouseup", function () {
+	if (drag.state) {
+		drag.state = false;
+	}
+});

res/static/viewer-scripts/video.js

@@ -0,0 +1,5 @@
+/* global ListNavigator */
+
+$("#videoPlayer").bind("ended", function(){
+	ListNavigator.nextItem();
+});