diff --git a/ui/TODO.otl b/ui/TODO.otl
index b1cc9172..d3d8acc6 100755
--- a/ui/TODO.otl
+++ b/ui/TODO.otl
@@ -1,5 +1,5 @@
 Priority work
-	[_] 87% Preview II
+	[_] 88% Preview II
 		[_] 43% native client
 			[_] make cache generator accept command-line args...
 			[_] 0% Generic
@@ -43,6 +43,7 @@ Priority work
 		[X] load sorted images from JSON data
 		| curently the sort is as in file...
 		[X] fix image ordering...
+		[X] add basic image info display...
 		[X] 100% dynamic loading of images
 			[X] 100% stream on navigate
 				| parameters that affect loading:
diff --git a/ui/fullscreen.html b/ui/fullscreen.html
index b48e86b3..45088759 100755
--- a/ui/fullscreen.html
+++ b/ui/fullscreen.html
@@ -160,6 +160,14 @@ $(document).ready(setup);
 		</div>
 	</div>
 
+	<!-- info display -->
+	<div class="info">
+		<div class="top-left"></div>
+		<div class="top-right"></div>
+		<div class="bottom-left"></div>
+		<div class="bottom-right"></div>
+	</div>
+
 	<!-- button bars -->
 	<div class="controller-mini left">
 		<div class="screen-button show-controls">*</div>
diff --git a/ui/gallery-prototype.js b/ui/gallery-prototype.js
index c943df71..81676b5a 100755
--- a/ui/gallery-prototype.js
+++ b/ui/gallery-prototype.js
@@ -332,6 +332,23 @@ ImageGrid.GROUP('State',
 				null
 			]
 		}),
+	ImageGrid.OPTION({
+			name: 'NORMAL_MODE_INFO',
+			display: false,
+			value: null,
+			doc: 'Info display in normal mode.',
+			set: function(){
+				if(ImageGrid.toggleSingleImageMode('?') == 'off'){
+					ImageGrid.toggleInfo(ImageGrid.option.NORMAL_MODE_INFO)
+				}
+			},
+			get: function(){
+				if(ImageGrid.toggleSingleImageMode('?') == 'on'){
+					return ImageGrid.option.NORMAL_MODE_INFO
+				}
+				return ImageGrid.toggleInfo('?')
+			}
+		}),
 	ImageGrid.OPTION({
 			name: 'NORMAL_MODE_BG',
 			display: false,
@@ -1051,6 +1068,31 @@ function alignRibbons(){
 
 
 
+/************************************************** Info Generators **/
+
+function currentImageNumberInRibbon(){
+	// XXX use image_data intead of DOM as the later can be loaded partially...
+	return (
+		($('.current.ribbon').children('.image').index($('.current.image'))+1) 
+		+ '/' 
+		+ $('.current.ribbon').children('.image').length)
+}
+
+function currentImagePath(){
+	if($('.current.image').length == 0){
+		return ''
+	}
+	return unescape(getImageData($('.current.image').attr('id')).path)
+}
+
+function updateInfo(){
+	$('.info .bottom-right')
+		.text(currentImageNumberInRibbon())
+
+	//$('.info .bottom-left')
+	//	.text(currentImagePath())
+}
+
 
 /************************************************** Setup Functions **/
 // XXX is this a correct place for these?
@@ -1062,6 +1104,8 @@ function setDefaultInitialState(){
 	if($('.current.image').length == 0){
 		$('.current.ribbon').children('.image').first().addClass('current')
 	}
+
+	updateInfo()
 }
 
 
@@ -1082,19 +1126,23 @@ function setupEvents(){
 			function(){
 				updated = true
 			})
-		/*
 		.on([
 				// navigation events...
 				'nextImage prevImage', 
 				'nextScreenImages', 
 				'prevScreenImages', 
 				'focusAboveRibbon', 
-				'focusBelowRibbon'
+				'focusBelowRibbon',
+				'firstImage',
+				'lastImage'
 			].join(' '), 
 			function(){
+				/*
 				updated = true
+				*/
+
+				updateInfo()
 			})
-		*/
 	// zooming...
 	$(document)
 		.on([
@@ -1682,6 +1730,12 @@ ImageGrid.GROUP('Mode: All',
 				}
 			}
 		}),
