<!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>Double 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="div1" style="float: left;"></div>
    <div id="div2" style="float: right;"></div>
    <div style="clear: left; margin-top: 540px;" />
    <script class="doctest">

        // deepZoom
        //--------------------
        const 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}"
        })
        // const deepZoomInfo = new DeepZoomInfo({
        //     compression: [
        //         "dds"
        //     ],
        //     clip: {
        //         minLevel: 12,
        //         maxLevel: 20,
        //         startCol: 275215,
        //         startRow: 181050,
        //         bounds: {
        //             min: [48.458353, 8.96484374976547],
        //             max: [48.5747899110263, 9.14062499976523]
        //         }
        //     },
        //     tileSize: 512,
        //     format: "png",
        //     overlap: 0,
        //     type: "map",
        //     height: 131072,
        //     width: 131072,
        //     path: "../../../var/tuesch/luftbild_2016_full",
        //     urlTileTemplate: "{path}/{level}/{row}/{column}.{format}"
        // })

        // app
        //--------------------
        window.app = new PIXIApp({
            width: 400,
            height: 500,
            backgroundColor: 0xFFCCCCCC
        }).setup().run()
        
        div1.appendChild(app.view)

        // create the ScatterContainer
        //--------------------
        const scatterContainer1 = new ScatterContainer(app.renderer, {showBounds: true, app: app})
        app.scene.addChild(scatterContainer1)

        // Create the DeepZoomImage
        //--------------------
        setTimeout(() => {
            const deepZoomImage1 = new DeepZoomImage(deepZoomInfo, {app, world: scatterContainer1})
            deepZoomImage1.scatter = new DisplayObjectScatter(deepZoomImage1, app.renderer, {
                minScale: 0,
                maxScale: 50,
                onTransform: event => {
                    //console.log('currentLevel', deepZoomImage1.currentLevel)
                    deepZoomImage1.transformed(event)
                }
            })

            scatterContainer1.addChild(deepZoomImage1)
        }, 1000)
        
        
        // app2
        //--------------------
        const app2 = new PIXIApp({
            width: 400,
            height: 500,
            backgroundColor: 0xFFCCCCCC
        }).setup().run()
        
        div2.appendChild(app2.view)

        // create the ScatterContainer
        //--------------------
        const scatterContainer2 = new ScatterContainer(app2.renderer, {showBounds: true, app: app2})
        app2.scene.addChild(scatterContainer2)

        // Create the DeepZoomImage
        //--------------------
        const deepZoomImage2 = new DeepZoomImage(deepZoomInfo, {app: app2})
        deepZoomImage2.scatter = new DisplayObjectScatter(deepZoomImage2, app2.renderer, {
            minScale: 0,
            maxScale: 100,
            onTransform: (event) => {
                deepZoomImage2.transformed(event)
            }
        })

        scatterContainer2.addChild(deepZoomImage2)

    </script>

    <h1>DeepZoomImage in 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="div3"></div>
    <script class="doctest">

        // app3
        //--------------------
        const app3 = new PIXIApp({
            width: 900,
            height: 500,
            backgroundColor: 0xFFCCCCCC
        }).setup().run()

        window.app3 = app3
        
        div3.appendChild(app3.view)

        // create the ScatterContainer
        //--------------------
        const scatterContainer3 = new ScatterContainer(app3.renderer, {app: app3, showBounds: true, claimEvent: false, stopEvents: false})
        app3.scene.addChild(scatterContainer3)

        // Create the DeepZoomImage
        //--------------------
        const deepZoomImage3 = new DeepZoomImage(deepZoomInfo, {app: app3})
        deepZoomImage3.scatter = new DisplayObjectScatter(deepZoomImage3, app3.renderer, {
            minScale: 0,
            maxScale: 100,
            startScale: 2,
            autoBringToFront: false,
            onTransform: (event) => {
                deepZoomImage3.transformed(event)
            }
        })

        app3._deepZoomImage3 = deepZoomImage3

        scatterContainer3.addChild(deepZoomImage3)

        // Create the second DeepZoomImage
        //--------------------
        const border = new PIXI.Graphics()
        border.beginFill(0x282828, 1)
        border.drawRect(0, 0, 264, 244)
        scatterContainer3.addChild(border)

        const mask = new PIXI.Graphics()
        mask.beginFill(0x282828, 1)
        mask.drawRect(0, 0, 260, 240)
        scatterContainer3.addChild(mask)

        const deepZoomImage4 = new DeepZoomImage(deepZoomInfo, {app: app3})
        deepZoomImage4.x = 4
        deepZoomImage4.y = 4
        deepZoomImage4.scatter = new DisplayObjectScatter(deepZoomImage4, app3.renderer, {
            minScale: 0,
            maxScale: 100,
            onTransform: (event) => {
                deepZoomImage4.transformed(event)
            }
        })
        deepZoomImage4.mask = mask

        app3._deepZoomImage4 = deepZoomImage4

        scatterContainer3.addChild(deepZoomImage4)

    </script>
</body>

</html>