improving custom tile source examples are work for layers begins being supported

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,5 +1,5 @@
 /**
- * @version  OpenSeadragon 0.9.90
+ * @version  OpenSeadragon 0.9.92
  *
  * @fileOverview 
  * <h2>
@@ -485,7 +485,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
             zoomPerClick:           2.0,
             zoomPerScroll:          1.2,
             zoomPerSecond:          2.0,
-            
+
             showNavigationControl:  true,
             showSequenceControl:    true,
             controlsFadeDelay:      2000,
@@ -524,6 +524,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
             maxImageCacheCount:     200,
             minZoomImageRatio:      0.8,
             maxZoomPixelRatio:      2,
+            timeout:                5000,
 
             //INTERFACE RESOURCE SETTINGS
             prefixUrl:              null,
@@ -3731,6 +3732,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             blendTime:          this.blendTime,
             alwaysBlend:        this.alwaysBlend,
             minPixelRatio:      this.minPixelRatio,
+            timeout:            this.timeout,
             debugMode:          this.debugMode,
             debugGridColor:     this.debugGridColor
         });
@@ -3933,8 +3935,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";
 
@@ -4734,7 +4736,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
@@ -4882,8 +4884,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 ] ); 
@@ -5743,7 +5745,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 ){
@@ -7656,7 +7658,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(
@@ -7680,10 +7683,19 @@ $.Tile.prototype = {
             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";
+
+        //this.style.right   = ( containerSize.x - position.x ) + "px";
+        //this.style.bottom  = ( containerSize.y - position.y ) + "px";
+
+        //when the entire container is filled by a single tile we need
+        //some additional stickyness so when animating container size
+        //the image stays fixed in position
+        //this.element.style.width   =  ( size.x / containerSize.x ) * 100 + "%";
+        //this.element.style.height  =  ( size.y / containerSize.y ) * 100 + "%";
 
         $.setElementOpacity( this.element, this.opacity );
 
@@ -7707,7 +7719,22 @@ $.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();
     },
 
     /**
@@ -7902,8 +7929,7 @@ $.Tile.prototype = {
 
 (function( $ ){
     
-var TIMEOUT             = 5000,
+var DEVICE_SCREEN       = $.getWindowSize(),
-    DEVICE_SCREEN       = $.getWindowSize(),
     BROWSER             = $.Browser.vendor,
     BROWSER_VERSION     = $.Browser.version,
 
@@ -7972,6 +7998,7 @@ $.Drawer = function( options ) {
         midUpdate:      false,
         updateAgain:    true,
 
+
         //internal state / configurable settings 
         overlays:           [],
         collectionOverlays: {},
@@ -7986,7 +8013,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 );
 
@@ -8223,7 +8251,7 @@ $.Drawer.prototype = {
 
             jobid = window.setTimeout( function(){
                 finishLoadingImage( image, complete, false, jobid );
-            }, TIMEOUT );
+            }, this.timeout );
 
             loading   = true;
             image.src = src;
@@ -8287,8 +8315,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 );
     }
 
@@ -8893,9 +8925,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));
 
@@ -9067,6 +9099,7 @@ $.Viewport.prototype = {
         this.fitHeightBounds = new $.Rect( 0, 0, 1, this.contentAspectY );
 
         this.homeBounds = this.fitHeightBounds;
+        return this;
     },
 
     /**
@@ -9252,6 +9285,7 @@ $.Viewport.prototype = {
             bounds.y += dy;
             this.fitBounds( bounds, immediately );
         }
+        return this;
     },
 
     /**
@@ -9260,6 +9294,7 @@ $.Viewport.prototype = {
      */
     ensureVisible: function( immediately ) {
         this.applyConstraints( immediately );
+        return this;
     },
 
     /**
@@ -9297,7 +9332,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( 
@@ -9312,6 +9347,7 @@ $.Viewport.prototype = {
         );
 
         this.zoomTo( newZoom, referencePoint, immediately );
+        return this;
     },
     
     /**
@@ -9324,6 +9360,7 @@ $.Viewport.prototype = {
         } else {
             return this.fitHorizontally( immediately );
         }
+        return this;
     },
 
     /**
@@ -9348,6 +9385,7 @@ $.Viewport.prototype = {
         }
 
         this.fitBounds( this.homeBounds, immediately );
+        return this;
     },
 
     /**
@@ -9372,6 +9410,7 @@ $.Viewport.prototype = {
         }
 
         this.fitBounds( this.homeBounds, immediately );
+        return this;
     },
 
 
@@ -9386,6 +9425,7 @@ $.Viewport.prototype = {
             this.centerSpringY.target.value
         );
         this.panTo( center.plus( delta ), immediately );
+        return this;
     },
 
     /**
@@ -9401,6 +9441,8 @@ $.Viewport.prototype = {
             this.centerSpringX.springTo( center.x );
             this.centerSpringY.springTo( center.y );
         }
+
+        return this;
     },
 
     /**
@@ -9408,6 +9450,7 @@ $.Viewport.prototype = {
      */
     zoomBy: function( factor, refPoint, immediately ) {
         this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately );
