From f0a3aa3d20f0b2f01e98092d96df8a4e5c4487a8 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Mon, 29 Apr 2013 01:59:59 +0400
Subject: [PATCH] added a brain-dead-simple align/center mechanism + some minor
 changes...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui/index.html | 53 ++++++++++++++++++++++++++++++++++++++++++++++-----
 ui/lib/jli.js |  1 +
 2 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 2311f3bb..522d3818 100755
--- a/ui/index.html
+++ b/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...
diff --git a/ui/lib/jli.js b/ui/lib/jli.js
index 8da08f3d..161b1179 100755
--- a/ui/lib/jli.js
+++ b/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...