Add single photo pages, navigateable by arrow keys and touch gestures.

public/js/photonav.js

@@ -0,0 +1,72 @@
+function enableKeyDownNavigation() {
+	document.addEventListener("keydown", function (event) {
+		if (event.keyCode == 37) {
+			var target = document.getElementById("previous_photo").href;
+			if (target) {
+				event.preventDefault();
+				document.location.href = target;
+			}
+		}
+		else if (event.keyCode == 39) {
+			var target = document.getElementById("next_photo").href;
+			if (target) {
+				event.preventDefault();
+				document.location.href = target;
+			}
+		}
+	}, false);
+}
+
+function disableKeyDownPropagation(obj) {
+	for (var x = 0; x < obj.length; x++) {
+		obj[x].addEventListener("keydown", function (event) {
+			if (event.keyCode == 37 || event.keyCode == 39) {
+				event.stopPropagation();
+			}
+		});
+	}
+}
+
+function enableTouchNavigation() {
+	var x_down = null;
+	var y_down = null;
+
+	document.addEventListener('touchstart', function(event) {
+		x_down = event.touches[0].clientX;
+		y_down = event.touches[0].clientY;
+	}, false);
+
+	document.addEventListener('touchmove', function(event) {
+		if (!x_down || !y_down) {
+			return;
+		}
+
+		var x_diff = x_down - event.touches[0].clientX;
+		var y_diff = y_down - event.touches[0].clientY;
+
+		if (Math.abs(y_diff) > 50) {
+			return;
+		}
+
+		if (Math.abs(x_diff) > Math.abs(y_diff)) {
+			if (x_diff > 0) {
+				var target = document.getElementById("previous_photo").href;
+				if (target) {
+					event.preventDefault();
+					document.location.href = target;
+				}
+			} else {
+				var target = document.getElementById("next_photo").href;
+				if (target) {
+					event.preventDefault();
+					document.location.href = target;
+				}
+			}
+		}
+	}, false);
+}
+
+enableKeyDownNavigation();
+enableTouchNavigation();
+disableKeyDownPropagation(document.getElementsByTagName("textarea"));
+disableKeyDownPropagation(document.getElementsByTagName("input"));