diff --git a/lib/coordinates.html b/lib/coordinates.html
index d5c1386..bb22d94 100644
--- a/lib/coordinates.html
+++ b/lib/coordinates.html
@@ -7,7 +7,7 @@
     <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="./3rdparty/all.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
     <script src="../dist/iwmlib.js"></script>
     <script>
         function drawPolygons() {
diff --git a/lib/events.html b/lib/events.html
index 29e7428..d17af68 100644
--- a/lib/events.html
+++ b/lib/events.html
@@ -5,7 +5,7 @@
 	<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="./3rdparty/all.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
 	<script src="../dist/iwmlib.js"></script>
 </head>
 <body onload="Doctest.run()" >
diff --git a/lib/flippable.html b/lib/flippable.html
index 7a44da7..e656c34 100644
--- a/lib/flippable.html
+++ b/lib/flippable.html
@@ -6,8 +6,8 @@
 	<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="./3rdparty/all.js"></script>
-	<script src="./all.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
+	<script src="../dist/iwmlib.js"></script>
 
     <link rel="stylesheet" href="../css/flipeffect.css">
 	<template id="flipTemplate">
diff --git a/lib/frames.html b/lib/frames.html
index 4b255f7..8f70384 100644
--- a/lib/frames.html
+++ b/lib/frames.html
@@ -5,8 +5,9 @@
 	<meta name="viewport" content="width=device-width, user-scalable=no" />
 	<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="./3rdparty/all.js"></script>
+    <script src="./3rdparty/highlight/highlight.pack.js"></script>
+    
+    <script src="../dist/iwmlib.3rdparty.js"></script>
 	<script src="../dist/iwmlib.js"></script>
 </head>
 <body onload="Doctest.run()" >
diff --git a/lib/interaction.html b/lib/interaction.html
index 9b1e8c2..1fb1b04 100644
--- a/lib/interaction.html
+++ b/lib/interaction.html
@@ -7,7 +7,7 @@
 	<link rel="stylesheet" href="../css/doctest.css">
 	<script src="./3rdparty/highlight/highlight.pack.js"></script>
     <script src="../dist/iwmlib.js"></script>
-    <script src="./3rdparty/all.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
 </head>
 <body onload="Doctest.run()" >
 <h1>
diff --git a/lib/pixi/deepzoom/deepzoom.html b/lib/pixi/deepzoom/deepzoom.html
new file mode 100644
index 0000000..9a7adf9
--- /dev/null
+++ b/lib/pixi/deepzoom/deepzoom.html
@@ -0,0 +1,219 @@
+<!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>
diff --git a/lib/pixi/deepzoom/image.html b/lib/pixi/deepzoom/image.html
index 1cbd940..98b57a2 100644
--- a/lib/pixi/deepzoom/image.html
+++ b/lib/pixi/deepzoom/image.html
@@ -11,10 +11,9 @@
 
     <script src="../../3rdparty/highlight/highlight.pack.js"></script>
     <script src="../../../dist/iwmlib.3rdparty.js"></script>
-    <script src="../../../node_modules/jquery/dist/jquery.min.js"></script>
 
-    <script src="../../all.js"></script>
-    <script src="../all.js"></script>
+    <script src="../../../dist/iwmlib.js"></script>
+    <script src="../../../dist/iwmlib.pixi.js"></script>
 
     <style>
         #app {
diff --git a/lib/pixi/deepzoom/index.html b/lib/pixi/deepzoom/index.html
index 320c62a..c8a9b52 100644
--- a/lib/pixi/deepzoom/index.html
+++ b/lib/pixi/deepzoom/index.html
@@ -1,219 +1,37 @@
-<!doctype html>
-<html lang="en">
-
+<html>
 <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>PIXI Lib Doctests</title>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
+    <link rel="stylesheet" href="../../../css/index.css">
 
-    <title>DeepZoomImage Doctests</title>
+    <script src="../../../dist/iwmlib.js"></script>
 
-    <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="../../../node_modules/jquery/dist/jquery.min.js"></script>
-
-    <script src="../../all.js"></script>
-    <script src="../all.js"></script>
-
-    <style>
-        #app {
-            display: table;
-            margin: 0 auto;
-        }
-
-        #app > * {
-            margin-bottom: 5px;
-        }
-    </style>
+    <template id="itemTemplate">
+        <a class="wrapper" href="">
+            <div class="preview">
+                <div class="thumbnail-container">
+                    <div class="thumbnail">
+                        <img class="icon" >
+                        <!-- <iframe src="" frameborder="0"></iframe> -->
+                     </div>
+                </div>
+                <div class="title"></div>
+            </div>
+        </a>
+    </template>
 </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>
