- fixed problems with binSearch (still ugly and needs revision)

- added preview loading, straight forward, might need to make it stamrter (still stub data)
- some minor tweeks and changes...

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

ui/ImageGrid.js

@@ -34,6 +34,17 @@ var DATA = {
 	// the images object, this is indexed by image GID and contains all 
 	// the needed data...
 	images: {
+		// sub image, for testing load mechanics...
+		SIZE: {
+			id: 'SIZE',
+			ctime: 0,
+			path: './images/sizes/900px/SIZE.jpg',
+			preview: {
+				'150px': './images/sizes/150px/SIZE.jpg',
+				'350px': './images/sizes/350px/SIZE.jpg',
+				'900px': './images/sizes/900px/SIZE.jpg',
+			},
+		},
 	}
 }
 
@@ -184,6 +195,7 @@ function isBetween(a, i, lst){
 // NOTE: this still depends on .indexOf(...), to disable set
 // 		disable_direct_indexing to true
 // XXX BUG this tends to fall into infinite loops...
+// XXX this is a mess, needs revision...
 function binSearch(target, lst, check, return_position, disable_direct_indexing){
 	// XXX is this the correct default?
 	check = check == null ? isBetween : check
@@ -209,7 +221,8 @@ function binSearch(target, lst, check, return_position, disable_direct_indexing)
 	var i = l
 
 	while(l > 0){
-		l = Math.ceil(l/2)
+		// XXX this is a hack -- should we reach 0 using floor(..) instead?
+		l = l <= 1 ? 0 : Math.ceil(l/2)
 		res = check(target, i, lst)
 		// right branch...
 		if(res > 0){
@@ -514,12 +527,38 @@ function updateImage(image, gid, size){
 
 	// XXX STUB
 	image.text(gid)
-	// XXX slect best preview by size...
+
-	// XXX
+	// select best preview by size...
-	// XXX update classes...
+	var url
+	// XXX STUB, use real image GID...
+	gid = 'SIZE'
+	for(var k in DATA.images[gid].preview){
+		var s = parseInt(k)
+		if(s > size){
+			url = 'url('+ DATA.images[gid].preview[k] +')'
+			break
+		}
+	}
+	// if no preview found use the original...
+	if(url == null){
+		url = 'url('+DATA.images[gid].path+')'
+	}
+	image.css({
+		'background-image': url,
+	})
+
+	// update classes and other indicators...
 	// XXX
 }
 
+// shorthand...
+function updateImages(size){
+	size = size == null ? getVisibleImageSize() : size
+	return $('.image').each(function(){
+		updateImage($(this), null, size)
+	})
+}
+
 
 // Load count images around a given image/gid into the given ribbon.
 //
@@ -1007,6 +1046,8 @@ function fitNImages(n){
 	// XXX if animating, the next two likes must be animated together...
 	setElementScale($('.ribbon-set'), scale)
 	centerImage(image, 'css')
+
+	$('.viewer').trigger('fittingImages', [n])
 }
 
 

ui/index.html

@@ -66,13 +66,20 @@
 	font-size: 12pt;
 	overflow: hidden;
 
-	background: black;
 	box-sizing: border-box;
-	border: solid gray 1px;
 	color: white;
+
+	background: no-repeat 50% black;
+	background-size: contain;
+	/* XXX do we need this? */
+	border: solid black 5px;
 }
 .current.image {
-	background: red;
+	background: no-repeat 50% black;
+	background-size: contain;
+
+	/* XXX remove this... */
+	border: solid red 5px;
 }
 
 /* dot mark... */
@@ -258,32 +265,39 @@ $(function(){
 	if(DYNAMIC_LOADING){
 		// XXX move to a setup function in the lib...
 		// XXX update this depending on zoom and navigation speed...
-		var LOADER_THRESHOLD = 2
+		var LOAD_SCREENS = 2
 		// XXX update this depending on zoom and navigation speed...
-		var LOADER_CHUNK = LOADER_THRESHOLD * 2
+		var LOAD_THRESHOLD = 0.5
 		$('.viewer')
 			.on('preCenteringRibbon', function(evt, ribbon, image){
 				// NOTE: we do not need to worry about centering the ribbon 
 				//		here, just ball-park-load the correct batch...
+
 				// check if we are in the right range...
 				var gid = getImageGID(image)
 				var r = getRibbonIndex(ribbon)
 				var img_before = getImageBefore(image, ribbon)
 				var gid_before = getGIDBefore(gid, r)
 
-				// need to load a new set of images...
+				// load the head of the images...
-				if((img_before.length == 0 && gid_before != null) 
+				if(img_before.length == 0 && gid_before == null){
+					var gr = DATA.ribbons[r]
+					// NOTE: rolling to any number of positions greater than length 
+					//		of the ribbon will set the ribbon to its start/end 
+					//		depending on the sign...
+					rollImages(-gr.length, ribbon)
+
+				// load a new set of images...
+				} else if(img_before.length == 0 
 						|| (getImageGID(img_before) 
 								&& getImageGID(img_before) != gid_before)){
-					// get the distance...
 					var images = ribbon.find('.image')
+					// middle image...
 					var cur = getImageGID(images.eq(Math.round(images.length/2)))
 					var gr = DATA.ribbons[r]
-					//console.log('>>>', gr.indexOf(gid_before) - gr.indexOf(cur))
 					rollImages(gr.indexOf(gid_before) - gr.indexOf(cur), ribbon)
 				}
 			})
-			// XXX it takes several steps for adjacent ribbons to catch up...
 			.on('centeringRibbon', function(evt, ribbon, image){
 				// check if we are in the right range...
 				var gid = getImageGID(image)
@@ -302,13 +316,23 @@ $(function(){
 				var first = head.first()
 				var last = head.first()
 
+				// get the frame size to load...
+				var screen_size = getScreenWidthInImages()
+				// NOTE: if this is greater than the number of images currently 
+				//		loaded, it might lead to odd effects...
+				//		XXX need to load additional images and keep track of the 
+				//			loaded chunk size...
+				var frame_size = screen_size * LOAD_SCREENS
+				var threshold = screen_size * LOAD_THRESHOLD
+
+				// do the loading...
 				// XXX need to expand/contract the ribbon depending on zoom and speed...
 				// XXX use extendRibbon, to both roll and expand/contract...
-				if(tail.length < LOADER_THRESHOLD){
+				if(tail.length < threshold){
-					var rolled = rollImages(LOADER_CHUNK, ribbon)
+					var rolled = rollImages(frame_size, ribbon)
 				}
-				if(head.length < LOADER_THRESHOLD){
+				if(head.length < threshold){
-					var rolled = rollImages(-LOADER_CHUNK, ribbon)
+					var rolled = rollImages(-frame_size, ribbon)
 				}
 			})
 			.on('shiftedImage', function(evt, image, from, to){
@@ -358,12 +382,17 @@ $(function(){
 				var gr = DATA.ribbons[r]
 				rollImages(gr.length, ribbon)
 			})
+			// XXX do we need to make this less global?
+			.on('fittingImages', function(evt, n){
+				updateImages()
+			})
 	}
 
 
 
 	// XXX stub...
 	centerImage(focusImage($('.image').first()), 'css')
+	updateImages()
 
 
 })