pageflow-linkmap-page 0.1.0

data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap_audio_player_controls.js

@@ -0,0 +1,132 @@
+(function($) {
+  $.widget('pageflow.linkmapAudioPlayerControls', {
+    _create: function() {
+      var widget = this;
+      var that = this;
+
+      this.wrapper = $('<div />')
+        .addClass('linkmap_audio_player_controls')
+        .appendTo(this.element.find('.linkmap_marker'));
+
+      this.playButton = $('<div />')
+        .addClass('play')
+        .appendTo(this.wrapper)
+      ;
+
+      this.pauseButton = $('<div />')
+        .addClass('pause')
+        .appendTo(this.wrapper)
+      ;
+
+      this.progressElement = $('<div />')
+        .addClass('progress')
+        .appendTo(this.wrapper)
+      ;
+
+      this.progressElement.html('<div class="audio_inline_progress"><div class="progress_inner"><div class="left_circle"><div class="circle_inner"><div class="circle_innerst"></div></div></div><div class="right_circle"><div class="circle_inner"><div class="circle_innerst"></div></div></div><div class="audio_inline_loading_spinner"><div class="circle_inner"><div class="circle_innerst"></div></div></div></div></div>');
+
+      this.currentTimeElement = $('<div />')
+        .addClass('current_time')
+        .appendTo(this.wrapper)
+      ;
+
+      this.durationElement = $('<div />')
+        .addClass('duration')
+        .appendTo(this.wrapper)
+      ;
+
+      this.playButton.on('click', function(e) {
+        widget.element.addClass('loading');
+        widget._trigger('play', null, {
+          audioFileId: widget.element.data('audioFile')
+        });
+        e.preventDefault();
+        e.stopPropagation();
+      });
+
+      this.pauseButton.on('click', function(e) {
+        widget._trigger('pause', null, {
+          audioFileId: widget.element.data('audioFile')
+        });
+
+        e.preventDefault();
+        e.stopPropagation();
+      });
+
+      this.element.on('click', function() {
+        if (!widget.element.hasClass('dynamic_marker')) {
+          widget._trigger('play', null, {
+            audioFileId: widget.element.data('audioFile')
+          });
+        }
+      });
+
+      this.progressElement.on('click', function(e) {
+
+        var elementCenter = {
+          x: $(this).offset().left + $(this).width() / 2,
+          y: $(this).offset().top + $(this).height() / 2,
+        };
+
+        var angleDeg = Math.atan2(e.pageY - elementCenter.y, e.pageX - elementCenter.x) * 180 / Math.PI;
+        var circlePercentage = (angleDeg + 90) / 360;
+
+        circlePercentage = circlePercentage < 0 ? 1 + circlePercentage : circlePercentage;
+
+        widget._trigger('seek', null, {
+          positionInPercent: circlePercentage,
+          audioFileId: widget.element.data('audioFile')
+        });
+
+        e.stopPropagation();
+      });
+    },
+
+    drawCircle: function(percentage) {
+      var rightCircle = this.element.find('.right_circle .circle_inner');
+      var leftCircle = this.element.find('.left_circle .circle_inner');
+      var rightCircleInner = this.element.find('.right_circle .circle_innerst');
+      var leftCircleInner = this.element.find('.left_circle .circle_innerst');
+
+
+
+      var rotationRight = Math.min(percentage/100 * 360, 180);
+      var rotationLeft = Math.max(percentage/100 * 360 - 180, 0);
+      var rotation;
+
+      rotation = rotationRight;
+      rightCircle.attr("style", "-webkit-transform: rotate(" + rotation + "deg); -moz-transform: rotate(" + rotation + "deg); -ms-transform: rotate(" + rotation + "deg); -o-transform: rotate(" + rotation + "deg); transform: rotate(" + rotation + "deg)");
+      rightCircleInner.attr("style", "-webkit-transform: rotate(" + -rotation + "deg); -moz-transform: rotate(" + -rotation + "deg); -ms-transform: rotate(" + -rotation + "deg); -o-transform: rotate(" + -rotation + "deg); transform: rotate(" + -rotation + "deg)");
+
+      rotation = rotationLeft;
+      leftCircle.attr("style", "-webkit-transform: rotate(" + rotation + "deg); -moz-transform: rotate(" + rotation + "deg); -ms-transform: rotate(" + rotation + "deg); -o-transform: rotate(" + rotation + "deg); transform: rotate(" + rotation + "deg)");
+      leftCircleInner.attr("style", "-webkit-transform: rotate(" + -rotation + "deg); -moz-transform: rotate(" + -rotation + "deg); -ms-transform: rotate(" + -rotation + "deg); -o-transform: rotate(" + -rotation + "deg); transform: rotate(" + -rotation + "deg)");
+    },
+
+    playing: function() {
+      this.element.addClass('loading');
+    },
+
+    notPlaying: function() {
+      this.element.removeClass('playing loading');
+    },
+
+    cancelLoading: function() {
+      this.element.removeClass('loading');
+    },
+
+    updateProgress: function(player) {
+      this.element.removeClass('loading');
+      this.element.addClass('playing');
+
+      this.currentTimeElement.text(player.formatTime(player.position()));
+      this.durationElement.text(player.formatTime(player.duration()));
+
+      var percent = player.duration() > 0 ? player.position() / player.duration() * 100 : 0;
+      this.drawCircle(percent);
+    },
+
+    refresh: function() {
+    }
+  });
+}(jQuery));

