diff --git a/ui/index.html b/ui/index.html
index 0a312c3a..cd0dffc6 100755
--- a/ui/index.html
+++ b/ui/index.html
@@ -303,15 +303,6 @@ function toggleImageMarkBlock(image){
 	return state
 }
 
-function nextMarkedImage(){
-	// XXX
-}
-function prevMarkedImage(){
-	// XXX
-}
-
-
-
 // XXX should we use the createCSSClassToggler for this?
 // XXX revise: does extra stuff...
 function toggleImageProportions(mode){
@@ -377,6 +368,9 @@ function createRibbon(){
 }
 
 
+
+
+
 // NOTE: if this returns null, it means that the element is smallest in 
 //		target ribbon -- first position.
 function getImageBefore(image, ribbon, visible_only){
@@ -405,65 +399,6 @@ function getImageBefore(image, ribbon, visible_only){
 }
 
 
-// basic navigation actions...
-function nextImage(){
-	return centerImage(
-		focusImage(
-			// pre marked-only mode...
-			//$('.current.image').next('.image')))
-			$('.current.image').next('.image:visible')))
-}
-function prevImage(){
-	return centerImage(
-		focusImage(
-			// pre marked-only mode...
-			//$('.current.image').prev('.image')))
-			$('.current.image').prev('.image:visible')))
-}
-function firstImage(){
-	return centerImage(
-		focusImage(
-			// pre marked-only mode...
-			//$('.current.image').closest('.ribbon').find('.image').first()))
-			$('.current.image').closest('.ribbon').find('.image').filter(':visible').first()))
-}
-function lastImage(){
-	return centerImage(
-		focusImage(
-			// pre marked-only mode...
-			//$('.current.image').closest('.ribbon').find('.image').last()))
-			$('.current.image').closest('.ribbon').find('.image').filter(':visible').last()))
-}
-
-// NOTE: if moving is 'next' these will chose the image after the current's order.
-// NOTE: if an image with the same order is found, moving argument has no effect.
-// XXX get move direction...
-function prevRibbon(moving){
-	var cur = $('.current.image')
-	// pre marked-only mode...
-	//var target = getImageBefore(cur, cur.closest('.ribbon').prev('.ribbon'))
-	var target = getImageBefore(cur, cur.closest('.ribbon').prev('.ribbon:visible'), true)
-	if(moving == 'next' && cur.attr('order') != target.attr('order')){
-		var next = target.next('.image')
-		target = next.length > 0 ? next : target
-	}
-	return centerImage(focusImage(target))
-}
-// XXX get move direction...
-function nextRibbon(moving){
-	var cur = $('.current.image')
-	// pre marked-only mode...
-	//var target = getImageBefore(cur, cur.closest('.ribbon').next('.ribbon'))
-	var target = getImageBefore(cur, cur.closest('.ribbon').next('.ribbon:visible'), true)
-	if(moving == 'next' && cur.attr('order') != target.attr('order')){
-		var next = target.next('.image')
-		target = next.length > 0 ? next : target
-	}
-	return centerImage(focusImage(target))
-}
-
-
-
 function shiftTo(image, ribbon){
 	var target = getImageBefore(image, ribbon)
 	var cur_ribbon = image.closest('.ribbon')
@@ -506,45 +441,6 @@ function shiftImage(direction, image, force_create_ribbon){
 	return image
 }
 
-// short-hand methods...
-// XXX get move direction...
-function _shiftImageTo(image, direction, moving, force_create_ribbon){
-	if(image == null){
-		image = $('.current.image')
-	}
-
-	// account move for direction...
-	// XXX get the value from some place more logical than the argument...
-	var a = moving == 'prev' ? 'prev' : 'next' 
-	var b = moving == 'prev' ? 'next' : 'prev' 
-	var target = image[a]('.image')
-
-	target = target.length == 0 ? image[b]() : target
-
-	// XXX should this be in here or coupled later via an event???
-	flashIndicator(direction)
-
-	shiftImage(direction, image, force_create_ribbon)
-	// XXX does this need to be animated???
-	return centerImage(focusImage(target), 'css')
-}
-function shiftImageUp(image){
-	return _shiftImageTo(image, 'prev')
-}
-function shiftImageDown(image){
-	return _shiftImageTo(image, 'next')
-}
-function shiftImageUpNewRibbon(image){
-	return _shiftImageTo(image, 'prev', true)
-}
-function shiftImageDownNewRibbon(image){
-	return _shiftImageTo(image, 'prev', false)
-}
-
-
-// TODO manual image ordering (shiftLeft/shiftRight functions)
-// XXX
-
 
 function focusImage(image){
 	image.closest('.viewer').find('.current.image').removeClass('current')
@@ -600,6 +496,119 @@ function centerImage(image, mode){
 	})
 }
 
+
+
+/**********************************************************************
+* User actions
+*/
+
+// basic navigation actions...
+function nextImage(){
+	return centerImage(
+		focusImage(
+			// pre marked-only mode...
+			//$('.current.image').next('.image')))
+			$('.current.image').next('.image:visible')))
+}
+function prevImage(){
+	return centerImage(
+		focusImage(
+			// pre marked-only mode...
+			//$('.current.image').prev('.image')))
+			$('.current.image').prev('.image:visible')))
+}
+function firstImage(){
+	return centerImage(
+		focusImage(
+			// pre marked-only mode...
+			//$('.current.image').closest('.ribbon').find('.image').first()))
+			$('.current.image').closest('.ribbon').find('.image').filter(':visible').first()))
+}
+function lastImage(){
+	return centerImage(
+		focusImage(
+			// pre marked-only mode...
+			//$('.current.image').closest('.ribbon').find('.image').last()))
+			$('.current.image').closest('.ribbon').find('.image').filter(':visible').last()))
+}
+
+
+function nextMarkedImage(){
+	// XXX
+}
+function prevMarkedImage(){
+	// XXX
+}
+
+
+
+// NOTE: if moving is 'next' these will chose the image after the current's order.
+// NOTE: if an image with the same order is found, moving argument has no effect.
+// XXX get move direction...
+function prevRibbon(moving){
+	var cur = $('.current.image')
+	// pre marked-only mode...
+	//var target = getImageBefore(cur, cur.closest('.ribbon').prev('.ribbon'))
+	var target = getImageBefore(cur, cur.closest('.ribbon').prev('.ribbon:visible'), true)
+	if(moving == 'next' && cur.attr('order') != target.attr('order')){
+		var next = target.next('.image')
+		target = next.length > 0 ? next : target
+	}
+	return centerImage(focusImage(target))
+}
+// XXX get move direction...
+function nextRibbon(moving){
+	var cur = $('.current.image')
+	// pre marked-only mode...
+	//var target = getImageBefore(cur, cur.closest('.ribbon').next('.ribbon'))
+	var target = getImageBefore(cur, cur.closest('.ribbon').next('.ribbon:visible'), true)
+	if(moving == 'next' && cur.attr('order') != target.attr('order')){
+		var next = target.next('.image')
+		target = next.length > 0 ? next : target
+	}
+	return centerImage(focusImage(target))
+}
+
+
+
+// XXX get move direction...
+function _shiftImageTo(image, direction, moving, force_create_ribbon){
+	if(image == null){
+		image = $('.current.image')
+	}
+
+	// account move for direction...
+	// XXX get the value from some place more logical than the argument...
+	var a = moving == 'prev' ? 'prev' : 'next' 
+	var b = moving == 'prev' ? 'next' : 'prev' 
+	var target = image[a]('.image')
+
+	target = target.length == 0 ? image[b]() : target
+
+	// XXX should this be in here or coupled later via an event???
+	flashIndicator(direction)
+
+	shiftImage(direction, image, force_create_ribbon)
+	// XXX does this need to be animated???
+	return centerImage(focusImage(target), 'css')
+}
+function shiftImageUp(image){
+	return _shiftImageTo(image, 'prev')
+}
+function shiftImageDown(image){
+	return _shiftImageTo(image, 'next')
+}
+function shiftImageUpNewRibbon(image){
+	return _shiftImageTo(image, 'prev', true)
+}
+function shiftImageDownNewRibbon(image){
+	return _shiftImageTo(image, 'prev', false)
+}
+
+
+// TODO manual image ordering (shiftLeft/shiftRight functions)
+// XXX
+
 function fitNImages(n){
 	var image = $('.current.image')
 	var size = image.outerHeight(true)
@@ -617,6 +626,11 @@ function fitNImages(n){
 
 
 
+
+/**********************************************************************
+* Event handlers...
+*/
+
 // NOTE: this is on purpose done relative...
 function clickHandler(evt){
 	var img = $(evt.target).closest('.image')