Merge branch 'master' into lint

Fixed Conflicts:
	openseadragon.js
	src/drawer.js

build.properties

@@ -6,7 +6,7 @@
 PROJECT: openseadragon
 BUILD_MAJOR: 0
 BUILD_MINOR: 9
-BUILD_ID: 90
+BUILD_ID: 92
 BUILD: ${PROJECT}.${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}
 VERSION: ${BUILD_MAJOR}.${BUILD_MINOR}.${BUILD_ID}
 

openseadragon.js

@@ -1,7 +1,7 @@
 /*globals OpenSeadragon */
 
 /**
- * @version  OpenSeadragon 0.9.90
+ * @version  OpenSeadragon 0.9.92
  *
  * @fileOverview 
  * <h2>
@@ -526,6 +526,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             maxImageCacheCount:     200,
             minZoomImageRatio:      0.8,
             maxZoomPixelRatio:      2,
+            timeout:                5000,
 
             //INTERFACE RESOURCE SETTINGS
             prefixUrl:              "/images/",
@@ -3685,6 +3686,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
                 contentSize:            this.source.dimensions, 
                 springStiffness:        this.springStiffness,
                 animationTime:          this.animationTime,
+                showNavigator:          false,
                 minZoomImageRatio:      1,
                 maxZoomPixelRatio:      1
             });
@@ -3739,13 +3741,14 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             immediateRender:    this.immediateRender,
             blendTime:          this.blendTime,
             alwaysBlend:        this.alwaysBlend,
-            minPixelRatio:      this.minPixelRatio,
+            minPixelRatio:      this.collectionMode ? 0 : this.minPixelRatio,
+            timeout:            this.timeout,
             debugMode:          this.debugMode,
             debugGridColor:     this.debugGridColor
         });
 
         //Instantiate a navigator if configured
-        if ( this.showNavigator  && ! this.navigator ){
+        if ( this.showNavigator  && ! this.navigator && !this.collectionMode ){
             this.navigator = new $.Navigator({
                 id:          this.navigatorElement,
                 position:    this.navigatorPosition,
@@ -3942,8 +3945,8 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             bodyStyle.width     = "100%";
             bodyStyle.height    = "100%";
 
-            canvasStyle.backgroundColor = "black";
+            //canvasStyle.backgroundColor = "black";
-            canvasStyle.color           = "white";
+            //canvasStyle.color           = "white";
 
             //containerStyle.position = "fixed";
 
@@ -4745,7 +4748,7 @@ $.Navigator = function( options ){
     }
 
     options = $.extend( true, {
-        navigatorSizeRatio:     $.DEFAULT_SETTINGS.navigatorSizeRatio
+        sizeRatio:     $.DEFAULT_SETTINGS.navigatorSizeRatio
     }, options, {
         element:                this.element,
         //These need to be overridden to prevent recursion since
@@ -4902,8 +4905,8 @@ $.Navigator = function( options ){
         this.element.style.width  = options.width + 'px';
         this.element.style.height = options.height + 'px';
     } else {
-        this.element.style.width  = ( viewerSize.x * options.navigatorSizeRatio ) + 'px';
+        this.element.style.width  = ( viewerSize.x * options.sizeRatio ) + 'px';
-        this.element.style.height = ( viewerSize.y * options.navigatorSizeRatio ) + 'px';
+        this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px';
     }
 
     $.Viewer.apply( this, [ options ] ); 
@@ -5770,7 +5773,7 @@ $.extend( $.DziTileSource.prototype, $.TileSource.prototype, {
             }
             dziPath = url.split('/');
             dziName = dziPath.pop();
-            dziName = dziName.substring(0, dziName.indexOf('.'));
+            dziName = dziName.substring(0, dziName.lastIndexOf('.'));
             dziPath = '/' + dziPath.join('/') + '/' + dziName + '_files/';
             tilesUrl = dziPath;
             if( host ){
@@ -7690,7 +7693,8 @@ $.Tile.prototype = {
     drawHTML: function( container ) {
 
         var position = this.position.apply( Math.floor ),
-            size     = this.size.apply( Math.ceil );
+            size     = this.size.apply( Math.ceil )
+            containerSize = $.getElementSize( container );
 
         if ( !this.loaded || !this.image ) {
             $.console.warn(
@@ -7701,26 +7705,48 @@ $.Tile.prototype = {
         }
 
         if ( !this.element ) {
-            this.element        = $.makeNeutralElement("img");
+            this.element              = $.makeNeutralElement("img");
-            this.element.src    = this.url;
+            this.element.src          = this.url;
-            this.style          = this.element.style;
 
+            this.style                     = this.element.style;
             this.style.position            = "absolute";
             this.style.msInterpolationMode = "nearest-neighbor";
         }
 
-
         if ( this.element.parentNode != container ) {
             container.appendChild( this.element );
         }
 
-        this.element.style.left    = position.x + "px";
+        this.style.top     = position.y + "px";
-        this.element.style.top     = position.y + "px";
+        this.style.left    = position.x + "px";
-        this.element.style.width   = size.x + "px";
+        this.style.height  = size.y + "px";
-        this.element.style.height  = size.y + "px";
+        this.style.width   = size.x + "px";
 
+        //EXPERIMENTAL - trying to figure out how to scale the container
+        //               content during animation of the container size.
+        /*
+        if ( !this.element ) {
+            this.element            = $.makeNeutralElement("div");
+            this.image              = $.makeNeutralElement("img");
+            this.image.src          = this.url;
+            this.image.style.height = '100%';
+            this.image.style.width  = '100%';
+            this.image.style.msInterpolationMode = "nearest-neighbor";
+            this.element.appendChild( this.image );
+
+            this.style                     = this.element.style;
+            this.style.position            = "absolute";
+        }
+        this.style.right   = "0px";
+        this.style.bottom  = "0px";
+        if ( size.y == containerSize.y || size.x == containerSize.x ){
+            this.style.right   = position.x + "px";
+            this.style.bottom  = position.y + "px";
+        } 
+        */
         $.setElementOpacity( this.element, this.opacity );
 
