From 3a929ab7ebe91d2bb0036c6304d0818e1ad24e9c Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Sun, 19 Oct 2014 01:22:12 +0400
Subject: [PATCH] added shadow recycling...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui (gen4)/ribbons.js | 101 ++++++++++++++++++++++++++++++++++---------
 1 file changed, 81 insertions(+), 20 deletions(-)

diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js
index 16f738ec..c005f909 100755
--- a/ui (gen4)/ribbons.js	
+++ b/ui (gen4)/ribbons.js	
@@ -333,38 +333,99 @@ module.RibbonsPrototype = {
 	// <delay> sets the delay before the shadow is removed and the target 
 	// state is restored (default: 200).
 	//
+	//
+	// NOTE: if a previous shadow if the same image exists this will recycle
+	// 		the existing shadow and cancel it's removal.
+	//
 	// XXX make this work for multiple targets...
+	// XXX do we need this to adapt to scaling???
+	// 		...if so, then we'll need to place the shadow inside the 
+	// 		ribbon-set...
 	makeShadow: function(target, animate, delay){
 		delay = delay || 200
 		var img = this.getImage(target)
 		var gid = this.getElemGID(img)
 		var s = this.getScale()
-		var shadow = setElementScale($('<div>')
-				.addClass('shadow')
-				.append(
-					img
-						.clone()
-						.removeClass('current')
-						.attr('gid', null))
+		var vo = this.viewer.offset()
+		var io = img.offset()
+
+		// get the shadow if it exists...
+		var shadow = this.viewer.find('.shadow[gid="'+gid+'"]')
+
+		// recycle the shadow...
+		if(shadow.length > 0){
+			// cancel previous shadow removal ticket...
+			var ticket = shadow.attr('ticket') + 1
+			shadow
+				// reset ticket...
+				// NOTE: this is a possible race condition... (XXX)
+				.attr('ticket', ticket)
+				// place it over the current image...
 				.css({
-					width: img.width(),
-					height: img.height(),
-				}), s)
-				.css(img.offset())
-			.appendTo(this.viewer)
+					top: io.top - vo.top,
+					left: io.left - vo.left,
+				})
+
+		// create a new shadow...
+		} else {
+			// removal ticket...
+			var ticket = 0
+
+			// make a shadow element...
+			// ...we need to scale it to the current scale...
+			var shadow = setElementScale(
+				$('<div>')
+					.addClass('shadow')
+					.attr({
+						gid: gid,
+						ticket: ticket,
+					})
+					.append(
+						// clone the target into the shadow..
+						img
+							.clone()
+							.removeClass('current')
+							.attr('gid', null))
+					.css({
+						width: img.width(),
+						height: img.height(),
+					}), s)
+				// place it over the current image...
+				.css({
+					top: io.top - vo.top,
+					left: io.left - vo.left,
+				})
+				// place in the viewer...
+				// NOTE: placing the shadow in the viewer is a compromise that
+				// 		lets us do simpler positioning 
+				.appendTo(this.viewer)
+		}
+
 		img.addClass('moving')
 		var that = this
 
+		// function to clear the shadow...
 		return function(){
-			var s = that.getScale()
-			var img = that.getImage(gid)
-			if(animate){
-				shadow.css(img.offset())
+			// remove only the item with the correct ticket...
+			if(ticket == shadow.attr('ticket')){
+				var s = that.getScale()
+				var img = that.getImage(gid)
+				var vo = that.viewer.offset()
+				var io = img.offset()
+				if(animate){
+					shadow.css({
+						top: io.top - vo.top,
+						left: io.left - vo.left,
+					})
+				}
+				setTimeout(function(){
+					// remove only the item with the correct ticket...
+					if(ticket == shadow.attr('ticket')){
+						img.removeClass('moving')
+						shadow.remove()
+					}
+				}, delay)
 			}
-			setTimeout(function(){
-				img.removeClass('moving')
-				shadow.remove()
-			}, delay)
 			return img
 		}
 	},