some refactoring and preparing for more...

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

ui (gen4)/features/_ui-render.js

@@ -15,12 +15,39 @@ var core = require('features/core')
 
 
 
+/*********************************************************************/
+
+var RibbonsClassPrototype = {
+}
+
+
+var RibbonsPrototype = {
+	getImage: function(){
+		// XXX
+	},
+	getImageByPosition: function(){
+		// XXX
+	},
+	getRibbon: function(){
+		// XXX
+	},
+}
+
+
+var Ribbons =
+module.Ribbons =
+object.makeConstructor('Ribbons', 
+	RibbonsClassPrototype,
+	RibbonsPrototype)
+
+
+
 /*********************************************************************/
 
 var RenderActions = actions.Actions({
 	load: [
 		function(){
-			// XXX
+			// XXX setup .ribbons
 		}],
 	reload: [
 		function(){

ui (gen4)/features/ui-legacy.js

@@ -70,7 +70,7 @@ module.Clickable = core.ImageGridFeatures.Feature({
 								// this will prevent double clicks...
 								x = null
 								y = null
-								that.focusImage(that.ribbons.getElemGID($(this)))
+								that.focusImage(that.ribbons.elemGID($(this)))
 								last = Date.now()
 							}
 						})
@@ -190,11 +190,11 @@ module.DirectControlHammer = core.ImageGridFeatures.Feature({
 
 								// silently focus central image...
 								if(that.config['focus-central-image'] == 'silent'){
-									that.data.current = that.ribbons.getElemGID(central)
+									that.data.current = that.ribbons.elemGID(central)
 									
 								// focus central image in a normal manner...
 								} else if(that.config['focus-central-image']){
-									that.focusImage(that.ribbons.getElemGID(central))
+									that.focusImage(that.ribbons.elemGID(central))
 								}
 
 								setTimeout(function(){

ui (gen4)/features/ui-partial-ribbons-2.js

@@ -45,7 +45,7 @@ var PartialRibbonsActions = actions.Actions({
 	updateRibbon: ['- Interface/Update partial ribbon size', 
 		function(target, w, size, threshold, preload){
 			target = target instanceof jQuery 
-				? this.ribbons.getElemGID(target)
+				? this.ribbons.elemGID(target)
 				// NOTE: data.getImage(..) can return null at start or end
 				// 		of ribbon, thus we need to account for this...
 				: (this.data.getImage(target)

ui (gen4)/features/ui-partial-ribbons-precache.js

@@ -109,7 +109,7 @@ var PreCacheActions = actions.Actions({
 	preCacheJumpTargets: ['- Interface/Pre-cache potential jump target images',
 		function(target, sources, radius, size){
 			target = target instanceof jQuery 
-				? this.ribbons.getElemGID(target)
+				? this.ribbons.elemGID(target)
 				// NOTE: data.getImage(..) can return null at start or end
 				// 		of ribbon, thus we need to account for this...
 				: (this.data.getImage(target)

ui (gen4)/features/ui-partial-ribbons-vdom.js

@@ -61,8 +61,7 @@ var Ribbons = {
 	restoreTransitions: null,
 	noTransitions: null,
 	noTransitionsDeep: null,
-	getElemGID: null,
+	elemGID: null,
-	setElemGID: null,
 	replaceGid: null,
 
 	makeShadow: null,
@@ -518,7 +517,7 @@ var PartialRibbonsActions = actions.Actions({
 	updateRibbon: ['- Interface/Update partial ribbon size', 
 		function(target, w, size, threshold){
 			target = target instanceof jQuery 
-				? this.ribbons.getElemGID(target)
+				? this.ribbons.elemGID(target)
 				// NOTE: data.getImage(..) can return null at start or end
 				// 		of ribbon, thus we need to account for this...
 				: (this.data.getImage(target)

ui (gen4)/features/ui-ribbons.js

@@ -32,10 +32,10 @@ function updateImagePosition(actions, target){
 
 	target = target || actions.current
 	target = target instanceof jQuery 
-		? actions.ribbons.getElemGID(target) 
+		? actions.ribbons.elemGID(target) 
 		: target
 
-	var source_ribbon = actions.ribbons.getElemGID(actions.ribbons.getRibbon(target))
+	var source_ribbon = actions.ribbons.elemGID(actions.ribbons.getRibbon(target))
 	var source_order = actions.data.getImageOrder(target)
 
 	return function(){
@@ -106,18 +106,6 @@ actions.Actions({
 		return this.ribbons ? this.ribbons.viewer : undefined },
 	
 
-	// NOTE: this expects that ribbons will maintain .parent.images...
-	// NOTE: when getting rid of ribbons need to also remove the .parent
-	// 		reference...
-	// XXX remove...
-	get ribbons(){
-		return this.__ribbons },
-	set ribbons(ribbons){
-		this.__ribbons = ribbons
-		ribbons.parent = this
-	},
-
-
 	load: [
 		function(data){
 			return function(){
@@ -283,7 +271,7 @@ actions.Actions({
 	centerImage: ['- Interface/Center an image in ribbon horizontally',
 		function(target, align, offset, scale){
 			target = target instanceof jQuery 
-				? this.ribbons.getElemGID(target)
+				? this.ribbons.elemGID(target)
 				: target
 
 			// align current ribbon...
@@ -292,7 +280,7 @@ actions.Actions({
 	centerRibbon: ['- Interface/Center a ribbon vertically',
 		function(target){
 			target = target instanceof jQuery 
-				? this.ribbons.getElemGID(target)
+				? this.ribbons.elemGID(target)
 				: target
 
 			// align current ribbon...
@@ -323,7 +311,7 @@ actions.Actions({
 					t = t.eq(direction == 'before' ? 0 : 1)
 				}
 
-				t = ribbons.getElemGID(t)
+				t = ribbons.elemGID(t)
 
 				this.focusImage(t, r)
 			}
@@ -612,7 +600,7 @@ actions.Actions({
 	updateRibbon: ['- Interface/Update partial ribbon size', 
 		function(target, w, size, threshold){
 			target = target instanceof jQuery 
-				? this.ribbons.getElemGID(target)
+				? this.ribbons.elemGID(target)
 				// NOTE: data.getImage(..) can return null at start or end
 				// 		of ribbon, thus we need to account for this...
 				: (this.data.getImage(target)

ui (gen4)/features/ui-virtual-dom.js

@@ -18,28 +18,6 @@ var core = require('features/core')
 
 
 /*********************************************************************/
-
-/*/ XXX
-var ViewerClassPrototype = {
-}
-
-
-var ViewerPrototype = {
-	sync: function(){
-	},
-}
-
-
-var Viewer =
-module.Viewer =
-object.makeConstructor('Viewer', 
-	ViewerClassPrototype,
-	ViewerPrototype)
-//*/
-
-
-//---------------------------------------------------------------------
-//
 //	- take care of DOM construction and update...
 //	- alignment is done via .centerRibbon(..) / .centerImage(..)
 //	- preview updates (XXX)
@@ -51,7 +29,7 @@ var VirtualDOMRibbonsClassPrototype = {
 
 var VirtualDOMRibbonsPrototype = {
 	// XXX this is a circular ref -- I do not like it...
-	imagegrid: null,
+	parent: null,
 
 	dom: null,
 	vdom: null,
@@ -77,23 +55,28 @@ var VirtualDOMRibbonsPrototype = {
 	},
 	restoreTransitions: function(){
 	},
-	getElemGID: function(){
+	elemGID: function(){
 	},
 	getImage: function(){
 	},
+	getImageByPosition: function(){
+	},
+	getRibbon: function(){
+	},
 	getVisibleImageSize: function(){
 	},
 	focusImage: function(){
 	},
 	px2vmin: function(){
 	},
+	// ...
 
 
 	// constructors...
 	makeView: function(state, initial){
 		state = state || {}
 		var that = this
-		var ig = this.imagegrid
+		var ig = this.parent
 
 		var target = state.target || ig.current
 
@@ -133,7 +116,7 @@ var VirtualDOMRibbonsPrototype = {
 	makeRibbon: function(gid, target, count, state, initial){
 		state = state || {}
 		var that = this
-		var ig = this.imagegrid
+		var ig = this.parent
 		var current = ig.current
 		target = target || state.target || current
 		var size = this.state.tile_size = state.tile_size
@@ -201,13 +184,13 @@ var VirtualDOMRibbonsPrototype = {
 	// XXX update image previews...
 	// XXX update image proportions for rotated images... (???)
 	makeImage: function(gid, size){
-		var ig = this.imagegrid
+		var ig = this.parent
 		//size = this.state.tile_size = size 
 		size = size 
 			|| this.state.tile_size
 			|| this.getVisibleImageSize('max')
-		var data = this.imagegrid.data
+		var data = this.parent.data
-		var images = this.imagegrid.images || {}
+		var images = this.parent.images || {}
 		var current = data.current == gid ? '.current' : ''
 
 		// resolve group preview cover...
@@ -253,7 +236,7 @@ var VirtualDOMRibbonsPrototype = {
 	makeImageMarks: function(gid){
 		var that = this
 		var marks = []
-		var tags = this.imagegrid.data.getTags(gid)
+		var tags = this.parent.data.getTags(gid)
 
 		// XXX STUB: make this extensible...
 		tags.indexOf('bookmark') >= 0 
@@ -312,7 +295,7 @@ var VirtualDOMRibbonsPrototype = {
 			this.sync()
 
 		} else {
-			return this.imagegrid.scale
+			return this.parent.scale
 		}
 	},
 
@@ -349,7 +332,7 @@ var VirtualDOMRibbonsPrototype = {
 		if(this.vdom == null){
 			var n = this.vdom = this.makeView(state, true)
 			var v = vdom.create(n)
-			this.imagegrid.dom.append(v)
+			this.parent.dom.append(v)
 			this.dom = v
 
 		// patch state...
@@ -375,8 +358,8 @@ var VirtualDOMRibbonsPrototype = {
 			.sync()
 	},
 
-	__init__: function(imagegrid){
+	__init__: function(parent){
-		this.imagegrid = imagegrid
+		this.parent = parent || this.parent
 	},
 }
 
@@ -388,9 +371,7 @@ object.makeConstructor('VirtualDOMRibbons',
 
 
 
-
+//---------------------------------------------------------------------
-
-/*********************************************************************/
 
 var VirtualDomActions = actions.Actions({
 
@@ -398,10 +379,8 @@ var VirtualDomActions = actions.Actions({
 		return this.__dom },
 	set dom(value){
 		this.__dom = value},
-	get virtualdom(){
-		return (this.__virtual_dom = this.__virtual_dom || VirtualDOMRibbons(this)) },
-
 
+	// XXX setup .ribbons...
 	load: [
 		function(data){
 			return function(){
@@ -411,9 +390,10 @@ var VirtualDomActions = actions.Actions({
 
 				if(this.dom == null){
 					this.dom = viewer
+					this.ribbons = new VirtualDOMRibbons()
 
 				} else {
-					this.virtualdom.clear()
+					this.ribbons.clear()
 				}
 
 				this.reload()
@@ -421,13 +401,13 @@ var VirtualDomActions = actions.Actions({
 		}],
 	reload: ['Interface/Reload viewer',
 		function(){
-			this.virtualdom.reset()
+			this.ribbons.reset()
 			this.focusImage()
 		}],
 	// XXX this ignores it's args...
 	refresh: ['Interface/Refresh images without reloading',
 		function(gids, scale){
-			this.virtualdom.sync()
+			this.ribbons.sync()
 			this.focusImage()
 		}],
 
@@ -436,7 +416,7 @@ var VirtualDomActions = actions.Actions({
 	updateRibbon: ['- Interface/Update partial ribbon size', 
 		function(target, w, size, threshold){
 			target = target instanceof jQuery 
-				? this.virtualdom.getElemGID(target)
+				? this.ribbons.elemGID(target)
 				// NOTE: data.getImage(..) can return null at start or end
 				// 		of ribbon, thus we need to account for this...
 				: (this.data.getImage(target)
@@ -452,7 +432,7 @@ var VirtualDomActions = actions.Actions({
 
 			// XXX for some reason this does not set the .current class 
 			// 		on the right image...
-			this.virtualdom.sync(target, size)
+			this.ribbons.sync(target, size)
 
 			// XXX HACK: this fixes a bug in virtual-dom where .current
 			// 		is not synced correctly...
@@ -460,7 +440,7 @@ var VirtualDomActions = actions.Actions({
 			// 		manually, dom gets diffed and no change is detected
 			// 		then the object gets recycled and the .current class
 			// 		ends up on a different element...
-			this.virtualdom.focusImage(target)
+			this.ribbons.focusImage(target)
 
 			this.centerViewer(target)
 		}],
@@ -481,14 +461,14 @@ module.VirtualDom = core.ImageGridFeatures.Feature({
 
 	handlers: [
 		['clear',
-			function(){ this.virtualdom.clear() }],
+			function(){ this.ribbons.clear() }],
 		['fitImage toggleSingleImage',
-			function(){ delete this.virtualdom.state.tile_size }],
+			function(){ delete this.ribbons.state.tile_size }],
 
 		// XXX account for fast navigation...
 		['focusImage.pre', 
 			function(target){ 
-				var img = this.virtualdom.getImage(target)
+				var img = this.ribbons.getImage(target)
 
 				// in-place update...
 				if(img.length > 0){
@@ -497,7 +477,7 @@ module.VirtualDom = core.ImageGridFeatures.Feature({
 					if(!this.__partial_ribbon_update){
 						this.__partial_ribbon_update = setTimeout((function(){
 							delete this.__partial_ribbon_update
-							this.virtualdom.preventTransitions()
+							this.ribbons.preventTransitions()
 
 							this
 								.updateRibbon(this.current)
@@ -506,7 +486,7 @@ module.VirtualDom = core.ImageGridFeatures.Feature({
 								// 		thus missing the base call...
 								.alignRibbons(null, null, true)
 
-							this.virtualdom.restoreTransitions()
+							this.ribbons.restoreTransitions()
 						}).bind(this), 150)
 					}
 
@@ -526,7 +506,7 @@ module.VirtualDom = core.ImageGridFeatures.Feature({
 			'toggleMark',
 			'toggleBookmark',
 		//], function(){ this.updateRibbon() }],
-		], function(){ this.virtualdom.sync() }],
+		], function(){ this.ribbons.sync() }],
 	],
 })
 

ui (gen4)/features/ui-widgets.js

@@ -1396,7 +1396,7 @@ module.ContextActionMenu = core.ImageGridFeatures.Feature({
 							event.preventDefault()
 							event.stopPropagation()
 
-							var g = gid || that.ribbons.getElemGID(img)
+							var g = gid || that.ribbons.elemGID(img)
 
 							that
 								.focusImage(g)
@@ -1867,7 +1867,7 @@ var WidgetTestActions = actions.Actions({
 			if(cur && next && cur.birthtime.getMonth() != next.birthtime.getMonth()){
 				this.ribbons.getImageMarks(gid).filter('.partition').remove()
 				this.ribbons.getImage(gid)
-					.after(this.ribbons.setElemGID($('<div class="mark partition">'), gid)
+					.after(this.ribbons.elemGID($('<div class="mark partition">'), gid)
 						.attr('text', month[next.birthtime.getMonth()]))
 			}
 		}],

ui (gen4)/features/ui.js

@@ -93,6 +93,24 @@ var base = require('features/base')
 //		.updateRibbon(target)
 //			-> this
 //
+//	Generic .ribbons API (introspection):
+//		.ribbons.getImage(..)
+//			-> image
+//
+//		.ribbons.getImageByPosition(..)
+//			-> image
+//
+//		.ribbons.getRibbon(..)
+//			-> ribbon
+//
+//		.ribbons.elemGID(..)
+//			-> gid
+//
+//	XXX do we need these???
+//		.ribbons.focusImage(..)
+//	XXX Avoid using methods that expose specific non-generic structure:
+//		.ribbons.getRibbonSet(..)
+//		.ribbons.getRibbonLocator(..)
 //
 //
 // Workspaces:
@@ -189,6 +207,17 @@ module.ViewerActions = actions.Actions({
 	// Viewer dom... 
 	dom: null,
 
+	// NOTE: this expects that ribbons will maintain .parent.images...
+	// NOTE: when getting rid of ribbons need to also remove the .parent
+	// 		reference...
+	get ribbons(){
+		return this.__ribbons },
+	set ribbons(ribbons){
+		this.__ribbons = ribbons
+		ribbons.parent = this
+	},
+
+
 	// Current image data...
 	//
 	get image(){
@@ -1390,7 +1419,7 @@ var ControlActions = actions.Actions({
 				var handler = setup.handler = setup.handler 
 					|| function(){
 						var img = $(event.target)
-						var gid = that.ribbons.getElemGID(img)
+						var gid = that.ribbons.elemGID(img)
 
 						// sanity check: only handle clicks on images...
 						if(!img.hasClass('image')){
@@ -1483,7 +1512,7 @@ var ControlActions = actions.Actions({
 	makeRibbonVisible: ['- Interface/Make ribbon visible if it is off screen',
 		function(target, center_off_screen){
 			var r = this.ribbons.getRibbon(target)
-			var rgid = this.ribbons.getElemGID(r)
+			var rgid = this.ribbons.elemGID(r)
 
 			var central = this.ribbons.getImageByPosition('center', r)
 
@@ -1595,7 +1624,7 @@ var ControlActions = actions.Actions({
 						var that = this
 
 						var r = this.ribbons.getRibbon(target)
-						var rgid = this.ribbons.getElemGID(r)
+						var rgid = this.ribbons.elemGID(r)
 
 						var data = false
 						var post_handlers
@@ -1711,7 +1740,7 @@ var ControlActions = actions.Actions({
 										var current_ribbon = that.data.getRibbon()
 										if(current_ribbon == rgid){
 											var central = that.ribbons.getImageByPosition('center', r)
-											var gid = that.ribbons.getElemGID(central)
+											var gid = that.ribbons.elemGID(central)
 											// silently focus central image...
 											if(that.config['focus-central-image'] == 'silent'){
 												that.data.focusImage(gid)
@@ -1815,7 +1844,7 @@ var ControlActions = actions.Actions({
 					var current_ribbon = that.data.getRibbon()
 					if(current_ribbon == rgid){
 						var central = that.ribbons.getImageByPosition('center', r)
-						var gid = that.ribbons.getElemGID(central)
+						var gid = that.ribbons.elemGID(central)
 						// silently focus central image...
 						if(that.config['focus-central-image'] == 'silent'){
 							that.data.focusImage(gid)
@@ -1835,7 +1864,7 @@ var ControlActions = actions.Actions({
 						var that = this
 
 						var r = this.ribbons.getRibbon(target)
-						var rgid = this.ribbons.getElemGID(r)
+						var rgid = this.ribbons.elemGID(r)
 
 						// XXX vertical scroll...
 						this.dom

ui (gen4)/imagegrid/ribbons.js

@@ -214,18 +214,24 @@ var RibbonsClassPrototype = {
 	px2vmax: function(px){ return this.px2v(px, 'vmax') },
 
 	// Generic getters...
-	getElemGID: function(elem){
+	elemGID: function(elem, gid){
-		return JSON.parse('"' 
+		// get gid...
-			+ (elem instanceof jQuery ? 
+		return (gid == null || gid == '?') ?
-					elem.attr('gid') 
+				JSON.parse('"' 
-				: elem.getAttribute('gid'))
+					+ (elem instanceof jQuery ? 
-			+ '"')
+							elem.attr('gid') 
-	},
+						: elem.getAttribute('gid'))
-	setElemGID: function(elem, gid){
+					+ '"')
-		return $(elem)
+			// remove gid...
-			.attr('gid', JSON.stringify(gid)
+			: gid == '' ? 
-					// this removes the extra quots...
+				$(elem)
-					.replace(/^"(.*)"$/g, '$1'))
+					.removesAttr('gid')
+			// set gid...
+			: $(elem)
+				.attr('gid', 
+					JSON.stringify(gid)
+						// this removes the extra quots...
+						.replace(/^"(.*)"$/g, '$1'))
 	},
 
 	// DOM Constructors...
@@ -245,11 +251,11 @@ var RibbonsClassPrototype = {
 		return $(gids.map(function(gid){
 			gid = gid != null ? gid+'' : gid
 
-			return that.setElemGID($('<div>')
+			return that.elemGID($('<div>')
 				.addClass('ribbon'), gid)[0]
 			//return $('<div>')
 			//	.addClass('ribbon-container')
-			//	.append(that.setElemGID($('<div>')
+			//	.append(that.elemGID($('<div>')
 			//		.addClass('ribbon'), gid))[0]
 		}))
 	},
@@ -260,13 +266,13 @@ var RibbonsClassPrototype = {
 		var that = this
 		return $(gids.map(function(gid){
 			gid = gid != null ? gid+'' : gid
-			return that.setElemGID($('<div>')
+			return that.elemGID($('<div>')
 					.addClass('image'), gid)[0]
 		}))
 	},
 	createMark: function(cls, gid){
 		gid = gid != null ? gid+'' : gid
-		return this.setElemGID($('<div class="mark">')
+		return this.elemGID($('<div class="mark">')
 			.addClass(cls), gid)
 	},
 } 
@@ -317,8 +323,7 @@ var RibbonsPrototype = {
 	createMark: RibbonsClassPrototype.createMark,
 
 	// Generic getters...
-	getElemGID: RibbonsClassPrototype.getElemGID,
+	elemGID: RibbonsClassPrototype.elemGID,
-	setElemGID: RibbonsClassPrototype.setElemGID,
 
 
 	get parent(){
@@ -712,7 +717,7 @@ var RibbonsPrototype = {
 			return function(){}
 		}
 
-		var gid = this.getElemGID(img)
+		var gid = this.elemGID(img)
 		var s = this.scale()
 		var vo = this.viewer.offset()
 		var io = img.offset()
@@ -934,7 +939,7 @@ var RibbonsPrototype = {
 	getImageMarks: function(img, cls){
 		img = img || this.getImage()
 		gid = typeof(img) == typeof('str') ? img : null
-		gid = gid == null ? this.getElemGID(img) : gid
+		gid = gid == null ? this.elemGID(img) : gid
 
 		var marks = this.viewer.find('.mark[gid='+JSON.stringify(gid)+']')
 
@@ -1316,14 +1321,14 @@ var RibbonsPrototype = {
 		var img = this.getImage(from)
 
 		img && img.length > 0 
-			&& this.setElemGID(img, to)
+			&& this.elemGID(img, to)
 
 		return this
 	},
 
 	// XXX is .__image_updaters the right way to go???
 	updateImageIndicators: function(gid, image){
-		gid = gid == null ? this.getElemGID() : gid
+		gid = gid == null ? this.elemGID() : gid
 		image = image == null ? this.getImage() : $(image)
 
 		// collect marks...
@@ -1406,7 +1411,7 @@ var RibbonsPrototype = {
 			if(image.length == 0){
 				return
 			}
-			var old_gid = that.getElemGID(image)
+			var old_gid = that.elemGID(image)
 
 			// same image -- update...
 			if(old_gid == gid || gid == null){
@@ -1529,7 +1534,7 @@ var RibbonsPrototype = {
 			if(image.length == 0){
 				return
 			}
-			var old_gid = that.getElemGID(image)
+			var old_gid = that.elemGID(image)
 			var data = update[old_gid] = {
 				image: image,
 				attrs: {},
@@ -1702,7 +1707,7 @@ var RibbonsPrototype = {
 
 			// align only if ref is loaded...
 			if(ref.length > 0){
-				var gid = this.getElemGID(ref)
+				var gid = this.elemGID(ref)
 				var W = Math.min(document.body.offsetWidth, document.body.offsetHeight)
 				var w = this.getVisibleImageSize('width', 1, ref) / W * 100
 
@@ -1722,7 +1727,7 @@ var RibbonsPrototype = {
 		var unload_marks = []
 		loaded = loaded
 			.filter(function(i, img){ 
-				var g = that.getElemGID(img)
+				var g = that.elemGID(img)
 				if(gids.indexOf(g) >= 0){
 					return true
 				}
@@ -1754,7 +1759,7 @@ var RibbonsPrototype = {
 			if(img.length == 0){
 				img = unloaded.length > 0 
 					// reuse an image we just detached...
-					? that.setElemGID(unloaded.pop(), gid) 
+					? that.elemGID(unloaded.pop(), gid) 
 					// create a new image...
 					: that.createImage(gid)
 			}
@@ -1762,7 +1767,7 @@ var RibbonsPrototype = {
 			// see of we are loaded in the right position...
 			// NOTE: loaded is maintained current later, thus it always 
 			// 		contains a set of images representative of the ribbon...
-			var g = loaded.length > i ? that.getElemGID(loaded.eq(i)) : null
+			var g = loaded.length > i ? that.elemGID(loaded.eq(i)) : null
 
 			// check if we need to reattach the image...
 			if(gid != g){
@@ -1811,7 +1816,7 @@ var RibbonsPrototype = {
 
 			// align only if ref is loaded...
 			if(ref.length > 0){
-				var gid = this.getElemGID(ref)
+				var gid = this.elemGID(ref)
 				var W = Math.min(document.body.offsetWidth, document.body.offsetHeight)
 				var w = this.getVisibleImageSize('width', 1, ref) / W * 100
 
@@ -1836,14 +1841,14 @@ var RibbonsPrototype = {
 					var img = loaded.eq(i)
 
 					// cleanup marks...
-					var g = that.getElemGID(img)
+					var g = that.elemGID(img)
 					unload_marks = gids.indexOf(g) < 0 ?
 						unload_marks.concat(that.getImageMarks(g).toArray())
 						: unload_marks
 
 					// XXX for some reason this is smoother than:
 					// 		gid && that.updateImage(img, gid)
-					gid && that.updateImage(that.setElemGID(img, gid))
+					gid && that.updateImage(that.elemGID(img, gid))
 				}
 		//	})
 		}
@@ -1889,7 +1894,7 @@ var RibbonsPrototype = {
 				// remove marks...
 				.each(function(_, img){
 					marks = marks.concat(
-						that.getImageMarks(that.getElemGID(img)).toArray())
+						that.getImageMarks(that.elemGID(img)).toArray())
 				})
 				
 			// clear stuff...
@@ -1914,7 +1919,7 @@ var RibbonsPrototype = {
 				// remove marks...
 				.each(function(_, img){
 					marks = marks.concat(
-						that.getImageMarks(that.getElemGID(img)).toArray())
+						that.getImageMarks(that.elemGID(img)).toArray())
 				})
 
 			// calculate the compensation...
@@ -1965,7 +1970,7 @@ var RibbonsPrototype = {
 			// update images...
 			right instanceof Array && right.forEach(function(gid, i){
 				var img = loading.eq(i)
-				that.setElemGID(img, gid) 
+				that.elemGID(img, gid) 
 				// XXX for some reason this does not add indicators...
 				that.updateImage(img)
 			})
@@ -1993,7 +1998,7 @@ var RibbonsPrototype = {
 			// update images...
 			left instanceof Array && left.forEach(function(gid, i){
 				var img = loading.eq(i)
-				that.setElemGID(img, gid) 
+				that.elemGID(img, gid) 
 				// XXX for some reason this does not add indicators...
 				that.updateImage(img)
 			})
@@ -2122,7 +2127,7 @@ var RibbonsPrototype = {
 
 				that.viewer.find(RIBBON).each(function(){
 					var r = $(this)
-					if(ribbons.indexOf(that.getElemGID(r)) < 0){
+					if(ribbons.indexOf(that.elemGID(r)) < 0){
 						r.remove()
 					}
 				})
@@ -2270,7 +2275,7 @@ var RibbonsPrototype = {
 
 		// get marked state...
 		if(action == '?'){
-			var gid = this.getElemGID(image)
+			var gid = this.elemGID(image)
 			var res = 0
 			cls.forEach(function(cls){
 				res += that.getImageMarks(gid, cls).length != 0 ? 1 : 0
@@ -2281,7 +2286,7 @@ var RibbonsPrototype = {
 		// set the marks...
 		image.each(function(){
 			var image = $(this)
-			var gid = that.getElemGID(image)
+			var gid = that.elemGID(image)
 			cls.forEach(function(cls){
 				var mark = that.getImageMarks(gid, cls)