+
     },
 
     /**
@@ -7741,7 +7767,23 @@ $.Tile.prototype = {
             return;
         }
         context.globalAlpha = this.opacity;
+
+        context.save();
+
+        if( context.globalAlpha == 1 && this.image.src.match('.png') ){
+
+            context.clearRect( 
+                position.x+1, 
+                position.y+1, 
+                size.x-2, 
+                size.y-2 
+            );
+
+        }
+        
         context.drawImage( this.image, position.x, position.y, size.x, size.y );
+
+        context.restore();
     },
 
     /**
@@ -7938,8 +7980,7 @@ $.Tile.prototype = {
 
 (function( $ ){
     
-var TIMEOUT             = 5000,
+var DEVICE_SCREEN       = $.getWindowSize(),
-    DEVICE_SCREEN       = $.getWindowSize(),
     BROWSER             = $.Browser.vendor,
     BROWSER_VERSION     = $.Browser.version,
 
@@ -8008,6 +8049,7 @@ $.Drawer = function( options ) {
         midUpdate:      false,
         updateAgain:    true,
 
+
         //internal state / configurable settings 
         overlays:           [],
         collectionOverlays: {},
@@ -8022,7 +8064,8 @@ $.Drawer = function( options ) {
         blendTime:          $.DEFAULT_SETTINGS.blendTime,
         alwaysBlend:        $.DEFAULT_SETTINGS.alwaysBlend,
         minPixelRatio:      $.DEFAULT_SETTINGS.minPixelRatio,
-        debugMode:          $.DEFAULT_SETTINGS.debugMode
+        debugMode:          $.DEFAULT_SETTINGS.debugMode,
+        timeout:            $.DEFAULT_SETTINGS.timeout
 
     }, options );
 
@@ -8259,7 +8302,7 @@ $.Drawer.prototype = {
 
             jobid = window.setTimeout( function(){
                 finishLoadingImage( image, complete, false, jobid );
-            }, TIMEOUT );
+            }, this.timeout );
 
             loading   = true;
             image.src = src;
@@ -8323,8 +8366,12 @@ function updateViewport( drawer ) {
     //TODO
     drawer.canvas.innerHTML   = "";
     if ( USE_CANVAS ) {
-        drawer.canvas.width   = viewportSize.x;
+        if( drawer.canvas.width != viewportSize.x ||
-        drawer.canvas.height  = viewportSize.y;
+            drawer.canvas.height != viewportSize.y 
+        ){
+            drawer.canvas.width   = viewportSize.x;
+            drawer.canvas.height  = viewportSize.y;
+        }
         drawer.context.clearRect( 0, 0, viewportSize.x, viewportSize.y );
     }
 
@@ -8568,12 +8615,17 @@ function getTile( x, y, level, tileSource, tilesMatrix, time, numTiles, normHeig
 
 
 function loadTile( drawer, tile, time ) {
-    tile.loading = drawer.loadImage(
+    if( drawer.viewport.collectionMode ){
-        tile.url,
+        drawer.midUpdate = false;
-        function( image ){
+        onTileLoad( drawer, tile, time );
-            onTileLoad( drawer, tile, time, image );
+    } else {
-        }
+        tile.loading = drawer.loadImage(
-    );
+            tile.url,
+            function( image ){
+                onTileLoad( drawer, tile, time, image );
+            }
+        );
+    }
 }
 
 function onTileLoad( drawer, tile, time, image ) {
@@ -8593,7 +8645,7 @@ function onTileLoad( drawer, tile, time, image ) {
     if ( drawer.midUpdate ) {
         $.console.warn( "Tile load callback in middle of drawing routine." );
         return;
-    } else if ( !image ) {
+    } else if ( !image  && !drawer.viewport.collectionMode ) {
         $.console.log( "Tile %s failed to load: %s", tile, tile.url );
         tile.exists = false;
         return;
@@ -8929,9 +8981,9 @@ function drawTiles( drawer, lastDrawn ){
                             'below 0px -webkit-gradient('+
                                 'linear,left '+
                                 'top,left '+
-                                'bottom,from(transparent),color-stop(60%,transparent),to(rgba(255,255,255,0.4))'+
+                                'bottom,from(transparent),color-stop(62%,transparent),to(rgba(255,255,255,0.62))'+
                             ')';
-                        style['border'] = '1px solid rgba(255,255,255,0.2)';
+                        style['border'] = '1px solid rgba(255,255,255,0.38)';
                         //style['borderRight'] = '1px solid #fff';
                     }(viewer.element.style));
 
@@ -9104,6 +9156,7 @@ $.Viewport.prototype = {
         this.fitHeightBounds = new $.Rect( 0, 0, 1, this.contentAspectY );
 
         this.homeBounds = this.fitHeightBounds;
+        return this;
     },
 
     /**
@@ -9289,6 +9342,7 @@ $.Viewport.prototype = {
             bounds.y += dy;
             this.fitBounds( bounds, immediately );
         }
+        return this;
     },
 
     /**
@@ -9297,6 +9351,7 @@ $.Viewport.prototype = {
      */
     ensureVisible: function( immediately ) {
         this.applyConstraints( immediately );
+        return this;
     },
 
     /**
@@ -9334,7 +9389,7 @@ $.Viewport.prototype = {
         newZoom   = 1.0 / newBounds.width;
         if ( newZoom == oldZoom || newBounds.width == oldBounds.width ) {
             this.panTo( center, immediately );
-            return;
+            return this;
         }
 
         referencePoint = oldBounds.getTopLeft().times( 
@@ -9349,6 +9404,7 @@ $.Viewport.prototype = {
         );
 
         this.zoomTo( newZoom, referencePoint, immediately );
+        return this;
     },
     
     /**
@@ -9361,6 +9417,7 @@ $.Viewport.prototype = {
         } else {
             return this.fitHorizontally( immediately );
         }
+        return this;
     },
 
     /**
@@ -9385,6 +9442,7 @@ $.Viewport.prototype = {
         }
 
         this.fitBounds( this.homeBounds, immediately );
+        return this;
     },
 
     /**
@@ -9409,6 +9467,7 @@ $.Viewport.prototype = {
         }
 
         this.fitBounds( this.homeBounds, immediately );
+        return this;
     },
 
 
@@ -9423,6 +9482,7 @@ $.Viewport.prototype = {
             this.centerSpringY.target.value
         );
         this.panTo( center.plus( delta ), immediately );
+        return this;
     },
 
     /**
@@ -9438,6 +9498,8 @@ $.Viewport.prototype = {
             this.centerSpringX.springTo( center.x );
             this.centerSpringY.springTo( center.y );
         }
+
+        return this;
     },
 
     /**
@@ -9445,6 +9507,7 @@ $.Viewport.prototype = {
      */
     zoomBy: function( factor, refPoint, immediately ) {
         this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately );
