fixed shadow image with scaling...

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

ui (gen4)/index.html

@@ -31,12 +31,16 @@
 	overflow: visible;
 	width: auto;
 	height: auto;
+
 	background: black;
 
 	-webkit-transition: all 0.1s ease-in;
 	-moz-transition: all 0.1s ease-in;
 	transition: all 0.1s ease-in;
 }
+.shadow .image {
+	transform-origin: 0 0;
+}
 .image.moving {
 	visibility: hidden;
 }

ui (gen4)/ribbons.js

@@ -314,22 +314,29 @@ module.RibbonsPrototype = {
 	},
 
 	// XXX make this work for multiple targets...
-	// XXX avoid ardcoded delays...
+	// XXX avoid hardcoded delays...
 	makeShadow: function(target, animate){
 		var img = this.getImage(target)
 		var gid = this.getElemGID(img)
+		var s = this.getScale()
 		var shadow = $('<div>')
 				.addClass('shadow')
-			.append(img
+				.append(setElementScale(
+					img
 						.clone()
 						.removeClass('current')
-					.attr('gid', null))
+						.attr('gid', null), s))
+				.css({
+					width: img.width()*s,
+					height: img.height()*s,
+				})
 				.css(img.offset())
 			.appendTo(this.viewer)
 		img.addClass('moving')
 		var that = this
 
 		return function(){
+			var s = that.getScale()
 			var img = that.getImage(gid)
 			if(animate){
 				shadow.css(img.offset())