diff --git a/ui (gen4)/features/filesystem.js b/ui (gen4)/features/filesystem.js
index bde6121d..2f83e00a 100755
--- a/ui (gen4)/features/filesystem.js	
+++ b/ui (gen4)/features/filesystem.js	
@@ -8,15 +8,6 @@ define(function(require){ var module = {}
 
 //var DEBUG = DEBUG != null ? DEBUG : true
 
-var util = require('lib/util')
-
-var actions = require('lib/actions')
-var features = require('lib/features')
-
-var core = require('features/core')
-
-var overlay = require('lib/widget/overlay')
-
 // XXX this should not be imported!!!
 // 		...something wrong with requirejs(..)
 if(window.nodejs != null){
@@ -31,6 +22,16 @@ if(window.nodejs != null){
 	var browseWalk = require('lib/widget/browse-walk')
 }
 
+var util = require('lib/util')
+
+var actions = require('lib/actions')
+var features = require('lib/features')
+
+var core = require('features/core')
+
+var overlay = require('lib/widget/overlay')
+var browse = require('lib/widget/browse')
+
 
 
 /*********************************************************************/
diff --git a/ui (gen4)/features/meta.js b/ui (gen4)/features/meta.js
index 3041e02a..2ba1ade3 100755
--- a/ui (gen4)/features/meta.js	
+++ b/ui (gen4)/features/meta.js	
@@ -63,6 +63,7 @@ core.ImageGridFeatures.Feature('viewer-testing', [
 	'app-control',
 
 	// chrome...
+	'ui-direct-control',
 	'ui-animation',
 	'ui-bounds-indicators',
 	'ui-current-image-indicator',
diff --git a/ui (gen4)/features/ui.js b/ui (gen4)/features/ui.js
index 655bc260..c96468e7 100755
--- a/ui (gen4)/features/ui.js	
+++ b/ui (gen4)/features/ui.js	
@@ -2044,15 +2044,22 @@ var CurrentImageIndicatorActions = actions.Actions({
 			var ribbon_set = this.ribbons.getRibbonSet()
 
 			if(ribbon_set.length == 0){
-				return this
+				return
 			}
 
 			var scale = this.ribbons.getScale()
 			var cur = this.ribbons.getImage(target)
-			var ribbon = this.ribbons.getRibbon(target)
+			// NOTE: cur may be unloaded...
+			var ribbon = this.ribbons.getRibbon(cur.length > 0 ? target : this.currentRibbon)
 
 			var marker = ribbon.find('.current-marker')
 
+			// remove marker if current image is not loaded...
+			if(cur.length == 0){
+				marker.remove()
+				return
+			}
+
 			// get config...
 			var border = this.config['current-image-border']
 			var min_border = this.config['current-image-min-border']
@@ -2373,6 +2380,69 @@ module.AutoSingleImage = core.ImageGridFeatures.Feature({
 
 
 
+//---------------------------------------------------------------------
+
+// XXX add tap/click to focus...
+// XXX add pinch-zoom...
+// XXX add vertical scroll...
+// XXX BUG: current image indicator gets shown in random places...
+var DirectControl = 
+module.DirectControl = core.ImageGridFeatures.Feature({
+	title: '',
+	doc: '',
+
+	tag: 'ui-direct-control',
+	depends: [
+		'ui',
+		// this is only used to trigger reoad...
+		//'ui-partial-ribbons',
+	],
+
+	/*
+	config: {
+		'ui-direct-control-engines': [
+			'none',
+			'jquery',
+		],
+		'ui-direct-control-engine': 'jquery',
+	},
+
+	actions: actions.Actions({
+		toggleDirectControlEngine: ['Interface/',
+			base.makeConfigToggler('ui-direct-control-engine', 
+				function(){ return this.config['ui-direct-control-engines'] })],
+	}),
+	*/
+
+	handlers: [
+		// XXX hide current image indicator as soon as the image is not visible...
+		// XXX inertia...
+		// XXX limit scroll to at least one image being on screen (center?)...
+		// XXX add setup/taredown...
+		['updateRibbon', 
+			function(_, target){
+				var that = this
+				var r = this.ribbons.getRibbon(target)
+
+				r.length > 0 
+					&& !r.hasClass('ui-draggable')
+					&& r.draggable({
+						axis: 'x',
+						stop: function(){
+							var c = that.ribbons.getImageByPosition('center', r)
+							that
+								.updateRibbon(c)
+								// XXX is this correct???
+								//.updateCurrentImageIndicator()
+						}
+					})
+			}],
+	],
+})
+
+
+
+
 //---------------------------------------------------------------------
 
 // XXX console / log / status bar
diff --git a/ui (gen4)/index.html b/ui (gen4)/index.html
index ae3bd613..06909fc5 100755
--- a/ui (gen4)/index.html	
+++ b/ui (gen4)/index.html	
@@ -175,6 +175,7 @@ typeof(require) != 'undefined' && require('nw.gui').Window.get().showDevTools()
 
 <script src="ext-lib/jquery.js"></script>
 <script src="ext-lib/jquery-ui.js"></script>
+<script src="ext-lib/jquery.ui.touch-punch.min.js"></script>
 
 <script src="lib/jli.js"></script>
 <script src="lib/toggler.js"></script>
diff --git a/ui (gen4)/lib/util.js b/ui (gen4)/lib/util.js
index afd58147..9a3b424f 100755
--- a/ui (gen4)/lib/util.js	
+++ b/ui (gen4)/lib/util.js	
@@ -11,11 +11,41 @@ define(function(require){ var module = {}
 
 /*********************************************************************/
 
+// Quote a string and convert to RegExp to match self literally.
+var quoteRegExp =
+module.quoteRegExp =
+function(str){
+	return str.replace(/([\.\\\/\(\)\[\]\$\*\+\-\{\}\@\^\&\?\<\>])/g, '\\$1')
+}
+
+
+// XXX do we need to quote anything else???
+var path2url =
+module.path2url =
+function(path){
+	// test if we have a schema, and if yes return as-is...
+	if(/^(http|https|file|[\w-]*):[\\\/]{2}/.test(path)){
+		return path
+	}
+	// skip encoding windows drives...
+	var drive = path.split(/^([a-z]:[\\\/])/i)
+	path = drive.pop()
+	drive = drive.pop() || ''
+	return drive + (path
+		.split(/[\\\/]/g)
+		// XXX these are too aggressive...
+		//.map(encodeURI)
+		//.map(encodeURIComponent)
+		.join('/')
+		// NOTE: keep '%' the first...
+		.replace(/%/g, '%25')
+		.replace(/#/g, '%23')
+		.replace(/&/g, '%26'))
+}
+
+
 // NOTE: we are not using node's path module as we need this to work in
 // 		all contexts, not only node... (???)
-// 		XXX currently this is only used in node-specific modules and in 
-// 			images...
-// XXX make this standard...
 var normalizePath = 
 module.normalizePath =
 function(path){
@@ -37,8 +67,6 @@ function(path){
 
 
 
-
-
 /**********************************************************************
 * vim:set ts=4 sw=4 :                                                */
 return module })
diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js
index 2f4bb8cf..1cc07005 100755
--- a/ui (gen4)/ribbons.js	
+++ b/ui (gen4)/ribbons.js	
@@ -12,6 +12,7 @@ define(function(require){ var module = {}
 // XXX is this correct...
 //require('ext-lib/jquery')
 
+var util = require('lib/util')
 var object = require('lib/object')
 
 var data = require('data')
@@ -22,24 +23,6 @@ var RIBBON = '.ribbon:not(.clone)'
 
 
 
-/*********************************************************************/
-
-function path2url(path){
-	// test if we have a schema, and if yes return as-is...
-	if(/^(http|https|file|[\w-]*):[\\\/]{2}/.test(path)){
-		return path
-	}
-	// skip encoding windows drives...
-	var drive = path.split(/^([a-z]:[\\\/])/i)
-	path = drive.pop()
-	drive = drive.pop() || ''
-	return drive + (path
-		.split(/[\\\/]/g)
-		.map(encodeURIComponent)
-		.join('/'))
-}
-
-
 
 /*********************************************************************/
 //
@@ -1127,7 +1110,7 @@ var RibbonsPrototype = {
 		return image
 	},
 	_loadImagePreviewURL: function(image, url){
-		url = path2url(url)
+		url = util.path2url(url)
 		// pre-cache and load image...
 		// NOTE: this will make images load without a blackout...
 		var img = new Image()
@@ -1265,7 +1248,7 @@ var RibbonsPrototype = {
 					// the new preview (p_url) is different to current...
 					// NOTE: this may not work correctly for relative urls...
 					//|| image.css('background-image').indexOf(encodeURI(p_url)) < 0){
-					|| image.css('background-image').indexOf(path2url(p_url)) < 0){
+					|| image.css('background-image').indexOf(util.path2url(p_url)) < 0){
 				// sync load...
 				if(sync){
 					that._loadImagePreviewURL(image, p_url)
@@ -1372,7 +1355,7 @@ var RibbonsPrototype = {
 		// remove everything in one go...
 		$(unloaded)
 			.detach()
-			.removeClass('moving')
+			.removeClass('moving current')
 			// blank out images to prevent wrong image flashing...
 			.css('background-image', 'none')
 		// clear marks...