added a brain-dead-simple align/center mechanism + some minor changes...

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

ui/index.html

@@ -9,17 +9,16 @@
 	position: relative;
 	width: 800px;
 	height: 600px;
-	/*overflow: hidden;*/
-	overflow: auto;
+	overflow: hidden;
 
 	border: solid blue 1px;
 }
 
 
 .ribbon-set {
+	position: absolute;
 }
 .ribbon-set:empty:after {
-	position: absolute;
 	display: block;
 	top: 0px;
 	left: 0px;
@@ -199,15 +198,59 @@ function focusImage(image){
 
 
 // Alignment API...
-function alignImage(){
+// ...tried to make this as brain-dead-stupidly-simple as possible...
+function relativeVisualPosition(outer, inner){
+	outer = $(outer).offset()
+	inner = $(inner).offset()
+	return {
+		top: inner.top - outer.top,
+		left: inner.left - outer.left
+	}
 }
 
+// This appears to work well with scaling...
+function centerImage(image, mode){
+	if(mode == null){
+		//mode = 'css'
+		mode = 'animate'
+	}
+	if(image == null){
+		image = $('.current.image')
+	}
+	var viewer = $('.viewer')
+	var W = viewer.innerWidth()
+	var H = viewer.innerHeight()
+
+	var ribbons = $('.ribbon-set')
+	var scale = getElementScale(ribbons)
+	// NOTE: these are scalable, this need to get normalized...
+	var w = image.width()*scale
+	var h = image.height()*scale
+
+	var pos = relativeVisualPosition(viewer, image)
+
+	// zero out top/left if set to anything other than a specific number...
+	var t = parseFloat(ribbons.css('top'))
+	t = t ? t : 0
+	var l = parseFloat(ribbons.css('left'))
+	l = l ? l : 0
+
+	// do the actual work...
+	return ribbons[mode]({
+		'top': t - pos.top + (H - h)/2,
+		'left': l - pos.left + (W - h)/2
+	})
+}
+
+
 
 
 // NOTE: this is on purpose done relative...
 function clickHandler(evt){
 	var img = $(evt.target).closest('.image')
-	focusImage(img)
+
+	centerImage(
+		focusImage(img))
 }
 
 // setup...

ui/lib/jli.js

@@ -305,6 +305,7 @@ var getElementTransitionDuration = makeCSSVendorAttrGetter(
 
 
 
+var USE_TRANSFORM = true
 var USE_3D_TRANSFORM = true
 
 // NOTE: at this point this works only on the X axis...