data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap_audio_players_controller.js

@@ -0,0 +1,48 @@
+(function($) {
+  $.widget('pageflow.linkmapAudioPlayersController', {
+    _create: function() {
+      var player = this.options.player;
+      var element = this.element;
+
+      this.delegatePlayerEvent('play', 'playing');
+      this.delegatePlayerEvent('pause ended', 'notPlaying');
+      this.delegatePlayerEvent('timeupdate', 'updateProgress');
+
+      player.on('play', function(options) {
+        var playerElements = element.find('[data-target-type="audio_file"]');
+
+        playerElements.each(function() {
+          var playerElement = $(this);
+
+          if (playerElement.data('audioFile') !== options.audioFileId) {
+            playerElement.linkmapAudioPlayerControls('cancelLoading');
+          }
+        });
+      });
+
+      this.element.on('linkmapaudioplayercontrolsplay', function(event, options) {
+        player.play(options.audioFileId);
+      });
+
+      this.element.on('linkmapaudioplayercontrolspause', function(event, options) {
+        player.pause();
+      });
+
+      this.element.on('linkmapaudioplayercontrolsseek', function(event, options) {
+        player.seek(player.duration() * options.positionInPercent);
+      });
+    },
+
+    delegatePlayerEvent: function (event, method) {
+      var element = this.element;
+      var player = this.options.player;
+
+      player.on(event, function(options) {
+        var selector = '[data-audio-file="' + options.audioFileId + '"]';
+        var playerElement = element.find(selector);
+
+        playerElement.linkmapAudioPlayerControls(method, player);
+      });
+    }
+  });
+}(jQuery));

data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap_lookaround.js