+        return this;
     },
 
     /**
@@ -9452,15 +9515,18 @@ $.Viewport.prototype = {
      */
     zoomTo: function( zoom, refPoint, immediately ) {
 
+        this.zoomPoint = refPoint instanceof $.Point ? 
+            refPoint : 
+            null;
+            
         if ( immediately ) {
             this.zoomSpring.resetTo( zoom );
         } else {        
             this.zoomSpring.springTo( zoom );
         }
 
-        this.zoomPoint = refPoint instanceof $.Point ? 
+
-            refPoint : 
+        return this;
-            null;
     },
 
     /**
@@ -9482,6 +9548,8 @@ $.Viewport.prototype = {
         }
 
         this.fitBounds( newBounds, true );
+
+        return this;
     },
 
     /**

src/drawer.js

@@ -2,8 +2,7 @@
 
 (function( $ ){
     
-var TIMEOUT             = 5000,
+var DEVICE_SCREEN       = $.getWindowSize(),
-    DEVICE_SCREEN       = $.getWindowSize(),
     BROWSER             = $.Browser.vendor,
     BROWSER_VERSION     = $.Browser.version,
 
@@ -72,6 +71,7 @@ $.Drawer = function( options ) {
         midUpdate:      false,
         updateAgain:    true,
 
+
         //internal state / configurable settings 
         overlays:           [],
         collectionOverlays: {},
@@ -86,7 +86,8 @@ $.Drawer = function( options ) {
         blendTime:          $.DEFAULT_SETTINGS.blendTime,
         alwaysBlend:        $.DEFAULT_SETTINGS.alwaysBlend,
         minPixelRatio:      $.DEFAULT_SETTINGS.minPixelRatio,
-        debugMode:          $.DEFAULT_SETTINGS.debugMode
+        debugMode:          $.DEFAULT_SETTINGS.debugMode,
+        timeout:            $.DEFAULT_SETTINGS.timeout
 
     }, options );
 
@@ -323,7 +324,7 @@ $.Drawer.prototype = {
 
             jobid = window.setTimeout( function(){
                 finishLoadingImage( image, complete, false, jobid );
-            }, TIMEOUT );
+            }, this.timeout );
 
             loading   = true;
             image.src = src;
@@ -387,8 +388,12 @@ function updateViewport( drawer ) {
     //TODO
     drawer.canvas.innerHTML   = "";
     if ( USE_CANVAS ) {
-        drawer.canvas.width   = viewportSize.x;
+        if( drawer.canvas.width != viewportSize.x ||
-        drawer.canvas.height  = viewportSize.y;
+            drawer.canvas.height != viewportSize.y 
+        ){
+            drawer.canvas.width   = viewportSize.x;
+            drawer.canvas.height  = viewportSize.y;
+        }
         drawer.context.clearRect( 0, 0, viewportSize.x, viewportSize.y );
     }
 
@@ -632,12 +637,17 @@ function getTile( x, y, level, tileSource, tilesMatrix, time, numTiles, normHeig
 
 
 function loadTile( drawer, tile, time ) {
-    tile.loading = drawer.loadImage(
+    if( drawer.viewport.collectionMode ){
-        tile.url,
+        drawer.midUpdate = false;
-        function( image ){
+        onTileLoad( drawer, tile, time );
-            onTileLoad( drawer, tile, time, image );
+    } else {
-        }
+        tile.loading = drawer.loadImage(
-    );
+            tile.url,
+            function( image ){
+                onTileLoad( drawer, tile, time, image );
+            }
+        );
+    }
 }
 
 function onTileLoad( drawer, tile, time, image ) {
@@ -657,7 +667,7 @@ function onTileLoad( drawer, tile, time, image ) {
     if ( drawer.midUpdate ) {
         $.console.warn( "Tile load callback in middle of drawing routine." );
         return;
-    } else if ( !image ) {
+    } else if ( !image  && !drawer.viewport.collectionMode ) {
         $.console.log( "Tile %s failed to load: %s", tile, tile.url );
         tile.exists = false;
         return;
@@ -993,9 +1003,9 @@ function drawTiles( drawer, lastDrawn ){
                             'below 0px -webkit-gradient('+
                                 'linear,left '+
                                 'top,left '+
-                                'bottom,from(transparent),color-stop(60%,transparent),to(rgba(255,255,255,0.4))'+
+                                'bottom,from(transparent),color-stop(62%,transparent),to(rgba(255,255,255,0.62))'+
                             ')';
-                        style['border'] = '1px solid rgba(255,255,255,0.2)';
+                        style['border'] = '1px solid rgba(255,255,255,0.38)';
                         //style['borderRight'] = '1px solid #fff';
                     }(viewer.element.style));
 

src/dzitilesource.js

@@ -112,7 +112,7 @@ $.extend( $.DziTileSource.prototype, $.TileSource.prototype, {
             }
             dziPath = url.split('/');
             dziName = dziPath.pop();
-            dziName = dziName.substring(0, dziName.indexOf('.'));
+            dziName = dziName.substring(0, dziName.lastIndexOf('.'));
             dziPath = '/' + dziPath.join('/') + '/' + dziName + '_files/';
             tilesUrl = dziPath;
             if( host ){

src/navigator.js

@@ -31,7 +31,7 @@ $.Navigator = function( options ){
     }
 
     options = $.extend( true, {
-        navigatorSizeRatio:     $.DEFAULT_SETTINGS.navigatorSizeRatio
+        sizeRatio:     $.DEFAULT_SETTINGS.navigatorSizeRatio
     }, options, {
         element:                this.element,
         //These need to be overridden to prevent recursion since
@@ -188,8 +188,8 @@ $.Navigator = function( options ){
         this.element.style.width  = options.width + 'px';
         this.element.style.height = options.height + 'px';
     } else {
-        this.element.style.width  = ( viewerSize.x * options.navigatorSizeRatio ) + 'px';
+        this.element.style.width  = ( viewerSize.x * options.sizeRatio ) + 'px';
-        this.element.style.height = ( viewerSize.y * options.navigatorSizeRatio ) + 'px';
+        this.element.style.height = ( viewerSize.y * options.sizeRatio ) + 'px';
     }
 
     $.Viewer.apply( this, [ options ] ); 

src/openseadragon.js

@@ -526,6 +526,7 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             maxImageCacheCount:     200,
             minZoomImageRatio:      0.8,
             maxZoomPixelRatio:      2,
+            timeout:                5000,
 
             //INTERFACE RESOURCE SETTINGS
             prefixUrl:              "/images/",

src/tile.js

@@ -80,7 +80,8 @@ $.Tile.prototype = {
     drawHTML: function( container ) {
 
         var position = this.position.apply( Math.floor ),
-            size     = this.size.apply( Math.ceil );
+            size     = this.size.apply( Math.ceil )
+            containerSize = $.getElementSize( container );
 
         if ( !this.loaded || !this.image ) {
             $.console.warn(
@@ -91,26 +92,48 @@ $.Tile.prototype = {
         }
 
         if ( !this.element ) {
-            this.element        = $.makeNeutralElement("img");
+            this.element              = $.makeNeutralElement("img");
-            this.element.src    = this.url;
+            this.element.src          = this.url;
-            this.style          = this.element.style;
 
+            this.style                     = this.element.style;
             this.style.position            = "absolute";
             this.style.msInterpolationMode = "nearest-neighbor";
         }
 
-
         if ( this.element.parentNode != container ) {
             container.appendChild( this.element );
         }
 
-        this.element.style.left    = position.x + "px";
+        this.style.top     = position.y + "px";
-        this.element.style.top     = position.y + "px";
+        this.style.left    = position.x + "px";
-        this.element.style.width   = size.x + "px";
+        this.style.height  = size.y + "px";
-        this.element.style.height  = size.y + "px";
+        this.style.width   = size.x + "px";
 
+        //EXPERIMENTAL - trying to figure out how to scale the container
+        //               content during animation of the container size.
+        /*
+        if ( !this.element ) {
+            this.element            = $.makeNeutralElement("div");
+            this.image              = $.makeNeutralElement("img");
+            this.image.src          = this.url;
+            this.image.style.height = '100%';
+            this.image.style.width  = '100%';
+            this.image.style.msInterpolationMode = "nearest-neighbor";
+            this.element.appendChild( this.image );
+
+            this.style                     = this.element.style;
+            this.style.position            = "absolute";
+        }
+        this.style.right   = "0px";
+        this.style.bottom  = "0px";
+        if ( size.y == containerSize.y || size.x == containerSize.x ){
+            this.style.right   = position.x + "px";
+            this.style.bottom  = position.y + "px";
+        } 
+        */
         $.setElementOpacity( this.element, this.opacity );
 
