diff --git a/ui/TODO.otl b/ui/TODO.otl
index c4f80086..5446d238 100755
--- a/ui/TODO.otl
+++ b/ui/TODO.otl
@@ -1,5 +1,5 @@
 Priority work
-	[_] 48% Preview II
+	[_] 52% Preview II
 		[X] 100% sorted images in ribbons
 			[X] 100% stage I: position the promoted/demoted image correctly
 			| and correct positioning on promote/demote
@@ -58,7 +58,7 @@ Priority work
 				[X] one (with zooming)
 			[X] single image mode with zooming
 			| ribbons are hidden
-		[_] 25% drag action...
+		[_] 25% drag/move action...
 			[_] basic infrastructure
 			[X] action: center current image
 			[_] while zoomed more than the screen
@@ -67,11 +67,22 @@ Priority work
 			[X] zooming
 			[X] navigation
 			[_] 0% actions
-				[_] shifting up to new ribbon pushes the current row down...
-		[_] 0% cleanup UI
+				[_] bug: shifting up to new ribbon pushes the current row down...
+		[_] 25% cleanup UI
 			[_] stretch viewer to screen
 			[_] fix single image mode
 			| need to center the image correctly...
+			[_] 55% add screen buttons for all actions...
+				[X] navigation
+				[X] actions
+				[_] zooming
+				[_] 20% zoom presets
+					[_] in
+					[_] out
+					[_] single
+					[_] three
+					[X] wide
+					| toggle...
 			[_] 0% layout
 				[_] tablet
 				| - buttons at sides
@@ -90,8 +101,8 @@ Priority work
 				[_] basic screen
 				[_] keyboard config (low priority)
 				[_] view mode (low priority)
-			[_] 0% debug mode
-				[_] toggle cross-hair
+			[X] 100% debug mode
+				[X] toggle cross-hair
 		[_] 0% optional features...
 	[_] 0% misc
 		[_] add sort/re-sort capability...
diff --git a/ui/gallery-prototype.js b/ui/gallery-prototype.js
index 826ac787..bb7dd7ef 100755
--- a/ui/gallery-prototype.js
+++ b/ui/gallery-prototype.js
@@ -28,18 +28,6 @@ function setupGestures(){
 			swipeUp: shiftImageUp,
 			swipeDown: shiftImageDown,
 		})
-		/* XXX jquery.mobile handlers... (with this I'm getting way too much bling)
-		.bind('swipeleft', function(e){
-			nextImage()
-			e.preventDefault()
-			return false
-		})
-		.bind('swiperight', function(e){
-			prevImage()
-			e.preventDefault()
-			return false
-		})
-		*/
 }
 
 
@@ -54,7 +42,6 @@ function setupControlElements(){
 	$('.demote').click(shiftImageUp)
 	$('.promote').click(shiftImageDown)
 	$('.toggle-wide').click(toggleWideView)
-	// XXX need to update this to real zooming...
 	$('.toggle-single').click(toggleRibbonView)
 }
 
@@ -96,15 +83,14 @@ function setCurrentImage(){
 }
 
 // center other ribbons relative to current image...
+// XXX only two ribbons are positioned at this point...
 function alignRibbons(){
-	// XXX only two ribbons are positioned at this point...
 	// XXX might be goot to move this to a more generic location...
 	var id = $('.current.image').attr('id')
 	var directions = ['prev', 'next']
 	for(var i in directions){
 		var ribbon = $('.current.ribbon')[directions[i]]('.ribbon')
 		if(ribbon.length == 1){
-			// XXX this is not optimal...
 			var img = getImageBefore(id, ribbon)
 			if(img != null){
 				alignRibbon(img, 'before')
@@ -118,42 +104,6 @@ function alignRibbons(){
 
 
 
-// XXX depricated...
-/*
-function handleImageClick(e) {
-	var cur = $(this)
-
-	// switch classes...
-	cur.parents().siblings().children(".image").removeClass("current")
-	cur.siblings(".image").removeClass("current")
-
-	cur.siblings().children(".image").removeClass("current")
-	cur.parents().siblings(".ribbon").removeClass("current")
-
-	cur.addClass("current")
-	cur.parents(".ribbon").addClass("current")
-
-
-	var container = cur.parents('.container')
-	var field = cur.parents(".field")
-
-	var image_offset = cur.offset()
-	var field_offset = field.offset()
-
-	// center the current image...
-	field.css({
-		left: field_offset.left - image_offset.left + (container.innerWidth() - cur.innerWidth())/2, 
-		top: field_offset.top - image_offset.top + (container.innerHeight() - cur.innerHeight())/2 
-	})
-
-
-	// XXX do I need this???
-	e.preventDefault();
-}
-*/
-
-
-
 // this sets the zooming factor used in manual zooming...
 var ZOOM_FACTOR = 2
 
@@ -272,6 +222,7 @@ function setViewerMode(mode){
 
 
 // ribbon/single view modes...
+// XXX CSS broken...
 function toggleRibbonView(){
 	if($('.single-image-mode').length > 0){
 		unsetViewerMode('single-image-mode')
@@ -283,18 +234,13 @@ function toggleRibbonView(){
 
 
 // wide view mode toggle...
-// XXX replace this with adequate zooming...
-// XXX broken...
 function toggleWideView(){
 	if($('.wide-view-mode').length > 0){
-		setContainerZoom(0.1)
-		//$('.viewer').addClass('wide-view-more')
-		//unsetViewerMode('wide-view-mode')
-	} else {
 		setContainerZoom(1)
-		//$('.viewer').removeClass('wide-view-more')
-		//unsetViewerMode('single-image-mode')
-		//setViewerMode('wide-view-mode')
+		$('.viewer').removeClass('wide-view-mode')
+	} else {
+		setContainerZoom(0.1)
+		$('.viewer').addClass('wide-view-mode')
 	}
 }
 
@@ -437,6 +383,7 @@ function getImageBefore_bin(id, ribbon){
 	return $(images[i])
 }
 
+// set the default search...
 var getImageBefore = getImageBefore_bin
 
 
@@ -459,6 +406,7 @@ function centerRibbonVertically(ribbon){
 // NOTE: below 'direction' is meant in the html sence, i.e. next/prev...
 
 // create ribbon above/below helpers...
+// XXX
 function createRibbon(direction){
 	if(direction == 'next'){
 		var insert = 'insertAfter'