Merge remote-tracking branch 'upstream/master'

changelog.txt

@@ -35,6 +35,7 @@ OPENSEADRAGON CHANGELOG
     * Rect and Point now have clone functions
     * New Viewport method for managing homeBounds as well as constraints: setHomeBounds
     * Viewport.open supports positioning config properties
+    * For multi-image open, drawing isn't started until all tileSources have been opened
 * Margins option to push the home region in from the edges of the Viewer (#505)
 * Rect and Point toString() functions are now consistent: rounding values to nearest hundredth
 * Overlays appear in the DOM immediately on open or addOverlay (#507)
@@ -49,6 +50,8 @@ OPENSEADRAGON CHANGELOG
 * Fixed an error in fitBounds that occurred sometimes with immediately = true
 * Added support for HDPI (retina) displays (#583)
 * Corrected IIIF tile source to use canonical syntax (#586)
+* Fixed x/y typo that caused horizontal reference strip to be rendered only relative to height (#595)
+* Fixed Firefox 35 not able to open local files (#588)
 
 1.2.1:
 

src/openseadragon.js

@@ -517,17 +517,19 @@
   *     If sequenceMode is true, display this page initially.
   *
   * @property {Boolean} [preserveViewport=false]
-  *     If sequenceMode is true, then normally navigating to through each image resets the
+  *     If sequenceMode is true, then normally navigating through each image resets the
   *     viewport to 'home' position.  If preserveViewport is set to true, then the viewport
   *     position is preserved when navigating between images in the sequence.
   *
   * @property {Boolean} [preserveOverlays=false]
-  *     If sequenceMode is true, then normally navigating to through each image
+  *     If sequenceMode is true, then normally navigating through each image
   *     resets the overlays.
-  *     If preserveOverlays is set to true, then the overlays
+  *     If preserveOverlays is set to true, then the overlays added with {@link OpenSeadragon.Viewer#addOverlay}
   *     are preserved when navigating between images in the sequence.
-  *     Note: setting preserveOverlays overrides any overlays specified in the
+  *     Note: setting preserveOverlays overrides any overlays specified in the global
-  *     "overlays" property.
+  *     "overlays" option for the Viewer. It's also not compatible with specifying
+  *     per-tileSource overlays via the options, as those overlays will persist
+  *     even after the tileSource is closed.
   *
   * @property {Boolean} [showReferenceStrip=false]
   *     If sequenceMode is true, then display a scrolling strip of image thumbnails for
@@ -1984,9 +1986,12 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
                 if ( request.readyState == 4 ) {
                     request.onreadystatechange = function(){};
 
-                    var successStatus =
+                    // With protocols other than http/https, the status is 200
-                        protocol === "http:" || protocol === "https:" ? 200 : 0;
+                    // on Firefox and 0 on other browsers
-                    if ( request.status === successStatus ) {
+                    if ( request.status === 200 ||
+                        ( request.status === 0 &&
+                          protocol !== "http:" &&
+                          protocol !== "https:" )) {
                         onSuccess( request );
                     } else {
                         $.console.log( "AJAX request returned %d: %s", request.status, url );

src/referencestrip.js

@@ -224,7 +224,7 @@ $.ReferenceStrip = function ( options ) {
         this.panels.push( element );
 
     }
-    loadPanels( this, this.scroll == 'vertical' ? viewerSize.y : viewerSize.y, 0 );
+    loadPanels( this, this.scroll == 'vertical' ? viewerSize.y : viewerSize.x, 0 );
     this.setFocus( 0 );
 
 };

src/viewer.js

@@ -524,6 +524,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
             return;
         }
 
+        this._opening = true;
+
         var expected = tileSources.length;
         var successes = 0;
         var failures = 0;
@@ -552,6 +554,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                     }
 
                     _this._drawOverlays();
+                    _this._opening = false;
 
                     /**
                      * Raised when the viewer has opened and loaded one or more TileSources.
@@ -566,6 +569,8 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
                     // TODO: what if there are multiple sources?
                     _this.raiseEvent( 'open', { source: source } );
                 } else {
+                    _this._opening = false;
+
                     /**
                      * Raised when an error occurs loading a TileSource.
                      *
@@ -655,12 +660,13 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
             return this;
         }
 
+        this._opening = false;
+
         if ( this.navigator ) {
             this.navigator.close();
         }
 
-        if( ! this.preserveOverlays)
+        if( ! this.preserveOverlays) {
-        {
             this.clearOverlays();
             this.overlaysContainer.innerHTML = "";
         }
@@ -705,6 +711,9 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
 
         this.close();
 
+        this.clearOverlays();
+        this.overlaysContainer.innerHTML = "";
+
         //TODO: implement this...
         //this.unbindSequenceControls()
         //this.unbindStandardControls()
@@ -2793,6 +2802,10 @@ function updateOnce( viewer ) {
 
     //viewer.profiler.beginUpdate();
 
+    if (viewer._opening) {
+        return;
+    }
+
     if ( viewer.autoResize ) {
         var containerSize = _getSafeElemSize( viewer.container );
         if ( !containerSize.equals( THIS[ viewer.hash ].prevContainerSize ) ) {

test/demo/m2/README.md

@@ -10,11 +10,10 @@ http://showcase.iiif.io/viewer/mirador/
 
 ## To Do
 
-* Choosing between multiple versions of a page
-* Detail images overlaid on the page
 * Cropped images
 
 ### Maybe
 
+* Alternates: wait until tiles have loaded before switching
 * Show/hide pages?
 * Lazyloading tilesources?

test/demo/m2/index.html

@@ -6,6 +6,7 @@
         <script type="text/javascript" src='../../lib/jquery-1.9.1.min.js'></script>
         <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
         <script src="js/main.js"></script>
+        <script src="js/page.js"></script>
         <!-- <script src="js/harvard-tilesources.js"></script> -->
         <script src="js/openseadragon-svg-overlay.js"></script>
         <style type="text/css">

test/demo/m2/js/main.js

@@ -11,7 +11,7 @@
             this.mode = 'none';
             this.pageBuffer = 0.05;
             this.bigBuffer = 0.2;
-            this.page = 0;
+            this.pageIndex = 0;
             this.modeNames = [
                 'thumbs',
                 'scroll',
@@ -19,16 +19,28 @@
                 'page'
             ];
 
+            this.pages = this.createPages();
+
+            var tileSources = $.map(this.pages, function(v, i) {
+                return v.starter.tileSource;
+            });
+
             this.viewer = OpenSeadragon({
                 id: "contentDiv",
                 prefixUrl: "../../../build/openseadragon/images/",
                 autoResize: false,
                 showHomeControl: false,
-                tileSources: this.getTileSources()
+                tileSources: tileSources
             });
 
             this.viewer.addHandler('open', function() {
                 self.$el = $(self.viewer.element);
+
+                $.each(self.pages, function(i, v) {
+                    v.setTiledImage(self.viewer.world.getItemAt(i));
+                    v.addDetails();
+                });
+
                 self.setMode({
                     mode: 'thumbs',
                     immediately: true
@@ -39,7 +51,8 @@
                 if (self.mode === 'scroll') {
                     var result = self.hitTest(self.viewer.viewport.getCenter());
                     if (result) {
-                        self.page = result.index;
+                        self.pageIndex = result.index;
+                        self.update();
                     }
                 }
             });
@@ -93,16 +106,18 @@
                 })
                 .mousemove(function(event) {
                     var pixel = new OpenSeadragon.Point(event.clientX, event.clientY);
+                    pixel.y -= self.$scrollCover.position().top;
                     var result = self.hitTest(self.viewer.viewport.pointFromPixel(pixel));
                     self.updateHover(result ? result.index : -1);
                 })
                 .click(function(event) {
                     var pixel = new OpenSeadragon.Point(event.clientX, event.clientY);
+                    pixel.y -= self.$scrollCover.position().top;
                     var result = self.hitTest(self.viewer.viewport.pointFromPixel(pixel));
                     if (result) {
                         self.setMode({
                             mode: 'page',
-                            page: result.index
+                            pageIndex: result.index
                         });
                     }
                 });
@@ -141,40 +156,39 @@
 
         // ----------
         next: function() {
-            var page = this.page + (this.mode === 'book' ? 2 : 1);
+            var pageIndex = this.pageIndex + (this.mode === 'book' ? 2 : 1);
-            if (this.mode === 'book' && page % 2 === 0 && page !== 0) {
+            if (this.mode === 'book' && pageIndex % 2 === 0 && pageIndex !== 0) {
-                page --;
+                pageIndex --;
             }
 
             this.goToPage({
-                page: page
+                pageIndex: pageIndex
             });
         },
 
         // ----------
         previous: function() {
-            var page = this.page - (this.mode === 'book' ? 2 : 1);
+            var pageIndex = this.pageIndex - (this.mode === 'book' ? 2 : 1);
-            if (this.mode === 'book' && page % 2 === 0 && page !== 0) {
+            if (this.mode === 'book' && pageIndex % 2 === 0 && pageIndex !== 0) {
-                page --;
+                pageIndex --;
             }
 
             this.goToPage({
-                page: page
+                pageIndex: pageIndex
             });
         },
 
         // ----------
         hitTest: function(pos) {
-            var count = this.viewer.world.getItemCount();
+            var count = this.pages.length;
-            var item, box;
+            var page, box;
 
             for (var i = 0; i < count; i++) {
-                item = this.viewer.world.getItemAt(i);
+                page = this.pages[i];
-                box = item.getBounds();
+                box = page.getBounds();
                 if (pos.x > box.x && pos.y > box.y && pos.x < box.x + box.width &&
                         pos.y < box.y + box.height) {
                     return {
-                        item: item,
                         index: i
                     };
                 }
@@ -208,12 +222,43 @@
             var self = this;
 
             $('.nav').toggle(this.mode === 'scroll' || this.mode === 'book' || this.mode === 'page');
-            $('.previous').toggleClass('hidden', this.page <= 0);
+            $('.previous').toggleClass('hidden', this.pageIndex <= 0);
-            $('.next').toggleClass('hidden', this.page >= this.viewer.world.getItemCount() - 1);
+            $('.next').toggleClass('hidden', this.pageIndex >= this.pages.length - 1);
 
             $.each(this.modeNames, function(i, v) {
                 $('.' + v).toggleClass('active', v === self.mode);
             });
+
+            // alternates menu
+            if (this.$alternates) {
+                this.$alternates.remove();
+                this.$alternates = null;
+            }
+
+            var page = this.pages[this.pageIndex];
+            if (page && page.alternates && page.alternates.length) {
+                this.$alternates = $('<select>')
+                    .change(function() {
+                        page.selectAlternate(parseInt(self.$alternates.val(), 10));
+                    })
+                    .appendTo('.nav');
+
+                $('<option>')
+                    .attr('value', -1)
+                    .text(page.label || 'Default')
+                    .appendTo(self.$alternates);
+
+                $.each(page.alternates, function(i, v) {
+                    if (v.label) {
+                        $('<option>')
+                            .attr('value', i)
+                            .text(v.label)
+                            .appendTo(self.$alternates);
+                    }
+                });
+
+                this.$alternates.val(page.alternateIndex);
+            }
         },
 
         // ----------
@@ -258,8 +303,8 @@
 
             this.mode = config.mode;
 
-            if (config.page !== undefined) {
+            if (config.pageIndex !== undefined) {
-                this.page = config.page; // Need to do this before layout
+                this.pageIndex = config.pageIndex; // Need to do this before layout
             }
 
             this.ignoreScroll = true;
@@ -309,9 +354,9 @@
                 viewportBounds.y += info.viewportMax * info.scrollFactor;
                 viewportBounds.height = info.viewportHeight;
 
-                var itemBounds = this.viewer.world.getItemAt(this.page).getBounds();
+                var pageBounds = this.pages[this.pageIndex].getBounds();
-                var top = itemBounds.y - this.bigBuffer;
+                var top = pageBounds.y - this.bigBuffer;
-                var bottom = top + itemBounds.height + (this.bigBuffer * 2);
+                var bottom = top + pageBounds.height + (this.bigBuffer * 2);
 
                 var normalY;
                 if (top < viewportBounds.y) {
@@ -349,8 +394,8 @@
                 return;
             }
 
-            var item = this.viewer.world.getItemAt(this.page);
+            var page = this.pages[this.pageIndex];
-            var box = item.getBounds();
+            var box = page.getBounds();
 
             this.highlight
                 .style('opacity', 1)
@@ -361,8 +406,8 @@
         },
 
         // ----------
-        updateHover: function(page) {
+        updateHover: function(pageIndex) {
-            if (page === -1 || this.mode !== 'thumbs') {
+            if (pageIndex === -1 || this.mode !== 'thumbs') {
                 this.hover.style('opacity', 0);
                 this.$scrollCover.css({
                     'cursor': 'default'
@@ -375,8 +420,8 @@
                 'cursor': 'pointer'
             });
 
-            var item = this.viewer.world.getItemAt(page);
+            var page = this.pages[pageIndex];
-            var box = item.getBounds();
+            var box = page.getBounds();
 
             this.hover
                 .style('opacity', 0.3)
@@ -390,12 +435,12 @@
         goToPage: function(config) {
             var self = this;
 
-            var itemCount = this.viewer.world.getItemCount();
+            var pageCount = this.pages.length;
-            this.page = Math.max(0, Math.min(itemCount - 1, config.page));
+            this.pageIndex = Math.max(0, Math.min(pageCount - 1, config.pageIndex));
 
             var viewerWidth = this.$el.width();
             var viewerHeight = this.$el.height();
-            var bounds = this.viewer.world.getItemAt(this.page).getBounds();
+            var bounds = this.pages[this.pageIndex].getBounds();
             var x = bounds.x;
             var y = bounds.y;
             var width = bounds.width;
@@ -403,17 +448,17 @@
             var box;
 
             if (this.mode === 'book') {
-                var item;
+                var page;
-                if (this.page % 2) { // First in a pair
+                if (this.pageIndex % 2) { // First in a pair
-                    item = this.viewer.world.getItemAt(this.page + 1);
+                    if (this.pageIndex < this.pages.length - 1) {
-                    if (item) {
+                        page = this.pages[this.pageIndex + 1];
-                        width += item.getBounds().width;
+                        width += page.getBounds().width;
                     }
                 } else {
-                    item = this.viewer.world.getItemAt(this.page - 1);
+                    if (this.pageIndex > 0) {
-                    if (item) {
+                        page = this.pages[this.pageIndex - 1];
-                        box = item.getBounds();
+                        box = page.getBounds();
-                        x -= width;
+                        x -= box.width;
                         width += box.width;
                     }
                 }
@@ -425,10 +470,10 @@
             height += (this.pageBuffer * 2);
 
             if (this.mode === 'scroll') {
-                if (this.page === 0) {
+                if (this.pageIndex === 0) {
                     x = bounds.x - this.pageBuffer;
                     width = height * (viewerWidth / viewerHeight);
-                } else if (this.page === this.viewer.world.getItemCount() - 1) {
+                } else if (this.pageIndex === this.pages.length - 1) {
                     width = height * (viewerWidth / viewerHeight);
                     x = (bounds.x + bounds.width + this.pageBuffer) - width;
                 }
@@ -443,8 +488,8 @@
                 if (self.mode === 'page' || self.mode === 'book') {
                     self.panBounds = box;
                 } else if (self.mode === 'scroll') {
-                    self.panBounds = self.viewer.world.getItemAt(0).getBounds()
+                    self.panBounds = self.pages[0].getBounds()
-                        .union(self.viewer.world.getItemAt(itemCount - 1).getBounds());
+                        .union(self.pages[pageCount - 1].getBounds());
 
                     self.panBounds.x -= self.pageBuffer;
                     self.panBounds.y -= self.pageBuffer;
@@ -490,17 +535,17 @@
                 specs: []
             };
 
-            var count = this.viewer.world.getItemCount();
+            var count = this.pages.length;
             var x = 0;
             var y = 0;
             var offset = new OpenSeadragon.Point();
             var rowHeight = 0;
-            var item, box;
+            var box, page;
             for (var i = 0; i < count; i++) {
-                item = this.viewer.world.getItemAt(i);
+                page = this.pages[i];
-                box = item.getBounds();
+                box = page.getBounds();
 
-                if (i === this.page) {
+                if (i === this.pageIndex) {
                     offset = box.getTopLeft().minus(new OpenSeadragon.Point(x, y));
                 }
 
@@ -517,7 +562,7 @@
                 rowHeight = Math.max(rowHeight, box.height);
 
                 layout.specs.push({
-                    item: item,
+                    page: page,
                     bounds: box
                 });
 
@@ -557,8 +602,7 @@
 
             for (var i = 0; i < config.layout.specs.length; i++) {
                 spec = config.layout.specs[i];
-                spec.item.setPosition(spec.bounds.getTopLeft(), config.immediately);
+                spec.page.place(spec.bounds, config.immediately);
-                spec.item.setWidth(spec.bounds.width, config.immediately);
             }
         },
 
@@ -576,90 +620,154 @@
                 this.viewer.viewport.fitBounds(box, config.immediately);
             } else {
                 this.goToPage({
-                    page: this.page,
+                    pageIndex: this.pageIndex,
                     immediately: config.immediately
                 });
             }
         },
 
         // ----------
-        getTileSources: function() {
+        createPages: function() {
+            var self = this;
+
             if (this.tileSources) {
                 return $.map(this.tileSources.slice(0, this.maxImages), function(v, i) {
-                    return new OpenSeadragon.IIIFTileSource(v);
+                    return new self.Page($.extend({
+                        pageIndex: i
+                    }, v));
                 });
             }
 
-            var inputs = [
+            var highsmith = {
-                {
+                Image: {
-                    Image: {
+                    xmlns: "http://schemas.microsoft.com/deepzoom/2008",
-                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
+                    Url: "http://openseadragon.github.io/example-images/highsmith/highsmith_files/",
-                        Url: "http://openseadragon.github.io/example-images/highsmith/highsmith_files/",
+                    Format: "jpg",
-                        Format: "jpg",
+                    Overlap: "2",
-                        Overlap: "2",
+                    TileSize: "256",
-                        TileSize: "256",
+                    Size: {
-                        Size: {
+                        Width:  "7026",
-                            Width:  "7026",
+                        Height: "9221"
-                            Height: "9221"
-                        }
-                    }
-                }, {
-                    Image: {
-                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
-                        Url: "http://openseadragon.github.io/example-images/duomo/duomo_files/",
-                        Format: "jpg",
-                        Overlap: "2",
-                        TileSize: "256",
-                        Size: {
-                            Width:  "13920",
-                            Height: "10200"
-                        }
-                    }
-                }, {
-                //     Image: {
-                //         xmlns: "http://schemas.microsoft.com/deepzoom/2008",
-                //         Url: "../../data/tall_files/",
-                //         Format: "jpg",
-                //         Overlap: "1",
-                //         TileSize: "254",
-                //         Size: {
-                //             Width:  "500",
-                //             Height: "2000"
-                //         }
-                //     }
-                // }, {
-                //     Image: {
-                //         xmlns: "http://schemas.microsoft.com/deepzoom/2008",
-                //         Url: "../../data/wide_files/",
-                //         Format: "jpg",
-                //         Overlap: "1",
-                //         TileSize: "254",
-                //         Size: {
-                //             Width:  "2000",
-                //             Height: "500"
-                //         }
-                //     }
-                // }, {
-                    Image: {
-                        xmlns: "http://schemas.microsoft.com/deepzoom/2008",
-                        Url: "../../data/testpattern_files/",
-                        Format: "jpg",
-                        Overlap: "1",
-                        TileSize: "254",
-                        Size: {
-                            Width:  "1000",
-                            Height: "1000"
-                        }
                     }
                 }
+            };
+
+            var duomo = {
+                Image: {
+                    xmlns: "http://schemas.microsoft.com/deepzoom/2008",
+                    Url: "http://openseadragon.github.io/example-images/duomo/duomo_files/",
+                    Format: "jpg",
+                    Overlap: "2",
+                    TileSize: "256",
+                    Size: {
+                        Width:  "13920",
+                        Height: "10200"
+                    }
+                }
+            };
+
+            var tall = {
+                Image: {
+                    xmlns: "http://schemas.microsoft.com/deepzoom/2008",
+                    Url: "../../data/tall_files/",
+                    Format: "jpg",
+                    Overlap: "1",
+                    TileSize: "254",
+                    Size: {
+                        Width:  "500",
+                        Height: "2000"
+                    }
+                }
+            };
+
+            var wide = {
+                Image: {
+                    xmlns: "http://schemas.microsoft.com/deepzoom/2008",
+                    Url: "../../data/wide_files/",
+                    Format: "jpg",
+                    Overlap: "1",
+                    TileSize: "254",
+                    Size: {
+                        Width:  "2000",
+                        Height: "500"
+                    }
+                }
+            };
+
+            var testpattern = {
+                Image: {
+                    xmlns: "http://schemas.microsoft.com/deepzoom/2008",
+                    Url: "../../data/testpattern_files/",
+                    Format: "jpg",
+                    Overlap: "1",
+                    TileSize: "254",
+                    Size: {
+                        Width:  "1000",
+                        Height: "1000"
+                    }
+                }
+            };
+
+            var pages = [];
+
+            pages.push(new this.Page({
+                masterWidth: 7026,
+                masterHeight: 9221,
+                x: 0,
+                y: 0,
+                width: 1,
+                label: 'highsmith',
+                tileSource: highsmith,
+                alternates: [
+                    {
+                        x: 0,
+                        y: 0.55,
+                        width: 1,
+                        label: 'duomo',
+                        tileSource: duomo
+                    },
+                    {
+                        x: 0.7,
+                        y: 0,
+                        width: 0.3,
+                        label: 'tall',
+                        tileSource: tall
+                    }
+                ]
+            }));
+
+            pages.push(new this.Page({
+                tileSource: highsmith,
+                details: [
+                    {
+                        x: 0.25,
+                        y: 0.15,
+                        width: 0.5,
+                        tileSource: testpattern
+                    },
+                    {
+                        x: 0.25,
+                        y: 0.8,
+                        width: 0.5,
+                        tileSource: wide
+                    }
+                ]
+            }));
+
+            var inputs = [
+                highsmith,
+                duomo,
+                testpattern
             ];
 
-            var outputs = [];
             for (var i = 0; i < this.maxImages; i++) {
-                outputs.push(inputs[Math.floor(Math.random() * inputs.length)]);
+                pages.push(new this.Page({
+                    pageIndex: i,
+                    tileSource: inputs[Math.floor(Math.random() * inputs.length)]
+                }));
             }
 
-            return outputs;
+            return pages;
         }
     };
 

test/demo/m2/js/page.js

@@ -0,0 +1,121 @@
+/* global App, $ */
+(function() {
+
+    // ----------
+    var component = App.Page = function(config) {
+        this.label = config.label;
+        this.alternates = config.alternates;
+        this.pageIndex = config.pageIndex;
+        this.details = config.details;
+
+        if (config.masterWidth && config.masterHeight) {
+            this.bounds = new OpenSeadragon.Rect(0, 0, config.masterWidth, config.masterHeight);
+        }
+
+        this.starter = {
+            x: config.x,
+            y: config.y,
+            width: config.width,
+            tileSource: config.tileSource
+        };
+
+        this.main = {};
+
+        this.alternateIndex = -1;
+    };
+
+    // ----------
+    component.prototype = {
+        // ----------
+        setTiledImage: function(tiledImage) {
+            this.setDetail(this.main, this.starter, tiledImage);
+
+            if (!this.bounds) {
+                this.bounds = this.main.tiledImage.getBounds();
+            }
+        },
+
+        // ----------
+        setDetail: function(detail, info, tiledImage) {
+            detail.tiledImage = tiledImage;
+            detail.x = info.x || 0;
+            detail.y = info.y || 0;
+            detail.width = info.width || 1;
+        },
+
+        // ----------
+        selectAlternate: function(index) {
+            var self = this;
+
+            if (index === this.alternateIndex) {
+                return;
+            }
+
+            var itemInfo = (index === -1 ? this.starter : this.alternates[index]);
+
+            App.viewer.world.removeItem(this.main.tiledImage);
+            App.viewer.addTiledImage({
+                tileSource: itemInfo.tileSource,
+                index: this.pageIndex,
+                success: function(event) {
+                    self.setDetail(self.main, itemInfo, event.item);
+                    self.placeDetail(self.main, true);
+                }
+            });
+
+            this.alternateIndex = index;
+        },
+
+        // ----------
+        addDetails: function() {
+            var self = this;
+
+            if (!this.details) {
+                return;
+            }
+
+            $.each(this.details, function(i, v) {
+                App.viewer.addTiledImage({
+                    tileSource: v.tileSource,
+                    success: function(event) {
+                        v.tiledImage = event.item;
+                        self.placeDetail(v, true);
+                    }
+                });
+            });
+        },
+
+        // ----------
+        getBounds: function() {
+            return this.bounds.clone();
+        },
+
+        // ----------
+        place: function(bounds, immediately) {
+            var self = this;
+
+            this.bounds = bounds.clone();
+
+            this.placeDetail(this.main, immediately);
+
+            if (this.details) {
+                $.each(this.details, function(i, v) {
+                    if (v.tiledImage) {
+                        self.placeDetail(v, immediately);
+                    }
+                });
+            }
+        },
+
+        // ----------
+        placeDetail: function(detail, immediately) {
+            var position = new OpenSeadragon.Point(
+                this.bounds.x + (this.bounds.width * detail.x),
+                this.bounds.y + (this.bounds.width * detail.y));
+
+            detail.tiledImage.setPosition(position, immediately);
+            detail.tiledImage.setWidth(this.bounds.width * detail.width, immediately);
+        }
+    };
+
+})();