+
     },
 
     /**
@@ -131,7 +154,23 @@ $.Tile.prototype = {
             return;
         }
         context.globalAlpha = this.opacity;
+
+        context.save();
+
+        if( context.globalAlpha == 1 && this.image.src.match('.png') ){
+
+            context.clearRect( 
+                position.x+1, 
+                position.y+1, 
+                size.x-2, 
+                size.y-2 
+            );
+
+        }
+        
         context.drawImage( this.image, position.x, position.y, size.x, size.y );
+
+        context.restore();
     },
 
     /**

src/viewer.js

@@ -373,6 +373,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
                 contentSize:            this.source.dimensions, 
                 springStiffness:        this.springStiffness,
                 animationTime:          this.animationTime,
+                showNavigator:          false,
                 minZoomImageRatio:      1,
                 maxZoomPixelRatio:      1
             });
@@ -427,13 +428,14 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             immediateRender:    this.immediateRender,
             blendTime:          this.blendTime,
             alwaysBlend:        this.alwaysBlend,
-            minPixelRatio:      this.minPixelRatio,
+            minPixelRatio:      this.collectionMode ? 0 : this.minPixelRatio,
+            timeout:            this.timeout,
             debugMode:          this.debugMode,
             debugGridColor:     this.debugGridColor
         });
 
         //Instantiate a navigator if configured
-        if ( this.showNavigator  && ! this.navigator ){
+        if ( this.showNavigator  && ! this.navigator && !this.collectionMode ){
             this.navigator = new $.Navigator({
                 id:          this.navigatorElement,
                 position:    this.navigatorPosition,
@@ -630,8 +632,8 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             bodyStyle.width     = "100%";
             bodyStyle.height    = "100%";
 
-            canvasStyle.backgroundColor = "black";
+            //canvasStyle.backgroundColor = "black";
-            canvasStyle.color           = "white";
+            //canvasStyle.color           = "white";
 
             //containerStyle.position = "fixed";
 

src/viewport.js

@@ -79,6 +79,7 @@ $.Viewport.prototype = {
         this.fitHeightBounds = new $.Rect( 0, 0, 1, this.contentAspectY );
 
         this.homeBounds = this.fitHeightBounds;
+        return this;
     },
 
     /**
@@ -264,6 +265,7 @@ $.Viewport.prototype = {
             bounds.y += dy;
             this.fitBounds( bounds, immediately );
         }
+        return this;
     },
 
     /**
@@ -272,6 +274,7 @@ $.Viewport.prototype = {
      */
     ensureVisible: function( immediately ) {
         this.applyConstraints( immediately );
+        return this;
     },
 
     /**
@@ -309,7 +312,7 @@ $.Viewport.prototype = {
         newZoom   = 1.0 / newBounds.width;
         if ( newZoom == oldZoom || newBounds.width == oldBounds.width ) {
             this.panTo( center, immediately );
-            return;
+            return this;
         }
 
         referencePoint = oldBounds.getTopLeft().times( 
@@ -324,6 +327,7 @@ $.Viewport.prototype = {
         );
 
         this.zoomTo( newZoom, referencePoint, immediately );
+        return this;
     },
     
     /**
@@ -336,6 +340,7 @@ $.Viewport.prototype = {
         } else {
             return this.fitHorizontally( immediately );
         }
+        return this;
     },
 
     /**
@@ -360,6 +365,7 @@ $.Viewport.prototype = {
         }
 
         this.fitBounds( this.homeBounds, immediately );
+        return this;
     },
 
     /**
@@ -384,6 +390,7 @@ $.Viewport.prototype = {
         }
 
         this.fitBounds( this.homeBounds, immediately );
+        return this;
     },
 
 
@@ -398,6 +405,7 @@ $.Viewport.prototype = {
             this.centerSpringY.target.value
         );
         this.panTo( center.plus( delta ), immediately );
+        return this;
     },
 
     /**
@@ -413,6 +421,8 @@ $.Viewport.prototype = {
             this.centerSpringX.springTo( center.x );
             this.centerSpringY.springTo( center.y );
         }
+
+        return this;
     },
 
     /**
@@ -420,6 +430,7 @@ $.Viewport.prototype = {
      */
     zoomBy: function( factor, refPoint, immediately ) {
         this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately );
