From e93a0862bd442a1a923383cd7ff667487f0d2bd8 Mon Sep 17 00:00:00 2001
From: Ian Gilman <ian@iangilman.com>
Date: Fri, 3 Jul 2015 10:19:10 -0700
Subject: [PATCH] Added demo for TileSource swapping

---
 test/demo/tilesource-swap.html | 96 ++++++++++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 test/demo/tilesource-swap.html
diff --git a/test/demo/tilesource-swap.html b/test/demo/tilesource-swap.html
new file mode 100644
index 00000000..3420927c
--- /dev/null
+++ b/test/demo/tilesource-swap.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>TileSource Swapping</title>
+        <script type="text/javascript" src="../../build/openseadragon/openseadragon.js"></script>
+        <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
+        <style type="text/css">
+
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+            }
+
+            .viewer-position {
+                position: absolute;
+                left: 0;
+                top: 30px;
+                right: 0;
+                bottom: 0;
+            }
+
+        </style>
+    </head>
+    <body>
+        <div>This is a demo of using a single image stand-in and then swapping to a full TileSource on zooming. Click the image to see it in action.</div>
+        <div id="openseadragon1" class="viewer-position"></div>
+        <script>
+
+            var duomoStandin = {
+                type: 'legacy-image-pyramid',
+                levels: [
+                    {
+                        url: 'http://openseadragon.github.io/example-images/duomo/duomo_files/8/0_0.jpg',
+                        width: 218,
+                        height: 160
+                    }
+                ]
+            };
+
+            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 viewer = OpenSeadragon({
+                id: 'openseadragon1',
+                prefixUrl: '../../build/openseadragon/images/',
+                tileSources: duomoStandin,
+                minZoomImageRatio: 0.1,
+                defaultZoomLevel: 0.1,
+                zoomPerClick: 1
+            });
+
+            viewer.addHandler('canvas-click', function(event) {
+                if (event.quick) {
+                    var standin = viewer.world.getItemAt(0);
+                    var standinBounds = standin.getBounds();
+                    viewer.viewport.fitBounds(standinBounds);
+
+                    viewer.addTiledImage({
+                        x: standinBounds.x,
+                        y: standinBounds.y,
+                        width: standinBounds.width,
+                        tileSource: duomo,
+                        index: 0, // Add the new image below the stand-in.
+                        success: function(event) {
+                            var fullImage = event.item;
+
+                            // The changeover will look better if we wait for the first tile to be drawn.
+                            var tileDrawnHandler = function(event) {
+                                if (event.tiledImage === fullImage) {
+                                    viewer.removeHandler('tile-drawn', tileDrawnHandler);
+                                    viewer.world.removeItem(standin);
+                                }
+                            };
+
+                            viewer.addHandler('tile-drawn', tileDrawnHandler);
+                        }
+                    });
+                }
+            });
+
+        </script>
+    </body>
+</html>
