diff --git a/ui/keybindings.js b/ui/keybindings.js
index 3bf33729..04cf8fd6 100755
--- a/ui/keybindings.js
+++ b/ui/keybindings.js
@@ -372,24 +372,7 @@ var KEYBOARD_CONFIG = {
 					function(){ toggleImageInfo() }),
 				// XXX STUB -- replace with a real info window...
 				shift: doc('Show current image info',
-					function(){
-						var gid = getImageGID(getImage())
-						var r = getRibbonIndex(getRibbon())
-						var data = IMAGES[gid]
-						var orientation = data.orientation
-						orientation = orientation == null ? 0 : orientation
-						var order = DATA.order.indexOf(gid)
-						var name = data.path.split('/').pop()
-						alert('"'+ name +'"\n'+
-								'Orientation: '+ orientation +'deg\n'+
-								'GID: '+ gid +'\n'+
-								'Path: "'+ data.path +'"\n'+
-								'Order: '+ order +'\n'+
-								'Position (ribbon): '+ DATA.ribbons[r].indexOf(gid) +
-									'/'+ DATA.ribbons[r].length +'\n'+
-								'Position (global): '+ order +'/'+ DATA.order.length +'\n'+
-								'')
-					}),
+					function(){ toggleImageInfoDrawer() }),
 				alt: doc('Toggle inline image info display',
 					function(){
 						toggleInlineImageInfo()
diff --git a/ui/modes.js b/ui/modes.js
index 6f9d42b1..c5884d96 100755
--- a/ui/modes.js
+++ b/ui/modes.js
@@ -14,8 +14,10 @@
 */
 
 // NOTE: this expects a certain structure, this it is not generic...
-function makeDrawerToggler(contentRenderer, root, element_class, mode_class){
-	var toggler = createCSSClassToggler(root, mode_class + ' drawer-mode overlay',
+//function makeDrawerToggler(contentRenderer, root, element_class, mode_class){
+function makeDrawerToggler(contentRenderer, root){
+	var element_class = '.drawer-block'
+	var toggler = createCSSClassToggler(root, 'drawer-mode overlay',
 			function(action){
 				// XXX
 				var body = $(document.body)
@@ -305,31 +307,47 @@ var toggleHelp = makeDrawerToggler(
 			// XXX populate...
 			// 		...load from file.
 			return $('<h1>Help</h1>')
-		}, 
-		'.viewer', 
-		'.general-help', 
-		'general-help-mode')
+		}, '.viewer')
 
 
 var toggleKeyboardHelp = makeDrawerToggler(
 		function(){
 			return buildKeybindingsHelpHTML(KEYBOARD_CONFIG)
-		}, 
-		'.viewer', 
-		'.keyboard-help', 
-		'keyboard-help-mode')
+		}, '.viewer')
 
 
 var toggleOptionsUI = makeDrawerToggler(
 		function(){
 			// XXX populate...
 			return $('<h1>Options</h1>')
-		}, 
-		'.viewer', 
-		'.options-ui', 
-		'options-mode')
+		}, '.viewer')
 
 
+// XXX needs styling and cleanup...
+// XXX add a preview...
+var toggleImageInfoDrawer = makeDrawerToggler(
+		function(){
+			var gid = getImageGID(getImage())
+			var r = getRibbonIndex(getRibbon())
+			var data = IMAGES[gid]
+			var orientation = data.orientation
+			orientation = orientation == null ? 0 : orientation
+			var order = DATA.order.indexOf(gid)
+			var name = data.path.split('/').pop()
+
+			return $('<div>'+
+					'<h1>"'+ name +'"</h1>'+
+
+					'Orientation: '+ orientation +'deg<br>'+
+					'GID: '+ gid +'<br>'+
+					'Path: "'+ data.path +'"<br>'+
+					'Order: '+ order +'<br>'+
+					'Position (ribbon): '+ (DATA.ribbons[r].indexOf(gid)+1) +
+						'/'+ DATA.ribbons[r].length +'<br>'+
+					'Position (global): '+ (order+1) +'/'+ DATA.order.length +'<br>'+
+				'</div>')
+		}, '.viewer')
+
 
 
 /**********************************************************************