fixed most of the alignment problems (turned out to be what I expected for a weeK but was to lazy to test spending 7 days instead of 7 minutes fixing -- default transform origin is relative (50% 50% 0) and thus position is affected by element (ribbon-set) size)...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui/ImageGrid.data.js

@@ -407,12 +407,23 @@ function loadData(data, images_per_screen){
 * Setup
 */
 
+// Setup event handlers for data bindings...
+//
+// This does two jobs:
+// 	- maintain DATA state
+// 		- editor actions
+// 		- focus
+// 		- marking
+// 	- maintain view consistency
+// 		- centering/moving (roll)
+// 		- shifting (expand/contract)
+// 		- zooming (expand/contract)
+//
+//
+// XXX this is causing lots of errors, rethink...
 function setupDataBindings(viewer){
 	viewer = viewer == null ? $('.viewer') : viewer
 	viewer
-		// XXX this causes miss-aligns after shifting and/or zooming...
-		// 		...after zooming, moving focus causes the screen to align 
-		// 		in an odd way until the next move corrects the issue...
 		// XXX need to maintain the correct number of images per ribbon
 		// 		per zoom setting -- things get really odd when a ribbon 
 		// 		is smaller than it should be...

ui/ImageGrid.js

@@ -309,7 +309,6 @@ function extendRibbon(left, right, ribbon, no_compensate_shift){
 		left: $([]),
 		right: $([])
 	}
-	var pre = getRelativeVisualPosition($('.viewer'), ribbon).left
 
 	// truncate...
 	// NOTE: we save the detached elements to reuse them on extending,
@@ -332,24 +331,13 @@ function extendRibbon(left, right, ribbon, no_compensate_shift){
 
 	// NOTE: this is fool-proof as it's based on relative visual 
 	// 		position...
-	var position_updated = false
-	var post = getRelativeVisualPosition($('.viewer'), ribbon).left
 	var scale = getElementScale($('.ribbon-set'))
 	var l = parseFloat(ribbon.css('left'))
 	l = isNaN(l) ? 0 : l
-	// compensate for positioning errors...
-	// XXX not sure where these come from, when the scale is != 0...
-	if(pre != post){
-		position_updated = true
-		l = l + (pre - post)/scale
-	}
 	// compensate for left shift...
 	if(!no_compensate_shift && left != 0){
-		position_updated = true
 		l -= left * images.outerWidth()
-	}
+
-	// write the position...
-	if(position_updated){
 		ribbon.css({
 			left: l,
 		})

ui/index.html

@@ -22,6 +22,13 @@
 
 .ribbon-set {
 	position: absolute;
+	display: block;
+
+	/* neede for scaling/zooming to behave correctly and not shift the 
+	element, when its dimensions change... */
+	transform-origin: top left;
+	-ms-transform-origin: top left;
+	-webkit-transform-origin: top left; /* Safari and Chrome */
 }
 .ribbon-set:empty:after {
 	display: block;
@@ -232,6 +239,8 @@
 // setup...
 $(function(){
 
+	//setElementOrigin($('.ribbon-set'), 'top', 'left')
+
 	loadData(DATA)
 
 	// NOTE: this is global so as to not to add any extra complexity to 

ui/lib/jli.js

@@ -499,11 +499,26 @@ function setElementScale(elem, scale){
 	return setElementTransform(elem, null, scale)
 }
 
+
+function setElementOrigin(elem, x, y, z){
+	x = x == null ? '50%' : x
+	y = y == null ? '50%' : y
+	z = z == null ? '0' : z
+	var value = x +' '+ y +' '+ z
+
+	return $(elem).css({
+		'transform-origin': value, 
+		'-ms-transform-origin':  value,
+		'-webkit-transform-origin':  value,
+	})
+}
+
+
 function setTransitionEasing(elem, ease){
 	if(typeof(ms) == typeof(0)){
 		ms = ms + 'ms'
 	}
-	return elem.css({
+	return $(elem).css({
 		'transition-timing-function': ease, 
 		'-moz-transition-timing-function': ease,
 		'-o-transition-timing-function': ease,