cleanup and bookkeeping...

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

ui/TODO.otl

@@ -99,32 +99,45 @@ Roadmap
 		|
 		| 	$('[order='+$('.current.image').attr('order')+']').length
 		|
-			[_] BUG: aligning still sometimes gets off...
+		[_] BUG: aligning still sometimes gets off...
-			| ...after rotating a number of images
+		| ...after rotating a number of images
-			|
+		|
-			| XXX this is likely a side effect of loading duplicates...
+		| XXX this is likely a side effect of loading duplicates...
-			|
+		|
-			| happens when:
+		| happens when:
-			| 	- getScreenWidthInImages() < 2
+		| 	- getScreenWidthInImages() < 2
-			| 	- looking through images in one direction and back, some get misaligned
+		| 	- looking through images in one direction and back, some get misaligned
-			| 		...this is stable behaviour by centerRibbon(...), 
+		| 		...this is stable behaviour by centerRibbon(...), 
-			| 		calling it again will not fix this.
+		| 		calling it again will not fix this.
-			| 		moving next/prev will fix the issue until it comes back again
+		| 		moving next/prev will fix the issue until it comes back again
-			| 	- affected by LOAD_SCREENS and number of images in ribbon
+		| 	- affected by LOAD_SCREENS and number of images in ribbon
-			| 		current figures:
+		| 		current figures:
-			| 			Ribbon: 18
+		| 			Ribbon: 18
-			| 			Position going forward: 4
+		| 			Position going forward: 4
-			| 			Position going back: 1
+		| 			Position going back: 1
-			| 			LOAD_SCREENS: 6
+		| 			LOAD_SCREENS: 6
-			| 	NOTE: changing LOAD_SCREENS moves the affected positions.
+		| 	NOTE: changing LOAD_SCREENS moves the affected positions.
-			| 	NOTE: had a similar bug where some images still kept their 
+		| 	NOTE: had a similar bug where some images still kept their 
-			| 			prior sizing after recycling...
+		| 			prior sizing after recycling...
-			| 			...check if centerRibbon(...) and correctImageProportionsForRotation(...)
+		| 			...check if centerRibbon(...) and correctImageProportionsForRotation(...)
-			| 			are called in right sequence...
+		| 			are called in right sequence...
 		[_] BUG: jumping screen images does not load the adjacent ribbons...
 		| positioning is OK but ribbons are not fully visible...
-		[_] BUG: changing window size in single image modes messes things up...
+		[_] BUG: changing window size (F11) in single image modes messes things up...
+		| some images are of different sizes (newly loaded) and aligned in a wrong way...
+		|
+		| appears not to affect square-fit view...
+		|
 		| until we cycle to ribbon mode and back...
+		| 
+		| Q: does this trigger the on-resize event???
+		| A: no, not connected...
+		|
+		| possible that this is connected with the align/load bug...
+		|
+		| appears to be a state leak, this affects:
+		| 	- correctImageProportionsForRotation(image) -- mis-alignes images
+		| 	  while after cycling single image mode, behaves correctly...
 		[_] ASAP: test on Android...
 		[_] 0% Tablet UI
 			[_] screen buttons

ui/base.js

@@ -951,6 +951,7 @@ function correctImageProportionsForRotation(images){
 		var w = image.outerWidth()
 		var h = image.outerHeight()
 
+		// non-square image...
 		if(w != h){
 			var proportions = W/H - w/h
 
@@ -977,6 +978,7 @@ function correctImageProportionsForRotation(images){
 				})
 			}
 
+		// square image...
 		} else {
 			image.css({
 				'margin': '',

ui/index.html

@@ -54,6 +54,8 @@ $(function(){
 		.resize(function() {
 			// XXX should this be animated or not?
 			centerView()
+
+			// XXX problems in single image mode after hitting F11...
 		})
 		
 	$(document)

ui/modes.js

@@ -153,7 +153,7 @@ var toggleSingleImageMode = createCSSClassToggler('.viewer',
 				w = SETTINGS['screen-images-ribbon-mode']
 				w = w == null ? DEFAULT_SCREEN_IMAGES : w
 
-				toggleImageProportions('square')
+				toggleImageProportions('fit-square')
 				fitNImages(w)
 				var i = SETTINGS['image-info-ribbon-mode'] == 'on' ? 'on' : 'off'
 				toggleImageInfo(i)
@@ -256,6 +256,7 @@ var toggleInlineImageInfo = createCSSClassToggler('.viewer',
 // 		al least at this point...
 // XXX should we use the createCSSClassToggler for this?
 // XXX revise: does extra stuff...
+/*
 function toggleImageProportions(mode){
 	// normal images...
 	var image = $('.image')
@@ -298,8 +299,49 @@ function toggleImageProportions(mode){
 		centerView(null, 'css')
 	}
 
-	return 'mode'
+	return mode
 }
+*/
+
+var toggleImageProportions = createCSSClassToggler('.viewer',
+		[
+			'fit-square',
+			'fit-viewer'
+		],
+		function(action){
+			var image = $('.image')
+			var h = image.outerHeight(true)
+			var w = image.outerWidth(true)
+
+			// viewer proportions...
+			if(action == 'fit-image-to-viewer'){
+				var viewer = $('.viewer')
+				var W = viewer.innerWidth()
+				var H = viewer.innerHeight()
+
+				if(W > H){
+					image.css('width', W * h/H)
+				} else {
+					image.css('height', H * w/W)
+				}
+
+				// account for rotation...
+				correctImageProportionsForRotation(image)
+				centerView(null, 'css')
+
+			// square proportions...
+			} else {
+				var size = Math.min(w, h)
+				image.css({
+					width: size,
+					height: size
+				})
+
+				// account for rotation...
+				correctImageProportionsForRotation(image)
+				centerView(null, 'css')
+			}
+		})
 
 
 var toggleHelp = makeDrawerToggler(