started work on dynamic loading/unloading of images...

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

ui/TODO.otl

@@ -3,6 +3,16 @@ Priority work
 		[_] 0% dynamic loading of images
 			[_] sizes on zoom
 			[_] stream on navigate
+			| parameters that affect loading:
+			| 	- current view size				-> image size must be closest
+			| 										above this
+			| 	- viewer width in images		-> number of widths (2-3) 
+			| 										distance is used to trigger
+			| 										loading or unloading of images
+			| 										depending on direction
+			| 										NOTE: this is done for each
+			| 											  image size in use.
+			|
 			| NOTE: here the trigger must be proximity to the view as we 
 			| 		can reach an image not just by navigating close but 
 			| 		also by scrolling/dragging to it (without changing the

ui/gallery-prototype.js

@@ -445,7 +445,6 @@ function cmpImageOrder(a, b){
 }
 
 
-
 // NOTE: don't understand why am I the one who has to write this...
 var SPECIAL_KEYS = {
 	9:		'Tab',
@@ -503,6 +502,7 @@ function toKeyName(code){
 // show a jQuary opject in viewer overlay...
 // XXX need to set .scrollTop(0) when showing different UI... 
 // 		...and not set it when the UI is the same
+// XXX this must create it's own overlay...
 function showInOverlay(obj){
 	obj.click(function(){ return false })
 	// clean things up...
@@ -651,6 +651,19 @@ function setElementScale(elem, scale){
 	})
 }
 
+
+// returns the width of the current image square...
+function getCurrentImageSize(){
+	return ImageGrid.getContainerScale() * $('.image').width()
+}
+
+
+// returns the number of images fitting viewer size...
+function getViewerWidthImages(){
+	return Math.floor($('.viewer').width()/getCurrentImageSize())
+}
+
+
 // this will create a function that will add/remove a css_class to elem 
 // calling the optional callbacks before and/or after.
 //
@@ -1784,6 +1797,13 @@ ImageGrid.GROUP('Navigation',
 /********************************************************** Zooming **/
 
 ImageGrid.GROUP('Zooming',
+	ImageGrid.ACTION({
+			title: 'Get container scale',
+			display: false,
+		},
+		function getContainerScale(){
+			return getElementScale($('.field'))
+		}),
 	ImageGrid.ACTION({
 			title: 'Scale container by factor',
 			display: false,