+<div id="container" class="container">
+</div>
+<script>
+const index = new Index(itemTemplate, [
+        ['Deepzoom', 'deepzoom.html'],
+        ['Image', 'image.html'],
+       
+    ],
+    null)
+index.load()
+</script>
 </body>
-
 </html>
diff --git a/lib/pixi/index.html b/lib/pixi/index.html
index 2f1a432..2cd406c 100644
--- a/lib/pixi/index.html
+++ b/lib/pixi/index.html
@@ -32,8 +32,8 @@ const index = new Index(itemTemplate, [
         ['Button', 'button.html'],
         ['ButtonGroup', 'buttongroup.html'],
         ['Coordinates', 'coordinates.html'],
-        ['DeepZoom', 'deepzoom.html'],
-        ['DeepZoomImage', 'deepzoomimage.html'],
+        ['DeepZoom', 'deepzoom/index.html'],
+        // ['DeepZoomImage', 'deepzoomimage.html'],
         ['Flippable', 'flippable.html'],
         ['LabeledGraphics', 'labeledgraphics.html'],
         ['List', 'list.html'],
diff --git a/lib/popup.html b/lib/popup.html
index b8307ec..18cca46 100644
--- a/lib/popup.html
+++ b/lib/popup.html
@@ -7,8 +7,8 @@
     <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="./3rdparty/all.js"></script>
-    <script src="../dist/iwmlib.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
+	<script src="../dist/iwmlib.js"></script>
 </head>
 
 <body id="page" onload="Doctest.run()">
diff --git a/lib/popupmenu.html b/lib/popupmenu.html
index 2acf41d..7a1d460 100644
--- a/lib/popupmenu.html
+++ b/lib/popupmenu.html
@@ -6,8 +6,8 @@
     <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="./3rdparty/all.js"></script>
-    <script src="../dist/iwmlib.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
+	<script src="../dist/iwmlib.js"></script>
 </head>
 
 <body onload="Doctest.run()">
diff --git a/lib/scatter.html b/lib/scatter.html
index b8cff3b..fe2c595 100644
--- a/lib/scatter.html
+++ b/lib/scatter.html
@@ -6,7 +6,7 @@
 	<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="./3rdparty/all.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
 	<script src="../dist/iwmlib.js"></script>
 	<script>
     function drawPolygons() {
diff --git a/lib/styleguide.html b/lib/styleguide.html
index b204643..e4fae3c 100644
--- a/lib/styleguide.html
+++ b/lib/styleguide.html
@@ -6,7 +6,7 @@
 	<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="./3rdparty/all.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
 	<script src="../dist/iwmlib.js"></script>
 </head>
 <body onload="Doctest.run()" >
diff --git a/lib/uitest.html b/lib/uitest.html
index 6021719..370dfd4 100644
--- a/lib/uitest.html
+++ b/lib/uitest.html
@@ -6,8 +6,8 @@
 	<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="./3rdparty/all.js"></script>
-	<script src="./all.js"></script>
+    <script src="../dist/iwmlib.3rdparty.js"></script>
+	<script src="../dist/iwmlib.js"></script>
 </head>
 <body onload="Doctest.run()" >
 <h1>
