Usability bug fix

If the opacity slider was moved to the far right faster than the
animation showing the image, the user would never see the old file
because opacity got adjusted right away.

Now we first move the overlay slider to the right, so that something
is visible, and then quickly animate opacity to the current value.

src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js

diff --git a/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js b/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js
index e993997..6157513 100644
--- a/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js
+++ b/src/main/java/com/gitblit/wicket/pages/scripts/imgdiff.js
@@ -167,9 +167,27 @@
 				overlayAccess.moveAuto(newRatio);
 			}
 		});
+		
+		var autoShowing = false;
 		$opacitySlider.on('slider:pos', function(e, data) {
-			if ($div.width() <= 0 && !blinking) overlayAccess.moveAuto(1.0); // Make old image visible in a nice way
-			$img.css('opacity', 1.0 - data.ratio);
+			if ($div.width() <= 0 && !blinking) {
+				// Make old image visible in a nice way, *then* adjust opacity
+				autoShowing = true;
+				overlayAccess.moveAuto(1.0, 500, function() {
+					$img.stop().animate(
+						{opacity: 1.0 - opacityAccess.getRatio()},
+						{duration: 400,
+						 complete: function () {
+							// In case the opacity handle was moved while we were trying to catch up
+							$img.css('opacity', 1.0 - opacityAccess.getRatio());
+							autoShowing = false;
+						 }
+						}
+					);
+				});
+			} else if (!autoShowing) {
+				$img.css('opacity', 1.0 - data.ratio);
+			}
 		});
 		$opacitySlider.on('click', function(e) {
 			var newRatio = (e.pageX - $opacitySlider.offset().left) / $opacitySlider.innerWidth();