@@ -0,0 +1,154 @@
+(function($) {
+  $.widget('pageflow.linkmapLookaround', {
+    speedUp : 10,
+    drag : false,
+
+    _create: function() {
+      this.disabled = false;
+      this.marginScrolling = !this.options.marginScrollingDisabled;
+
+      var scroller = this.scroller = this.options.scroller;
+      var that = this;
+
+      this.scrollStrategyX = new pageflow.linkmapPage.TargetSpeedStrategy({
+        scrollerPosition: function() {
+          return scroller.positionX();
+        },
+
+        scrollerMax: function() {
+          return scroller.maxX();
+        }
+      }, 'x');
+
+      this.scrollStrategyY = new pageflow.linkmapPage.TargetSpeedStrategy({
+        scrollerPosition: function() {
+          return scroller.positionY();
+        },
+
+        scrollerMax: function() {
+          return scroller.maxY();
+        }
+      }, 'y');
+
+      this.element.on('mousedown touchstart', function (event) {
+        that.drag = true;
+
+        $(window).one('mouseup touchend', function() {
+          that.drag = false;
+          that.initialBeta = null;
+          that.initialGamma = null;
+        });
+      });
+
+      this.element.on('mousedown', function (event) {
+        // prevent dragging
+        event.originalEvent.preventDefault();
+      });
+
+      this.element.on('mouseenter', function() {
+        that.scrollStrategyX.reset();
+        that.scrollStrategyY.reset();
+      });
+
+      this.element.on('mouseleave', function() {
+        that.scrollStrategyX.reset();
+        that.scrollStrategyY.reset();
+      });
+
+      $(window).on('orientationchange', function( event ) {
+        that.drag = false;
+        that.initialBeta = null;
+        that.initialGamma = null;
+      });
+
+      this.element.on('mousemove', function(e) {
+        var containerWidth = that.element.width();
+        var containerHeight = that.element.height();
+
+        that.scrollStrategyX.updateMouse(e.pageX / containerWidth);
+        that.scrollStrategyY.updateMouse(e.pageY / containerHeight);
+      });
+    },
+
+    enable: function() {
+      this.disabled = false;
+    },
+
+    disable: function() {
+      this.disabled = true;
+    },
+
+    activate: function() {
+      this.startInterval();
+
+      if (pageflow.browser.has('mobile platform')) {
+        this.startGyro();
+      }
+    },
+
+    deactivate: function() {
+      this.stopInterval();
+
+      if (pageflow.browser.has('mobile platform')) {
+        this.stopGyro();
+      }
+    },
+
+    startInterval: function() {
+      if (!this.interval) {
+        this.interval = setInterval(_.bind(this.onTick, this), 25);
+      }
+    },
+
+    stopInterval: function() {
+      if (this.interval) {
+        clearInterval(this.interval);
+        this.interval = null;
+      }
+    },
+
+    onTick: function() {
+      if (!this.drag && this.marginScrolling && !this.disabled) {
+        this.scroller.scrollBy(this.scrollStrategyX.getNextScrollDelta(),
+                               this.scrollStrategyY.getNextScrollDelta());
+      }
+    },
+
+    update: function(marginScrollingDisabled) {
+      this.marginScrolling = !marginScrollingDisabled;
+    },
+
+    startGyro: function() {
+      var that = this;
+      var limit = 8;
+
+      gyro.startTracking(function(o) {
+        if (!that.initialBeta) {
+          that.initialBeta = o.beta;
+        }
+
+        if (!that.initialGamma) {
+          that.initialGamma = o.gamma;
+        }
+
+        if (!this.drag) {
+          var deltaGamma = o.gamma - that.initialGamma;
+          var deltaBeta = o.beta - that.initialBeta;
+
+          if ($(window).height() >= $(window).width()) {
+            that.scrollStrategyX.updateGyro(deltaGamma);
+            that.scrollStrategyY.updateGyro(-deltaBeta);
+          }
+          else {
+            that.scrollStrategyX.updateGyro(-deltaBeta);
+            that.scrollStrategyY.updateGyro(deltaGamma);
+          }
+        }
+      });
+    },
+
+    stopGyro: function() {
+      gyro.stopTracking();
+    }
+  });
+}(jQuery));

data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap_lookaround_strategies/target_speed.js

@@ -0,0 +1,99 @@
+pageflow.linkmapPage.TargetSpeedStrategy = function(options, name) {
+  var speedUp = 10;
+
+  var targetSpeed = 0;
+  var speed = 0;
+  var realSpeed = 0;
+
+  var stopFactor = 1;
+  var isStopping = false;
+  var wasStopping = false;
+
+  var activeMargin = 0.4;
+
+  var scrollerPosition = options.scrollerPosition;
+  var scrollerMax = options.scrollerMax;
+
+  this.reset = function() {
+    targetSpeed = 0;
+  };
+
+  this.updateGyro = function(delta) {
+    this.updateTargetSpeed(Math.abs(delta) < 8 ? 0 : delta / 90);
+  };
+
+  this.updateMouse = function(fraction) {
+    var delta = fraction * 2 - 1;
+    var onOuterAreas = Math.abs(delta) > 1 - activeMargin;
+
+    this.updateTargetSpeed(onOuterAreas ?
+                           (delta - ((1 - activeMargin) * sign(delta))) / activeMargin :
+                           0);
+  };
+
+  this.updateTargetSpeed = function(value) {
+    targetSpeed = value;
+  };
+
+  this.getNextScrollDelta = function() {
+    convergeSpeed();
+    updateStopFactor();
+    updateSpeedIfStoppingAborted();
+
+    realSpeed = speed * stopFactor;
+
+    return -realSpeed * speedUp;
+  };
+
+  var i = 0;
+
+  function convergeSpeed() {
+    if (Math.abs(speed - targetSpeed) > 0.01) {
+      var d = Math.abs(targetSpeed) > Math.abs(speed) ? 0.02 : 0.04;
+      speed = limit(speed + d * sign(targetSpeed - speed), targetSpeed);
+    }
+    else {
+      speed = targetSpeed;
+    }
+  }
+
+  function limit(speed, targetSpeed) {
+    if (speed > targetSpeed) {
+      return Math.max(speed, targetSpeed);
+    }
+    else {
+      return Math.min(speed, targetSpeed);
+    }
+  }
+
+  function updateStopFactor() {
+    isStopping = false;
+    stopFactor = 1;
+
+    if (scrollerPosition() < scrollerMax() * 0.8 && targetSpeed >= 0) {
+      stopFactor = (scrollerMax() - scrollerPosition()) / (scrollerMax() * 0.2);
+      isStopping = true;
+    }
+
+    if (scrollerPosition() > scrollerMax() * 0.2 && targetSpeed <= 0) {
+      stopFactor = scrollerPosition() / (scrollerMax() * 0.2);
+      isStopping = true;
+    }
+
+    if (stopFactor > 1) {
+      stopFactor = stopFactor;
+    }
+  }
+
+  function updateSpeedIfStoppingAborted() {
+    if (wasStopping && !isStopping) {
+      speed = realSpeed;
+    }
+
+    wasStopping = isStopping;
+  }
+
+  function sign(value) {
+    return value > 0 ? 1 : -1;
+  }
+};

