Change hash tag. Thumbs on albums.

3 files changed, 75 insertions, 9 deletions

diff --git a/scanner/CachePath.py b/scanner/CachePath.py
index c9c19fc..0d3032b 100644
--- a/scanner/CachePath.py
+++ b/scanner/CachePath.py
@@ -14,7 +14,11 @@ def trim_base_custom(path, base):
 def trim_base(path):
 	return trim_base_custom(path, trim_base.base)
 def cache_base(path):
-	path = trim_base(path).replace('/', '-').replace(' ', '_')
+	path = trim_base(path).replace('/', '-').replace(' ', '_').replace('(', '').replace(')', '').replace('#', '').replace('[', '').replace(']', '').replace('"', '').replace("'", '').replace('_-_', '-').lower()
+	while path.find("--") != -1:
+		path = path.replace("--", "-")
+	while path.find("__") != -1:
+		path = path.replace("__", "_")
 	if len(path) == 0:
 		path = "root"
 	return path
diff --git a/web/css/000-controls.css b/web/css/000-controls.css
index 15e8380..e432d35 100644
--- a/web/css/000-controls.css
+++ b/web/css/000-controls.css
@@ -39,16 +39,19 @@ a:hover {
 	padding: 0;
 }
 #subalbums {
+	padding-top: 1.5em;
 }
 .album-button {
 	float: left;
 	display: block;
-	width: 138px;
-	height: 138px;
-	margin: 5px;
+	width: 150px;
+	height: 60px;
 	text-align: center;
 	font-style: italic;
-	border: 1px #86A1B6 dotted;
+	font-size: 12px;
+	background-repeat: no-repeat;
+	background-position: top;
+	padding-top: 150px;
 }
 
 
diff --git a/web/js/010-control.js b/web/js/010-control.js
index a55596e..3fca3be 100644
--- a/web/js/010-control.js
+++ b/web/js/010-control.js
@@ -4,7 +4,23 @@ $(document).ready(function() {
 			return "root";
 		if (path[0] == '/')
 			path = path.substring(1);
-		return path.replace(/ /g, "_").replace(/\//g, "-");
+		path = path
+			.replace(/ /g, "_")
+			.replace(/\//g, "-")
+			.replace(/\(/g, "")
+			.replace(/\)/g, "")
+			.replace(/#/g, "")
+			.replace(/\[/g, "")
+			.replace(/\]/g, "")
+			.replace(/"/g, "")
+			.replace(/'/g, "")
+			.replace(/_-_/g, "-")
+			.toLowerCase();
+		while (path.indexOf("--") != -1)
+			path = path.replace(/--/g, "-");
+		while (path.indexOf("__") != -1)
+			path = path.replace(/__/g, "_");
+		return path;
 	}
 	function imagePath(image, path, size, square) {
 		var suffix;
@@ -14,6 +30,9 @@ $(document).ready(function() {
 			suffix = size.toString();
 		return "cache/" + cachePath(path + "/" + image + "_" + suffix + ".jpg");
 	}
+	function escapeId(id) {
+		return id.replace(/\./g, "\\.").replace(/,/g, "\\,");
+	}
 	function loadAlbum() {
 		if (current_album_cache in album_cache) {
 			albumLoaded(album_cache[current_album_cache]);
@@ -73,9 +92,20 @@ $(document).ready(function() {
 		else
 			$("#subalbums-title").hide();
 		var subalbums = "";
-		for (var i = current_album.albums.length - 1; i >= 0; --i)
-			subalbums += "<a href=\"#" + cachePath(current_album.path + "/" + current_album.albums[i].path) + "\"><div class=\"album-button\">" + current_album.albums[i].path + "</div></a>";
+		var thumbFinderList = new Array();
+		for (var i = current_album.albums.length - 1; i >= 0; --i) {
+			var path = cachePath(current_album.path + "/" + current_album.albums[i].path);
+			var id = "album-" + path;
+			subalbums += "<a href=\"#" + path + "\"><div id=\"" + id + "\" class=\"album-button\">" + current_album.albums[i].path + "</div></a>";
+			thumbFinderList.push({ path: path, id: escapeId(id) });
+		}
 		$("#subalbums").html(subalbums);
+		for (var i = 0; i < thumbFinderList.length; ++i)
+			(function(thumb) {
+				albumThumbFinder(thumb.path, function(photo, album) {
+					$("#" + thumb.id).css("background-image", "url(" + imagePath(photo.name, album.path, 150, true) + ")");
+				});
+			})(thumbFinderList[i]);
 		
 		$("#album-view").removeClass("photo-view-container");
 		$("#subalbums").show();
@@ -115,7 +145,7 @@ $(document).ready(function() {
 		$("#album-view").addClass("photo-view-container");
 		$("#subalbums").hide();
 		$("#photo-view").show();
-		var thumb = $("#thumb-" + current_photo_cache.replace(/\./g, "\\."));
+		var thumb = $("#thumb-" + escapeId(current_photo_cache));
 		var scroller = $("#album-view");
 		scroller.stop();
 		scroller.animate({ scrollLeft: thumb.position().left + scroller.scrollLeft() - scroller.width() / 2 + thumb.width() / 2 }, "slow");
@@ -132,6 +162,34 @@ $(document).ready(function() {
 		}
 		current_photo = current_album.photos[current_photo_index];
 	}
+	
+	function albumForThumbIteration(album, callback) {
+		album_cache[cachePath(album.path)] = album;
+		var index = Math.floor(Math.random() * (album.photos.length + album.albums.length));
+		if (index >= album.photos.length) {
+			index -= album.photos.length;
+			fetchAlbumForThumb(cachePath(album.path + "/" + album.albums[index].path), function(fetchedAlbum) {
+				albumForThumbIteration(fetchedAlbum, callback);
+			});
+		} else
+			callback(album.photos[index], album);
+	}
+	function fetchAlbumForThumb(album, callback) {
+		if (album in album_cache) {
+			callback(album_cache[album]);
+			return;
+		}
+		$.ajax({
+			type: "GET",
+			url: "cache/" + album + ".json",
+			error: function() { $(document.body).html("Couldn't fetch it."); },
+			success: callback
+		});
+	}
+	function albumThumbFinder(album, callback) {
+		fetchAlbumForThumb(album, function(fetchedAlbum) { albumForThumbIteration(fetchedAlbum, callback); });
+	}
+	
 	var current_album_cache = null;
 	var current_photo_cache = null;
 	var current_album = null;
@@ -173,4 +231,5 @@ $(document).ready(function() {
 		}
 		return true;
 	});
+	alert("Hello. This is an obnoxious alert message. PhotoFloat is a work in progress. There are many kinks to be worked out.\n\nTODO:\n* display EXIF info in json\n* link to hi-res\n* sizing bugs\n* random thumbnail for album links\n\nSuggestions?");
 });