+        return this;
     },
 
     /**
@@ -9415,15 +9458,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;
     },
 
     /**
@@ -9445,6 +9491,8 @@ $.Viewport.prototype = {
         }
 
         this.fitBounds( newBounds, true );
+
+        return this;
     },
 
     /**

src/drawer.js

@@ -1,8 +1,7 @@
 
 (function( $ ){
     
-var TIMEOUT             = 5000,
+var DEVICE_SCREEN       = $.getWindowSize(),
-    DEVICE_SCREEN       = $.getWindowSize(),
     BROWSER             = $.Browser.vendor,
     BROWSER_VERSION     = $.Browser.version,
 
@@ -71,6 +70,7 @@ $.Drawer = function( options ) {
         midUpdate:      false,
         updateAgain:    true,
 
+
         //internal state / configurable settings 
         overlays:           [],
         collectionOverlays: {},
@@ -85,7 +85,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 );
 
@@ -322,7 +323,7 @@ $.Drawer.prototype = {
 
             jobid = window.setTimeout( function(){
                 finishLoadingImage( image, complete, false, jobid );
-            }, TIMEOUT );
+            }, this.timeout );
 
             loading   = true;
             image.src = src;
@@ -386,8 +387,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 );
     }
 
@@ -992,9 +997,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

@@ -29,7 +29,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
@@ -177,8 +177,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

@@ -485,7 +485,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
             zoomPerClick:           2.0,
             zoomPerScroll:          1.2,
             zoomPerSecond:          2.0,
-            
+
             showNavigationControl:  true,
             showSequenceControl:    true,
             controlsFadeDelay:      2000,
@@ -524,6 +524,7 @@ OpenSeadragon = window.OpenSeadragon || function( options ){
             maxImageCacheCount:     200,
             minZoomImageRatio:      0.8,
             maxZoomPixelRatio:      2,
+            timeout:                5000,
 
             //INTERFACE RESOURCE SETTINGS
             prefixUrl:              null,

src/tile.js

@@ -79,7 +79,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(
@@ -103,10 +104,19 @@ $.Tile.prototype = {
             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";
+
+        //this.style.right   = ( containerSize.x - position.x ) + "px";
+        //this.style.bottom  = ( containerSize.y - position.y ) + "px";
+
+        //when the entire container is filled by a single tile we need
+        //some additional stickyness so when animating container size
+        //the image stays fixed in position
+        //this.element.style.width   =  ( size.x / containerSize.x ) * 100 + "%";
+        //this.element.style.height  =  ( size.y / containerSize.y ) * 100 + "%";
 
         $.setElementOpacity( this.element, this.opacity );
 
@@ -130,7 +140,22 @@ $.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

@@ -426,6 +426,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
             blendTime:          this.blendTime,
             alwaysBlend:        this.alwaysBlend,
             minPixelRatio:      this.minPixelRatio,
+            timeout:            this.timeout,
             debugMode:          this.debugMode,
             debugGridColor:     this.debugGridColor
         });
@@ -628,8 +629,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

@@ -78,6 +78,7 @@ $.Viewport.prototype = {
         this.fitHeightBounds = new $.Rect( 0, 0, 1, this.contentAspectY );
 
         this.homeBounds = this.fitHeightBounds;
+        return this;
     },
 
     /**
@@ -263,6 +264,7 @@ $.Viewport.prototype = {
             bounds.y += dy;
             this.fitBounds( bounds, immediately );
         }
+        return this;
     },
 
     /**
@@ -271,6 +273,7 @@ $.Viewport.prototype = {
      */
     ensureVisible: function( immediately ) {
         this.applyConstraints( immediately );
+        return this;
     },
 
     /**
@@ -308,7 +311,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( 
@@ -323,6 +326,7 @@ $.Viewport.prototype = {
         );
 
         this.zoomTo( newZoom, referencePoint, immediately );
+        return this;
     },
     
     /**
@@ -335,6 +339,7 @@ $.Viewport.prototype = {
         } else {
             return this.fitHorizontally( immediately );
         }
+        return this;
     },
 
     /**
@@ -359,6 +364,7 @@ $.Viewport.prototype = {
         }
 
         this.fitBounds( this.homeBounds, immediately );
+        return this;
     },
 
     /**
@@ -383,6 +389,7 @@ $.Viewport.prototype = {
         }
 
         this.fitBounds( this.homeBounds, immediately );
+        return this;
     },
 
 
@@ -397,6 +404,7 @@ $.Viewport.prototype = {
             this.centerSpringY.target.value
         );
         this.panTo( center.plus( delta ), immediately );
+        return this;
     },
 
     /**
@@ -412,6 +420,8 @@ $.Viewport.prototype = {
             this.centerSpringX.springTo( center.x );
             this.centerSpringY.springTo( center.y );
         }
+
+        return this;
     },
 
     /**
@@ -419,6 +429,7 @@ $.Viewport.prototype = {
      */
     zoomBy: function( factor, refPoint, immediately ) {
         this.zoomTo( this.zoomSpring.target.value * factor, refPoint, immediately );
+        return this;
     },
 
     /**
@@ -426,15 +437,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;
     },
 
     /**
@@ -456,6 +470,8 @@ $.Viewport.prototype = {
         }
 
         this.fitBounds( newBounds, true );
+
+        return this;
     },
 
     /**

www/tilesource-collection.html

@@ -42,7 +42,7 @@ OpenSeadragon({
 });</pre>
 </div>
 <script type="text/javascript">
-    OpenSeadragon({
+    var viewer = OpenSeadragon({
         id:                 "example-tilesource-collection",
         prefixUrl:          "/openseadragon",
         //debugMode:          true,
@@ -54,13 +54,13 @@ OpenSeadragon({
         collectionTileMargin: 256,
         //collectionLayout:   'vertical',
         //defaultZoomLevel:   1,
-        //wrapHorizontal: true,
+        wrapHorizontal: true,
         //wrapVertical: true,
         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 +227,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,102 @@
     <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,
         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",
+        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({
+        id:            "example2-custom-tilesource",
+        prefixUrl:     "/openseadragon",
+        navigatorSizeRatio: 0.25,
+        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"+x+"-c"+y+".jpg";
+            }
+        }
+    });
+    </pre>
+    <script>
+    OpenSeadragon({
+        id:                 "example2-custom-tilesource",
+        prefixUrl:          "/openseadragon",
+        showNavigator:      false,
+        blendTime:          0,
+        alwaysBlend:        false,
+        //immediateRender:    true,
+        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>