some overlays work that had be be completed before finishing tile layers. added brief example of how to how host tiles of zoom.it

build.properties

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

build.xml

@@ -62,7 +62,6 @@
 
     <target name='www' depends='build'>
         <echo>| Compiling OpenSeadragon Web Site </echo>
-        <publish page='overlay-highlights' title='Overlay Highlights | '/>
 
         <publish page='tilesource-custom' title='Custom Tile Source | '/>
         <publish page='tilesource-dzi' title='DZI Tile Source | '/>
@@ -70,6 +69,7 @@
         <publish page='tilesource-tms' title='Tiled Map Service Tile Source | '/>
         <publish page='tilesource-iiif' title='IIIF Tile Source | '/>
         <publish page='tilesource-legacy' title='Legacy Tile Sources | '/>
+        <publish page='tilesource-zoomit' title='Zoom.it Tile Sources | '/>
         <publish page='tilesource-sequence' title='Tile Source Sequence | '/>
         <publish page='tilesource-collection' title='Tile Source Collections | '/>
 
@@ -78,6 +78,7 @@
         <publish page='ui-toolbar' title='Toolbar | '/>
         <publish page='ui-viewport-navigator' title='Viewport Navigator | '/>
         <publish page='ui-zoom-and-pan' title='Viewport Zoom and Pan | '/>
+        <publish page='ui-overlays' title='Overlays |'/>
 
         <publish page='developer-debug-mode' title='Developer Tools - Debug Mode | '/>
 

openseadragon.js