+        return this;
     },
 
     /**
@@ -427,15 +438,18 @@ $.Viewport.prototype = {
      */
     zoomTo: function( zoom, refPoint, immediately ) {
 
+        this.zoomPoint = refPoint instanceof $.Point ? 
+            refPoint : 
+            null;
+            
         if ( immediately ) {
             this.zoomSpring.resetTo( zoom );
         } else {        
             this.zoomSpring.springTo( zoom );
         }
 
-        this.zoomPoint = refPoint instanceof $.Point ? 
+
-            refPoint : 
+        return this;
-            null;
     },
 
     /**
@@ -457,6 +471,8 @@ $.Viewport.prototype = {
         }
 
         this.fitBounds( newBounds, true );
+
+        return this;
     },
 
     /**

www/developer-debug-mode.html

@@ -19,7 +19,7 @@
     // Example
     OpenSeadragon({
         id:              "contentDiv",
-        prefixUrl:       "/openseadragon/",
+        prefixUrl:       "/openseadragon/images/",
         tileSources:     "/openseadragon/examples/images/highsmith/highsmith.js",
         showNavigator:   false, 
         debugMode:       true

www/index.html

@@ -18,7 +18,7 @@
     // Example
     OpenSeadragon({
         id:              "contentDiv",
-        prefixUrl:       "/openseadragon/",
+        prefixUrl:       "/openseadragon/images/",
         tileSources:     "/openseadragon/examples/images/highsmith/highsmith.js"
     });
 </script>

www/overlay-highlights.html

@@ -31,7 +31,7 @@
 <script type="text/javascript">
     OpenSeadragon({
         id:            "contentDiv",
-        prefixUrl:     "/openseadragon",
+        prefixUrl:     "/openseadragon/images/",
         tileSources:   "/openseadragon/examples/images/highsmith/highsmith.dzi",
         toolbar:       "toolbarDiv",
         showNavigator: true,

www/tilesource-collection.html

@@ -42,25 +42,31 @@ OpenSeadragon({
 });</pre>
 </div>
 <script type="text/javascript">
-    OpenSeadragon({
+    var viewer = OpenSeadragon({
         id:                 "example-tilesource-collection",
-        prefixUrl:          "/openseadragon",
+        prefixUrl:          "/openseadragon/images/",
-        //debugMode:          true,
+        debugMode:          false, //if you want to see the render grid
-        showNavigator:      false,
+        
-        minPixelRatio:      0.0,
         collectionMode:     true,
         collectionRows:     1, 
         collectionTileSize: 1024,
         collectionTileMargin: 256,
+
         //collectionLayout:   'vertical',
+        //panVertical:        false,
+        //panHorizontal:      false,
         //defaultZoomLevel:   1,
+
+        /*The wrap options can be fun to give a sense of infinite results*/
         //wrapHorizontal: true,
         //wrapVertical: true,
