diff --git a/ui/ImageGrid.js b/ui/ImageGrid.js
index bc873bcc..6f559d14 100755
--- a/ui/ImageGrid.js
+++ b/ui/ImageGrid.js
@@ -148,6 +148,7 @@ function getImageBefore(image, ribbon, mode){
 
 // same as getImageBefore, but uses gids and searches in DATA...
 // XXX check for corner cases...
+// XXX getGIDBefore(1, 1) does not work
 function getGIDBefore(gid, ribbon){
 	ribbon = DATA.ribbons[ribbon]
 	var order = DATA.order
@@ -162,10 +163,10 @@ function getGIDBefore(gid, ribbon){
 
 	var i = ribbon.length
 
-	while(i > 1){
+	while(i > 0){
 		i = Math.floor(ribbon.length/2)
 
-		//console.log('>>>', target, i, order.indexOf(ribbon[i]), order.indexOf(ribbon[i+1]))
+		console.log('>>>', target, i, order.indexOf(ribbon[i]), order.indexOf(ribbon[i+1]))
 
 		if(target >= order.indexOf(ribbon[i]) && target < order.indexOf(ribbon[i+1])){
 			return ribbon[i]
diff --git a/ui/index.html b/ui/index.html
index f32b4637..ae7de70b 100755
--- a/ui/index.html
+++ b/ui/index.html
@@ -268,6 +268,12 @@ $(function(){
 			// need to load a new set of images...
 			if((img_before.length == 0 && gid_before != null) 
 					|| (getImageGID(img_before) && getImageGID(img_before) != gid_before)){
+				// get the distance...
+				var images = ribbon.find('.image')
+				var cur = getImageGID(images.eq(Math.round(images.length/2)))
+				var gr = DATA.ribbons[r]
+				console.log('>>>', gr.indexOf(gid_before) - gr.indexOf(cur))
+				rollImages(gr.indexOf(gid_before) - gr.indexOf(cur), ribbon)
 			}
 
 			if(img_before.length == 0){