fixed a bug with recycling images still having the old proportions + tweaked loading threshold calculation a bit + some minor refactoring and tweaking...

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

ui/Gen3-TODO.otl

@@ -1,5 +1,7 @@
 [_] 24% Gen 3 current todo
 	[_] 48% High priority
+		[_] BUG: aligning still sometimes gets off...
+		| ...after rotating a number of images
 		[_] ASAP: support relative paths in cache...
 		[_] ASAP: load/view un-cached directories...
 		[_] import fav dirs (wo. index)...

ui/base.js

@@ -806,27 +806,39 @@ var ccw = {
 	270: 180,
 }
 
-// XXX need to make this statically stable...
+function correctImageProportionsForRotation(images){
-function correctImageProportionsForRotation(image, direction){
-	direction = direction == null ? 'static' : direction
 	var viewer = $('.viewer')
 	var W = viewer.innerWidth()
 	var H = viewer.innerHeight()
+	// NOTE: this is here because we are comparing proportions of two 
+	// 		very differently sized elements, and though the proportions 
+	// 		may be the same, the actual result may be vastly different
+	// 		due of pixel rounding...
+	// 			Real example:
+	// 				Viewer:	826x601
+	// 				Image: 413x300
+	// 					ratio 1:  W/H - w/h = -0.002290626733222556
+	// 					ratio 2: W/w - H/h = -0.0033333333333334103
+	// NOTE: this might get out of hand for close to square viewer...
+	// 		...one way to cheat out of this is to round any ratio
+	// 		close to 1 to 1.
+	// XXX find a better way out of this, avoiding floats...
+	var rounding_error = 0.007
 
-	$(image).each(function(i, e){
+	$(images).each(function(i, e){
 		var image = $(this)
+		// orientation...
 		var o = image.attr('orientation')
 		o = o == null ? 0 : o
-		// XXX account for proportions...
-		//var w = image.css('width')
-		//var h = image.css('height')
 		var w = image.outerWidth()
 		var h = image.outerHeight()
 
 		if(w != h){
+			var proportions = W/H - w/h
+
 			// when the image is turned 90deg/270deg and its 
 			// proportions are the same as the screen...
-			if((o == 90 || o == 270) && Math.abs(W/H - w/h) < 0.005 ){
+			if((o == 90 || o == 270) && Math.abs(proportions) < rounding_error ){
 				image.css({
 					width: h,
 					height: w,
@@ -837,7 +849,7 @@ function correctImageProportionsForRotation(image, direction){
 					'margin-left': (w - h)/2,
 					'margin-right': (w - h)/2,
 				})
-			} else if((o == 0 || o == 180) && Math.abs(W/H - w/h) > 0.005 ){
+			} else if((o == 0 || o == 180) && Math.abs(proportions) > rounding_error ){
 				image.css({
 					width: h,
 					height: w,

ui/data.js

@@ -12,6 +12,10 @@ var LOAD_THRESHOLD = 2
 var DEFAULT_SCREEN_IMAGES = 4
 var MAX_SCREEN_IMAGES = 12
 
+// if set to true each image will have basic info written to its html 
+// title attr.
+var IMAGE_TITLE_DATA = true
+
 // A stub image, also here for documentation...
 var STUB_IMAGE_DATA = {
 	id: 'SIZE',
@@ -313,7 +317,7 @@ function getBestPreview(gid, size){
 
 function updateImage(image, gid, size){
 	image = $(image)
-	var html = ''
+	var title = ''
 	if(gid == null){
 		gid = getImageGID(image)
 	} else {
@@ -321,22 +325,11 @@ function updateImage(image, gid, size){
 	}
 	size = size == null ? getVisibleImageSize('max') : size
 
-	// update image order...
-	image.attr({
-		order: DATA.order.indexOf(gid),
-	})
-
-	// setup marks...
-	if(MARKED.indexOf(gid) != -1){
-		image.addClass('marked')
-	} else {
-		image.removeClass('marked')
-	}
-
 	var img_data = IMAGES[gid]
 	if(img_data == null){
 		img_data = STUB_IMAGE_DATA
 	}
+	var name = img_data.path.split('/').pop()
 
 	// get the url...
 	var preview = getBestPreview(gid, size)
@@ -345,13 +338,22 @@ function updateImage(image, gid, size){
 			'background-image': 'url('+ preview.url +')',
 		})
 		.attr({
+			order: DATA.order.indexOf(gid),
 			orientation: img_data.orientation == null ? 0 : img_data.orientation,
+			title: IMAGE_TITLE_DATA ? 
+				'Image: ' + name +'\n'+
+				'Order: ' + DATA.order.indexOf(gid) +'\n'+
+				'GID: '+ gid +'\n'+
+				'Preview size:'+ preview.size : '',
 		})
 
-	html = window.DEBUG ? 
+	// setup marks...
-			DATA.order.indexOf(gid) +'<br>'+ gid +'<br>'+ preview.size 
+	if(MARKED.indexOf(gid) != -1){
-			: html
+		image.addClass('marked')
-	image.html(html)
+	} else {
+		image.removeClass('marked')
+	}
+
 
 	return image
 }
@@ -426,14 +428,12 @@ function loadImages(ref_gid, count, ribbon){
 						updateImage(e, gids[i], size)
 					})
 			$('.viewer').trigger('reloadedRibbon', [ribbon])
-			return images
 
 
 		// do nothing...
 		// ...the requested section is the same as the one already loaded...
 		} else {
 			window.DEBUG && console.log('>>> (ribbon:', ribbon_i, ') NOTHING TO DO.')
-			return images
 		}
 
 	// do a partial reload...
@@ -453,8 +453,12 @@ function loadImages(ref_gid, count, ribbon){
 			updateImage(e, gids[i + gids.length - tail], size)
 		})
 		$('.viewer').trigger('updatedRibbon', [ribbon])
-		return ribbon.find('.image')
+		images = ribbon.find('.image')
 	}
+
+	// XXX is this the right place for this?
+	correctImageProportionsForRotation(images)
+	return images
 }
 
 
@@ -502,6 +506,8 @@ function rollImages(n, ribbon, extend, no_compensate_shift){
 
 	$('.viewer').trigger('updatedRibbon', [ribbon])
 
+	// XXX is this the right place for this?
+	correctImageProportionsForRotation(images)
 	return images
 }
 
@@ -884,7 +890,7 @@ function setupDataBindings(viewer){
 			// NOTE: if this is greater than the number of images currently 
 			//		loaded, it might lead to odd effects...
 			var frame_size = (screen_size * LOAD_SCREENS) / 2
-			var threshold = screen_size * LOAD_THRESHOLD
+			var threshold = Math.ceil(screen_size * LOAD_THRESHOLD)
 
 			// do the loading...
 			// XXX need to expand/contract the ribbon depending on zoom and speed...