diff --git a/src/main/java/org/forkalsrud/album/web/AlbumServlet.java b/src/main/java/org/forkalsrud/album/web/AlbumServlet.java
index e0993fa..89ce305 100644
--- a/src/main/java/org/forkalsrud/album/web/AlbumServlet.java
+++ b/src/main/java/org/forkalsrud/album/web/AlbumServlet.java
@@ -288,7 +288,8 @@ public class AlbumServlet
             req.setAttribute("entry", entry);
             req.setAttribute("thmb", new Integer(250));
             req.setAttribute("full", new Integer(800));
-            RequestDispatcher rd = req.getRequestDispatcher("/WEB-INF/velocity/photo.vm");
+            req.setAttribute("D", "$");
+            RequestDispatcher rd = req.getRequestDispatcher("/WEB-INF/velocity/dynamic.vm");
             rd.forward(req, res);
         } catch (Exception e) {
             throw new RuntimeException("sadness", e);
diff --git a/src/main/webapp/WEB-INF/velocity/dynamic.vm b/src/main/webapp/WEB-INF/velocity/dynamic.vm
new file mode 100644
index 0000000..40f86bc
--- /dev/null
+++ b/src/main/webapp/WEB-INF/velocity/dynamic.vm
@@ -0,0 +1,208 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+  <meta name="viewport" content="width = 600" />
+  <title>$entry.name</title>
+
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+
+<script type="text/javascript" src="${assets}/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
+<script type="text/javascript" src="${assets}/fancybox/jquery.easing-1.3.pack.js"></script>
+<script type="text/javascript" src="${assets}/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
+<script type="text/javascript" src="${assets}/flowplayer/flowplayer-3.0.3.min.js"></script>
+
+<link rel="stylesheet" href="${assets}/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
+
+
+  <style type="text/css">
+    body {
+      font-size: 11px;
+      font-family: "Lucida Grande", "Lucida Sans", Arial, sans-serif;
+      color: #6d6d6d;
+      background: #acc95f;
+      margin: 10px auto;
+      text-align: center;
+    }
+    h1 {
+      text-align: left;
+    }
+    form {
+      float: right;
+      display: inline;
+    }
+    h2 {
+      margin-left: 30px;
+      text-align: left;
+      clear: both;
+    }
+    a:link, a:visited {
+      text-decoration: none;
+      color: #4c4c4c;
+      font-weight: 700;
+    }
+    a:hover, a:focus {
+      text-decoration: underline;
+      color: #6a6a6a;
+    }
+    div.photo {
+      align: center;
+      height: 200px;
+      margin 8px;
+    }
+    div.grid {
+	     float: left;
+         #set($divheight = $thmb + 60)
+         #set($divwidth = $thmb + 25)
+         height: ${divheight}px;
+         max-height: ${divheight}px;
+         max-width: ${divwidth}px;
+         overflow: hidden;
+    }
+    img.picture {
+      box-shadow: 5px 5px 5px #777;
+      -webkit-box-shadow: 5px 5px 5px #777;
+      -moz-box-shadow: 5px 5px 5px #777;
+    }
+    div.imgborder {
+       margin: 10px;
+    }
+    .nav {
+      border: 0 none;
+      padding: 0px;
+      vertical-align: middle;
+    }
+    #fancybox-left, #fancybox-right {
+      bottom: 30px;
+    }
+  </style>
+<script type="text/javascript">
+
+$D(function() {
+
+  function formatTitle(title, currentArray, currentIndex, currentOpts) {
+    var captionElement = document.getElementById(title);
+    return captionElement.innerHTML;
+  }
+
+  function scale(w, h, max) {
+    if (w > h) {
+      return { w : Math.floor(max), h: Math.floor((max * h + max / 2) / w) };
+    } else {
+      return { w: Math.floor((max * w + max / 2) / h), h: Math.floor(max) };
+    }
+  }
+
+    ${D}.getJSON("${entry.name}" + '.json', function(data, textStatus) {
+
+    	$D("#name").html(data.name);
+
+    	var thmb = 250;
+    	var picSize = 800;
+    	var movieSize = 640;
+		
+		${D}.each(data.contents, function(idx, entry) {
+
+			var dim = scale(entry.width, entry.height, thmb);
+
+			var gridDiv = $("<div class=\"grid\">\n"
+				    + "   <span class=\"name\">" + entry.name + "</span><br/>\n"
+				    + "   <div class=\"imgborder\"><a class=\"ss\" id=\"ent" + idx + "\" href=\"${base}" + entry.path + "?size=" + picSize + "\" title=\"" + entry.name + "\">"
+				    + "<img class=\"picture\" src=\"${base}" + (entry.type == "movie" ? entry.path + ".frame" : entry.path) + "?size=" + thmb + "\" border=\"0\" width=\"" + dim.w + "\" height=\"" + dim.h + "\"/></a></div>\n"
+				    + "<p id=\"" + entry.name + "\" class=\"caption\"></p>\n" 
+				    + "</div>\n");
+            gridDiv.appendTo('body');
+
+		    var element = gridDiv.filter("a.ss");
+
+		    // $D("<p>" + entry.type + "</p>").appendTo("#dbg");
+
+		    switch (entry.type) {
+		    case "movie":
+			    var size = scale(entry.width, entry.height, movieSize);
+			    var href = "${base}" + escape(entry.path) + ".movie?size=" + movieSize;
+		        $D("#ent" + idx).attr("rel",  "album").attr("href", href).fancybox({
+		          'titlePosition' : 'inside',
+		          'transitionIn'  : 'elastic',
+		          'transitionOut' : 'elastic',
+		          'easingIn'      : 'easeInQuad',
+		          'easingOut'     : 'easeOutQuad',
+		          'titleFormat'   : formatTitle,
+		          'padding'       : 0,
+		          'href'          : "${assets}/flowplayer/flowplayer-3.0.3.swf",
+		          'width'         : size.w,
+		          'height'        : size.h,
+		          'type'          : 'swf',
+		          'swf'           : {
+		                   'allowfullscreen'  : 'true',
+		                   'wmode'    : 'transparent',
+		                   'flashvars':
+		                   "config={\
+			                    'clip': {\
+                                    'url': '" + href + "'\
+                                },\
+		                        'plugins': {\
+		                            'controls': {\
+		                                'url': '${assets}/flowplayer/flowplayer.controls-3.0.3.swf',\
+		                                'backgroundColor': 'transparent',\
+		                                'progressColor': 'transparent',\
+		                                'bufferColor': 'transparent',\
+		                                'play':true,\
+		                                'fullscreen':true,\
+		                                'autoHide': 'always'\
+		                            }\
+		                        }\
+		                   }"
+		              }
+		          });
+		          break;
+		    case "image":
+			    var largeDim = scale(entry.width, entry.height, picSize);
+			    $D("#ent" + idx).attr("rel",  "album").fancybox({
+		                  'titlePosition' : 'inside',
+		                  'transitionIn'  : 'elastic',
+		                  'transitionOut' : 'elastic',
+		                  'easingIn'      : 'easeInQuad',
+		                  'easingOut'     : 'easeOutQuad',
+		                  'titleFormat'   : formatTitle,
+		                  'width'         : largeDim.w,
+		                  'height'        : largeDim.h,
+		                  'type'          : "image",
+		                  'href'          : $("#ent" + idx).href
+		              });
+		        break;
+		    case "dir":
+		    	$D("#ent" + idx).attr("href", "${entry.name}/" + entry.name + ".album");
+		    	break;
+		    }
+
+		  });
+
+		});
+
+  var selectedImg = window.location.search;
+  var selectedPos = undefined;
+  if (/^\?focus=/.test(selectedImg)) {
+    selectedImg = selectedImg.substring('?focus='.length);
+    $D("a.ss").each(function(index) {
+      if (selectedImg == $(this).attr("title")) {
+        selectedPos = index;
+      }
+    });
+  }
+
+  if (selectedPos !== undefined) {
+    $D(gallery[selectedPos]).trigger('click');
+  }
+});
+</script>
+</head>
+<body>
+<form action="${base}/search" method="get"><input name="q" value="$!search"></form>
+#macro(navlink $entry)${base}$mapper.map(${entry.getPath()}).#if($entry.isFile())photo#{else}album#end#end
+#macro(navbutton $entry $direction)#if($entry)<a href="#navlink($entry)"><img class="nav" width="26" height="32" src="${assets}/${direction}.png"/></a>#else<img class="nav" width="26" height="32" src="${assets}/${direction}-inactive.png"/>#end#end
+<h1>#navbutton(${entry.prev()} "left")#navbutton(${entry.parent()} "up")#navbutton(${entry.next()} "right") $entry.name</h1>
+<hr/>
+</body>
+</html>
diff --git a/src/main/webapp/dynamic.html b/src/main/webapp/dynamic.html
index 55e5fb3..c0eafab 100644
--- a/src/main/webapp/dynamic.html
+++ b/src/main/webapp/dynamic.html
@@ -75,15 +75,15 @@
     #fancybox-left, #fancybox-right {
       bottom: 30px;
     }