+        
+        /*Tile sources can be mixed*/
         tileSources: [
             "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05954.dzi",
             "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05955.dzi",
             "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05956.dzi",
-            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05957.dzi",
+            "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05957.dzi"/*,
             "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05958.dzi",
             "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05959.dzi",
             "/openseadragon/examples/images/pnp/ppmsca/05900/05954/05960.dzi",
@@ -227,7 +233,7 @@ OpenSeadragon({
                 width:  2970
                 
             }]
-        }/*,{
+        }*//*,{
             type: 'legacy-image-pyramid',
             levels: [{
                 url: '/openseadragon/examples/images/rbc/rbc0001/2003/2003rosen1799/0011q.jpg',

www/tilesource-custom.html

@@ -32,22 +32,111 @@
     <div class="demoheading">
         Example Inline Configuration for Custom Tile Sources
     </div>
+    <div id="example-custom-tilesource" 
+         class="openseadragon" >
+    </div>
     <p>
         Below is a make believe minimal inline configuration. Note that the 
         default tileSize is available as a property of the tile source.
     </p>
     <pre>
     OpenSeadragon({
-        id:            "example-inline-configuration",
+        id:            "example-custom-tilesource",
         prefixUrl:     "/openseadragon",
-        showNavigator:  true,
+        navigatorSizeRatio: 0.25,
+        wrapHorizontal:     true,
         tileSources:   {
-            height: 1140,
+            height: 512*256,
-            width:  2450,
+            width:  512*256,
+            tileSize: 256,
+            minLevel: 8,
             getTileUrl: function( level, x, y ){
-                return "http://example.org/imageservice/"+level+"/"+x+"/"+y+"/?tileSize="+this.tileSize
+                return "http://s3.amazonaws.com/com.modestmaps.bluemarble/"+(level-8)+"-r"+x+"-c"+y+".jpg";
             }
         }
     });
     </pre>
+    <script>
+    OpenSeadragon({
+        id:                 "example-custom-tilesource",
+        prefixUrl:          "/openseadragon/images/",
+        navigatorSizeRatio: 0.25,
+        wrapHorizontal:     true,
+        tileSources:   {
+            height: 512*256,
+            width:  512*256,
+            tileSize: 256,
+            minLevel: 8,
+            getTileUrl: function( level, x, y ){
+                return "http://s3.amazonaws.com/com.modestmaps.bluemarble/"+(level-8)+"-r"+y+"-c"+x+".jpg";
+            }
+        }
+    });
+    </script>
+</div>
+
+<div class="demoarea">
+    <div class="demoheading">
+        Another Inline Configuration for Custom Tile Sources
+    </div>
+    <div id="example2-custom-tilesource" 
+         class="openseadragon" 
+         style='background-color:#aaa'>
+    </div>
+    <p>
+        Below is a make believe minimal inline configuration. Note that the 
+        default tileSize is available as a property of the tile source.
+    </p>
+    <pre>
+    OpenSeadragon({
+        ...
+        showNavigator:      false,
+        blendTime:          0,
+        wrapHorizontal:     true,
+        tileSources:   {
+            height: 1024*256,
+            width:  1024*256,
+            tileSize: 256,
+            minLevel: 9,
+            getTileUrl: function( level, x, y ){
+
+                function zeropad( i ) {
+                    var n = String( i ),
+                        m = 6 - n.length;
+                    n = (m < 1) ? n : new Array(m + 1).join( "0" ) + n;
+                    return n.substr(0, 3) + "/" + n.substr(3);
+                };
+
+                return "http://s3.amazonaws.com/info.aaronland.tiles.shapetiles/"+(level-8)+"/"+zeropad(x)+"/"+zeropad(y)+".png";
+            }
+        }
+        ...
+    });
+    </pre>
+    <script>
+    OpenSeadragon({
+        id:                 "example2-custom-tilesource",
+        prefixUrl:          "/openseadragon/images/",
+        showNavigator:      false,
+        blendTime:          0,
+        wrapHorizontal:     true,
+        tileSources:   {
+            height: 1024*256,
+            width:  1024*256,
+            tileSize: 256,
+            minLevel: 9,
+            getTileUrl: function( level, x, y ){
+
+                function zeropad( i ) {
+                    var n = String( i ),
+                        m = 6 - n.length;
+                    n = (m < 1) ? n : new Array(m + 1).join( "0" ) + n;
+                    return n.substr(0, 3) + "/" + n.substr(3);
+                };
+
+                return "http://s3.amazonaws.com/info.aaronland.tiles.shapetiles/"+(level-8)+"/"+zeropad(x)+"/"+zeropad(y)+".png";
+            }
+        }
+    });
+    </script>
 </div>

www/tilesource-dzi.html

@@ -32,7 +32,7 @@
         <script type="text/javascript">
             OpenSeadragon({
                 id:            "example-xmlhttprequest-for-dzi",
-                prefixUrl:     "/openseadragon",
+                prefixUrl:     "/openseadragon/images/",
                 tileSources:   "/openseadragon/examples/images/highsmith/highsmith.dzi",
                 showNavigator:  true
             });
@@ -102,7 +102,7 @@ OpenSeadragon({
         <script type="text/javascript">
             OpenSeadragon({
                 id:            "example-jsonprequest-for-dzi-jsonp",
-                prefixUrl:     "/openseadragon",
+                prefixUrl:     "/openseadragon/images/",
                 tileSources:   "/openseadragon/examples/images/highsmith/highsmith.js",
                 showNavigator:  true
             });
@@ -188,7 +188,7 @@ OpenSeadragon({
 <script type="text/javascript">
     OpenSeadragon({
         id:            "example-inline-configuration-for-dzi",
-        prefixUrl:     "/openseadragon",
+        prefixUrl:     "/openseadragon/images/",
         showNavigator:  true,
         tileSources:   {
             Image: {
@@ -218,7 +218,7 @@ OpenSeadragon({
         <script type="text/javascript">
             OpenSeadragon({
                 id:            "example-wide-dzi",
-                prefixUrl:     "/openseadragon",
+                prefixUrl:     "/openseadragon/images/",
                 tileSources:   "/openseadragon/examples/images/pnp/pan/6a32000/6a32400/6a32487.dzi"
             });
         </script>

www/tilesource-legacy.html

@@ -27,7 +27,7 @@
         <script type="text/javascript">
             OpenSeadragon({
                 id:            "example-xmlhttprequest",
-                prefixUrl:     "/openseadragon",
+                prefixUrl:     "/openseadragon/images/",
                 tileSources:   "/openseadragon/examples/images/rbc/rbc0001/2003/rosen.xml",
                 showNavigator:  true
             });
@@ -109,7 +109,7 @@ OpenSeadragon({
         <script type="text/javascript">
             OpenSeadragon({
                 id:            "example-jsonprequest",
-                prefixUrl:     "/openseadragon",
+                prefixUrl:     "/openseadragon/images/",
                 tileSources:   "/openseadragon/examples/images/rbc/rbc0001/2003/rosen.js",
                 showNavigator:  true
             });
@@ -173,7 +173,7 @@ OpenSeadragon({
     // Example
     OpenSeadragon({
         id: "inline-configuration",
-        prefixUrl: '/openseadragon',
+        prefixUrl: "/openseadragon/images/",
         showNavigator: true,
         tileSources: {
             type: 'legacy-image-pyramid',
@@ -243,7 +243,7 @@ OpenSeadragon({
     // Example
     OpenSeadragon({
         id: "aspect-ratio",
-        prefixUrl: '/openseadragon',
+        prefixUrl: "/openseadragon/images/",
         showNavigator: true,
         tileSources: {
             type: 'legacy-image-pyramid',

www/tilesource-sequence.html

@@ -47,7 +47,7 @@
     // Example
     OpenSeadragon({
         id: "contentDiv1",
-        prefixUrl: '/openseadragon',
+        prefixUrl: "/openseadragon/images/",
         showNavigator: true,
         tileSources: [{
             type: 'legacy-image-pyramid',
@@ -487,7 +487,7 @@
     // Example
     OpenSeadragon({
         id: "contentDiv2",
-        prefixUrl: '/openseadragon',
+        prefixUrl: "/openseadragon/images/",
         showNavigator: true,
         defaultZoomLevel: 1.05,
         tileSources: [
@@ -507,7 +507,7 @@
     // Example
     OpenSeadragon({
         id: "contentDiv3",
-        prefixUrl: '/openseadragon',
+        prefixUrl: "/openseadragon/images/",
         showNavigator: true,
         preserveViewport: true,
         tileSources: [{
@@ -585,7 +585,7 @@
     // Example
     OpenSeadragon({
         id: "contentDiv4",
-        prefixUrl: '/openseadragon',
+        prefixUrl: "/openseadragon/images/",
         showNavigator: true,
         tileSources: [{
             type: 'legacy-image-pyramid',

www/ui-binding-custom-buttons.html

@@ -36,7 +36,7 @@
 
     OpenSeadragon({
         id:             "contentDiv",
-        prefixUrl:      "/openseadragon",
+        prefixUrl:      "/openseadragon/images/",
         toolbar:        "toolbarDiv",
         zoomInButton:   "zoom-in",
         zoomOutButton:  "zoom-out",

www/ui-reference-strip.html

@@ -19,7 +19,7 @@
 
     OpenSeadragon({
         id:             "contentDiv",
-        prefixUrl:      "/openseadragon",
+        prefixUrl:      "/openseadragon/images/",
         showReferenceStrip:  true,
         tileSources:    [{
             type: 'legacy-image-pyramid',
@@ -106,7 +106,7 @@ The relevant configuration options are shown below.
 <script type="text/javascript">
     OpenSeadragon({
         id:            "contentDiv2",
-        prefixUrl:     "/openseadragon",
+        prefixUrl:     "/openseadragon/images/",
         toolbar:       "toolbarDiv",
         springStiffness:        10,
         showReferenceStrip:     true,

www/ui-toolbar.html

@@ -25,7 +25,7 @@
 <script type="text/javascript">
     OpenSeadragon({
         id:            "contentDiv",
-        prefixUrl:     "/openseadragon",
+        prefixUrl:     "/openseadragon/images/",
         tileSources:   "/openseadragon/examples/images/highsmith/highsmith.dzi",
         toolbar:       "toolbarDiv",
         showNavigator: true

www/ui-viewport-navigator.html

@@ -20,7 +20,7 @@
 <script type="text/javascript">
     OpenSeadragon({
         id:            "contentDiv",
-        prefixUrl:     "/openseadragon",
+        prefixUrl:     "/openseadragon/images/",
         tileSources:   "/openseadragon/examples/images/highsmith/highsmith.dzi",
         showNavigator:  true
     });