@@ -1,7 +1,7 @@
 /*globals OpenSeadragon */
 
 /**
- * @version  OpenSeadragon 0.9.107
+ * @version  OpenSeadragon 0.9.111
  *
  * @fileOverview 
  * <h2>
@@ -3721,16 +3721,16 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
         }
         
         if( this.preserveVewport ){
-            
             this.viewport.resetContentSize( this.source.dimensions );
-
         } 
 
+        this.source.overlays = this.source.overlays || [];
+
         this.drawer = new $.Drawer({
             source:             this.source, 
             viewport:           this.viewport, 
             element:            this.canvas,
-            overlays:           this.overlays,
+            overlays:           [].concat( this.overlays ).concat( this.source.overlays ),
             maxImageCacheCount: this.maxImageCacheCount,
             imageLoaderLimit:   this.imageLoaderLimit,
             minZoomImageRatio:  this.minZoomImageRatio,
@@ -3832,8 +3832,14 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
      * @return {OpenSeadragon.Viewer} Chainable.
      */
     close: function ( ) {
+        
+        if( this.drawer ){
+            this.drawer.clearOverlays();
+        }
+        
         this.source     = null;
         this.drawer     = null;
+
         this.viewport   = this.preserveViewport ? this.viewport : null;
         //this.profiler   = null;
         this.canvas.innerHTML = "";
@@ -8400,6 +8406,16 @@ $.Tile.prototype = {
 
             if ( element.parentNode ) {
                 element.parentNode.removeChild( element );
+                //this should allow us to preserve overlays when required between
+                //pages
+                if( element.prevElementParent ){
+                    style.display = 'none';
+                    //element.prevElementParent.insertBefore( 
+                    //    element,
+                    //    element.prevNextSibling
+                    //);
+                    document.body.appendChild( element );
+                }
             }
 
             style.top = "";
@@ -8424,6 +8440,9 @@ $.Tile.prototype = {
                 size;
 
             if ( element.parentNode != container ) {
+                //save the source parent for later if we need it
+                element.prevElementParent  = element.parentNode;
+                element.prevNextSibling    = element.nextSibling;
                 container.appendChild( element );
             }
 
@@ -8442,6 +8461,7 @@ $.Tile.prototype = {
             style.left     = position.x + "px";
             style.top      = position.y + "px";
             style.position = "absolute";
+            style.display  = 'block';
 
             if ( scales ) {
                 style.width  = size.x + "px";
@@ -8586,22 +8606,46 @@ $.Drawer = function( options ) {
             
             (function( _this, overlay ){
                 
-                var link  = document.createElement("a"),
+                var element  = null,
-                    rect = new $.Rect(
+                    rect = ( overlay.height && overlay.width ) ? new $.Rect(
-                        overlay.x, 
+                        overlay.x || overlay.px, 
-                        overlay.y, 
+                        overlay.y || overlay.py, 
                         overlay.width, 
                         overlay.height
+                    ) : new $.Point(
+                        overlay.x || overlay.px, 
+                        overlay.y || overlay.py
                     ),
-                    id = Math.floor(Math.random()*10000000);
+                    id = overlay.id ? 
+                        overlay.id :
+                        "openseadragon-overlay-"+Math.floor(Math.random()*10000000);
                 
-                link.href      = "#/overlay/"+id;
+                element = $.getElement(overlay.id);
-                link.id        = id;
+                if( !element ){
-                link.className = overlay.className ?
+                    element         = document.createElement("a");
+                    element.href    = "#/overlay/"+id;
+                }
+                element.id        = id;
+                element.className = element.className + " " + ( overlay.className ?
                     overlay.className :
-                    "openseadragon-overlay";
+                    "openseadragon-overlay"
+                );
 
-                _this.overlays[ i ] = new $.Overlay( link, rect );
+
+                if(overlay.px !== undefined){
+                    //if they specified 'px' so its in pixel coordinates so
+                    //we need to translate to viewport coordinates
+                    rect = _this.viewport.imageToViewportRectangle( rect );
+                }
+                if( overlay.placement ){
+                    _this.overlays[ i ] = new $.Overlay( 
+                        element, 
+                        _this.viewport.pointFromPixel(rect), 
+                        $.OverlayPlacement[overlay.placement.toUpperCase()]
+                    );
+                }else{
+                    _this.overlays[ i ] = new $.Overlay( element, rect );
+                }
 
             }( this, this.overlays[ i ] ));
 
@@ -10164,6 +10208,50 @@ $.Viewport.prototype = {
         ).plus(
             bounds.getTopLeft()
         );
+    },
+
+    /**
+     * Translates from Seajax viewer coordinate 
+     * system to image coordinate system 
+     */
+    viewportToImageCoordinates: function(viewerX, viewerY) {
+       return new $.Point(viewerX * this.contentSize.x, viewerY * this.contentSize.y * this.contentAspectX);
+    },
+
+    /**
+     * Translates from image coordinate system to
+     * Seajax viewer coordinate system 
+     */
+    imageToViewportCoordinates: function( imageX, imageY ) {
+       return new $.Point( imageX / this.contentSize.x, imageY / this.contentSize.y / this.contentAspectX);
+    },
+
+    /**
+     * Translates from a rectanlge which describes a portion of
+     * the image in pixel coordinates to OpenSeadragon viewport
+     * rectangle coordinates.
+     */
+    imageToViewportRectangle: function( imageX, imageY, pixelWidth, pixelHeight ) {
+        var coordA,
+            coordB,
+            rect;
+        if( arguments.length == 1 ){
+            //they passed a rectangle instead of individual components
+            rect = imageX;
+            return this.imageToViewportRectangle(rect.x, rect.y, rect.width, rect.height);
+        }
+        coordA = this.imageToViewportCoordinates(
+            imageX, imageY
+        );
+        coordB = this.imageToViewportCoordinates(
+            pixelWidth, pixelHeight
+        );
+        return new $.Rect( 
+            coordA.x,
+            coordA.y,
+            coordA.x + coordB.x,
+            coordA.y + coordB.y
+        );
     }
 };
 

src/drawer.js

@@ -113,22 +113,46 @@ $.Drawer = function( options ) {
             
             (function( _this, overlay ){
                 
-                var link  = document.createElement("a"),
+                var element  = null,
-                    rect = new $.Rect(
+                    rect = ( overlay.height && overlay.width ) ? new $.Rect(
-                        overlay.x, 
+                        overlay.x || overlay.px, 
-                        overlay.y, 
+                        overlay.y || overlay.py, 
                         overlay.width, 
                         overlay.height
+                    ) : new $.Point(
+                        overlay.x || overlay.px, 
+                        overlay.y || overlay.py
                     ),
-                    id = Math.floor(Math.random()*10000000);
+                    id = overlay.id ? 
+                        overlay.id :
+                        "openseadragon-overlay-"+Math.floor(Math.random()*10000000);
                 
-                link.href      = "#/overlay/"+id;
+                element = $.getElement(overlay.id);
-                link.id        = id;
+                if( !element ){
-                link.className = overlay.className ?
+                    element         = document.createElement("a");
+                    element.href    = "#/overlay/"+id;
+                }
+                element.id        = id;
+                element.className = element.className + " " + ( overlay.className ?
                     overlay.className :
-                    "openseadragon-overlay";
+                    "openseadragon-overlay"
+                );
 
-                _this.overlays[ i ] = new $.Overlay( link, rect );
+
+                if(overlay.px !== undefined){
+                    //if they specified 'px' so its in pixel coordinates so
+                    //we need to translate to viewport coordinates
+                    rect = _this.viewport.imageToViewportRectangle( rect );
+                }
+                if( overlay.placement ){
+                    _this.overlays[ i ] = new $.Overlay( 
+                        element, 
+                        _this.viewport.pointFromPixel(rect), 
+                        $.OverlayPlacement[overlay.placement.toUpperCase()]
+                    );
+                }else{
+                    _this.overlays[ i ] = new $.Overlay( element, rect );
+                }
 
             }( this, this.overlays[ i ] ));
 

src/overlay.js

@@ -100,6 +100,16 @@
 
             if ( element.parentNode ) {
                 element.parentNode.removeChild( element );
+                //this should allow us to preserve overlays when required between
+                //pages
+                if( element.prevElementParent ){
+                    style.display = 'none';
+                    //element.prevElementParent.insertBefore( 
+                    //    element,
+                    //    element.prevNextSibling
+                    //);
+                    document.body.appendChild( element );
+                }
             }
 
             style.top = "";
@@ -124,6 +134,9 @@
                 size;
 
             if ( element.parentNode != container ) {
+                //save the source parent for later if we need it
+                element.prevElementParent  = element.parentNode;
+                element.prevNextSibling    = element.nextSibling;
                 container.appendChild( element );
             }
 
@@ -142,6 +155,7 @@
             style.left     = position.x + "px";
             style.top      = position.y + "px";
             style.position = "absolute";
+            style.display  = 'block';
 
             if ( scales ) {
                 style.width  = size.x + "px";

src/viewer.js

@@ -402,16 +402,16 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
         }
         
         if( this.preserveVewport ){
-            
             this.viewport.resetContentSize( this.source.dimensions );
-
         } 
 
+        this.source.overlays = this.source.overlays || [];
+
         this.drawer = new $.Drawer({
             source:             this.source, 
             viewport:           this.viewport, 
             element:            this.canvas,
-            overlays:           this.overlays,
+            overlays:           [].concat( this.overlays ).concat( this.source.overlays ),
             maxImageCacheCount: this.maxImageCacheCount,
             imageLoaderLimit:   this.imageLoaderLimit,
             minZoomImageRatio:  this.minZoomImageRatio,
@@ -513,8 +513,14 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
      * @return {OpenSeadragon.Viewer} Chainable.
      */
     close: function ( ) {
+        
+        if( this.drawer ){
+            this.drawer.clearOverlays();
+        }
+        
         this.source     = null;
         this.drawer     = null;
+
         this.viewport   = this.preserveViewport ? this.viewport : null;
         //this.profiler   = null;
         this.canvas.innerHTML = "";

src/viewport.js

@@ -580,6 +580,50 @@ $.Viewport.prototype = {
         ).plus(
             bounds.getTopLeft()
         );
+    },
+
+    /**
+     * Translates from Seajax viewer coordinate 
+     * system to image coordinate system 
+     */
+    viewportToImageCoordinates: function(viewerX, viewerY) {
+       return new $.Point(viewerX * this.contentSize.x, viewerY * this.contentSize.y * this.contentAspectX);
+    },
+
+    /**
+     * Translates from image coordinate system to
+     * Seajax viewer coordinate system 
+     */
+    imageToViewportCoordinates: function( imageX, imageY ) {
+       return new $.Point( imageX / this.contentSize.x, imageY / this.contentSize.y / this.contentAspectX);
+    },
+
+    /**
+     * Translates from a rectanlge which describes a portion of
+     * the image in pixel coordinates to OpenSeadragon viewport
+     * rectangle coordinates.
+     */
+    imageToViewportRectangle: function( imageX, imageY, pixelWidth, pixelHeight ) {
+        var coordA,
+            coordB,
+            rect;
+        if( arguments.length == 1 ){
+            //they passed a rectangle instead of individual components
+            rect = imageX;
+            return this.imageToViewportRectangle(rect.x, rect.y, rect.width, rect.height);
+        }
+        coordA = this.imageToViewportCoordinates(
+            imageX, imageY
+        );
+        coordB = this.imageToViewportCoordinates(
+            pixelWidth, pixelHeight
+        );
+        return new $.Rect( 
+            coordA.x,
+            coordA.y,
+            coordA.x + coordB.x,
+            coordA.y + coordB.y
+        );
     }
 };
 

www/base.html

@@ -85,6 +85,9 @@
                 <li><a href='/openseadragon/examples/tilesource-custom/'>
                     <span>Custom Tile Sources</span>
                 </a></li>
+                <li><a href='/openseadragon/examples/tilesource-zoomit/'>
+                    <span>Pulling from Zoom.it</span>
+                </a></li>
             </ul>
         </li>
 
@@ -100,6 +103,9 @@
                 <li><a href='/openseadragon/examples/ui-zoom-and-pan/'>
                     <span>Zoom and Pan</span>
                 </a></li>
+                <li><a href='/openseadragon/examples/ui-overlays/'>
+                    <span>Overlays</span>
+                </a></li>
                 <li><a href='/openseadragon/examples/ui-viewport-navigator/'>
                     <span>Viewport Navigator</span>
                 </a></li>

www/overlay-highlights.html

@@ -1,64 +0,0 @@
-<h2>example: highlights</h2>
-
-<div class="description">
-    <p>
-    &nbsp;Highlighted overlays are very useful for directing users attention to
-    specific areas of interest, though the style is often decided based
-    on the specific content being presented.  
-    </p>
-    <p>
-    &nbsp;OpenSeadragon makes it easy to declare highlighted areas and control 
-    the presentation through simple css mechanisms.
-    </p>
-    <p>
-    <strong>Try it on the iPad! (new since 0.9)</strong>
-    </p>
-</div>
-
-<div class="demoarea">
-    <div class="demoheading">
-        Highlights
-    </div>
-    <div id="toolbarDiv" class="toolbar">
-        <span style='float:right;margin:10px 20px 0 0'>
-        | <a href="#">show highlights</a> 
-        | <a href="#">hide highlights</a> 
-        </span>
-    </div>
-    <div id="contentDiv" class="openseadragon"></div>
-</div>
-
-<script type="text/javascript">
-    OpenSeadragon({
-        id:            "contentDiv",
-        prefixUrl:     "/openseadragon/images/",
-        tileSources:   "/openseadragon/examples/images/highsmith/highsmith.dzi",
-        toolbar:       "toolbarDiv",
-        showNavigator: true,
-        overlays: [{
-          x: 0.45, 
-          y: 0.35, 
-          width: 0.08, 
-          height: 0.05,
-          className: 'highlight'
-        },{
-          x: 0.22, 
-          y: 0.38, 
-          width: 0.1, 
-          height: 0.15,
-          className: 'highlight'
-        },{
-          x: 0.65, 
-          y: 0.38, 
-          width: 0.1, 
-          height: 0.15,
-          className: 'highlight'
-        },{
-          x: 0.45, 
-          y: 0.50, 
-          width: 0.08, 
-          height: 0.15,
-          className: 'highlight'
-        }]
-    });
-</script>   

www/tilesource-dzi.html

@@ -33,8 +33,9 @@
             OpenSeadragon({
                 id:            "example-xmlhttprequest-for-dzi",
                 prefixUrl:     "/openseadragon/images/",
-                tileSources:   "/openseadragon/examples/images/highsmith/highsmith.dzi",
+                tileSources:   [
-                showNavigator:  true
+                    "/openseadragon/examples/images/highsmith/highsmith.dzi"
+                ]
             });
         </script>
         <noscript>

www/tilesource-zoomit.html

@@ -0,0 +1,102 @@
+<h2>
+    example: integrating with zoom.it tiles
+</h2>
+<p>
+    Zoom it provides a simple service based way of loading images and serving 
+    out tiles.  The Zoomit service is based on the DZI format.
+</p>
+<p>
+    OpenSeadragon can render the DZI tiles and provide you all the features
+    you can only get with OpenSeadragon.
+</p>
+
+
+<div class="description">
+    <h3>Pulling tiles from Zoom.it</h3>
+    <p>
+        If you are pulling image tiles from zoom it, please understand and
+        respect any policy and copy rights of the image creator.
+    </p>
+</div>
+<div class="demoarea">
+    <div class="demoheading">
+        Example inline configuration for rendering dzi's hosted at zoom.it
+    </div>
+    <div id="example-zoomit-tilesource" 
+         class="openseadragon">
+        <script type="text/javascript">
+            OpenSeadragon({
+                id:            "example-zoomit-tilesource",
+                prefixUrl:     "/openseadragon/images/",
+                tileSources:   [{ 
+                    Image:  {
+                        xmlns: "http://schemas.microsoft.com/deepzoom/2009",
+                        Url: "http://cache.zoom.it/content/WwI0_files/",
+                        TileSize: "254", 
+                        Overlap: "1", 
+                        Format: "jpg", 
+                        ServerFormat: "Default",
+                        Size: { 
+                            Width: "5816",
+                            Height: "3961"
+                        }
+                    }
+                },{ 
+                    Image:  {
+                        xmlns: "http://schemas.microsoft.com/deepzoom/2009",
+                        Url: "http://static.seadragon.com/content/misc/carina-nebula_files/",
+                        TileSize: "254", 
+                        Overlap: "1", 
+                        Format: "jpg", 
+                        ServerFormat: "Default",
+                        Size: { 
+                            Width: "29566",
+                            Height: "14321"
+                        }
+                    }
+                },{ 
+                    Image:  {
+                        xmlns: "http://schemas.microsoft.com/deepzoom/2009",
+                        Url: "http://static.seadragon.com/content/misc/milwaukee_files/",
+                        TileSize: "254", 
+                        Overlap: "1", 
+                        Format: "jpg", 
+                        ServerFormat: "Default",
+                        Size: { 
+                            Width: "15497",
+                            Height: "5378"
+                        }
+                    }
+                }]
+            });
+        </script>
+        <noscript>
+            <p>Deep zoom is not available unless javascript is enabled.</p>
+            <img src='../images/highsmith/01967v.jpg'
+                 height='600'/>
+        </noscript>
+    </div>
+    
+    <p>
+        Configuration is done via the 'tileSources' option ( or programatically ).
+    </p>
+<pre>
+OpenSeadragon({
+    ...
+    tileSources:   [{ 
+        Image:  {
+            xmlns: "http://schemas.microsoft.com/deepzoom/2009",
+            Url: "http://cache.zoom.it/content/WwI0_files/",
+            TileSize: "254", 
+            Overlap: "1", 
+            Format: "jpg", 
+            ServerFormat: "Default",
+            Size: { 
+                Width: "5816",
+                Height: "3961"
+            }
+        }
+    }]
+    ...
+});</pre>
+</div>

www/ui-overlays.html

@@ -0,0 +1,523 @@
+<h2>example: overlays</h2>
+
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
+
+<div class="description">
+    Overlays are an important mechanism for adding additional infomation channels
+    in a deep zoom image.  Below we present just a few examples of how to
+    add some simple overlays.
+    <p>
+        ( Tile source in this example is from Chronicling America
+        at the <a href='http://www.loc.gov/'>Library of Congress</a> )
+    </p>
+</div>
+
+
+<div class="demoarea">
+    <div class="demoheading">
+        Tile source overlays. 
+    </div>
+    <p>
+    Highlighted overlays are very useful for directing users attention to
+    specific areas of interest, though the style is often decided based
+    on the specific content being presented.  
+    </p>
+    <p>
+    OpenSeadragon makes it easy to declare highlighted areas and control 
+    the presentation through simple css mechanisms. <em>A tile source overlay
+    is specific to the particular tile source.</em> So if you have a sequence of
+    tile sources and want to over lay unique content on each, use this mechanism.
+    </p>
+    <div id="example-tilesource-overlay" class="openseadragon">
+        <style>
+        .navigator .highlight{
+            opacity:    0.4;
+            filter:     alpha(opacity=40);
+            border:     2px solid #900;
+            outline:    none;
+            background-color: #900;
+        }
+        .highlight{
+            opacity:    0.4;
+            filter:     alpha(opacity=40);
+            border:     2px solid #0A7EbE;
+            outline:    10px auto #0A7EbE;
+            background-color: white;
+        }
+        .highlight:hover, .highlight:focus{
+            filter:     alpha(opacity=70);
+            opacity:    0.7;
+            background-color: transparent;
+        }
+        </style>
+        <script type="text/javascript">
+            var chronicling_america_example = function( sequence ){
+                return function(level, column, row){
+                    var px = 0;
+                    if (column!=0) {
+                        px = this.tileSize * column - this.tileOverlap;
+                    }
+                    var py = 0;
+                    if (row!=0) {
+                        py = this.tileSize * row - this.tileOverlap;
+                    }
+                    var scale = this.getLevelScale(level);
+                    var dimensionsScaled = this.dimensions.times(scale);
+
+                    // find the dimension of the tile, adjust for no
+                    // overlap data on top and left edges
+                    var sx = this.tileSize + (column==0 ? 1 : 2) * this.tileOverlap;
+                    var sy = this.tileSize + (row==0 ? 1 : 2) * this.tileOverlap;
+
+                    // adjust size for single-tile levels where the image
+                    // size is smaller than the regular tile size, and for
+                    // tiles on the bottom and right edges that would
+                    // exceed the image bounds.
+                    sx = Math.min(sx, dimensionsScaled.x - px);
+                    sy = Math.min(sy, dimensionsScaled.y - py);
+
+                    var tile_width = parseInt(sx);
+                    var tile_height = parseInt(sy);
+
+                    var x1 = parseInt(px / scale);
+                    var y1 = parseInt(py / scale);
+                    var x2 = parseInt((px + sx) / scale);
+                    var y2 = parseInt((py + sy) / scale);
+
+                    return 'http://chroniclingamerica.loc.gov/lccn/sn85066387/1898-01-09/ed-1/seq-'+
+                        sequence+'/'+ 
+                        'image_'+tile_width+'x'+tile_height+
+                        '_from_'+x1+','+y1+
+                        '_to_'+x2+','+y2+'.jpg';
+                };
+            };
+
+            OpenSeadragon({
+                id:            "example-tilesource-overlay",
+                prefixUrl:     "/openseadragon/images/",
+                tileSources: [{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    overlays: [{
+                        id: 'example-overlay',
+                        x: 0.33, 
+                        y: 0.75, 
+                        width: 0.2, 
+                        height: 0.25,
+                        className: 'highlight'
+                    }],
+                    getTileUrl: chronicling_america_example(17)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(18)
+                }],
+                onPageChange: function() {
+                    //Tooltips
+                    setTimeout(bindtooltip, 2000);
+                }
+            });
+
+            jQuery(function() {
+                //Tooltips
+                setTimeout(bindtooltip, 2000);
+            });
+
+            function bindtooltip(){
+                var tip = jQuery('#example-tip');
+                jQuery("#example-overlay").hover(function(e){
+                    var mousex = e.pageX + 20, //Get X coodrinates
+                        mousey = e.pageY + 20, //Get Y coordinates
+                        tipWidth = tip.width(), //Find width of tooltip
+                        tipHeight = tip.height(), //Find height of tooltip
+                    
+                    //Distance of element from the right edge of viewport
+                        tipVisX = $(window).width() - (mousex + tipWidth),
+                    //Distance of element from the bottom of viewport
+                        tipVisY = $(window).height() - (mousey + tipHeight);
+                      
+                    if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
+                        mousex = e.pageX - tipWidth - 20;
+                    } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
+                        mousey = e.pageY - tipHeight - 20;
+                    } 
+                    tip.css({  top: mousey, left: mousex, position: 'absolute' });
+                    tip.show().css({opacity: 0.8}); //Show tooltip
+                }, function() {
+                    tip.hide(); //Hide tooltip
+                });
+            };
+        </script> 
+
+        <div id="example-tip" style='display:none;width:250px;background-color:#fff;'>
+            <p>
+                The overlay can provide a class name and id to bind additional events to.
+            </p>
+        </div>
+    </div>
+</div>
+<p>
+The relevant configuration options are shown below. Note the className and id attributes
+will be passed to the overlay element so you can use bind css styles and events to it.
+<em>Be sure to put your styles in the document head, inside the openseadragon viewer element,
+or apply them dynamically so they will persist when full screen mode is entered.</em>
+</p>
+
+<pre>
+    OpenSeadragon({
+        ...
+        tileSources: [{
+            ...
+            overlays: [{
+                id: 'example-overlay',
+                x: 0.33, 
+                y: 0.75, 
+                width: 0.2, 
+                height: 0.25,
+                className: 'highlight'
+            }],
+            ...
+        }]
+        ...
+    });
+</pre>
+  
+
+
+<div class="demoarea">
+    <div class="demoheading">
+        Viewport overlays.
+    </div>
+    <p>
+        OpenSeadragon also supports overlays that persist accross image sequences.
+        In this case the overlay is simply configured outside of the tileSource.
+    </p>
+    <p>
+        This example also demonstrates the ability to configure the overlay position
+        in terms of image pixel coordinates.  The difference is infered by use of 
+        <strong>px</strong>, and <strong>py</strong>, instead of x and y.
+    </p>
+    <div id="example-viewport-overlay" class="openseadragon">
+    <style>
+    .filter{
+        opacity:    0.2;
+        filter:     alpha(opacity=20);
+        background-color: #7FFF00;
+    }
+    </style>
+    <script type="text/javascript">
+        OpenSeadragon({
+            id:            "example-viewport-overlay",
+            prefixUrl:     "/openseadragon/images/",
+            overlays: [{
+                id: 'global-overlay-filter',
+                px: 0, 
+                py: 0, 
+                width: 6425, 
+                height: 8535,
+                className: 'filter'
+            }],
+            tileSources: [{
+                minLevel: 8,
+                width: 6425,
+                height: 8535,
+                tileSize: 256,
+                tileOverlap: 1,
+                getTileUrl: chronicling_america_example(19)
+            },{
+                minLevel: 8,
+                width: 6425,
+                height: 8535,
+                tileSize: 256,
+                tileOverlap: 1,
+                getTileUrl: chronicling_america_example(20)
+            }]
+        });
+
+    </script>   
+    </div>
+
+    <pre>
+        OpenSeadragon({
+            ...
+            overlays: [{
+                id: 'global-overlay-filter',
+                px: 0, 
+                py: 0, 
+                width: 6425, 
+                height: 8535,
+                className: 'filter'
+            }],
+            ...
+        });
+    </pre>
+</div>
+
+<div class="demoarea">
+    <div class="demoheading">
+        Overlaying complex html.
+    </div>
+    <p>
+        By default OpenSeadragon checks for an existing element in the DOM that
+        matches the id of the overlay id (if one is specified).  If that content
+        is found, OpenSeadragon will use it for the overlay, otherwise it will create
+        a link to ensure keyboard accesibilty to the target ( as in the examples above ).
+    </p>
+    <p>
+        In this example we display some additional metadata to the right of the image itself.
+    </p>
+    <div id="complex-html-overlay" class="openseadragon">
+        <script type="text/javascript">
+            OpenSeadragon({
+                id:            "complex-html-overlay",
+                prefixUrl:     "/openseadragon/images/",
+                showNavigator: false,
+                preserveViewport: true,
+                minZoomLevel:  1,
+                overlays: [{
+                    minLevel: 8,
+                    px: 6425,
+                    py: 0,
+                    width: 6425,
+                    height: 8535,
+                    id: 'html-overlay'
+                }],
+                tileSources: [{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(1)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(2)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(3)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(4)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(5)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(6)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(7)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(8)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(9)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(10)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(11)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(11)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(12)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(13)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(14)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(15)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(16)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(17)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(18)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(19)
+                },{
+                    minLevel: 8,
+                    width: 6425,
+                    height: 8535,
+                    tileSize: 256,
+                    tileOverlap: 1,
+                    getTileUrl: chronicling_america_example(20)
+                }]
+            });
+
+        </script>  
+        <style>
+        .navigator .no-overlay-in-navigator{
+               display:none;
+        }        
+        #html-overlay{
+            opacity:    0.7;
+            color: #fff;
+            filter:     alpha(opacity=70);
+        }
+        #html-overlay .info{
+            padding: 20px;
+        }
+        #html-overlay dt{
+            font-weight: bold;
+        }
+        #html-overlay dl ul{
+            padding: 0px;
+        }
+        </style>
+        <div id='html-overlay' style=''>
+            
+            <div class="info">
+                <dl class="alt">
+                    <dt>Title: </dt>
+                    <dd>
+                    The San Francisco call. : (San Francisco [Calif.]) 1895-1913
+                    </dd>
+
+                    <dt>Alternative Titles:</dt>
+                    <dd>
+                        <ul class="bullet_blue">
+                            <li> Call </li>
+                            <li>Call chronicle examiner</li>
+                            <li>Call-chronicle-examinerApr. 19, 1906 </li>
+                            <li>Sunday call &lt;Dec. 5, 1901&gt; </li>
+                        </ul>
+                    </dd>
+
+                    <dt>Preceding Titles:</dt>
+                    <dd>
+                    <ul class="bullet_blue">
+                    <li><a href="http://chroniclingamerica.loc.gov/lccn/sn94052989/">The morning call. (San Francisco [Calif.]) 1878-1895</a></li>
+                    </ul>
+                    </dd>
+                </dl>
+                <a  style='' 
+                    href="http://chroniclingamerica.loc.gov/lccn/sn85066387/1895-03-05/ed-1/seq-1/">
+                    <img class="thumbnail" 
+                         src="http://chroniclingamerica.loc.gov/lccn/sn85066387/1895-03-05/ed-1/seq-1/thumbnail.jpg" alt="">
+                </a>
+            </div>
+
+        </div> 
+    </div>
+
+    <pre>
+        OpenSeadragon({
+            ...
+            preserveViewport: true,
+            showNavigator: false,
+            minZoomLevel:  1,
+            overlays: [{
+                px: 6425,
+                py: 0,
+                width: 6425,
+                height: 8535,
+                id: 'html-overlay'
+            }],
+            tileSources: [{
+                width: 6425,
+                height: 8535,
+                tileSize: 256,
+                tileOverlap: 1,
+                getTileUrl: chronicling_america_example(1)
+            },{
+                ...
+            }]
+            ...
+        });
+    </pre>
+</div>
+