Fixes #192.

Navigator can now rotate together with the viewer.

src/navigator.js

@@ -161,6 +161,11 @@ $.Navigator = function( options ){
         style.cursor        = 'default';
     }( this.displayRegion.style, this.borderWidth ));
 
+    this.displayRegionContainer = $.makeNeutralElement("div");
+    this.displayRegionContainer.id = this.element.id + '-displayregioncontainer';
+    this.displayRegionContainer.className = "displayregioncontainer";
+    this.displayRegionContainer.style.width = "100%";
+    this.displayRegionContainer.style.height = "100%";
 
     this.element.innerTracker = new $.MouseTracker({
         element:         this.element,
@@ -203,7 +208,8 @@ $.Navigator = function( options ){
 
     $.Viewer.apply( this, [ options ] );
 
-    this.element.getElementsByTagName( 'div' )[0].appendChild( this.displayRegion );
+    this.displayRegionContainer.appendChild(this.displayRegion);
+    this.element.getElementsByTagName('div')[0].appendChild(this.displayRegionContainer);
     unneededElement = this.element.getElementsByTagName('textarea')[0];
     if (unneededElement) {
         unneededElement.parentNode.removeChild(unneededElement);
@@ -225,7 +231,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
                     (this.container.clientHeight === 0 ? 1 : this.container.clientHeight)
                 );
             if ( !containerSize.equals( this.oldContainerSize ) ) {
-                var oldBounds = this.viewport.getBounds();
+                var oldBounds = this.viewport.getBounds().rotate(this.viewport.degrees);
                 var oldCenter = this.viewport.getCenter();
                 this.viewport.resize( containerSize, true );
                 var imageHeight = 1 / this.source.aspectRatio;
@@ -318,7 +324,7 @@ $.extend( $.Navigator.prototype, $.EventSource.prototype, $.Viewer.prototype, /*
  */
 function onCanvasClick( event ) {
     if ( event.quick && this.viewer.viewport ) {
-        this.viewer.viewport.panTo( this.viewport.pointFromPixel( event.position ) );
+        this.viewer.viewport.panTo( this.viewport.pointFromPixel( event.position ).rotate( -this.viewer.viewport.degrees, this.viewer.viewport.getHomeBounds().getCenter() ) );
         this.viewer.viewport.applyConstraints();
     }
 }

src/openseadragon.js

@@ -378,6 +378,9 @@
   *     Set to false to prevent polling for navigator size changes. Useful for providing custom resize behavior.
   *     Setting to false can also improve performance when the navigator is configured to a fixed size.
   *
+  * @property {Boolean} [navigatorRotate=true]
+  *     If true, the navigator will be rotated together with the viewer.
+  *
   * @property {Number} [controlsFadeDelay=2000]
   *     The number of milliseconds to wait once the user has stopped interacting
   *     with the interface before begining to fade the controls. Assumes
@@ -955,6 +958,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             navigatorHeight:            null,
             navigatorWidth:             null,
             navigatorAutoResize:        true,
+            navigatorRotate:            true,
 
             // INITIAL ROTATION
             degrees:                0,

src/viewer.js

@@ -1957,7 +1957,8 @@ function openTileSource( viewer, source ) {
             minZoomLevel:       _this.minZoomLevel,
             maxZoomLevel:       _this.maxZoomLevel,
             viewer:             _this,
-            degrees:            _this.degrees
+            degrees:            _this.degrees,
+            navigatorRotate:    _this.navigatorRotate
         });
     }
 

src/viewport.js

@@ -712,6 +712,20 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         return this;
     },
 
+    /**
+     * @function
+     * @private
+     * @param {Object} element
+     * @param {Number} degrees
+     */
+    _setTransformRotate: function (element, degrees) {
+        element.style.webkitTransform = "rotate(" + degrees + "deg)";
+        element.style.mozTransform = "rotate(" + degrees + "deg)";
+        element.style.msTransform = "rotate(" + degrees + "deg)";
+        element.style.oTransform = "rotate(" + degrees + "deg)";
+        element.style.transform = "rotate(" + degrees + "deg)";
+    },
+
     /**
      * Currently only 90 degree rotation is supported and it only works
      * with the canvas. Additionally, the navigator does not rotate yet,
@@ -729,6 +743,11 @@ $.Viewport.prototype = /** @lends OpenSeadragon.Viewport.prototype */{
         if( degrees % 90 !== 0 ) {
             throw new Error('Currently only 0, 90, 180, and 270 degrees are supported.');
         }
+        if (this.viewer.navigator !== null && this.navigatorRotate) {
+            this._setTransformRotate(this.viewer.navigator.displayRegionContainer, degrees);
+            this._setTransformRotate(this.viewer.navigator.displayRegion, -degrees);
+            this.viewer.navigator.viewport.setRotation(degrees);
+        }
         this.degrees = degrees;
         this.viewer.forceRedraw();