<!doctype html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>DeepZoomImage Doctests</title>

    <link rel="stylesheet" href="../../3rdparty/highlight/styles/default.css">
    <link rel="stylesheet" href="../../../css/doctest.css">

    <script src="../../3rdparty/highlight/highlight.pack.js"></script>
    <script src="../../../dist/iwmlib.3rdparty.js"></script>

    <script src="../../../dist/iwmlib.js"></script>
    <script src="../../../dist/iwmlib.pixi.js"></script>

    <style>
        #app {
            display: table;
            margin: 0 auto;
        }

        #app > * {
            margin-bottom: 5px;
        }
    </style>
</head>

<body onload="Doctest.run()">
    <h1>DeepZoomImage</h1>
    <p>
        The main class of a deeply zoomable image that is represented by a hierarchy of tile layers for each zoom level. This gives
        the user the impression that even huge pictures (up to gigapixel-images) can be zoomed instantaneously, since the
        tiles at smaller levels are scaled immediately and overloaded by more detailed tiles at the larger level as fast
        as possible.
    </p>
    <br />
    <div id="app">
        <button id="change_dpr">Change Pixel Ratio</button>
        <div id="canvas_container"></div>
        <div id="info"></div>
    </div>
    <script class="doctest">

        // When an element is added, the ScatterApp wrapps it in it's own Scatter Container.
        // Just as in the doctest: scatter.html
        class ScatterApp extends PIXIApp {
            sceneFactory() {
                return new ScatterContainer(this.renderer, { showBounds: true, app: this })
            }
        }

        let app
        let state = 0

        //Destroys the PIXIApp element and the corresponding canvas,
        //to reinstantiate the entire application.
        changePIXI()

        function changePIXI() {
            if (typeof app != 'undefined') {
                //The parameter destroys the canvas, when destroying the app.
                // Not deleting a new canvas resulted in some
                // weird PIXI error.
                app.destroy(true)
            }


            //A new canvas has to be created
            //for the new view.
            var canvas = document.createElement("canvas")
            canvas_container.appendChild(canvas);

            app = new ScatterApp({
                resolution: state + 1,

                //Default parameters
                view: canvas,
                autoResize: false,
                width: 128,
                height: 128,
                backgroundColor: 0xFFCCCCCC
            }).setup().run()


            // To create a DeepZoomImage, a DeepZoomInfo has to
            // be provided. It contains all the necessary informations
            // for the DeepZoomImage, to behave as intended.
            // (E.g. that it displays the right level of tiles for the current view distance.)

            deepZoomInfo = new DeepZoomInfo(
                {
                    "tileSize": 128,
                    "format": "jpg",
                    "overlap": 0,
                    "type": "map",
                    "height": 4096,
                    "width": 4096,
                    "path": "../assets/maps/test",
                    "urlTileTemplate": "{path}/{level}/{column}/{row}.{format}"
                });


            // Create the DeepZoomImage
            deepZoomImage = new DeepZoomImage(deepZoomInfo, {
                highResolution: !!state,
                app
            });



            deepZoomImage.scatter = new DisplayObjectScatter(deepZoomImage, app.renderer, {
                // Allow more flexible scaling for debugging purposes.
                minScale: 0,
                maxScale: 100,
                // Notify the DeepZoomImage, when it's container has
                // been transformed (translated, scaled, rotated, ...)
                onTransform: (event) => {
                    deepZoomImage.transformed(event)
                }
            });


            // Add the DeepZoomImage to the scene.
            app.scene.addChild(deepZoomImage)

            //Set info text.
            info.innerHTML = "resolution: " + app.renderer.resolution +
                "<br>high resolution: " + !!state;
        }


        // Add functionality to the button.
        change_dpr.addEventListener("click", (event) => {
            state = (state + 1) % 2
            changePIXI()
        })

    </script>
</body>

</html>