+	ImageGrid.ACTION({
+			id: 'toggleInfo',
+			title: 'Single additional information',
+			type: 'toggle',
+		}, 
+		createCSSClassToggler('.viewer', 'display-info', updateInfo)),
 
 	ImageGrid.ACTION({
 			id: 'toggleControls',
@@ -1799,6 +1853,7 @@ ImageGrid.GROUP('Mode: Single Image',
 			function(action){
 				if(action == 'on'){
 					ImageGrid.option.NORMAL_MODE_BG = ImageGrid.getBackgroundMode()
+					ImageGrid.option.NORMAL_MODE_INFO = ImageGrid.toggleInfo('?')
 					ImageGrid.option.ORIGINAL_FIELD_SCALE = getElementScale($('.field'))
 				// do this only when coming out of single image mode...
 				} else if(ImageGrid.toggleSingleImageMode('?') == 'on'){
@@ -1810,9 +1865,11 @@ ImageGrid.GROUP('Mode: Single Image',
 				if(action == 'on'){
 					ImageGrid.fitImage()
 					ImageGrid.setBackgroundMode(ImageGrid.option.SINGLE_IMAGE_MODE_BG)
+					ImageGrid.toggleInfo('off')
 				} else {
 					ImageGrid.setContainerScale(ImageGrid.option.ORIGINAL_FIELD_SCALE)
 					ImageGrid.setBackgroundMode(ImageGrid.option.NORMAL_MODE_BG)
+					ImageGrid.toggleInfo(ImageGrid.option.NORMAL_MODE_INFO)
 				}
 				clickAfterTransitionsDone()
 			})),
diff --git a/ui/gallery.css b/ui/gallery.css
index 255e76e6..7c852256 100755
--- a/ui/gallery.css
+++ b/ui/gallery.css
@@ -293,6 +293,48 @@
 	height: 5%;
 }
 
+.info {
+	display: none;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	
+	color: gray;
+
+	opacity: 0.0;
+}
+
+.display-info .info {
+	display: block;
+	opacity: 0.3;
+}
+
+.info .top-left {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	padding-left: 50px;
+}
+.info .top-right {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	padding-right: 50px;
+}
+.info .bottom-left {
+	position: absolute;
+	bottom: 0px;
+	left: 0px;
+	padding-left: 50px;
+}
+.info .bottom-right {
+	position: absolute;
+	bottom: 0px;
+	right: 0px;
+	padding-right: 50px;
+}
+
+
 
 .container {
 	position: relative;
@@ -352,7 +394,7 @@
 }
 
 
-.dark .overlay *, .dark .splash * {
+.dark .overlay *, .dark .splash *, .dark .info * {
 	color: silver;
 }
 
@@ -382,7 +424,7 @@
 	background-color: black;
 }
 
-.black .overlay *, .black .splash * {
+.black .overlay *, .black .splash *, .black .info * {
 	color: silver;
 }
 
diff --git a/ui/keybindings.js b/ui/keybindings.js
index b8b6e559..a431a0f3 100755
--- a/ui/keybindings.js
+++ b/ui/keybindings.js
@@ -27,6 +27,7 @@ var keybindings = {
 		9:		ImageGrid.toggleControls,						//	tab
 		66:		ImageGrid.toggleBackgroundModes,				//	b
 		73:		ImageGrid.toggleCurrentRibbonOpacity,			//	i
+		78:		ImageGrid.toggleInfo,							//	n
 		77:		toggleMarkers,									//	m
 
 		87:		ImageGrid.saveState,							//	w