From db05e4b40351bf24f60ec43b81fe4e60b93fa2c4 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Fri, 17 Jan 2014 13:48:19 +0000
Subject: [PATCH] ImageViewer: show overview only when needed (part 2, better
 animation)

---
 source/Ox.UI/js/Image/ImageViewer.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/source/Ox.UI/js/Image/ImageViewer.js b/source/Ox.UI/js/Image/ImageViewer.js
index a9899032..82da6444 100644
--- a/source/Ox.UI/js/Image/ImageViewer.js
+++ b/source/Ox.UI/js/Image/ImageViewer.js
@@ -227,6 +227,7 @@ Ox.ImageViewer = function(options, self) {
             height: self.overviewHeight + 'px',
             width: self.overviewWidth + 'px'
         })
+        .hide()
         .on({
             mouseenter: function() {
                 self.mouseIsInInterface = true;
@@ -259,7 +260,6 @@ Ox.ImageViewer = function(options, self) {
     });
 
     setSize();
-    setCenterAndZoom();
 
     function getAreaCSS(area) {
         return area == 'bottom' ? {
@@ -537,8 +537,9 @@ Ox.ImageViewer = function(options, self) {
     }
 
     function updateInterface() {
+        var isFitZoom = self.zoom == self.fitZoom;
         self.$scaleButton[
-            self.zoom == self.fitZoom ? 'disableButton' : 'enableButton'
+            isFitZoom ? 'disableButton' : 'enableButton'
         ]('fit');
         self.$scaleButton[
             self.zoom == self.fillZoom
@@ -547,7 +548,7 @@ Ox.ImageViewer = function(options, self) {
             ? 'disableButton' : 'enableButton'
         ]('fill');
         self.$zoomButton[
-            self.zoom == self.fitZoom ? 'disableButton' : 'enableButton'
+            isFitZoom ? 'disableButton' : 'enableButton'
         ]('out');
         self.$zoomButton[
             self.zoom == 1 ? 'disableButton' : 'enableButton'
@@ -555,9 +556,12 @@ Ox.ImageViewer = function(options, self) {
         self.$zoomButton[
             self.zoom == self.maxZoom ? 'disableButton' : 'enableButton'
         ]('in');
-        self.$overview[
-            self.zoom == self.fitZoom ? 'hide' : 'show'
-        ]();
+        !isFitZoom && self.$overview.show();
+        self.$overview.stop().animate({
+            opacity: isFitZoom ? 0 : 1
+        }, 250, function() {
+            isFitZoom && self.$overview.hide();
+        });
     }
 
     function updateSize() {