diff --git a/src/main/webapp/WEB-INF/velocity/edit.vm b/src/main/webapp/WEB-INF/velocity/edit.vm
index fba41e6..ca53e3c 100644
--- a/src/main/webapp/WEB-INF/velocity/edit.vm
+++ b/src/main/webapp/WEB-INF/velocity/edit.vm
@@ -6,12 +6,19 @@
   <meta name="viewport" content="width = 600" />
   <title>$entry.name</title>
 
+<style type="text/css" src="${assets}/jquery.ui.selectable.css"></style>
+
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
 
 <script type="text/javascript" src="${assets}/jeditable/jquery.autogrow.js"></script>
 <script type="text/javascript" src="${assets}/jeditable/jquery.jeditable.js"></script>
 <script type="text/javascript" src="${assets}/jeditable/jquery.jeditable.autogrow.js"></script>
 
+<script type="text/javascript" src="${assets}/jquery.ui.core.js"></script>
+<script type="text/javascript" src="${assets}/jquery.ui.widget.js"></script>
+<script type="text/javascript" src="${assets}/jquery.ui.mouse.js"></script>
+<script type="text/javascript" src="${assets}/jquery.ui.selectable.js"></script>
+
   <style type="text/css">
     body {
       font-size: 11px;
@@ -44,6 +51,16 @@
        margin: 10px;
     }
   </style>
+
+  <style type="text/css">
+#mylist .ui-selecting {
+    background: silver;
+}
+#mylist .ui-selected {
+    background: gray;
+}
+</style>
+
 <script type="text/javascript">
 $(document).ready(function() {
 
@@ -67,8 +84,52 @@ $(document).ready(function() {
       },
       onblur : "ignore"
   });
+
+  $("#mylist").selectable();
 })
 </script>
+
+<script type="text/javascript" src="${assets}/ccv/ccv.js"></script>
+<script type="text/javascript" src="${assets}/ccv/face.js"></script>
+<script type="text/javascript">
+
+function resizeCanvas(image, canvas) {
+	document.body.appendChild(image);
+	canvas.width = image.offsetWidth;
+	canvas.style.width = image.offsetWidth.toString() + "px";
+	canvas.height = image.offsetHeight;
+	canvas.style.height = image.offsetHeight.toString() + "px";
+	document.body.removeChild(image);
+}
+
+function detect(url) {
+	var image = new Image();
+	var canvas = document.getElementById("output");
+	var ctx = canvas.getContext("2d");
+	image.onload = function () {
+		/* call main detect_objects function */
+		var elapsed_time = (new Date()).getTime();
+		var comp = ccv.detect_objects({ "canvas" : ccv.grayscale(ccv.pre(image)),
+										"cascade" : cascade,
+										"interval" : 5,
+										"min_neighbors" : 1 });
+		document.getElementById("elapsed_time").innerHTML = ((new Date()).getTime() - elapsed_time).toString() + "ms";
+		resizeCanvas(image, canvas);
+		ctx.drawImage(image, 0, 0);
+		ctx.lineWidth = 3;
+		ctx.strokeStyle = "#f00";
+		/* draw detected area */
+		for (var i = 0; i < comp.length; i++)
+			ctx.strokeRect(comp[i].x, comp[i].y, comp[i].width, comp[i].height);
+	}
+	image.src = url; // "http://forkalsrud.org:8080/photo/album/photo/2010-07-Misc/P1000462.JPG?size=800";
+}
+
+</script>
+
+
+
+
 </head>
 <body>
 <h1>$entry.name</h1>
@@ -77,5 +138,23 @@ $(document).ready(function() {
 #set($thpath = $mapper.map(${entry.thumbnail.getPath()}))
     <div class="imgborder"><img class="picture" src="${base}${thpath}?size=${thmb}" border="0" width="${dim.width}" height="${dim.height}"/></a></div>
     <p class="caption">$!entry.caption</p>
+
+
+<hr/>
+<ul id="mylist">
+<li>hey</li>
+<li>he3</li>
+<li>he4</li>
+<li>he5</li>
+</ul>
+<input type="button" value="append" onclick="$('#mylist').append('<li>he5</li>');"/>
+<hr/>
+
+<input style="margin-left:16px" type="button" value="Detect" onclick="detect('${base}${thpath}?size=${thmb}')" />
+<br/>
+<div id="elapsed_time" style="margin-top:20px"></div>
+<div style="margin-top:20px"><canvas id="output"></canvas></div>
+
+
 </body>
 </html>