data/app/assets/javascript/pageflow/linkmap_page/widgets/linkmap_panorama.js

@@ -0,0 +1,421 @@
+(function($) {
+  $.widget('pageflow.linkmapPanorama', {
+    scrollHoverMargin : 0.2,
+    environmentMargin : 0.2,
+    minScaling: true,
+    minScalingSize: 80,
+    lastMouseMoveEvent: null,
+
+    _create: function() {
+      var that = this,
+          pageElement = this.options.page;
+
+      this.addEnvironment = this.options.addEnvironment;
+      this.panorama = this.options.panorama();
+      this.limitScrolling = this.options.limitScrolling;
+      this.scroller = this.options.scroller;
+
+      this.activeAreas = pageElement.find(this.options.activeAreasSelector);
+      this.panoramaWrapper = pageElement.find('.panorama_wrapper');
+      this.innerScrollerElement = pageElement.find('.linkmap');
+      this.overlayBox = pageElement.find('.description_overlay');
+      this.overlayInnerBox = pageElement.find('.description_overlay_wrapper');
+      this.overlayTitle = pageElement.find('.description_overlay .link_title');
+      this.overlayDescription = pageElement.find('.description_overlay .link_description');
+
+      this.startScrollPosition = _.clone(this.options.startScrollPosition);
+
+      this.currentScrollPosition = null;
+
+      this.refresh();
+
+      this.scroller.onScrollEnd(function() {
+        that.updateScrollPosition();
+      });
+
+      $(window).on('resize', function () {
+        that.centerToPoint(null, 0);
+      });
+
+      this.element.on('mousemove', function(e) {
+        that.lastMouseMoveEvent = e;
+        that.calcAreaOpacity(that.activeAreas, e.pageX, e.pageY);
+      });
+
+      pageElement.on('mouseenter', '.hover_area', function() {
+        positionOverlay($(this));
+      });
+
+      pageElement.on('click', function() {
+        that.overlayBox.removeClass('active');
+        that.activeAreas.removeClass('hover');
+      });
+
+      $('body').on('mouseleave', '.hover_area', function() {
+        that.overlayBox.removeClass('active');
+      });
+
+      pageElement.on('dragstart resizestart', '.hover_area', function() {
+        that.overlayBox.removeClass('active');
+      });
+
+      that.activeAreas.each(function() {
+        $(this).on('click touchstart', function(e) {
+          if (pageflow.browser.has('mobile platform')) {
+            if($(this).hasClass('hover')) {
+              that.activeAreas.removeClass('active');
+              $(this).addClass('active');
+              return;
+            }
+            that.activeAreas.removeClass('hover');
+            $(this).addClass('hover');
+            positionOverlay($(this));
+            return false;
+          }
+          else {
+            that.activeAreas.removeClass('active');
+            $(this).addClass('active');
+          }
+        })
+      });
+
+      var positionOverlay = function(area) {
+        if (area.is('.editing')) {
+          return;
+        }
+
+        var linkTitle = area.find('.link_title').html();
+        var linkDescription = area.find('.link_description').html();
+
+        if (linkTitle || linkDescription) {
+          that.overlayTitle.html(linkTitle);
+          that.overlayDescription.html(linkDescription);
+
+          that.overlayBox.addClass('active');
+
+
+
+          if(that.panorama.width() - (area.position().left + area.outerWidth()) < that.overlayBox.outerWidth()) {
+            var overlayAlignmentDirection = "left";
+            that.overlayBox.addClass('left_aligned');
+          }
+          else {
+            var spaceLeftOfArea = area.offset().left;
+            var spaceRightOfArea = $(window).width() - area.offset().left - area.outerWidth();
+
+            if(spaceLeftOfArea < spaceRightOfArea || spaceLeftOfArea < that.overlayBox.outerWidth()) {
+              var overlayAlignmentDirection = "right";
+              that.overlayBox.removeClass('left_aligned');
+            }
+            else {
+              var overlayAlignmentDirection = "left";
+              that.overlayBox.addClass('left_aligned');
+            }
+          }
+
+          if(overlayAlignmentDirection == "right") {
+            that.overlayBox.removeClass('left_aligned');
+            that.overlayBox.css({
+              'left': area.position().left + area.width(),
+              'top': area.position().top,
+              'margin-top': area.height() / 2
+            });
+          }
+          if(overlayAlignmentDirection == "left") {
+            that.overlayBox.addClass('left_aligned');
+            that.overlayBox.css({
+              'left': area.position().left - that.overlayBox.outerWidth(),
+              'top': area.position().top,
+              'margin-top': area.height() / 2
+            });
+          }
+
+          var spaceToBottom = that.panorama.height() - area.position().top;
+          var spaceToViewportBottom = $(window).height() - area.offset().top - area.height() / 2;
+          var spaceToViewportTop = $(window).height() - 50;
+          var minMargin = 40;
+
+          if(that.overlayBox.outerHeight() > spaceToBottom) {
+            that.overlayInnerBox.css('top', (spaceToBottom - that.overlayInnerBox.outerHeight() - minMargin - area.height() / 2) + 'px');
+          }
+          else {
+            that.overlayInnerBox.css('top', '0px');
+          }
+          var additionalMargin = 10;
+
+          if(spaceToViewportBottom < that.overlayBox.outerHeight() && that.overlayBox.outerHeight() + additionalMargin < spaceToViewportTop) {
+            additionalMargin = spaceToViewportBottom - that.overlayBox.outerHeight() - additionalMargin;
+            that.overlayInnerBox.css('top', additionalMargin + 'px');
+          }
+          else {
+            that.overlayInnerBox.css('top', '0px');
+          }
+        }
+      }
+
+      this.refresh();
+    },
+
+    calcAreaOpacity: function(activeAreas, mX, mY) {
+      if (pageflow.browser.has('mobile platform')) {
+        return;
+      }
+
+      var pageElement = this.options.page;
+      var distanceLimit = pageElement.width() > pageElement.height() ? pageElement.height() : pageElement.width();
+      var minOpacity = 0.4;
+      activeAreas.each(function() {
+        var distance = calculateDistance($(this), mX, mY);
+
+        if(distance <= distanceLimit) {
+          var opacity = 1 + minOpacity - Math.sqrt(distance / distanceLimit);
+          $(this).find('.linkmap_marker.no_transition').css('opacity', opacity);
+        }
+        else {
+          $(this).find('.linkmap_marker.no_transition').css('opacity', minOpacity);
+        }
+
+
+      });
+
+      function calculateDistance(elem, mouseX, mouseY) {
+        return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
+      }
+    },
+
+    highlightAreas: function() {
+      var element = this.element;
+      element.find('.linkmap_marker').addClass('teasing');
+
+      setTimeout(function() {
+        element.find('.linkmap_marker').removeClass('teasing');
+      }, 1000);
+
+      setTimeout(function() {
+        element.find('.linkmap_marker').addClass('no_transition');
+      }, 2000);
+    },
+
+    resetAreaHighlighting: function() {
+      var element = this.element;
+
+      element.find('.linkmap_marker').removeClass('no_transition teasing');
+      element.find('.linkmap_marker').css('opacity', pageflow.browser.has('mobile platform') ? '0.8' : '0.4');
+    },
+
+    getScrollArea: function(activeAreas) {
+      var panorama = this.panorama;
+      var pageElement = this.options.page;
+      var startScrollPosition = this.startScrollPosition;
+      var scrollArea;
+
+      if (activeAreas.length && this.limitScrolling) {
+        scrollArea = {
+          top: this.startScrollPosition.y * panorama.height(),
+          left: this.startScrollPosition.x * panorama.width(),
+          bottom: this.startScrollPosition.y * panorama.height(),
+          right: this.startScrollPosition.x * panorama.width(),
+        };
+
+        activeAreas.each(function() {
+          var el = $(this);
+
+          scrollArea.top = scrollArea.top > el.position().top ? el.position().top : scrollArea.top;
+          scrollArea.left = scrollArea.left > el.position().left ? el.position().left : scrollArea.left;
+          scrollArea.bottom = scrollArea.bottom < el.position().top + el.height() ? el.position().top + el.height() : scrollArea.bottom;
+          scrollArea.right = scrollArea.right < el.position().left + el.width() ? el.position().left + el.width() : scrollArea.right;
+        });
+
+        scrollArea.top = Math.max(0, scrollArea.top - pageElement.height() * this.scrollHoverMargin);
+        scrollArea.left = Math.max(0, scrollArea.left - pageElement.width() * this.scrollHoverMargin);
+        scrollArea.bottom = Math.min(panorama.height(), scrollArea.bottom + pageElement.height() * this.scrollHoverMargin);
+        scrollArea.right = Math.min(panorama.width(), scrollArea.right + pageElement.width() * this.scrollHoverMargin);
+      }
+      else {
+        scrollArea = {
+          top: panorama.position().top,
+          left: panorama.position().left,
+          bottom: (panorama.position().top + panorama.height()),
+          right: (panorama.position().left + panorama.width()),
+        };
+      }
+
+      return scrollArea;
+
+    },
+
+    getMinScale: function(activeAreas) {
+      var smallestScale;
+      var that = this;
+      var minimumSize = this.minScalingSize;
+      var smallestSize = Math.min(this.panorama.attr('data-width'), this.panorama.attr('data-height'));
+
+      if(this.minScaling) {
+
+        for (var i = 0; i < activeAreas.length; i++) {
+          var el = $(activeAreas[i]);
+
+          if(el.attr('data-height') / 100 *  that.panorama.attr('data-height') < smallestSize) {
+            smallestSize = el.attr('data-height') / 100 *  that.panorama.attr('data-height');
+          }
+          if(el.attr('data-width') / 100 *  that.panorama.attr('data-width')  < smallestSize) {
+            smallestSize = el.attr('data-width') / 100 *  that.panorama.attr('data-width');
+          }
+          smallestScale = minimumSize / smallestSize;
+        }
+      } else {
+        smallestScale = 0;
+      }
+
+      return smallestScale;
+    },
+
+    update: function(addEnvironment, limitScrolling, startScrollPosition, minScaling) {
+      this.addEnvironment = addEnvironment;
+      this.limitScrolling = limitScrolling;
+      this.startScrollPosition = _.clone(startScrollPosition);
+      this.minScaling = minScaling;
+
+      this.refresh();
+    },
+
+    refresh: function() {
+      this.keepingScrollPosition(function() {
+        var pageElement = this.options.page;
+
+        this.panorama = this.options.panorama();
+
+        this.panoramaSize = this.getPanoramaSize(pageElement);
+        this.panorama.width(this.panoramaSize.width);
+        this.panorama.height(this.panoramaSize.height);
+
+        this.activeAreas = pageElement.find(this.options.activeAreasSelector);
+        this.scrollArea = this.getScrollArea(this.activeAreas);
+
+        this.innerScrollerElement.addClass('measuring');
+
+        this.innerScrollerElement.width(this.scrollArea.right - this.scrollArea.left);
+        this.innerScrollerElement.height(this.scrollArea.bottom - this.scrollArea.top);
+
+        var maxTranslateX = this.panoramaSize.width - pageElement.width();
+        var maxTranslateY = this.panoramaSize.height - pageElement.height();
+
+        this.panoramaWrapper.css({
+          left: -Math.min(maxTranslateX, this.scrollArea.left) +'px',
+          top: -Math.min(maxTranslateY, this.scrollArea.top) + 'px'
+        });
+
+        this.innerScrollerElement.removeClass('measuring');
+        this.scroller.refresh();
+
+        var leftToCenterInnerScroller = (pageElement.width() - (this.scrollArea.right - this.scrollArea.left)) / 2;
+        var topToCenterInnerScroller = (pageElement.height() - (this.scrollArea.bottom - this.scrollArea.top)) / 2;
+
+        this.innerScrollerElement.css('left', (this.scroller.maxX() == 0 && this.panoramaSize.width > this.scrollArea.right - this.scrollArea.left ? Math.min(leftToCenterInnerScroller, this.scrollArea.left) : 0) + "px");
+        this.innerScrollerElement.css('top', (this.scroller.maxY() == 0 && this.panoramaSize.height > pageElement.height() ? Math.min(topToCenterInnerScroller, this.scrollArea.top) : 0) + "px");
+      });
+    },
+
+    getPanoramaSize: function(pageElement) {
+      var result = {};
+      var windowRatio = pageElement.width() / pageElement.height();
+      var environmentMargin = this.addEnvironment ? (1 + this.environmentMargin) : 1;
+      var smallestScale = this.getMinScale(this.activeAreas);
+      var imageRatio;
+
+      if (this.panorama.attr('data-height') > 0) {
+        imageRatio = this.panorama.attr('data-width') / this.panorama.attr('data-height');
+      }
+      else {
+        imageRatio = 1;
+      }
+
+      if(imageRatio > windowRatio) {
+        result.height = pageElement.height() * environmentMargin;
+        result.width = result.height * imageRatio;
+      }
+      else {
+        result.width = pageElement.width() * environmentMargin;
+        result.height = result.width / imageRatio;
+      }
+
+      if (result.width < this.panorama.attr('data-width') * smallestScale) {
+        result.width = this.panorama.attr('data-width') * smallestScale;
+        result.height = this.panorama.attr('data-height') * smallestScale;
+      }
+
+      return result;
+    },
+
+    resetScrollPosition: function() {
+      this.centerToPoint(this.panoramaToScroller(this.startScrollPosition), 0);
+    },
+
+    centerToPoint: function(point, time) {
+      point = point || this.currentScrollPosition;
+
+      var absoluteX = this.scroller.maxX() * point.x;
+      var absoluteY = this.scroller.maxY() * point.y;
+
+      this.scroller.scrollTo(absoluteX, absoluteY, time);
+
+      this.currentScrollPosition = this.currentScrollPosition || point;
+    },
+
+    keepingScrollPosition: function(fn) {
+      var panoramaPosition;
+
+      if (this.currentScrollPosition) {
+        panoramaPosition = this.scrollerToPanorama(this.currentScrollPosition);
+      }
+      else {
+        panoramaPosition = this.startScrollPosition;
+      }
+
+      fn.call(this);
+
+      this.centerToPoint(this.panoramaToScroller(panoramaPosition));
+    },
+
+    scrollerToPanorama: function(point) {
+      var scrollAreaWidth = (this.scrollArea.right - this.scrollArea.left);
+      var scrollAreaHeight = (this.scrollArea.bottom - this.scrollArea.top);
+
+      return {
+        x: this.panoramaSize.width === 0 ?
+          0 :
+          (this.scrollArea.left + point.x * scrollAreaWidth) / this.panoramaSize.width,
+        y: this.panoramaSize.height === 0?
+          0 :
+          (this.scrollArea.top + point.y * scrollAreaHeight) / this.panoramaSize.height
+      };
+    },
+
+    panoramaToScroller: function(point) {
+      var scrollAreaWidth = (this.scrollArea.right - this.scrollArea.left);
+      var scrollAreaHeight = (this.scrollArea.bottom - this.scrollArea.top);
+
+      return {
+        x: scrollAreaWidth === 0 ?
+          0 :
+          (point.x * this.panoramaSize.width - this.scrollArea.left) / scrollAreaWidth ,
+        y: scrollAreaHeight === 0 ?
+          0 :
+          (point.y * this.panoramaSize.height - this.scrollArea.top) / scrollAreaHeight
+      };
+    },
+
+    updateScrollPosition: function() {
+      var that = this;
+
+      setTimeout(function() {
+        that.currentScrollPosition.x = that.scroller.maxX() !== 0 ? that.scroller.positionX() / that.scroller.maxX() : 0;
+        that.currentScrollPosition.y = that.scroller.maxY() !== 0 ? that.scroller.positionY() / that.scroller.maxY() : 0;
+      }, 10);
+
+      if (this.lastMouseMoveEvent) {
+        this.calcAreaOpacity(this.activeAreas, this.lastMouseMoveEvent.pageX, this.lastMouseMoveEvent.pageY);
+      }
+    }
+  });
+}(jQuery));