some tweaking and minor changes and fixes...

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

ui (gen4)/css/layout.css

@@ -237,6 +237,7 @@ button:hover {
 /********************************************************** Ribbon ***/
 /* XXX for some reason setting image size in vmin stops this from 
 stretching in width... */
+.shadow,
 .ribbon {
   position: relative;
   display: block;
@@ -290,11 +291,13 @@ stretching in width... */
 	border: solid 5px red;
 }
 */
+/* NOTE: this is essentially a ribbon... */
 .shadow {
   position: absolute;
   overflow: visible;
   width: auto;
   height: auto;
+  margin: 0px;
   background: black;
   -webkit-transition: all 0.1s ease-in;
   -moz-transition: all 0.1s ease-in;

ui (gen4)/css/layout.less

@@ -361,6 +361,7 @@ button:hover {
 /********************************************************** Ribbon ***/
 /* XXX for some reason setting image size in vmin stops this from 
 stretching in width... */
+.shadow,
 .ribbon {
 	position: relative;
 	display: block;

ui (gen4)/ribbons.js

@@ -66,6 +66,12 @@ module.RibbonsClassPrototype = {
 	getElemGID: function(elem){
 		return JSON.parse('"' + elem.attr('gid') + '"')
 	},
+	setElemGID: function(elem, gid){
+		return $(elem)
+			.attr('gid', JSON.stringify(gid)
+					// this removes the extra quots...
+					.replace(/^"(.*)"$/g, '$1'))
+	},
 
 	// DOM Constructors...
 	// NOTE: these will return unattached objects...
@@ -78,34 +84,27 @@ module.RibbonsClassPrototype = {
 	// XXX NOTE: quots removal might render this incompatible with older data formats...
 	createRibbon: function(gids){
 		gids = gids.constructor !== Array ? [gids] : gids
+		var that = this
 		return $(gids.map(function(gid){
 			gid = gid != null ? gid+'' : gid
-			return $('<div>')
+			return that.setElemGID($('<div>')
-				.addClass('ribbon')
+				.addClass('ribbon'), gid)[0]
-				.attr('gid', JSON.stringify(gid)
-						// this removes the extra quots...
-						.replace(/^"(.*)"$/g, '$1'))[0]
 		}))
 	},
 	// XXX NOTE: quots removal might render this incompatible with older data formats...
 	createImage: function(gids){
 		gids = gids.constructor !== Array ? [gids] : gids
+		var that = this
 		return $(gids.map(function(gid){
 			gid = gid != null ? gid+'' : gid
-			return $('<div>')
+			return that.setElemGID($('<div>')
-				.addClass('image')
+					.addClass('image'), gid)[0]
-				.attr('gid', JSON.stringify(gid)
-						// this removes the extra quots...
-						.replace(/^"(.*)"$/g, '$1'))[0]
 		}))
 	},
 	createMark: function(cls, gid){
 		gid = gid != null ? gid+'' : gid
-		return $('<div class="mark">')
+		return this.setElemGID($('<div class="mark">')
-			.addClass(cls)
+			.addClass(cls), gid)
-			.attr('gid', JSON.stringify(gid)
-				// this removes the extra quots...
-				.replace(/^"(.*)"$/g, '$1'))
 	},
 } 
 
@@ -128,6 +127,7 @@ module.RibbonsPrototype = {
 
 	// Generic getters...
 	getElemGID: RibbonsClassPrototype.getElemGID,
+	setElemGID: RibbonsClassPrototype.setElemGID,
 
 
 	// Helpers...
@@ -435,7 +435,7 @@ module.RibbonsPrototype = {
 			// ...we need to scale it to the current scale...
 			var shadow = setElementScale(
 				$('<div>')
-					.addClass('shadow ribbon')
+					.addClass('shadow')
 					.attr({
 						gid: gid,
 						ticket: ticket,
@@ -1051,7 +1051,6 @@ module.RibbonsPrototype = {
 		}
 
 		var loaded = r.find('.image')
-		var unload = $()
 
 		// compensate for new/removed images...
 		if(reference != null){
@@ -1073,16 +1072,18 @@ module.RibbonsPrototype = {
 		}
 		
 		// remove all images that we do not need...
+		var unloaded = $()
 		loaded = loaded
 			.filter(function(i, img){ 
 				if(gids.indexOf(that.getElemGID($(img))) >= 0){
 					return true
 				}
-				unload.push(img)
+				unloaded.push(img)
 				return false
 			})
 		// remove everything in one go...
-		unload.remove()
+		unloaded.detach()
+		unloaded = unloaded.toArray()
 
 		$(gids).each(function(i, gid){
 			// support for sparse ribbons...
@@ -1090,9 +1091,16 @@ module.RibbonsPrototype = {
 				return 
 			}
 			// get/create image...
-			// XXX this may affect other ribbons...
+			// NOTE: as this will get a loaded image if it's loaded in 
+			// 		a different ribbon this WILL affect that ribbon...
 			var img = that.getImage(gid)
-			img = img.length == 0 ? that.createImage(gid) : img
+			if(img.length == 0){
+				img = unloaded.length > 0 
+					// reuse an image we just detached...
+					? that.setElemGID(unloaded.pop(), gid) 
+					// create a new image...
+					: that.createImage(gid)
+			}
 
 			// see of we are loaded in the right position...
 			var g = loaded.length > i ? that.getElemGID(loaded.eq(i)) : null

ui (gen4)/viewer.js

@@ -126,7 +126,7 @@ actions.Actions({
 	// NOTE: the setters in the following use the appropriate actions
 	// 		so to avoid recursion do not use these in the specific 
 	// 		actions...
-
+	
 	// Base ribbon...
 	get base(){
 		return this.data == null ? null : this.data.base
@@ -520,6 +520,19 @@ var Viewer =
 module.Viewer = 
 actions.Actions(Client, {
 
+	// Images...
+	/*
+	get images(){
+		return this.ribbons != null ? this.ribbons.images : null
+	},
+	// NOTE: if ribbons are null this will have no effect...
+	set images(value){
+		if(this.ribbons != null){
+			this.ribbons.images = value
+		}
+	},
+	*/
+
 	get screenwidth(){
 		return this.ribbons != null ? this.ribbons.getScreenWidthImages() : null
 	},
@@ -580,11 +593,10 @@ actions.Actions(Client, {
 					: viewer
 
 				if(this.ribbons == null){
-					this.ribbons = ribbons.Ribbons(viewer, data.images)
+					this.ribbons = ribbons.Ribbons(viewer, this.images)
 
 				} else {
 					this.ribbons.clear()
-					// XXX
 					this.ribbons.images = this.images
 				}
 
@@ -667,7 +679,7 @@ actions.Actions(Client, {
 						that.centerImage(t, 'after')
 					}
 				}
-			//}, 0)
+			//}, 10)
 		}],
 	// XXX these should also affect up/down navigation...
 	// 		...navigate by proximity (closest to center) rather than by