-  </style> 
-<script type="text/javascript"> 
- 
+  </style>
+<script type="text/javascript">
+
 $(function() {
 
-    function formatTitle(title, currentArray, currentIndex, currentOpts) {
-        var captionElement = document.getElementById(title);
-        return captionElement.innerHTML;
-      }
+  function formatTitle(title, currentArray, currentIndex, currentOpts) {
+    var captionElement = document.getElementById(title);
+    return captionElement.innerHTML;
+  }
 
     function scale(w, h, max) {
         if (w > h) {
@@ -94,7 +94,7 @@ $(function() {
     }
 
 
-    $.getJSON('album/photos.json', function(data, textStatus) {
+    $.getJSON('album/Photos.json', function(data, textStatus) {
 
     	$("#name").html(data.name);
 
@@ -116,7 +116,7 @@ $(function() {
 
 		    var element = gridDiv.filter("a.ss");
 
-		    //$("<p>" + entry.type + "</p>").appendTo("#dbg");
+		    $("<p>" + entry.type + "</p>").appendTo("#dbg");
 
 		    switch (entry.type) {
 		    case "movie":
@@ -172,6 +172,9 @@ $(function() {
 		                  'href'          : $("#ent" + idx).href
 		              });
 		        break;
+		    case "dir":
+		    	$("#ent" + idx).attr("href", entry.name + ".album");
+		    	break;
 		    }
 
 		  });
@@ -199,7 +202,8 @@ $(function() {
 </head> 
 <body> 
 <form method="get"><input name="q" value=""></form> 
-<h1 id="name">2001-12-santabarbara</h1> 
+<h1 id="name">2008</h1> 
 <hr/>
+<div id="dbg"></div>
 </body> 
 </html>
