diff --git a/ui/index.html b/ui/index.html
index 2f6e5936..d748da37 100755
--- a/ui/index.html
+++ b/ui/index.html
@@ -195,147 +195,10 @@
 <script src="lib/keyboard.js"></script>
 
 <script src="ImageGrid.js"></script>
+<script src="keybindings3.js"></script>
 
 <script>
 
-/**********************************************************************
-* Keyboard configuration...
-*
-* XXX move this out to a separate file...
-*/
-
-var STEPS_TO_CHANGE_DIRECTION = 2
-var _STEPS_LEFT_TO_CHANGE_DIRECTION = STEPS_TO_CHANGE_DIRECTION
-// XXX code related to this needs testing...
-var DIRECTION = 'next'
-
-
-var KEYBOARD_CONFIG = {
-	// general setup...
-	'.viewer': {
-		Up: {
-				default: function(){ prevRibbon(DIRECTION) },
-				shift: function(){ shiftImageUp(null, DIRECTION) },
-			},
-		Down: {
-				default: function(){ nextRibbon(DIRECTION) },
-				shift: function(){ shiftImageDown(null, DIRECTION) },
-			},
-
-		// XXX need to cancel the animation of the prev action...
-		Left: {
-				default: function(){ 
-					if(DIRECTION != 'prev'){
-						_STEPS_LEFT_TO_CHANGE_DIRECTION--
-						if(_STEPS_LEFT_TO_CHANGE_DIRECTION == 0){
-							DIRECTION = 'prev'
-							_STEPS_LEFT_TO_CHANGE_DIRECTION = 2
-						}
-					} else {
-							_STEPS_LEFT_TO_CHANGE_DIRECTION = 2
-					}
-					prevImage() 
-				},
-				// XXX prevScreenImages...
-				ctrl: function(){ 
-					console.log('NotImplemented: screen images back.')
-				},
-				// XXX need to keep shift explicitly clear for editor...
-				/*
-				shift: function(){
-					toggleImageMark()
-					prevImage()
-				},
-				// XXX mark screen images...
-				'ctrl+shift': function(){
-					console.log('NotImplemented: mark screen images back.')
-				}
-				*/
-			},
-		Right: {
-				default: function(){ 
-					if(DIRECTION != 'next'){
-						_STEPS_LEFT_TO_CHANGE_DIRECTION--
-						if(_STEPS_LEFT_TO_CHANGE_DIRECTION == 0){
-							DIRECTION = 'next'
-							_STEPS_LEFT_TO_CHANGE_DIRECTION = 2
-						}
-					} else {
-							_STEPS_LEFT_TO_CHANGE_DIRECTION = 2
-					}
-					nextImage() 
-				},
-				// XXX nextScreenImages...
-				ctrl: function(){ 
-					console.log('NotImplemented: screen images forward.')
-				},
-				// XXX need to keep shift explicitly clear for editor...
-				/*
-				shift: function(){
-					toggleImageMark()
-					nextImage()
-				},
-				// XXX mark screen images...
-				'ctrl+shift': function(){
-					console.log('NotImplemented: mark screen images forward.')
-				}
-				*/
-			},
-		Space: {
-				default: 'Right',
-				shift: 'Left',
-			},
-		/* XXX for some reason this does not work,,,
-		// XXX for some odd reason, returning false does not cancel 
-		//		default behaviour here...
-		Backspace: {
-				default: 'Left',
-				shift: 'Right',
-			},
-		*/
-
-		Home: function(){
-				firstImage()
-			},
-		End: function(){
-				lastImage()
-			},
-
-		// zooming...
-		'1': function(){ fitNImages(1) },
-		'2': function(){ fitNImages(2) },
-		'3': function(){ fitNImages(3) },
-		'4': function(){ fitNImages(4) },
-		'5': function(){ fitNImages(5) },
-		'6': function(){ fitNImages(6) },
-		'7': function(){ fitNImages(7) },
-		// XXX for some reason this also hooks the Backspace key (80)...
-		'8': function(){ fitNImages(8) },
-		'9': function(){ fitNImages(9) },
-
-
-		// XXX this is temporary, combine this with single image mode...
-		F: function(){ toggleImageProportions() },
-
-
-		// marking...
-		// XXX not final, think of a better way to do this...
-		I: {
-				ctrl: function(){ invertImageMarks() },
-			},
-		A: {
-				shift: function(){ toggleImageMarkBlock() },
-				ctrl: function(){ markAll('ribbon') },
-			},
-		M: {
-				default: function(){ toggleImageMark() },
-				shift: function(){ toggleMarkedOnlyView() },
-			},
-	}
-}
-
-
-
 /*********************************************************************/
 // setup...
 $(function(){
diff --git a/ui/keybindings3.js b/ui/keybindings3.js
new file mode 100755
index 00000000..cd1af0f8
--- /dev/null
+++ b/ui/keybindings3.js
@@ -0,0 +1,178 @@
+/**********************************************************************
+* 
+*
+*
+**********************************************************************/
+
+//var DEBUG = DEBUG != null ? DEBUG : true
+
+
+/*********************************************************************/
+
+var STEPS_TO_CHANGE_DIRECTION = 2
+var _STEPS_LEFT_TO_CHANGE_DIRECTION = STEPS_TO_CHANGE_DIRECTION
+// XXX code related to this needs testing...
+var DIRECTION = 'next'
+
+
+var KEYBOARD_CONFIG = {
+	// general setup...
+	'.viewer': {
+		// Navigation...
+		// XXX need to cancel the animation of the prev action...
+		Left: {
+				default: function(){ 
+					if(DIRECTION != 'prev'){
+						_STEPS_LEFT_TO_CHANGE_DIRECTION--
+						if(_STEPS_LEFT_TO_CHANGE_DIRECTION == 0){
+							DIRECTION = 'prev'
+							_STEPS_LEFT_TO_CHANGE_DIRECTION = 2
+						}
+					} else {
+							_STEPS_LEFT_TO_CHANGE_DIRECTION = 2
+					}
+					prevImage() 
+				},
+				// XXX prevScreenImages...
+				ctrl: function(){ 
+					console.log('NotImplemented: screen images back.')
+				},
+				// XXX need to keep shift explicitly clear for editor...
+				/*
+				shift: function(){
+					toggleImageMark()
+					prevImage()
+				},
+				// XXX mark screen images...
+				'ctrl+shift': function(){
+					console.log('NotImplemented: mark screen images back.')
+				}
+				*/
+			},
+		Right: {
+				default: function(){ 
+					if(DIRECTION != 'next'){
+						_STEPS_LEFT_TO_CHANGE_DIRECTION--
+						if(_STEPS_LEFT_TO_CHANGE_DIRECTION == 0){
+							DIRECTION = 'next'
+							_STEPS_LEFT_TO_CHANGE_DIRECTION = 2
+						}
+					} else {
+							_STEPS_LEFT_TO_CHANGE_DIRECTION = 2
+					}
+					nextImage() 
+				},
+				// XXX nextScreenImages...
+				ctrl: function(){ 
+					console.log('NotImplemented: screen images forward.')
+				},
+				// XXX need to keep shift explicitly clear for editor...
+				/*
+				shift: function(){
+					toggleImageMark()
+					nextImage()
+				},
+				// XXX mark screen images...
+				'ctrl+shift': function(){
+					console.log('NotImplemented: mark screen images forward.')
+				}
+				*/
+			},
+		Space: {
+				default: 'Right',
+				shift: 'Left',
+			},
+		/* XXX for some reason this does not work,,,
+		// XXX for some odd reason, returning false does not cancel 
+		//		default behaviour here...
+		Backspace: {
+				default: 'Left',
+				shift: 'Right',
+			},
+		*/
+		Home: function(){
+				firstImage()
+			},
+		End: function(){
+				lastImage()
+			},
+		Up: {
+				default: function(){ prevRibbon(DIRECTION) },
+				shift: function(){ shiftImageUp(null, DIRECTION) },
+			},
+		Down: {
+				default: function(){ nextRibbon(DIRECTION) },
+				shift: function(){ shiftImageDown(null, DIRECTION) },
+			},
+
+
+
+		// zooming...
+		'1': function(){ fitNImages(1) },
+		'2': function(){ fitNImages(2) },
+		'3': function(){ fitNImages(3) },
+		'4': function(){ fitNImages(4) },
+		'5': function(){ fitNImages(5) },
+		'6': function(){ fitNImages(6) },
+		'7': function(){ fitNImages(7) },
+		// XXX for some reason this also hooks the Backspace key (80)...
+		'8': function(){ fitNImages(8) },
+		'9': function(){ fitNImages(9) },
+
+
+		// XXX this is temporary, combine this with single image mode...
+		// XXX this should only work on single image mode...
+		F: function(){ toggleImageProportions() },
+
+
+		// marking...
+		// XXX not final, think of a better way to do this...
+		// XXX need mark navigation...
+		M: {
+				// NOTE: marking moves in the same direction as the last
+				//		move...
+				//		i.e. marking can change direction depending on where
+				//		we moved last...
+				// NOTE: marking does not change move direction...
+				default: function(){ 
+					toggleImageMark()
+					if(DIRECTION == 'next'){
+						nextImage()
+					} else {
+						prevImage()
+					}
+				},
+				// same as default but in reverse direction...
+				shift: function(){
+					toggleImageMark()
+					if(DIRECTION == 'prev'){
+						nextImage()
+					} else {
+						prevImage()
+					}
+				},
+				ctrl: function(){ toggleImageMark() },
+			},
+		I: {
+				ctrl: function(){ invertImageMarks() },
+			},
+		A: {
+				shift: function(){ toggleImageMarkBlock() },
+				ctrl: function(){ markAll('ribbon') },
+			},
+		U: {
+				ctrl: function(){ removeImageMarks('ribbon') },
+				shift: function(){ removeImageMarks('all') },
+			},
+		F2: function(){ toggleMarkedOnlyView() },
+	}
+}
+
+
+
+
+
+
+
+/**********************************************************************
+* vim:set ts=4 sw=4 :                                                */