(function () {
    'use strict';

    /**
     * Class that represents a PixiJS Theme.
     *
     * @example
     * // Create the theme
     * const yellow = new Theme({
     *     fill: 0xfecd2d,
     *     fillActive: 0xfe9727,
     *     strokeActive: 0xfecd2d,
     *     strokeActiveWidth: 4,
     *     textStyle: {
     *         fill: 0x5ec7f8
     *     },
     *     textStyleActive: {
     *         fill: 0x5954d3
     *     },
     *     textStyleLarge: {
     *         fontSize: 36
     *     }
     * })
     *
     * // Create the app and apply the new theme to it
     * const app = new PIXIApp({
     *     view: canvas,
     *     width: 450,
     *     height: 150,
     *     theme: yellow
     * }).setup().run()
     *
     * @class
     * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
     */
    class Theme {

        /**
         * Creates an instance of a Theme.
         *
         * @constructor
         * @param {object} [opts] - An options object to specify to style and behaviour of the theme.
         * @param {number} [opts.margin=10] - The outer spacing (distance to other objects) from the border.
         * @param {number} [opts.padding=10] - The inner spacing (distance from icon and/or label) to the border.
         * @param {number} [opts.radius=4] - The radius used when drawing a rounded rectangle.
         * @param {number} [opts.fast=0.25] - The duration of time when it has to be fast.
         * @param {number} [opts.normal=0.5] - The duration of time when it has to be normal.
         * @param {number} [opts.slow=1] - The duration of time when it has to be slow.
         * @param {number} [opts.primaryColor=0x5ec7f8] - The primary color of the theme.
         * @param {number} [opts.color1=0x282828] - The first color of the theme. For example used for the background.
         * @param {number} [opts.color2=0xf6f6f6] - The second color of the theme. For example used for the border.
         * @param {number} [opts.fill=color1] - The color of the background as a hex value.
         * @param {number} [opts.fillAlpha=1] - The alpha value of the background.
         * @param {number} [opts.fillActive=color1] - The color of the background when activated.
         * @param {number} [opts.fillActiveAlpha=1] - The alpha value of the background when activated.
         * @param {number} [opts.stroke=color2] - The color of the border as a hex value.
         * @param {number} [opts.strokeWidth=0.6] - The width of the border in pixel.
         * @param {number} [opts.strokeAlpha=1] - The alpha value of the border.
         * @param {number} [opts.strokeActive=color2] - The color of the border when activated.
         * @param {number} [opts.strokeActiveWidth=0.6] - The width of the border in pixel when activated.
         * @param {number} [opts.strokeActiveAlpha=1] - The alpha value of the border when activated.
         * @param {number} [opts.iconColor=color2] - The color of the icon (set by the tint property) as a hex value.
         * @param {number} [opts.iconColorActive=colorPrimary] - The color of the icon when activated.
         * @param {number} [opts.background=color1] - The color of a background for a component (e.g. at the Modal class).
         * @param {object} [opts.textStyle={}] - A textstyle object for the styling of text. See PIXI.TextStyle
         *     for possible options. Default object:
         * @param {string} [opts.textStyle.fontFamily="Avenir Next", "Open Sans", "Segoe UI", ...] - The font family.
         * @param {string} [opts.textStyle.fontWeight=400] - The font weight.
         * @param {number} [opts.textStyle.fontSize=16] - The font size.
         * @param {number} [opts.textStyle.fill=color2] - The fill color.
         * @param {number} [opts.textStyle.stroke=color1] - The stroke color.
         * @param {number} [opts.textStyle.strokeThickness=0] - The thickness of the stroke.
         * @param {number} [opts.textStyle.miterLimit=1] - The meter limit.
         * @param {string} [opts.textStyle.lineJoin=round] - The line join.
         * @param {object} [opts.textStyleActive=textStyle + {fill: primaryColor}] - A textstyle object which is used
         *     for actived text.
         * @param {object} [opts.textStyleSmall=textStyle + {fontSize: -= 3}] - A textstyle object which is used for
         *     small text.
         * @param {object} [opts.textStyleSmallActive=textStyleSmall + {fill: primaryColor}] - A textstyle object which
         *     is used for small actived text.
         * @param {object} [opts.textStyleLarge=textStyle + {fontSize: += 3}] - A textstyle object which is used for
         *     large text.
         * @param {object} [opts.textStyleLargeActive=textStyleLarge + {fill: primaryColor}] - A textstyle object which
         *     is used for large actived text.
         */
        constructor(opts = {}) {

            const colorPrimary = opts.primaryColor != null ? opts.primaryColor : 0x5ec7f8;               // blue
            const color1 = opts.color1 != null ? opts.color1 : 0x282828;                                 // black
            const color2 = opts.color2 != null ? opts.color2 : 0xf6f6f6;                                 // white

            this.opts = Object.assign({}, {
                margin: 12,
                padding: 12,
                radius: 4,
                fast: .25,
                normal: .5,
                slow: 1,
                primaryColor: colorPrimary,
                color1: color1,
                color2: color2,
                fill: color1,
                fillAlpha: 1,
                fillActive: color1,
                fillActiveAlpha: 1,
                stroke: color2,
                strokeWidth: .6,
                strokeAlpha: 1,
                strokeActive: color2,
                strokeActiveWidth: .6,
                strokeActiveAlpha: 1,
                iconColor: color2,
                iconColorActive: colorPrimary,
                background: color1
            }, opts);

            // Set textStyle and variants
            this.opts.textStyle = Object.assign({}, {
                fontFamily: '"Avenir Next", "Open Sans", "Segoe UI", "Roboto", "Helvetica Neue", -apple-system, system-ui, BlinkMacSystemFont, Arial, sans-serif !default',
                fontWeight: '500',
                fontSize: 18,
                fill: color2,
                stroke: color1,
                strokeThickness: 0,
                miterLimit: 1,
                lineJoin: 'round'
            }, this.opts.textStyle);
            this.opts.textStyleSmall = Object.assign({}, this.opts.textStyle, {fontSize: this.opts.textStyle.fontSize - 3}, this.opts.textStyleSmall);
            this.opts.textStyleLarge = Object.assign({}, this.opts.textStyle, {fontSize: this.opts.textStyle.fontSize + 3}, this.opts.textStyleLarge);
            this.opts.textStyleActive = Object.assign({}, this.opts.textStyle, {fill: this.opts.primaryColor}, this.opts.textStyleActive);
            this.opts.textStyleSmallActive = Object.assign({}, this.opts.textStyleSmall, {fill: this.opts.primaryColor}, this.opts.textStyleSmallActive);
            this.opts.textStyleLargeActive = Object.assign({}, this.opts.textStyleLarge, {fill: this.opts.primaryColor}, this.opts.textStyleLargeActive);

            Object.assign(this, this.opts);
        }

        /**
         * Factory function
         *
         * @static
         * @param {string} theme=dark - The name of the theme to load.
         * @return {Theme} Returns a newly created Theme object.
         */
        static fromString(theme) {

            if (theme && typeof theme === 'object') {
                return theme
            }

            switch (theme) {
                case 'light':
                    return new ThemeLight()
                case 'red':
                    return new ThemeRed()
                default:
                    return new ThemeDark()
            }
        }
    }

    /**
     * Class that represents a PixiJS ThemeDark.
     *
     * @example
     * // Create the app with a new dark theme
     * const app = new PIXIApp({
     *     view: canvas,
     *     width: 450,
     *     height: 150,
     *     theme: new ThemeDark()
     * }).setup().run()
     *
     * @class
     * @extends Theme
     * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
     */
    class ThemeDark extends Theme {

    }

    /**
     * Class that represents a PixiJS ThemeLight.
     * The color1 is set to 0xf6f6f6, color2 to 0x282828.
     *
     * @example
     * // Create the app with a new light theme
     * const app = new PIXIApp({
     *     view: canvas,
     *     width: 450,
     *     height: 150,
     *     theme: new ThemeLight()
     * }).setup().run()
     *
     * @class
     * @extends Theme
     * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
     */
    class ThemeLight extends Theme {

        /**
         * Creates an instance of a ThemeLight.
         *
         * @constructor
         */
        constructor() {

            super({color1: 0xf6f6f6, color2: 0x282828});
        }
    }

    /**
     * Class that represents a PixiJS ThemeRed.
     * The primaryColor is set to 0xd92f31.
     *
     * @example
     * // Create the app with a new red theme
     * const app = new PIXIApp({
     *     view: canvas,
     *     width: 450,
     *     height: 150,
     *     theme: new ThemeRed()
     * }).setup().run()
     *
     * @class
     * @extends Theme
     * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/theme.html|DocTest}
     */
    class ThemeRed extends Theme {

        /**
         * Creates an instance of a ThemeRed.
         *
         * @constructor
         */
        constructor() {

            super({primaryColor: 0xd92f31});
        }
    }

    /**
     * Class that represents a PixiJS Progress.
     * 
     * @example
     * // Create the progress
     * const progress = new Progress({
     *     app: app
     * })
     *
     * // Add the progress to a DisplayObject
     * app.scene.addChild(progress)
     *
     * @class
     * @extends PIXI.Container
     * @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PIXI.Container}
     * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/progress.html|DocTest}
     */
    class Progress extends PIXI.Container {
        
        /**
         * Creates an instance of a Progress.
         * 
         * @constructor
         * @param {object} [opts] - An options object to specify to style and behaviour of the progress.
         * @param {number} [opts.id=auto generated] - The id of the progress.
         * @param {PIXIApp} [opts.app=window.app] - The app where the progress belongs to.
         * @param {number} [opts.width] - The width of the progress bar. When not set, the width is the size of the app
         *     minus 2 * opts.margin.
         * @param {number} [opts.height=2] - The height of the progress bar.
         * @param {string|Theme} [opts.theme=dark] - The theme to use for this progress. Possible values are dark, light, red
         *     or a Theme object.
         * @param {number} [opts.margin=100] - The outer spacing to the edges of the app.
         * @param {number} [opts.padding=0] - The inner spacing (distance from icon and/or label) to the border.
         * @param {number} [opts.fill=Theme.fill] - The color of the progress background as a hex value.
         * @param {number} [opts.fillAlpha=Theme.fillAlpha] - The alpha value of the background.
         * @param {number} [opts.fillActive=Theme.primaryColor] - The color of the progress background when activated.
         * @param {number} [opts.fillActiveAlpha=Theme.fillActiveAlpha] - The alpha value of the background when activated.
         * @param {number} [opts.stroke=Theme.stroke] - The color of the border as a hex value.
         * @param {number} [opts.strokeWidth=0] - The width of the border in pixel.
         * @param {number} [opts.strokeAlpha=Theme.strokeAlpha] - The alpha value of the border.
         * @param {number} [opts.strokeActive=Theme.strokeActive] - The color of the border when activated.
         * @param {number} [opts.strokeActiveWidth=0] - The width of the border in pixel when activated.
         * @param {number} [opts.strokeActiveAlpha=Theme.strokeActiveAlpha] - The alpha value of the border when activated.
         * @param {boolean} [opts.background=false] - The alpha value of the border when activated.
         * @param {number} [opts.backgroundFill=Theme.background] - A textstyle object for the styling of the label. See PIXI.TextStyle
         *     for possible options.
         * @param {number} [opts.backgroundFillAlpha=1] - A textstyle object for the styling of the label when the
         *     progress is activated. See PIXI.TextStyle for possible options.
         * @param {number} [opts.radius=Theme.radius] - The radius of the four corners of the progress (which is a rounded rectangle).
         * @param {boolean} [opts.destroyOnComplete=true] - Should the progress bar destroy itself after reaching 100 %?
         * @param {boolean} [opts.visible=true] - Is the progress initially visible (property visible)?
         */
        constructor(opts = {}) {

            super();
            
            const theme = Theme.fromString(opts.theme);
            this.theme = theme;

            this.opts = Object.assign({}, {
                id: PIXI.utils.uid(),
                app: window.app,
                width: null,
                height: 2,
                margin: 100,
                padding: 0,
                fill: theme.fill,
                fillAlpha: theme.fillAlpha,
                fillActive: theme.primaryColor,
                fillActiveAlpha: theme.fillActiveAlpha,
                stroke: theme.stroke,
                strokeWidth: 0,
                strokeAlpha: theme.strokeAlpha,
                strokeActive: theme.strokeActive,
                strokeActiveWidth: 0,
                strokeActiveAlpha: theme.strokeActiveAlpha,
                background: false,
                backgroundFill: theme.background,
                backgroundFillAlpha: 1,
                radius: theme.radius,
                destroyOnComplete: true,
                visible: true
            }, opts);

            this.id = this.opts.id;

            this.background = null;
            this.bar = null;
            this.barActive = null;

            this.alpha = 0;
            
            this.visible = this.opts.visible;

            this._progress = 0;

            // setup
            //-----------------
            this.setup();

            // layout
            //-----------------
            this.layout();
        }
        
        /**
         * Creates children and instantiates everything.
         * 
         * @private
         * @return {Progress} A reference to the progress for chaining.
         */
        setup() {

            // interaction
            //-----------------
            this.on('added', e => {
                this.show();
            });

            // background
            //-----------------
            if (this.opts.background) {
                const background = new PIXI.Graphics();
                this.background = background;
                this.addChild(background);
            }

            // bar
            //-----------------
            const bar = new PIXI.Graphics();
            this.bar = bar;
            this.addChild(bar);

            const barActive = new PIXI.Graphics();
            this.barActive = barActive;
            this.bar.addChild(barActive);

            return this
        }
        
        /**
         * Should be called to refresh the layout of the progress. Can be used after resizing.
         * 
         * @return {Progress} A reference to the progress for chaining.
         */
        layout() {

            const width = this.opts.app.size.width;
            const height = this.opts.app.size.height;

            // background
            //-----------------
            if (this.opts.background) {
                this.background.clear();
                this.background.beginFill(this.opts.backgroundFill, this.opts.backgroundFillAlpha);
                this.background.drawRect(0, 0, width, height);
                this.background.endFill();
            }

            this.draw();

            return this
        }
        
        /**
         * Draws the canvas.
         * 
         * @private
         * @return {Progress} A reference to the progress for chaining.
         */
        draw() {

            this.bar.clear();
            this.barActive.clear();

            this.drawBar();
            this.drawBarActive();

            return this
        }
        
        /**
         * Draws the bar.
         * 
         * @private
         * @return {Progress} A reference to the progress for chaining.
         */
        drawBar() {

            const width = this.opts.app.size.width;
            const height = this.opts.app.size.height;

            this.radius = this.opts.radius;
            if ((this.radius * 2) > this.opts.height) {
                this.radius = this.opts.height / 2;
            }

            const wantedWidth = this.opts.width || (width - (2 * this.opts.margin));
            const wantedHeight = this.opts.height;

            this.bar.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha);
            this.bar.beginFill(this.opts.fill, this.opts.fillAlpha);
            if (this.radius > 1) {
                this.bar.drawRoundedRect(0, 0, wantedWidth, wantedHeight, this.radius);
            } else {
                this.bar.drawRect(0, 0, wantedWidth, wantedHeight);
            }
            this.bar.endFill();
            
            this.bar.x = width / 2 - this.bar.width / 2;
            this.bar.y = height / 2 - this.bar.height / 2;

            return this
        }
        
        /**
         * Draws the active bar.
         * 
         * @private
         * @return {Progress} A reference to the progress for chaining.
         */
        drawBarActive() {

            const wantedWidth = this.bar.width - (2 * this.opts.padding);
            const wantedHeight = this.bar.height - (2 * this.opts.padding);
            
            const barActiveWidth = wantedWidth * this._progress / 100;

            this.barActive.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha);
            this.barActive.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha);
            if (barActiveWidth > 0) {
                if (this.radius > 1) {
                    this.barActive.drawRoundedRect(0, 0, barActiveWidth, wantedHeight, this.radius);
                } else {
                    this.barActive.drawRect(0, 0, barActiveWidth, wantedHeight);
                }
            }
            this.barActive.endFill();

            this.barActive.x = this.opts.padding;
            this.barActive.y = this.opts.padding;

            return this
        }
        
        /**
         * Shows the progress (sets his alpha values to 1).
         * 
         * @return {Progress} A reference to the progress for chaining.
         */
        show() {
            TweenLite.to(this, this.theme.fast, {alpha: 1});

            return this
        }
        
        /**
         * Hides the progress (sets his alpha values to 1).
         * 
         * @return {Progress} A reference to the progress for chaining.
         */
        hide() {
            TweenLite.to(this, this.theme.fast, {alpha: 0, onComplete: () => this.visible = false});

            return this
        }
        
        /**
         * Gets or sets the progress. Has to be a number between 0 and 100.
         * 
         * @member {number}
         */
        get progress() {
            return this._progress
        }
        set progress(value) {

            value = Math.round(value);

            if (value < 0) {
                value = 0;
            }

            if (value > 100) {
                value = 100;
            }

            TweenLite.to(this, this.theme.normal, {
                _progress: value,
                onUpdate: () => this.draw(),
                onComplete: () => {
                    if (value === 100 && this.opts.destroyOnComplete) {
                        TweenLite.to(this, this.theme.fast, {
                            alpha: 0,
                            onComplete: () => this.destroy({children: true})
                        });
                    }
                }
            });
        }
    }

    /**
     * Class that represents a PixiJS AbstractPopup.
     * The class is used for various other Popup-like classes
     * like Popup, Message, Tooltip...
     *
     * @class
     * @abstract
     * @extends PIXI.Graphics
     * @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
     */
    class AbstractPopup extends PIXI.Graphics {
        
        /**
         * Creates an instance of an AbstractPopup (only for internal use).
         * 
         * @constructor
         * @param {object} [opts] - An options object to specify to style and behaviour of the popup.
         * @param {number} [opts.id=auto generated] - The id of the popup.
         * @param {number} [opts.x=0] - The x position of the popup. Can be also set after creation with popup.x = 0.
         * @param {number} [opts.y=0] - The y position of the popup. Can be also set after creation with popup.y = 0.
         * @param {string|Theme} [opts.theme=dark] - The theme to use for this popup. Possible values are dark, light, red
         *     or a Theme object.
         * @param {string|number|PIXI.Text} [opts.header] - The heading inside the popup as a string, a number (will be
         *     converted to a text) or as a PIXI.Text object.
         * @param {string|number|PIXI.DisplayObject} [opts.content] - A text, a number (will be converted to a text) or
         *     an PIXI.DisplayObject as the content of the popup.
         * @param {number} [opts.minWidth=320] - The minimum width of the popup.
         * @param {number} [opts.minHeight=130] - The minimum height of the popup.
         * @param {number} [opts.padding=Theme.padding] - The inner spacing (distance from header and content) the the border.
         * @param {number} [opts.fill=Theme.fill] - The color of the button background as a hex value.
         * @param {number} [opts.fillAlpha=Theme.fillAlpha] - The alpha value of the background.
         * @param {number} [opts.stroke=Theme.stroke] - The color of the border as a hex value.
         * @param {number} [opts.strokeWidth=Theme.strokeWidth] - The width of the border in pixel.
         * @param {number} [opts.strokeAlpha=Theme.strokeAlpha] - The alpha value of the border.
         * @param {object} [opts.headerStyle=Theme.textStyleLarge] - A textstyle object for the styling of the header. See PIXI.TextStyle
         *     for possible options.
         * @param {object} [opts.textStyle=Theme.textStyleSmall] - A textstyle object for the styling of the text. See PIXI.TextStyle
         *     for possible options.
         * @param {number} [opts.radius=Theme.radius] - The radius of the four corners of the popup (which is a rounded rectangle).
         * @param {hiddenCallback} [opts.onHidden] - Executed when the popup gets hidden.
         * @param {boolean} [opts.visible=true] - Is the popup initially visible (property visible)?
         * @param {string} [opts.orientation] - When set to portrait, the popup cannot be displayed in landscape mode. When set
         *     to landscape, the popup cannot be displayed in portrait mode.
         */
        constructor(opts = {}) {

            super();
            
            const theme = Theme.fromString(opts.theme);
            this.theme = theme;

            this.opts = Object.assign({}, {
                id: PIXI.utils.uid(),
                x: 0,
                y: 0,
                header: null,                       // null or null
                content: null,                      // null or String or PIXI.DisplayObject
                minWidth: 320,
                minHeight: 130,
                maxWidth: null,
                padding: theme.padding,
                fill: theme.fill,
                fillAlpha: theme.fillAlpha,
                stroke: theme.stroke,
                strokeWidth: theme.strokeWidth,
                strokeAlpha: theme.strokeAlpha,
                headerStyle: theme.textStyleLarge,
                textStyle: theme.textStyleSmall,
                radius: theme.radius,
                onHidden: null,
                visible: true,
                orientation: null
            }, opts);

            this.id = this.opts.id;

            this.headerStyle = new PIXI.TextStyle(this.opts.headerStyle);
            this.textStyle = new PIXI.TextStyle(this.opts.textStyle);

            if (this.opts.maxWidth) {
                this.headerStyle.wordWrap = true;
                this.headerStyle.wordWrapWidth = this.opts.maxWidth - (2 * this.opts.padding);

                this.textStyle.wordWrap = true;
                this.textStyle.wordWrapWidth = this.opts.maxWidth - (2 * this.opts.padding);
            }

            this.alpha = 0;
            this.visible = this.opts.visible;

            this._header = null;
            this._content = null;

            // position
            this.x = this.opts.x;
            this.y = this.opts.y;

            // padding
            this.innerPadding = this.opts.padding * 1.5;
            
            // interaction
            //-----------------
            this.interactive = true;
            this.on('added', e => {
                this.show();
            });
        }
        
        /**
         * Creates the framework and instantiates everything.
         * 
         * @private
         * @return {AbstractPopup} A reference to the popup for chaining.
         */
        setup() {

            // position
            //-----------------
            this.sy = this.opts.padding;

            // header
            //-----------------
            if (this.opts.header != null) {

                let header = null;

                if (this.opts.header instanceof PIXI.Text) {
                    header = this.opts.header;
                } else if (typeof this.opts.header === 'number') {
                    header =  new PIXI.Text(this.opts.header.toString(), this.headerStyle);
                } else {
                    header =  new PIXI.Text(this.opts.header, this.headerStyle);
                }

                header.x = this.opts.padding;
                header.y = this.sy;

                this.addChild(header);

                this.sy += header.height;

                this._header = header;
            }

            if (this.opts.header && this.opts.content) {
                this.sy += this.innerPadding;
            }

            // content
            //-----------------
            if (this.opts.content != null) {

                let content = null;

                if (typeof this.opts.content === 'string') {
                    content = new PIXI.Text(this.opts.content, this.textStyle);
                } else if (typeof this.opts.content === 'number') {
                    content = new PIXI.Text(this.opts.content.toString(), this.textStyle);
                } else {
                    content = this.opts.content;
                }

                content.x = this.opts.padding;
                content.y = this.sy;

                this.sy += content.height;

                this.addChild(content);

                this._content = content;
            }

            return this
        }
        
        /**
         * Should be called to refresh the layout of the popup. Can be used after resizing.
         * 
         * @return {AbstractPopup} A reference to the popup for chaining.
         */
        layout() {
            
            // wanted width & wanted height
            //-----------------
            const padding = this.opts.padding;
            const size = this.getInnerSize();
            const width = size.width + (2 * padding);
            const height = size.height + (2 * padding);

            this.wantedWidth = Math.max(width, this.opts.minWidth);
            this.wantedHeight = Math.max(height, this.opts.minHeight);
            
            if (this.opts.maxWidth) {
                this.wantedWidth = Math.min(this.wantedWidth, this.opts.maxWidth);
            }

            if (this.opts.radius * 2 > this.wantedWidth) {
                this.wantedWidth = this.opts.radius * 2;
            }

            if (this.opts.radius * 2 > this.wantedHeight) {
                this.wantedHeight = this.opts.radius * 2;
            }

            switch (this.opts.orientation) {
                case 'portrait':
                    if (this.wantedWidth > this.wantedHeight) {
                        this.wantedHeight = this.wantedWidth;
                    }
                    break
                case 'landscape':
                    if (this.wantedHeight > this.wantedWidth) {
                        this.wantedWidth = this.wantedHeight;
                    }
                    break
            }

            this.draw();

            return this
        }
        
        /**
         * Draws the canvas.
         * 
         * @private
         * @return {AbstractPopup} A reference to the popup for chaining.
         */
        draw() {

            const square = Math.round(this.wantedWidth) === Math.round(this.wantedHeight);
            const diameter = Math.round(this.opts.radius * 2);

            this.clear();
            this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha);
            this.beginFill(this.opts.fill, this.opts.fillAlpha);
            if (square && diameter === this.wantedWidth) {
                this.drawCircle(this.wantedWidth / 2, this.wantedHeight / 2, this.opts.radius);
            } else {
                this.drawRoundedRect(0, 0, this.wantedWidth, this.wantedHeight, this.opts.radius);
            }
            this.endFill();

            return this
        }
        
        /**
         * Calculates the size of the children of the AbstractPopup.
         * Cannot use getBounds() because it is not updated when children
         * are removed.
         * 
         * @private
         * @returns {object} An JavaScript object width the keys width and height.
         */
        getInnerSize() {

            let width = 0;
            let height = 0;

            if (this._header) {
                width = this._header.width;
                height = this._header.height;
            }

            if (this._header && this._content) {
                height += this.innerPadding;
            }

            if (this._content) {
                width = Math.max(width, this._content.width);
                height += this._content.height;
            }

            return {width, height}
        }
        
        /**
         * Shows the popup (sets his alpha values to 1).
         * 
         * @param {callback} [cb] - Executed when show animation was completed.
         * @return {AbstractPopup} A reference to the popup for chaining.
         */
        show(cb) {

            TweenLite.to(this, this.theme.fast, {
                alpha: 1,
                onComplete: () => {
                    if (cb) {
                        cb.call(this);
                    }
                }
            });

            return this
        }
        
        /**
         * Hides the popup (sets his alpha values to 0).
         * 
         * @param {callback} [cb] - Executed when hide animation was completed.
         * @return {AbstractPopup} A reference to the popup for chaining.
         */
        hide(cb) {

            TweenLite.to(this, this.theme.fast, {
                alpha: 0,
                onComplete: () => {
                    this.visible = false;
                    if (cb) {
                        cb.call(this);
                    }
                }
            });

            if (this.opts.onHidden) {
                this.opts.onHidden.call(this, this);
            }

            return this
        }

        /**
         * Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive
         * a string, a number or a PIXI.Text object.
         * 
         * @member {string|number|PIXI.Text}
         */
        get header() {
            return this._header
        }
        set header(value) {
            if (this._header) {
                this._header.destroy();
            }
            this.opts.header = value;
            this.setup().layout();
        }
        
        /**
         * Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive
         * a string, a number or a PIXI.DisplayObject.
         * 
         * @member {string|number|PIXI.DisplayObject}
         */
        get content() {
            return this._content
        }
        set content(value) {
            if (this._content) {
                this._content.destroy();
            }
            this.opts.content = value;
            this.setup().layout();
        }
    }

    /**
     * Class that represents a PixiJS Tooltip.
     * 
     * @example
     * // Create the app
     * const app = new PIXIApp({
     *     view: canvas,
     *     width: 900,
     *     height: 250
     * }).setup().run()
     * 
     * // Add an DisplayObject to the app
     * const circle = new PIXI.Graphics()
     * circle.beginFill(0x5251a3)
     * circle.drawCircle(50, 50, 40)
     * app.scene.addChild(circle)
     * 
     * const tooltip = new Tooltip({
     *     object: circle,
     *     container: app.scene,
     *     content: 'Das Gesetz ist der Freund des Schwachen.'
     * })
     *
     * @class
     * @extends AbstractPopup
     * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/tooltip.html|DocTest}
     */
    class Tooltip extends AbstractPopup {
        
        /**
         * Creates an instance of a Tooltip.
         * 
         * @constructor
         * @param {object} [opts] - An options object to specify to style and behaviour of the tooltip.
         * @param {number} [opts.minWidth=0] - The minimum width of the tooltip.
         * @param {number} [opts.minHeight=0] - The minimum height of the tooltip.
         * @param {number} [opts.padding=Theme.padding / 2] - The inner spacing of the tooltip.
         * @param {PIXI.DisplayObject} opts.object - The object, where the tooltip should be displayed.
         * @param {PIXI.DisplayObject} [opts.container=object] - The container where the tooltip should be attached to.
         * @param {number} [opts.offsetLeft=8] - The horizontal shift of the tooltip.
         * @param {number} [opts.offsetTop=-8] - The vertical shift of the tooltip.
         * @param {number} [opts.delay=0] - A delay, after which the tooltip should be opened.
         */
        constructor(opts = {}) {
            
            const theme = Theme.fromString(opts.theme);
            
            opts = Object.assign({}, {
                minWidth: 0,
                minHeight: 0,
                padding: theme.padding / 2,
                object: null,
                container: null,
                offsetLeft: 8,
                offsetTop: -8,
                delay: 0
            }, opts);

            opts.container = opts.container || opts.object;

            super(opts);

            // setup
            //-----------------
            this.setup();

            // layout
            //-----------------
            this.layout();
        }
        
        /**
         * Creates children and instantiates everything.
         * 
         * @private
         * @return {Tooltip} A reference to the tooltip for chaining.
         */
        setup() {

            super.setup();

            // bind events this
            //-----------------
            this.interactive = true;

            let mouseoverTooltip = false;
            
            this.on('mouseover', e => {
                mouseoverTooltip = true;
            });

            this.on('mouseout', e => {
                mouseoverTooltip = false;
                if (!mouseoverObject) {
                    this.hide(() => {
                        this.opts.container.removeChild(this);
                    });
                }
            });
            
            // bind events object
            //-----------------
            const object = this.opts.object;
            object.interactive = true;

            let mouseoverObject = false;

            object.on('mouseover', e => {

                this.timeout = window.setTimeout(() => {
                    mouseoverObject = true;
                    this.visible = true;
                    this.opts.container.addChild(this);
                    this.setPosition(e);
                }, this.opts.delay * 1000);
            });

            object.on('mousemove', e => {
                if (mouseoverObject) {
                    this.setPosition(e);
                }
            });

            object.on('mouseout', e => {
                mouseoverObject = false;
                window.clearTimeout(this.timeout);
                if (!mouseoverTooltip) {
                    this.hide(() => {
                        this.opts.container.removeChild(this);
                    });
                }
            });

            return this
        }
        
        /**
         * Calculates and sets the position of the tooltip.
         * 
         * @private
         * @return {Tooltip} A reference to the tooltip for chaining.
         */
        setPosition(e) {

            const position = e.data.getLocalPosition(this.opts.container);

            this.x = position.x + this.opts.offsetLeft;
            this.y = position.y + this.opts.offsetTop - this.height;

            return this
        }
    }

    /**
     * Class that represents a PixiJS Badge.
     * 
     * @example
     * // Create the app
     * const app = new PIXIApp({
     *     view: canvas,
     *     width: 900,
     *     height: 250
     * }).setup().run()
     * 
     * // Add an DisplayObject to the app
     * const circle = new PIXI.Graphics()
     * circle.beginFill(0x5251a3)
     * circle.drawCircle(50, 50, 40)
     * app.scene.addChild(circle)
     * 
     * const badge1 = new Badge({
     *     object: circle,
     *     container: app.scene,
     *     content: 'Das Gesetz ist der Freund des Schwachen.'
     * })
     *
     * @class
     * @extends AbstractPopup
     * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/badge.html|DocTest}
     */
    class Badge extends AbstractPopup {
        
        /**
         * Creates an instance of a Badge.
         * 
         * @constructor
         * @param {object} [opts] - An options object to specify to style and behaviour of the badge.
         * @param {number} [opts.minWidth=0] - The minimum width of the badge.
         * @param {number} [opts.minHeight=0] - The minimum height of the badge.
         * @param {number} [opts.padding=Theme.padding / 2] - The inner spacing of the badge.
         * @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip
         *     to display.
         */
        constructor(opts = {}) {
            
            const theme = Theme.fromString(opts.theme);
            
            opts = Object.assign({}, {
                minWidth: 0,
                minHeight: 0,
                padding: theme.padding / 2,
                tooltip: null
            }, opts);

            super(opts);

            this.tooltip = null;

            // setup
            //-----------------
            this.setup();

            // layout
            //-----------------
            this.layout();
        }
        
        /**
         * Creates children and instantiates everything.
         *
         * @private
         * @override
         * @return {Badge} A reference to the badge for chaining.
         */
        setup() {

            super.setup();

            // tooltip
            //-----------------
            if (this.opts.tooltip) {
                if (typeof this.opts.tooltip === 'string') {
                    this.tooltip = new Tooltip({object: this, content: this.opts.tooltip});
                } else {
                    this.opts.tooltip = Object.assign({}, {object: this}, this.opts.tooltip);
                    this.tooltip = new Tooltip(this.opts.tooltip);
                }
            }

            return this
        }
        
        /**
         * Should be called to refresh the layout of the badge. Can be used after resizing.
         * 
         * @override
         * @return {Badge} A reference to the badge for chaining.
         */
        layout() {

            super.layout();

            this.content.x = this.width / 2 - this.content.width / 2 - this.opts.strokeWidth / 2;
            this.content.y = this.height / 2 - this.content.height / 2 - this.opts.strokeWidth / 2;

            return this
        }
    }

    class Events$1 {

        static stop(event) {
            event.preventDefault();
            event.stopPropagation();
        }

        static extractPoint(event) {
            switch (event.constructor.name) {
                case 'TouchEvent':
                    for (let i = 0; i < event.targetTouches.length; i++) {
                        let t = event.targetTouches[i];
                        return { x: t.clientX, y: t.clientY }
                    }
                    break
                default:
                    return { x: event.clientX, y: event.clientY }
            }
        }

        static isCaptured(event) {
            if (event.__capturedBy)
                return true
            return false
        }

        static capturedBy(event, obj) {
            event.__capturedBy = obj;
        }

        static isPointerDown(event) {
            // According to 
            // https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events
            // pointer events use the buttons feature to represent pressed buttons
            return event.buttons
        }

        static isMouseDown(event) {
            // Attempts to clone the which attribute of events failed in WebKit. May
            // be this is a bug or a security feature. Workaround: we introduce
            // a mouseDownSubstitute attribute that can be assigned to cloned
            // events after instantiation.
            if (Reflect.has(event, 'mouseDownSubstitute'))
                return event.mouseDownSubstitute
            return event.buttons || event.which
        }

        static isSimulatedEvent(event) {
            return Reflect.has(event, 'mouseDownSubstitute')
        }

        static isMouseRightClick(event) {
            return event.buttons || event.which
        }

        static extractTouches(targets) {
            let touches = [];
            for (let i = 0; i < targets.length; i++) {
                let t = targets[i];
                touches.push({
                    targetSelector: this.selector(t.target),
                    identifier: t.identifier,
                    screenX: t.screenX,
                    screenY: t.screenY,
                    clientX: t.clientX,
                    clientY: t.clientY,
                    pageX: t.pageX,
                    pageY: t.pageY
                });
            }
            return touches
        }

        static createTouchList(targets) {
            let touches = [];
            for (let i = 0; i < targets.length; i++) {
                let t = targets[i];
                let touchTarget = document.elementFromPoint(t.pageX, t.pageY);
                let touch = new Touch(undefined, touchTarget, t.identifier,
                    t.pageX, t.pageY, t.screenX, t.screenY);
                touches.push(touch);
            }
            return new TouchList(...touches)
        }

        static extractEvent(timestamp, event) {
            let targetSelector = this.selector(event.target);
            let infos = {
                type: event.type,
                time: timestamp,
                constructor: event.constructor,
                data: {
                    targetSelector: targetSelector,
                    view: event.view,
                    mouseDownSubstitute: event.buttons || event.which, // which cannot be cloned directly
                    bubbles: event.bubbles,
                    cancelable: event.cancelable,
                    screenX: event.screenX,
                    screenY: event.screenY,
                    clientX: event.clientX,
                    clientY: event.clientY,
                    layerX: event.layerX,
                    layerY: event.layerY,
                    pageX: event.pageX,
                    pageY: event.pageY,
                    ctrlKey: event.ctrlKey,
                    altKey: event.altKey,
                    shiftKey: event.shiftKey,
                    metaKey: event.metaKey
                }
            };
            if (event.type.startsWith('touch')) {
                // On Safari-WebKit the TouchEvent has layerX, layerY coordinates
                let data = infos.data;
                data.targetTouches = this.extractTouches(event.targetTouches);
                data.changedTouches = this.extractTouches(event.changedTouches);
                data.touches = this.extractTouches(event.touches);
            }
            if (event.type.startsWith('pointer')) {
                let data = infos.data;
                data.pointerId = event.pointerId;
                data.pointerType = event.pointerType;
            }
            if (Events$1.debug) {
                Events$1.extracted.push(this.toLine(event));
            }
            return infos
        }

        static cloneEvent(type, constructor, data) {
            if (type.startsWith('touch')) {
                // We need to find target from layerX, layerY
                //var target = document.querySelector(data.targetSelector)
                // elementFromPoint(data.layerX, data.layerY)
                //data.target = target
                data.targetTouches = this.createTouchList(data.targetTouches);
                data.changedTouches = this.createTouchList(data.changedTouches);
                data.touches = this.createTouchList(data.touches);
            }
            // We need to find target from pageX, pageY which are only
            // available after construction. They seem to getter items.

            let clone = Reflect.construct(constructor, [type, data]);
            clone.mouseDownSubstitute = data.mouseDownSubstitute;
            return clone
        }

        static simulateEvent(type, constructor, data) {
            data.target = document.querySelector(data.targetSelector);
            let clone = this.cloneEvent(type, constructor, data);
            if (data.target != null) {
                data.target.dispatchEvent(clone);
            }
            if (Events$1.debug) {
                Events$1.simulated.push(this.toLine(clone));
            }
        }

        static toLine(event) {
            return `${event.type} #${event.target.id} ${event.clientX} ${event.clientY}`
            let result = event.type;
            let selector = this.selector(event.target);
            result += ' selector: ' + selector;
            if (event.target != document.querySelector(selector))
                console.log('Cannot resolve', selector);
            let keys = ['layerX', 'layerY', 'pageX', 'pageY', 'clientX', 'clientY'];
            for (let key of keys) {
                try {
                    result += ' ' + key + ':' + event[key];
                }
                catch (e) {
                    console.log('Invalid key: ' + key);
                }
            }
            return result
        }

        static compareExtractedWithSimulated() {
            if (this.extracted.length != this.simulated.length) {
                alert('Unequal length of extracted [' + this.extracted.length +
                    '] and simulated events [' + this.simulated.length + '].');
            }
            else {
                for (let i = 0; i < this.extracted.length; i++) {
                    var extracted = this.extracted[i];
                    var simulated = this.simulated[i];
                    if (extracted != simulated) {
                        console.log('Events differ:' + extracted + '|' + simulated);
                    }
                }
            }
        }

        static selector(context) {
            return OptimalSelect.select(context)
        }

        static reset() {
            this.extracted = [];
            this.simulated = [];
        }

        static resetSimulated() {
            this.simulated = [];
        }

        static showExtractedEvents(event) {
            if (!event.shiftKey) {
                return
            }
            if (this.popup == null) {
                let element = document.createElement('div');
                Elements.setStyle(element, {
                    position: 'absolute',
                    width: '480px',
                    height: '640px',
                    overflow: 'auto',
                    backgroundColor: 'lightgray'
                });
                document.body.appendChild(element);
                this.popup = element;
            }
            this.popup.innerHTML = '';
            for (let line of this.extracted) {
                let div = document.createElement('div');
                div.innerHTML = line;
                this.popup.appendChild(div);
            }
            let div = document.createElement('div');
            div.innerHTML = '------------ Simulated -----------';
            this.popup.appendChild(div);
            for (let line of this.simulated) {
                let div = document.createElement('div');
                div.innerHTML = line;
                this.popup.appendChild(div);
            }
            Elements.setStyle(this.popup,
                { left: event.clientX + 'px', top: event.clientY + 'px' });
        }
    }

    Events$1.popup = null;
    Events$1.debug = true;
    Events$1.extracted = [];
    Events$1.simulated = [];
    Events$1.simulationRunning = false;

    /**
     * Callback for the button action.
     *
     * @callback actionCallback
     * @param {object} event - The event object.
     * @param {Button} button - A reference to the button (also this refers to the button).
     */

    /**
     * Callback for the button beforeAction.
     *
     * @callback beforeActionCallback
     * @param {object} event - The event object.
     * @param {Button} button - A reference to the button (also this refers to the button).
     */

    /**
     * Callback for the button afterAction.
     *
     * @callback afterActionCallback
     * @param {object} event - The event object.
     * @param {Button} button - A reference to the button (also this refers to the button).
     */

    /**
     * Class that represents a PixiJS Button.
     *
     * @example
     * // Create the button
     * const button = new Button({
     *     label: 'My Button',
     *     action: () => console.log('Button was clicked')
     * })
     *
     * // Add the button to a DisplayObject
     * app.scene.addChild(button)
     *
     * @class
     * @extends PIXI.Container
     * @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PIXI.Container}
     * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html|DocTest}
     */
    class Button extends PIXI.Container {

        /**
         * Creates an instance of a Button.
         *
         * @constructor
         * @param {object} [opts] - An options object to specify to style and behaviour of the button.
         * @param {number} [opts.id=auto generated] - The id of the button.
         * @param {string} [opts.label] - The label of the button.
         * @param {number} [opts.x=0] - The x position of the button. Can be also set after creation with button.x = 0.
         * @param {number} [opts.y=0] - The y position of the button. Can be also set after creation with button.y = 0.
         * @param {string|Theme} [opts.theme=dark] - The theme to use for this button. Possible values are dark, light, red
         *     or a Theme object.
         * @param {number} [opts.minWidth=44] - The minimum width of the button.
         * @param {number} [opts.minHeight=44] - The minimum height of the button.
         * @param {number} [opts.padding=Theme.padding] - The inner spacing (distance from icon and/or label) to the border.
         * @param {string|PIXI.DisplayObject} [opts.icon] - The icon of the button. Can be a predefined one, an URL or an PIXI.DisplayObject.
         * @param {string|PIXI.DisplayObject} [opts.iconActive=icon] - The icon of the button when activated. Can be a predefined one, an URL or an PIXI.DisplayObject.
         * @param {string} [opts.iconPosition=left] - The position of the icon in relation to the label. Can be left or right.
         * @param {number} [opts.iconColor=Theme.iconColor] - The color of the icon (set by the tint property) as a hex value.
         * @param {number} [opts.iconColorActive=Theme.iconColorActive] - The color of the icon when activated.
         * @param {number} [opts.fill=Theme.fill] - The color of the button background as a hex value.
         * @param {number} [opts.fillAlpha=Theme.fillAlpha] - The alpha value of the background.
         * @param {number} [opts.fillActive=Theme.fillActive] - The color of the button background when activated.
         * @param {number} [opts.fillActiveAlpha=Theme.fillActiveAlpha] - The alpha value of the background when activated.
         * @param {number} [opts.stroke=Theme.stroke] - The color of the border as a hex value.
         * @param {number} [opts.strokeWidth=Theme.strokeWidth] - The width of the border in pixel.
         * @param {number} [opts.strokeAlpha=Theme.strokeAlpha] - The alpha value of the border.
         * @param {number} [opts.strokeActive=Theme.strokeActive] - The color of the border when activated.
         * @param {number} [opts.strokeActiveWidth=Theme.strokeActiveWidth] - The width of the border in pixel when activated.
         * @param {number} [opts.strokeActiveAlpha=Theme.strokeActiveAlpha] - The alpha value of the border when activated.
         * @param {object} [opts.textStyle=Theme.textStyle] - A textstyle object for the styling of the label. See PIXI.TextStyle
         *     for possible options.
         * @param {number} [opts.textStyleActive=Theme.textStyleActive] - A textstyle object for the styling of the label when the
         *     button is activated. See PIXI.TextStyle for possible options.
         * @param {string} [opts.style=default] - A shortcut for styling options. Possible values are default, link.
         * @param {number} [opts.radius=Theme.radius] - The radius of the four corners of the button (which is a rounded rectangle).
         * @param {boolean} [opts.disabled=false] - Is the button disabled? When disabled, the button has a lower alpha value
         *     and cannot be clicked (interactive is set to false).
         * @param {boolean} [opts.active=false] - Is the button initially active?
         * @param {actionCallback} [opts.action] - Executed when the button was triggered (by pointerup).
         * @param {beforeActionCallback} [opts.beforeAction] - Executed before the main action is triggered.
         * @param {afterActionCallback} [opts.afterAction] - Executed after the main action was triggered.
         * @param {string} [opts.type=default] - The type of the button. Can be default or checkbox. When the type is
         *     checkbox, the active state is toggled automatically.
         * @param {string} [opts.align=center] - The horizontal position of the label and the icon. Possible values are
         *     left, center and right. Only affects the style when the minWidth is bigger than the width of the icon and label.
         * @param {string} [opts.verticalAlign=middle] - The vertical position of the label and the icon. Possible values are
         *     top, middle and button. Only affects the style when the minHeight is bigger than the height of the icon and label.
         * @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip
         *     to display.
         * @param {string|object} [opts.badge] - A string for the label of the badge or an object to configure the badge to display.
         *     If the parameter is an object, all badge options can be set plus the following:
         * @param {string} [opts.badge.align=right] - The horizontal alignment of the badge. Possible values: left, center, right
         * @param {string} [opts.badge.verticalAlign=top] - The vertical alignment of the badge. Possible values: top, middle, bottom
         * @param {number} [opts.badge.offsetLeft=0] - The horizontal shift of the badge.
         * @param {number} [opts.badge.offsetTop=0] - The vertical shift of the badge.
         * @param {boolean} [opts.visible=true] - Is the button initially visible (property visible)?
         */
        constructor(opts = {}) {

            super();

            const theme = Theme.fromString(opts.theme);
            this.theme = theme;

            this.opts = Object.assign({}, {
                id: PIXI.utils.uid(),
                label: null,
                x: 0,
                y: 0,
                minWidth: 44,
                minHeight: 44,
                padding: theme.padding,
                icon: undefined,
                iconActive: undefined,
                iconPosition: 'left',
                iconColor: theme.iconColor,
                iconColorActive: theme.iconColorActive,
                fill: theme.fill,
                fillAlpha: theme.fillAlpha,
                fillActive: theme.fillActive,
                fillActiveAlpha: theme.fillActiveAlpha,
                stroke: theme.stroke,
                strokeWidth: theme.strokeWidth,
                strokeAlpha: theme.strokeAlpha,
                strokeActive: theme.strokeActive,
                strokeActiveWidth: theme.strokeActiveWidth,
                strokeActiveAlpha: theme.strokeActiveAlpha,
                textStyle: theme.textStyle,
                textStyleActive: theme.textStyleActive,
                style: 'default',
                radius: theme.radius,
                disabled: false,
                active: false,
                action: null,
                beforeAction: null,
                afterAction: null,
                type: 'default',
                align: 'center',
                verticalAlign: 'middle',
                tooltip: null,
                badge: null,
                visible: true
            }, opts);

            this.id = this.opts.id;

            if (typeof this.opts.icon === 'undefined' && typeof this.opts.iconActive !== 'undefined') {
                this.opts.icon = this.opts.iconActive;
            } else if (typeof this.opts.icon !== 'undefined' && typeof this.opts.iconActive === 'undefined') {
                this.opts.iconActive = this.opts.icon;
            }

            if (this.opts.style === 'link') {
                Object.assign(this.opts, {strokeAlpha: 0, strokeActiveAlpha: 0, fillAlpha: 0, fillActiveAlpha: 0});
            }

            this._active = null;
            this._disabled = null;

            this.iconInactive = null;
            this.iconActive = null;
            this.text = null;

            this.button = null;
            this.content = null;

            this.tooltip = null;
            this.badge = null;

            this.visible = this.opts.visible;

            // setup
            //-----------------
            this.setup();
        }

        /**
         * Captures an event to inform InteractionMapper about processed events.
         *
         * @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
         */
        capture(event) {
            Events$1.capturedBy(event.data.originalEvent, this);
        }

        /**
         * Creates children and instantiates everything.
         *
         * @private
         * @return {Button} A reference to the button for chaining.
         */
        setup() {

            // Button
            //-----------------
            let button = new PIXI.Graphics();
            this.button = button;
            this.addChild(button);

            // Content
            //-----------------
            let content = new PIXI.Container();
            this.content = content;
            this.addChild(content);

            // Text
            //-----------------
            if (this.opts.label) {
                this.text = new PIXI.Text(this.opts.label, this.opts.textStyle);
            }

            // Icon
            //-----------------
            if (this.opts.icon) {
                this.iconInactive = this.loadIcon(this.opts.icon, this.opts.iconColor);
            }

            if (this.opts.iconActive) {
                this.iconActive = this.loadIcon(this.opts.iconActive, this.opts.iconColorActive);
            }

            // interaction
            //-----------------
            this.button.on('pointerover', e => {
                this.capture(e);
                TweenLite.to([this.button, this.content], this.theme.fast, {alpha: .83, overwrite: 'none'});
            });

            this.button.on('pointermove', e => {
                this.capture(e);
            });

            this.button.on('pointerout', e => {
                this.capture(e);
                TweenLite.to([this.button, this.content], this.theme.fast, {alpha: 1, overwrite: 'none'});
            });

            this.button.on('pointerdown', e => {
                //this.capture(e)
                TweenLite.to([this.button, this.content], this.theme.fast, {alpha: .7, overwrite: 'none'});
            });

            this.button.on('pointerup', e => {
                this.capture(e);
                if (this.opts.beforeAction) {
                    this.opts.beforeAction.call(this, e, this);
                }

                if (this.opts.action) {
                    this.opts.action.call(this, e, this);
                }

                TweenLite.to([this.button, this.content], this.theme.fast, {alpha: .83, overwrite: 'none'});

                if (this.opts.type === 'checkbox') {
                    this.active = !this.active;
                }

                if (this.opts.afterAction) {
                    this.opts.afterAction.call(this, e, this);
                }
            });

            // disabled
            //-----------------
            this.disabled = this.opts.disabled;

            // active
            //-----------------
            this.active = this.opts.active;      // calls .layout()

            // tooltip
            //-----------------
            if (this.opts.tooltip) {
                if (typeof this.opts.tooltip === 'string') {
                    this.tooltip = new Tooltip({object: this, content: this.opts.tooltip});
                } else {
                    this.opts.tooltip = Object.assign({}, {object: this}, this.opts.tooltip);
                    this.tooltip = new Tooltip(this.opts.tooltip);
                }
            }

            // badge
            //-----------------
            if (this.opts.badge) {
                let opts = Object.assign({}, {
                    align: 'right',
                    verticalAlign: 'top',
                    offsetLeft: 0,
                    offsetTop: 0
                });
                if (typeof this.opts.badge === 'string') {
                    opts = Object.assign(opts, {content: this.opts.badge});
                } else {
                    opts = Object.assign(opts, this.opts.badge);
                }

                const badge = new Badge(opts);

                switch (opts.align) {
                    case 'left':
                        badge.x = this.x - badge.width / 2 + opts.offsetLeft;
                        break
                    case 'center':
                        badge.x = this.x + this.width / 2 - badge.width / 2 + opts.offsetLeft;
                        break
                    case 'right':
                        badge.x = this.x + this.width - badge.width / 2 + opts.offsetLeft;
                }

                switch (opts.verticalAlign) {
                    case 'top':
                        badge.y = this.y - badge.height / 2 + opts.offsetTop;
                        break
                    case 'middle':
                        badge.y = this.y + this.height / 2 - badge.height / 2 + opts.offsetTop;
                        break
                    case 'bottom':
                        badge.y = this.y + this.height - badge.height / 2 + opts.offsetTop;
                }

                this.addChild(badge);

                this.badge = badge;
            }

            // set position
            //-----------------
            this.position.set(this.opts.x, this.opts.y);

            return this
        }

        /**
         * Should be called to refresh the layout of the button. Can be used after resizing.
         *
         * @return {Button} A reference to the button for chaining.
         */
        layout() {

            // Clear content
            //-----------------
            this.removeChild(this.content);
            this.content = new PIXI.Container();
            this.addChild(this.content);

            // Set the icon
            //-----------------
            let icon = null;

            if (!this.active && this.iconInactive) {
                icon = this.iconInactive;
            } else if (this.active && this.iconActive) {
                icon = this.iconActive;
            }

            // Set the text
            //-----------------
            if (this.text) {
                this.text.position.set(0, 0);
            }

            // Width and Height
            //-----------------
            let width = 0;
            if (icon && this.text) {
                width = icon.width + this.text.width + 3 * this.opts.padding;
            } else if (icon) {
                width = icon.width + 2 * this.opts.padding;
            } else if (this.text) {
                width = this.text.width + 2 * this.opts.padding;
            }

            if (width < this.opts.minWidth) {
                width = this.opts.minWidth;
            }

            let height = 0;
            if (icon) {
                height = icon.height + 2 * this.opts.padding;
            } else if (this.text) {
                height = this.text.height + 2 * this.opts.padding;
            }

            if (height < this.opts.minHeight) {
                height = this.opts.minHeight;
            }

            this._width = width;
            this._height = height;

            // Position icon and text
            //-----------------
            if (icon && this.text) {
                if (this.opts.iconPosition === 'right') {
                    icon.x = this.text.width + this.opts.padding;
                } else {
                    this.text.x = icon.width + this.opts.padding;
                }
                this.content.addChild(icon, this.text);
            } else if (icon) {
                this.content.addChild(icon);
            } else if (this.text) {
                this.content.addChild(this.text);
            }

            this.layoutInnerContent();
            this.layoutContent();

            this.icon = icon;

            // draw
            //-----------------
            this.draw();

            return this
        }

        /**
         * Calculates the positions of the content children (icon and/or text).
         *
         * @private
         * @return {Button} A reference to the button for chaining.
         */
        layoutInnerContent() {

            for (let child of this.content.children) {
                switch (this.opts.verticalAlign) {
                    case 'top':
                        child.y = 0;
                        break
                    case 'middle':
                        child.y = this.content.height / 2 - child.height / 2;
                        break
                    case 'bottom':
                        child.y = this.content.height - child.height;
                        break
                }
            }

            return this
        }

        /**
         * Sets the horizontal and vertical position of the content.
         * Uses the option keys "align" and "verticalAlign".
         *
         * @private
         * @return {Button} A reference to the button for chaining.
         */
        layoutContent() {

            switch (this.opts.align) {
                case 'left':
                    this.content.x = this.opts.padding;
                    break
                case 'center':
                    this.content.x = ((this._width - this.content.width) / 2);
                    break
                case 'right':
                    this.content.x = this._width - this.opts.padding - this.content.width;
                    break
            }

            switch (this.opts.verticalAlign) {
                case 'top':
                    this.content.y = this.opts.padding;
                    break
                case 'middle':
                    this.content.y = (this._height - this.content.height) / 2;
                    break
                case 'bottom':
                    this.content.y = this._height - this.opts.padding - this.content.height;
                    break
            }

            return this
        }

        /**
         * Draws the canvas.
         *
         * @private
         * @return {Button} A reference to the button for chaining.
         */
        draw() {

            this.button.clear();
            if (this.active) {
                this.button.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha);
                this.button.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha);
            } else {
                this.button.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha);
                this.button.beginFill(this.opts.fill, this.opts.fillAlpha);
            }
            this.button.drawRoundedRect(0, 0, this._width, this._height, this.opts.radius);
            this.button.endFill();

            return this
        }

        /**
         * Gets or sets the active state.
         *
         * @member {boolean}
         */
        get active() {
            return this._active
        }
        set active(value) {

            this._active = value;

            if (this._active) {
                if (this.text) {
                    this.text.style = this.opts.textStyleActive;
                }
            } else {
                if (this.text) {
                    this.text.style = this.opts.textStyle;
                }
            }

            this.layout();
        }

        /**
         * Gets or sets the disabled state. When disabled, the button cannot be clicked.
         *
         * @member {boolean}
         */
        get disabled() {
            return this._disabled
        }
        set disabled(value) {

            this._disabled = value;

            if (this._disabled) {
                this.button.interactive = false;
                this.button.buttonMode = false;
                this.button.alpha = .5;
                if (this.icon) {
                    this.icon.alpha = .5;
                }
                if (this.text) {
                    this.text.alpha = .5;
                }
            } else {
                this.button.interactive = true;
                this.button.buttonMode = true;
                this.button.alpha = 1;
                if (this.icon) {
                    this.icon.alpha = 1;
                }
                if (this.text) {
                    this.text.alpha = 1;
                }
            }
        }

        /**
         * Shows the button (sets his alpha values to 1).
         *
         * @return {Button} A reference to the button for chaining.
         */
        show() {

            this.opts.strokeAlpha = 1;
            this.opts.strokeActiveAlpha = 1;
            this.opts.fillAlpha = 1;
            this.opts.fillActiveAlpha = 1;

            this.layout();

            return this
        }

        /**
         * Hides the button (sets his alpha values to 0).
         *
         * @return {Button} A reference to the button for chaining.
         */
        hide() {

            this.opts.strokeAlpha = 0;
            this.opts.strokeActiveAlpha = 0;
            this.opts.fillAlpha = 0;
            this.opts.fillActiveAlpha = 0;

            this.layout();

            return this
        }

        /**
         * Loads an icon
         *
         * @private
         * @param {string|PIXI.DisplayObject} icon - The icon to load.
         * @param {number} color - The color of the icon (if not an PIXI.DisplayObject).
         * @return {PIXI.DisplayObject} Return the icon as an PIXI.DisplayObject.
         */
        loadIcon(icon, color) {

            let displayObject = null;

            if (icon instanceof PIXI.DisplayObject) {
                displayObject = icon;
            } else {
                let size = 17;
                if (this.text) {
                    size = this.text.height;
                } else if (this.opts.minHeight) {
                    size = this.opts.minHeight - (2 * this.opts.padding);
                }

                const url = Button.iconIsUrl(icon) ? icon : `../../assets/icons/${icon}.png`;
                const iconTexture = PIXI.Texture.fromImage(url, true);

                const sprite = new PIXI.Sprite(iconTexture);
                sprite.tint = color;
                sprite.width = size;
                sprite.height = size;

                displayObject = sprite;
            }

            return displayObject
        }

        /**
         * Tests if an icon string is an url.
         *
         * @private
         * @static
         * @param {string} url - The url to test.
         * @return {boolean} true if the url is an url to an image.
         */
        static iconIsUrl(url) {
            return /\.(png|svg|gif|jpg|jpeg|tif|tiff)$/i.test(url)
        }

        /**
         * Gets or sets the color of the current icon (no matter how the status is). Changing the color, changes
         * the tint property of the icon sprite.
         *
         * @member {number}
         */
        get iconColor() {
            return this.icon ? this.icon.tint : null
        }
        set iconColor(value) {
            if (this.icon) {
                this.icon.tint = value;
            }
        }
    }

    /**
     * Class that represents a PixiJS ButtonGroup.
     * 
     * @example
     * // Create the button group
     * const buttonGroup = new ButtonGroup({
     *     buttons: [
     *         {label: 'Button 1', action: event => console.log(event)},
     *         {label: 'Button 2', action: event => console.log(event)},
     *         {label: 'Button 3', action: event => console.log(event)}
     *     ],
     *     minWidth: 100
     * })
     *
     * // Add the button group to a DisplayObject
     * app.scene.addChild(buttonGroup)
     *
     * @class
     * @extends PIXI.Graphics
     * @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
     * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/buttongroup.html|DocTest}
     */
    class ButtonGroup extends PIXI.Graphics {

        /**
         * Creates an instance of a ButtonGroup.
         * 
         * @constructor
         * @param {object} [opts] - An options object to specify to style and behaviour of the button group.
         * @param {number} [opts.id=auto generated] - The id of the button group.
         * @param {number} [opts.x=0] - The x position of the button group. Can be also set after creation with buttonGroup.x = 0.
         * @param {number} [opts.y=0] - The y position of the button group. Can be also set after creation with buttonGroup.y = 0.
         * @param {object[]} [opts.buttons=[]] - An array of the buttons of the button group. One item of the array (one object)
         *     can have exactly the same properties as an Button object when instantiating a Button. If a property of the button group
         *     conflicts with a property of a button object, the value from the button object will be used.
         * @param {string|Theme=} [opts.theme=dark] - The theme to use for this button group. Possible values are dark, light, red
         *     or a Theme object.
         * @param {number} [opts.minWidth=44] - Button: The minimum width of one button.
         * @param {number} [opts.minHeight=44] - Button: The minimum height of one button.
         * @param {number} [opts.padding=Theme.padding] - Button: The inner spacing (distance from icon and/or label) the the border.
         * @param {number} [opts.margin=Theme.margin] - The outer spacing (distance from one button to the previous/next button).
         * @param {string} [opts.iconPosition=left] - Button: The position of the icon in relation to the label. Can be left or right.
         * @param {number} [opts.iconColor=Theme.iconColor] - Button: The color of the icon (set by the tint property) as a hex value.
         * @param {number} [opts.iconColorActive=Theme.iconColorActive] - Button: The color of the icon when activated.
         * @param {number} [opts.fill=Theme.fill] - Button: The color of the button background as a hex value.
         * @param {number} [opts.fillAlpha=Theme.fillAlpha] - Button: The alpha value of the background.
         * @param {number} [opts.fillActive=Theme.fillActive] - Button: The color of the button background when activated.
         * @param {number} [opts.fillActiveAlpha=Theme.fillActiveAlpha] - Button: The alpha value of the background when activated.
         * @param {number} [opts.stroke=Theme.stroke] - Button: The color of the border as a hex value.
         * @param {number} [opts.strokeWidth=Theme.strokeWidth] - Button: The width of the border in pixel.
         * @param {number} [opts.strokeAlpha=Theme.strokeAlpha] - Button: The alpha value of the border.
         * @param {number} [opts.strokeActive=Theme.strokeActive] - Button: The color of the border when activated.
         * @param {number} [opts.strokeActiveWidth=Theme.strokeActiveWidth] - Button: The width of the border in pixel when activated.
         * @param {number} [opts.strokeActiveAlpha=Theme.strokeActiveAlpha] - Button: The alpha value of the border when activated.
         * @param {object} [opts.textStyle=Theme.textStyle] - Button: A textstyle object for the styling of the label. See PIXI.TextStyle
         *     for possible options.
         * @param {number} [opts.textStyleActive=Theme.textStyleActive] - Button: A textstyle object for the styling of the label when the
         *     button is activated. See PIXI.TextStyle for possible options.
         * @param {string} [opts.style=default] - A shortcut for styling options. Possible values are default, link.
         * @param {number} [opts.radius=Theme.radius] - Button: The radius of the four corners of the button (which is a rounded rectangle).
         * @param {boolean} [opts.disabled=false] - Is the button group disabled? When disabled, the button group has a lower alpha value
         *     and cannot be clicked (interactive of every button is set to false).
         * @param {string} [opts.type=default] - The type of the button group. Can be default, checkbox or radio. When the type is
         *     checkbox, the active state is toggled for each button automatically. When the type is radio, only one button can
         *     be activated at the same time.
         * @param {string} [opts.orientation=horizontal] - The orientation of the button group. Can be horizontal or vertical.
         * @param {string} [opts.align=center] - Button: The horizontal position of the label and the icon. Possible values are
         *     left, center and right. Only affects the style when the minWidth is bigger than the width of the icon and label.
         * @param {string} [opts.verticalAlign=middle] - Button: The vertical position of the label and the icon. Possible values are
         *     top, middle and bottom. Only affects the style when the minHeight is bigger than the height of the icon and label.
         * @param {boolean} [opts.visible=true] - Is the button group initially visible (property visible)?
         */
        constructor(opts = {}) {

            super();
            
            const theme = Theme.fromString(opts.theme);
            this.theme = theme;

            this.opts = Object.assign({}, {
                id: PIXI.utils.uid(),
                x: 0,
                y: 0,
                buttons: [],
                minWidth: 44,
                minHeight: 44,
                padding: theme.padding,
                margin: theme.margin,
                iconPosition: 'left',             // left, right
                iconColor: theme.iconColor,
                iconColorActive: theme.iconColorActive,
                fill: theme.fill,
                fillAlpha: theme.fillAlpha,
                fillActive: theme.fillActive,
                fillActiveAlpha: theme.fillActiveAlpha,
                stroke: theme.stroke,
                strokeWidth: theme.strokeWidth,
                strokeAlpha: theme.strokeAlpha,
                strokeActive: theme.strokeActive,
                strokeActiveWidth: theme.strokeActiveWidth,
                strokeActiveAlpha: theme.strokeActiveAlpha,
                textStyle: theme.textStyle,
                textStyleActive: theme.textStyleActive,
                style: 'default',
                radius: theme.radius,
                disabled: null,
                type: 'default',                   // default, checkbox, radio
                orientation: 'horizontal',
                align: 'center',                   // left, center, right
                verticalAlign: 'middle',           // top, middle, bottom
                visible: true
            }, opts);

            this.buttons = [];

            this._disabled = null;
            
            this.visible = this.opts.visible;

            // setup
            //-----------------
            this.setup();

            // layout
            //-----------------
            this.layout();
        }
        
        /**
         * Creates children and instantiates everything.
         * 
         * @private
         * @return {ButtonGroup} A reference to the button group for chaining.
         */
        setup() {

            // Buttons
            //-----------------
            let position = 0;

            for (let it of this.opts.buttons) {

                delete it.x;
                delete it.y;

                if (this.opts.orientation === 'horizontal') {
                    it.x = position;
                } else {
                    it.y = position;
                }

                it.theme = it.theme || this.opts.theme;
                it.minWidth = it.minWidth || this.opts.minWidth;
                it.minHeight = it.minHeight || this.opts.minHeight;
                it.padding = it.padding || this.opts.padding;
                it.iconPosition = it.iconPosition || this.opts.iconPosition;
                it.iconColor = it.iconColor || this.opts.iconColor;
                it.iconColorActive = it.iconColorActive || this.opts.iconColorActive;
                it.fill = it.fill || this.opts.fill;
                it.fillAlpha = it.fillAlpha || this.opts.fillAlpha;
                it.fillActive = it.fillActive || this.opts.fillActive;
                it.fillActiveAlpha = it.fillActiveAlpha || this.opts.fillActiveAlpha;
                it.stroke = it.stroke || this.opts.stroke;
                it.strokeWidth = it.strokeWidth != null ? it.strokeWidth : this.opts.strokeWidth;
                it.strokeAlpha = it.strokeAlpha != null ? it.strokeAlpha : this.opts.strokeAlpha;
                it.strokeActive = it.strokeActive || this.opts.strokeActive;
                it.strokeActiveWidth = it.strokeActiveWidth != null ? it.strokeActiveWidth : this.opts.strokeActiveWidth;
                it.strokeActiveAlpha = it.strokeActiveAlpha != null ? it.strokeActiveAlpha : this.opts.strokeActiveAlpha;
                it.textStyle = it.textStyle || this.opts.textStyle;
                it.textStyleActive = it.textStyleActive || this.opts.textStyleActive;
                it.style = it.style || this.opts.style;
                it.radius = it.radius != null ? it.radius : this.opts.radius;
                if (!it.type) {
                    switch (this.opts.type) {
                        case 'checkbox':
                            it.type = this.opts.type;
                            break
                        default:
                            it.type = 'default';
                            break
                    }
                }
                //it.type = it.type || this.opts.type || 'default'
                it.align = it.align || this.opts.align;
                it.verticalAlign = it.verticalAlign || this.opts.verticalAlign;
                it.afterAction = (event, button) => {
                    if (this.opts.type === 'radio' && button.opts.type === 'default') {
                        this.buttons.forEach(it => {
                            if (it.opts.type === 'default') {
                                it.active = false;
                            }
                        });

                        if (button.opts.type === 'default') {
                            button.active = true;
                        }
                    }
                };

                if (it.tooltip) {
                    if (typeof it.tooltip === 'string') {
                        it.tooltip = {content: it.tooltip, container: this};
                    } else {
                        it.tooltip = Object.assign({}, {container: this}, it.tooltip);
                    }
                }
                
                let button = new Button(it);

                this.addChild(button);
                this.buttons.push(button);

                position += (this.opts.orientation === 'horizontal' ? button.width : button.height) + this.opts.margin;
            }

            if (this.opts.orientation === 'vertical') {
                const maxWidth = this.getMaxButtonWidth();

                this.buttons.forEach(it => {
                    it.opts.minWidth = maxWidth;
                    it.layout();
                });
            }

            // disabled
            //-----------------
            if (this.opts.disabled != null) {
                this.disabled = this.opts.disabled;
            }

            return this
        }
        
        /**
         * Should be called to refresh the layout of the button group. Can be used after resizing.
         * 
         * @return {ButtonGroup} A reference to the button group for chaining.
         */
        layout() {
            
            // set position
            //-----------------
            this.position.set(this.opts.x, this.opts.y);

            // draw
            //-----------------
            this.draw();

            return this
        }
        
        /**
         * Draws the canvas.
         * 
         * @private
         * @return {ButtonGroup} A reference to the button group for chaining.
         */
        draw() {

            if (this.opts.margin === 0) {

                this.buttons.forEach(it => it.hide());

                this.clear();
                this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha);
                this.beginFill(this.opts.fill, this.opts.fillAlpha);
                this.drawRoundedRect(0, 0, this.width, this.height, this.opts.radius);

                // Draw borders
                this.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha / 2);

                this.buttons.forEach((it, i) => {
                    if (i > 0) {
                        this.moveTo(it.x, it.y);

                        if (this.opts.orientation === 'horizontal') {
                            this.lineTo(it.x, it.height);
                        } else {
                            this.lineTo(it.width, it.y);
                        }
                        
                    }
                });

                this.endFill();
            }

            return this
        }
        
        /**
         * Gets or sets the disabled state. When disabled, no button of the button group can be clicked.
         * 
         * @member {boolean}
         */
        get disabled() {
            return this._disabled
        }

        set disabled(value) {

            this._disabled = value;

            this.buttons.forEach(it => it.disabled = value);
        }
        
        /**
         * Searches all buttons of the button group and returns the maximum width of one button.
         * 
         * @private
         * @return {number} The maximum with of a button of the button group.
         */
        getMaxButtonWidth() {

            let widths = this.buttons.map(it => it.width);

            return Math.max(...widths)
        }
        
        /**
         * Shows the button group (sets his alpha value to 1).
         * 
         * @return {ButtonGroup} A reference to the button group for chaining.
         */
        show() {

            this.alpha = 1;

            return this
        }

        /**
         * Hides the button group (sets his alpha value to 0).
         * 
         * @return {ButtonGroup} A reference to the button group for chaining.
         */
        hide() {

            this.alpha = 0;

            return this
        }
    }

    /**
     * Class that represents a PixiJS InteractivePopup.
     * The class is used for various other Popup-like classes
     * like Popup, Message...
     *
     * @class
     * @abstract
     * @extends AbstractPopup
     */
    class InteractivePopup extends AbstractPopup {

        /**
         * Creates an instance of an InteractivePopup (only for internal use).
         *
         * @constructor
         * @param {object} [opts] - An options object to specify to style and behaviour of the popup.
         * @param {boolean} [opts.closeOnPopup=false] - Should the popup be closed when the user clicks on the popup?
         * @param {boolean} [opts.closeButton=true] - Should a close button be displayed on the upper right corner?
         * @param {object} [opts.button] - A Button object to be display on the lower right corner.
         * @param {object} [opts.buttonGroup] - A ButtonGroup object to be displayed on the lower right corner.
         */
        constructor(opts = {}) {

            opts = Object.assign({}, {
                closeOnPopup: false,
                closeButton: true,
                button: null,
                buttonGroup: null
            }, opts);

            super(opts);

            this._closeButton = null;
            this._buttons = null;

            // padding
            this.smallPadding = this.opts.padding / 2;

            // setup
            //-----------------
            this.setup();

            // layout
            //-----------------
            this.layout();
        }

        /**
         * Creates the framework and instantiates everything.
         *
         * @private
         * @return {AbstractPopup} A reference to the popup for chaining.
         */
        setup() {

            super.setup();

            // interaction
            //-----------------
            this.on('pointerup', e => {
                if (this.opts.closeOnPopup) {
                    this.hide();
                } else {
                    e.stopPropagation();
                }
            });

            // closeButton
            //-----------------
            if (this.opts.closeButton) {
                let closeButton = PIXI.Sprite.fromImage('../../assets/icons/close.png', true);
                closeButton.width = this.headerStyle.fontSize;
                closeButton.height = closeButton.width;
                closeButton.tint = this.theme.color2;
                // This is needed, because the closeButton belongs to the content. The popup must resize with the closeButton.
                if (this._header) {
                    closeButton.x = this._header.width + this.innerPadding;
                } else if (this._content) {
                    closeButton.x = this._content.width + this.innerPadding;
                }

                closeButton.interactive = true;
                closeButton.buttonMode = true;
                closeButton.on('pointerdown', e => {
                    this.hide();
                });

                this._closeButton = closeButton;
                this.addChild(closeButton);

                // maxWidth is set and a closeButton should be displayed
                //-----------------
                if (this.opts.maxWidth) {
                    const wordWrapWidth = this.opts.maxWidth - (2 * this.opts.padding) - this.smallPadding - this._closeButton.width;
                    if (this._header) {
                        this.headerStyle.wordWrapWidth = wordWrapWidth;
                    } else if (this._content) {
                        this.textStyle.wordWrapWidth = wordWrapWidth;
                    }
                }
            }

            // buttons
            //-----------------
            if (this.opts.button || this.opts.buttonGroup) {
                if (this.opts.button) {
                    this._buttons = new Button(Object.assign({textStyle: this.theme.textStyleSmall}, this.opts.button));
                } else {
                    this._buttons = new ButtonGroup(Object.assign({textStyle: this.theme.textStyleSmall}, this.opts.buttonGroup));
                }
                this.addChild(this._buttons);

                this._buttons.y = this.innerPadding + this.sy;
            }

            return this
        }

        /**
         * Should be called to refresh the layout of the popup. Can be used after resizing.
         *
         * @return {AbstractPopup} A reference to the popup for chaining.
         */
        layout() {

            super.layout();
            
            // closeButton
            //-----------------
            if (this.opts.closeButton) {
                this._closeButton.x = this.wantedWidth - this.smallPadding - this._closeButton.width;
                this._closeButton.y = this.smallPadding;
            }

            // buttons
            //-----------------
            if (this._buttons) {
                this._buttons.x = this.wantedWidth - this.opts.padding - this._buttons.width;
                this._buttons.y = this.wantedHeight - this.opts.padding - this._buttons.height;
            }

            return this
        }

        /**
         * Calculates the size of the children of the AbstractPopup.
         * Cannot use getBounds() because it is not updated when children
         * are removed.
         * 
         * @private
         * @override
         * @returns {object} An JavaScript object width the keys width and height.
         */
        getInnerSize() {

            let size = super.getInnerSize();

            if (this._closeButton) {
                size.width += this.smallPadding + this._closeButton.width;
            }

            if (this._buttons) {
                size.width = Math.max(size.width, this._buttons.x + this._buttons.width);
                size.height += this.innerPadding + this._buttons.height;
            }

            return size
        }
    }

    /**
     * Class that represents a PixiJS Popup.
     *
     * @example
     * // Create the popup
     * const popup = new Popup({
     *     header: 'Goethe',
     *     content: 'Man kann die Erfahrung nicht früh genug machen, wie entbehrlich man in der Welt ist.'
     * })
     *
     * // Add the popup to a DisplayObject
     * app.scene.addChild(popup)
     *
     * @class
     * @extends InteractivePopup
     * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popup.html|DocTest}
     */
    class Popup extends InteractivePopup {

        /**
         * Creates an instance of a Popup.
         *
         * @constructor
         * @param {object} [opts] - An options object to specify to style and behaviour of the popup.
         * @param {boolean} [opts.closeButton=false] - Should a close button be displayed on the upper right corner?
         * @param {number} [opts.minWidth=0] - The minimum width of the popup.
         * @param {number} [opts.minHeight=0] - The minimum height of the popup.
         */
        constructor(opts = {}) {

            opts = Object.assign({}, {
                closeButton: false,
                minWidth: 0,
                minHeight: 0
            }, opts);

            super(opts);
        }
    }

    /**
     * Class that represents a PixiJS Modal.
     * 
     * @example
     * // Create the button and the modal when clicked
     * const button = new Button({
     *     label: 'Show Modal',
     *     action: e => {
     *         const modal = new Modal({
     *             app: app,
     *             header: 'This is the header',
     *             content: 'This is the text.'
     *         })
     *         app.scene.addChild(modal)
     *     }
     * })
     *
     * // Add the button to a DisplayObject
     * app.scene.addChild(button)
     *
     * @class
     * @extends PIXI.Container
     * @extends InteractivePopup
     * @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PIXI.Container}
     * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/modal.html|DocTest}
     */
    class Modal extends PIXI.Container {

        /**
         * Creates an instance of a Modal.
         * 
         * @constructor
         * @param {object} [opts] - An options object to specify to style and behaviour of the modal.
         * @param {number} [opts.id=auto generated] - The id of the modal.
         * @param {PIXIApp} [opts.app=window.app] - The app where the modal belongs to.
         * @param {number} [opts.backgroundFill=Theme.background] - The color of the background.
         * @param {number} [opts.backgroundFillAlpha=0.6] - The opacity of the background.
         * @param {boolean} [opts.closeOnBackground=true] - Should the modal be closed when the user clicks the
         *     background?
         * @param {boolean} [opts.visible=true] - Is the modal initially visible (property visible)?
         */
        constructor(opts = {}) {

            super();
            
            const theme = Theme.fromString(opts.theme);
            this.theme = theme;

            this.opts = Object.assign({}, {
                id: PIXI.utils.uid(),
                app: window.app,
                backgroundFill: theme.background,
                backgroundFillAlpha: .6,
                closeOnBackground: true,
                visible: true
            }, opts);

            this.id = this.opts.id;

            this.background = null;
            this.popup = null;

            this.alpha = 0;
            this.visible = this.opts.visible;

            // setup
            //-----------------
            this.setup();

            // layout
            //-----------------
            this.layout();
        }
        
        /**
         * Creates children and instantiates everything.
         * 
         * @private
         * @return {Modal} A reference to the modal for chaining.
         */
        setup() {

            // interaction
            //-----------------
            this.interactive = true;
            this.on('added', e => {
                if (this.visible) {
                    this.show();
                }
            });

            // background
            //-----------------
            let background = new PIXI.Graphics();
            this.background = background;
            this.addChild(this.background);

            if (this.opts.closeOnBackground) {
                background.interactive = true;
                background.on('pointerup', e => {
                    this.hide();
                });
            }

            // popup
            //-----------------
            const popupOpts = Object.assign({}, this.opts, {
                visible: true,
                onHidden: () => {
                    this.hide();
                }
            });
            let popup = new InteractivePopup(popupOpts);
            this.popup = popup;
            this.addChild(popup);
            popup.show();

            return this
        }
        
        /**
         * Should be called to refresh the layout of the modal. Can be used after resizing.
         * 
         * @return {Modal} A reference to the modal for chaining.
         */
        layout() {

            const width = this.opts.app.size.width;
            const height = this.opts.app.size.height;

            // background
            //-----------------
            this.background.clear();
            this.background.beginFill(this.opts.backgroundFill, this.opts.backgroundFillAlpha);
            this.background.drawRect(0, 0, width, height);
            this.background.endFill();

            // position
            this.popup.x = width / 2 - this.popup.width / 2;
            this.popup.y = height / 2 - this.popup.height / 2;

            return this
        }
        
        /**
         * Shows the modal (sets his alpha values to 1).
         * 
         * @return {Modal} A reference to the modal for chaining.
         */
        show() {
            TweenLite.to(this, this.theme.fast, {alpha: 1, onStart: () => this.visible = true});

            return this
        }
        
        /**
         * Hides the modal (sets his alpha values to 0).
         * 
         * @return {Modal} A reference to the modal for chaining.
         */
        hide() {
            TweenLite.to(this, this.theme.fast, {alpha: 0, onComplete: () => this.visible = false});

            return this
        }
        
        /**
         * Sets or gets the header. The getter always returns a PIXI.Text object. The setter can receive
         * a string or a PIXI.Text object.
         * 
         * @member {string|PIXI.Text}
         */
        get header() {
            return this.popup.header
        }
        set header(value) {
            this.opts.header = value;
            this.background.destroy();
            this.popup.destroy();
            this.setup().layout();
        }
        
        /**
         * Sets or gets the content. The getter always returns an PIXI.DisplayObject. The setter can receive
         * a string or a PIXI.DisplayObject.
         * 
         * @member {string|PIXI.DisplayObject}
         */
        get content() {
            return this.popup.content
        }
        set content(value) {
            this.opts.content = value;
            this.background.destroy();
            this.popup.destroy();
            this.setup().layout();
        }
    }

    /**
     * Class that represents a Message. A message pops up and disappears after a specific amount of time.
     * 
     * @example
     * // Create the PixiJS App
     * const app = new PIXIApp({
     *     view: canvas,
     *     width: 900,
     *     height: 250
     * }).setup().run()
     * 
     * // Create a button
     * let button = new Button({
     *     label: 'Click me',
     *     action: e => {
     *         const message = new Message({
     *             app: app,
     *             header: 'Header',
     *             content: 'Text.'
     *         })
     *         app.scene.addChild(message)
     *     }
     * })
     * 
     * // Add the button to the scene
     * app.scene.addChild(button)
     *
     * @class
     * @extends InteractivePopup
     * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/message.html|DocTest}
     */
    class Message extends InteractivePopup {

        /**
         * Creates an instance of a Message.
         * 
         * @constructor
         * @param {object} [opts] - An options object to specify to style and behaviour of the message.
         * @param {PIXIApp} [opts.app=window.app] - The PIXIApp where this message belongs to.
         * @param {boolean} [opts.closeButton=false] - Should a close button be displayed in the upper right corner?
         * @param {number} [opts.minWidth=280] - The minimum width of the message box. Automatically expands with the content.
         * @param {number} [opts.minHeight=100] - The minimum height of the message box. Automatically expands with the content.
         * @param {number} [opts.margin=Theme.margin] - The outer spacing of the message box.
         * @param {string} [opts.align=right] - The horizontal position of the message box relative to the app. Possible
         *     values are left, center, right.
         * @param {string} [opts.verticalAlign=top] - The vertical position of the message box relative to the app. Possible
         *     values are top, middle, bottom.
         * @param {number} [opts.duration=5] - The duration in seconds when the message box should disappear.
         * @param {boolean} [opts.autoClose=true] - Should the message box be closed automatically?
         * @param {number} [opts.closeDuration=Theme.fast] - The duration in seconds of the closing of the message box.
         */
        constructor(opts = {}) {
            
            const theme = Theme.fromString(opts.theme);

            opts = Object.assign({}, {
                app: window.app,
                closeButton: false,
                minWidth: 280,
                minHeight: 100,
                margin: theme.margin,
                align: 'right',                     // left, center, right
                verticalAlign: 'top',               // top, middle, bottom
                duration: 5,
                autoClose: true,
                closeDuration: theme.fast
            }, opts);

            super(opts);
        }

        /**
         * Relayouts the position of the message box.
         * 
         * @return {Message} Returns the message box for chaining.
         */
        layout() {

            super.layout();

            // horizontal
            switch (this.opts.align) {
                case 'left':
                    this.x = this.opts.margin;
                    break
                case 'center':
                    this.x = (this.opts.app.size.width / 2) - (this.width / 2);
                    break
                case 'right':
                    this.x = this.opts.app.size.width - this.opts.margin - this.width;
                    break
            }

            // vertical
            switch (this.opts.verticalAlign) {
                case 'top':
                    this.y = this.opts.margin;
                    break
                case 'middle':
                    this.y = (this.opts.app.size.height / 2) - (this.height / 2);
                    break
                case 'bottom':
                    this.y = this.opts.app.size.height - this.opts.margin - this.height;
                    break
            }
        }

        /**
         * Shows the message box.
         * 
         * @private
         */
        show() {

            super.show();

            if (this.opts.autoClose) {
                window.setTimeout(() => {
                    this.hide();
                }, this.opts.duration * 1000);
            }
        }
    }

    /* globals WebKitPoint */

    /** Tests whether an object is empty
     * @param {Object} obj - the object to be tested
     * @return {boolean}
     */
    function isEmpty(obj) {
        // > isEmpty({})
        // true
        for (let i in obj) {
            return false
        }
        return true
    }

    function lerp(start, stop, amt) {
        return amt * (stop - start) + start
    }


    // Returns a function, that, as long as it continues to be invoked, will not
    // be triggered. The function will be called after it stops being called for
    // N milliseconds. If `immediate` is passed, trigger the function on the
    // leading edge, instead of the trailing.
    // Taken from: https://davidwalsh.name/essential-javascript-functions
    function debounce(func, wait, immediate) {
        let timeout;
        return function () {
            let context = this,
                args = arguments;
            let later = function () {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            let callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        }
    }

    /** Returns an id that is guaranteed to be unique within the livetime of the
     * application
     * @return {string}
     */
    let _idGenerator = 0;
    function getId() {
        return 'id' + _idGenerator++
    }

    class Dates {

        static create(fullYear, month, day) {
            return new Date(Date.UTC(fullYear, month, day))
        }

        static daysInMonth(date) {
            return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate()
        }

        static startYearRange(date) {
            return new Date(Date.UTC(date.getFullYear() - 1, 11, 31, 23, 59, 59, 999))
        }

        static endYearRange(date) {
            return new Date(Date.UTC(date.getFullYear() + 1, 0, 1))
        }

        static prevYear(date, offset = 1) {
            return this.create(date.getFullYear() - offset, 0, 1)
        }

        static nextYear(date, offset = 1) {
            return this.create(date.getFullYear() + offset, 0, 1)
        }

        static nextMonth(date) {
            return this.create(date.getFullYear(), date.getMonth() + 1, 1)
        }

        static nextDay(date) {
            return this.create(
                date.getFullYear(),
                date.getMonth(),
                date.getDate() + 1
            )
        }

        static nextHour(date) {
            // See http://stackoverflow.com/questions/1050720/adding-hours-to-javascript-date-object
            return new Date(date.getTime() + 60 * 60 * 1000)
        }

        static nextMinute(date) {
            // See above
            return new Date(date.getTime() + 60 * 1000)
        }

        static nextSecond(date) {
            // See above
            return new Date(date.getTime() + 1000)
        }

        static nextMillisecond(date) {
            // See above
            return new Date(date.getTime() + 1)
        }

        static *iterYears(start, end) {
            let date = this.create(start.getFullYear(), 0, 1);
            while (date <= end) {
                yield date;
                date = this.nextYear(date);
            }
            yield date;
        }

        static *iterMonths(year, limit = 12) {
            let month = 0;
            while (month < limit) {
                let date = this.create(year.getFullYear(), month, 1);
                yield date;
                month += 1;
            }
        }

        static *iterMonthsOfYears(years) {
            for (let year of years) {
                for (let month of this.iterMonths(year)) {
                    yield month;
                }
            }
        }

        static *iterDays(month) {
            let day = 1;
            let limit = Dates.daysInMonth(month);
            while (day <= limit) {
                let date = this.create(month.getFullYear(), month.getMonth(), day);
                yield date;
                day += 1;
            }
        }

        static *iterDaysOfMonths(months) {
            for (let month of months) {
                for (let day of this.iterDays(month)) {
                    yield day;
                }
            }
        }
    }
    /* Color conversion functions */

    class Colors {
        // http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb

        static rgb2num(red, green, blue) {
            let rgb = blue | (green << 8) | (red << 16);
            return 0x000000 + rgb
        }

        static rgb2hex(red, green, blue) {
            let rgb = blue | (green << 8) | (red << 16);
            return '#' + (0x1000000 + rgb).toString(16).slice(1)
        }

        static hex2rgb(hex) {
            // long version
            let r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
            if (r) {
                return r.slice(1, 4).map(x => {
                    return parseInt(x, 16)
                })
            }
            // short version
            r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
            if (r) {
                return r.slice(1, 4).map(x => {
                    return 0x11 * parseInt(x, 16)
                })
            }
            return null
        }

        static rgb(r, g, b) {
            return { r, g, b }
        }

        static string2hex(str) {
            return parseInt('0x' + str.slice(1))
        }

        static lerp(rgb1, rgb2, amount) {
            return {
                r: Math.round(lerp(rgb1.r, rgb2.r, amount)),
                g: Math.round(lerp(rgb1.g, rgb2.g, amount)),
                b: Math.round(lerp(rgb1.b, rgb2.b, amount))
            }
        }

        static get violet() {
            return Colors.rgb2num(89, 34, 131)
        }

        static get steelblue() {
            return Colors.rgb2num(0, 130, 164)
        }

        static get ochre() {
            return Colors.rgb2num(181, 157, 0)
        }

        static get turquoise() {
            return Colors.rgb2num(34, 164, 131)
        }

        static get eminence() {
            return Colors.rgb2num(150, 60, 134)
        }

        static random() {
            let r = Math.round(Math.random() * 255);
            let g = Math.round(Math.random() * 255);
            let b = Math.round(Math.random() * 255);
            return Colors.rgb2num(r, g, b)
        }
    }

    class Cycle extends Array {
        constructor(...items) {
            super();
            for (let item of items) {
                this.push(item);
            }
            this.index = 0;
        }

        next() {
            if (this.index == this.length) {
                this.index = 0;
            }
            return this[this.index++]
        }

        current() {
            if (this.index === this.length) {
                this.index = 0;
            }
            return this[this.index]
        }
    }

    /** Static methods to compute 2D points with x and y coordinates.
     */
    class Points {
        static length(a) {
            return Math.sqrt(a.x * a.x + a.y * a.y)
        }

        static normalize(p) {
            let len = this.length(p);
            return this.multiplyScalar(p, 1 / len)
        }

        static mean(a, b) {
            return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }
        }

        static subtract(a, b) {
            return { x: a.x - b.x, y: a.y - b.y }
        }

        static multiply(a, b) {
            return { x: a.x * b.x, y: a.y * b.y }
        }

        static divide(a, b) {
            return { x: a.x / b.x, y: a.y / b.y }
        }

        static multiplyScalar(a, b) {
            return { x: a.x * b, y: a.y * b }
        }

        static add(a, b) {
            return { x: a.x + b.x, y: a.y + b.y }
        }

        static negate(p) {
            return { x: -p.x, y: -p.y }
        }

        static angle(p1, p2) {
            return Math.atan2(p1.y - p2.y, p1.x - p2.x)
        }

        static normalizedAngle(p1, p2) {
            return Angle.normalize(this.angle(p1, p2))
        }

        static normalized2Angle(p1, p2) {
            return Angle.normalize2(this.angle(p1, p2))
        }

        static arc(p, alpha, radius) {
            return {
                x: p.x + radius * Math.cos(alpha),
                y: p.y + radius * Math.sin(alpha)
            }
        }

        static distance(a, b) {
            let dx = a.x - b.x;
            let dy = a.y - b.y;
            return Math.sqrt(dx * dx + dy * dy)
        }

        static fromPageToNode(element, p) {
            //    if (window.webkitConvertPointFromPageToNode) {
            //             return window.webkitConvertPointFromPageToNode(element,
            //                                                     new WebKitPoint(p.x, p.y))
            //         }
            return window.convertPointFromPageToNode(element, p.x, p.y)
        }

        static fromNodeToPage(element, p) {
            //  if (window.webkitConvertPointFromNodeToPage) {
            //             return window.webkitConvertPointFromNodeToPage(element,
            //                                                     new WebKitPoint(p.x, p.y))
            //         }
            return window.convertPointFromNodeToPage(element, p.x, p.y)
        }
    }

    /** Static methods to compute angles.
     */
    class Angle {

        static normalize(angle) {
            let TAU = Math.PI * 2.0;
            while (angle > Math.PI) {
                angle -= TAU;
            }
            while (angle < -Math.PI) {
                angle += TAU;
            }
            return angle
        }

        static normalize2(angle) {
            let TAU = Math.PI * 2.0;
            while (angle > TAU) {
                angle -= TAU;
            }
            while (angle < 0) {
                angle += TAU;
            }
            return angle
        }

        static normalizeDegree(angle) {
            let full = 360.0;
            while (angle > 180.0) {
                angle -= full;
            }
            while (angle < -180.0) {
                angle += full;
            }
            return angle
        }

        static normalizedDiff(a, b) {
            return this.normalize(this.diff(a, b))
        }

        static normalized2Diff(a, b) {
            return this.normalize2(this.diff(a, b))
        }

        static diff(a, b) {
            return Math.atan2(Math.sin(a - b), Math.cos(a - b))
        }

        static degree2radian(degree) {
            return Math.PI * degree / 180.0
        }

        static radian2degree(rad) {
            return 180.0 / Math.PI * rad
        }
    }

    class Elements$1 {
        static setStyle(element, styles) {
            for (let key in styles) {
                element.style[key] = styles[key];
            }
        }

        static addClass(element, cssClass) {
            element.classList.add(cssClass);
        }

        static removeClass(element, cssClass) {
            element.classList.remove(cssClass);
        }

        static toggleClass(element, cssClass) {
            element.classList.toggle(cssClass);
        }

        static hasClass(element, cssClass) {
            return element.classList.contains(cssClass)
        }
    }

    class MapProxy {
        /* This class is needed if we want to use the interaction classes
        in Firefox 45.8 and modern Browsers.

        A workaround for https://github.com/babel/babel/issues/2334
      */
        constructor() {
            this.map = new Map();
        }

        get size() {
            return this.map.size
        }

        get(key) {
            return this.map.get(key)
        }

        set(key, value) {
            return this.map.set(key, value)
        }

        delete(key) {
            return this.map.delete(key)
        }

        clear() {
            return this.map.clear()
        }

        has(key) {
            return this.map.has(key)
        }

        keys() {
            return this.map.keys()
        }

        values() {
            return this.map.values()
        }

        entries() {
            return this.map.entries()
        }

        forEach(func) {
            this.map.forEach(func);
        }
    }

    /* Based om https://gist.github.com/cwleonard/e124d63238bda7a3cbfa */
    class Polygon {
        /*
         *  This is the Polygon constructor. All points are center-relative.
         */
        constructor(center) {
            this.points = new Array();
            this.center = center;
        }

        /*
         *  Point x and y values should be relative to the center.
         */
        addPoint(p) {
            this.points.push(p);
        }

        /*
         *  Point x and y values should be absolute coordinates.
         */
        addAbsolutePoint(p) {
            this.points.push({ x: p.x - this.center.x, y: p.y - this.center.y });
        }

        /*
         * Returns the number of sides. Equal to the number of vertices.
         */
        getNumberOfSides() {
            return this.points.length
        }

        /*
         * rotate the polygon by a number of radians
         */
        rotate(rads) {
            for (let i = 0; i < this.points.length; i++) {
                let x = this.points[i].x;
                let y = this.points[i].y;
                this.points[i].x = Math.cos(rads) * x - Math.sin(rads) * y;
                this.points[i].y = Math.sin(rads) * x + Math.cos(rads) * y;
            }
        }

        /*
         *  The draw function takes as a parameter a Context object from
         *  a Canvas element and draws the polygon on it.
         */
        draw(context, { lineWidth = 2, stroke = '#000000', fill = null } = {}) {
            context.beginPath();
            context.moveTo(
                this.points[0].x + this.center.x,
                this.points[0].y + this.center.y
            );
            for (let i = 1; i < this.points.length; i++) {
                context.lineTo(
                    this.points[i].x + this.center.x,
                    this.points[i].y + this.center.y
                );
            }
            context.closePath();
            context.lineWidth = lineWidth;
            if (stroke) {
                context.strokeStyle = stroke;
                context.stroke();
            }
            if (fill) {
                context.fillStyle = fill;
                context.fill();
            }
        }

        absolutePoints() {
            let result = new Array();
            for (let p of this.points) {
                result.push(Points.add(p, this.center));
            }
            return result
        }

        flatAbsolutePoints() {
            let result = new Array();
            for (let p of this.points) {
                let a = Points.add(p, this.center);
                result.push(a.x);
                result.push(a.y);
            }
            return result
        }

        /*
         *  This function returns true if the given point is inside the polygon,
         *  and false otherwise.
         */
        containsPoint(pnt) {
            let nvert = this.points.length;
            let testx = pnt.x;
            let testy = pnt.y;

            let vertx = new Array();
            for (let q = 0; q < this.points.length; q++) {
                vertx.push(this.points[q].x + this.center.x);
            }

            let verty = new Array();
            for (let w = 0; w < this.points.length; w++) {
                verty.push(this.points[w].y + this.center.y);
            }

            let i,
                j = 0;
            let c = false;
            for (i = 0, j = nvert - 1; i < nvert; j = i++) {
                if (
                    verty[i] > testy != verty[j] > testy &&
                    testx <
                    (vertx[j] - vertx[i]) *
                    (testy - verty[i]) /
                    (verty[j] - verty[i]) +
                    vertx[i]
                )
                    c = !c;
            }
            return c
        }

        multiplyScalar(scale) {
            let center = Points.multiplyScalar(this.center, scale);
            let clone = new Polygon(center);
            for (let p of this.points) {
                clone.addPoint(Points.multiplyScalar(p, scale));
            }
            return clone
        }

        /*
         *  To detect intersection with another Polygon object, this
         *  function uses the Separating Axis Theorem. It returns false
         *  if there is no intersection, or an object if there is. The object
         *  contains 2 fields, overlap and axis. Moving the polygon by overlap
         *  on axis will get the polygons out of intersection.
         */
        intersectsWith(other) {
            let axis = { x: 0, y: 0 };
            let tmp, minA, maxA, minB, maxB;
            let side, i;
            let smallest = null;
            let overlap = 99999999;

            /* test polygon A's sides */
            for (side = 0; side < this.getNumberOfSides(); side++) {
                /* get the axis that we will project onto */
                if (side == 0) {
                    axis.x =
                        this.points[this.getNumberOfSides() - 1].y -
                        this.points[0].y;
                    axis.y =
                        this.points[0].x -
                        this.points[this.getNumberOfSides() - 1].x;
                } else {
                    axis.x = this.points[side - 1].y - this.points[side].y;
                    axis.y = this.points[side].x - this.points[side - 1].x;
                }

                /* normalize the axis */
                tmp = Math.sqrt(axis.x * axis.x + axis.y * axis.y);
                axis.x /= tmp;
                axis.y /= tmp;

                /* project polygon A onto axis to determine the min/max */
                minA = maxA = this.points[0].x * axis.x + this.points[0].y * axis.y;
                for (i = 1; i < this.getNumberOfSides(); i++) {
                    tmp = this.points[i].x * axis.x + this.points[i].y * axis.y;
                    if (tmp > maxA) maxA = tmp;
                    else if (tmp < minA) minA = tmp;
                }
                /* correct for offset */
                tmp = this.center.x * axis.x + this.center.y * axis.y;
                minA += tmp;
                maxA += tmp;

                /* project polygon B onto axis to determine the min/max */
                minB = maxB =
                    other.points[0].x * axis.x + other.points[0].y * axis.y;
                for (i = 1; i < other.getNumberOfSides(); i++) {
                    tmp = other.points[i].x * axis.x + other.points[i].y * axis.y;
                    if (tmp > maxB) maxB = tmp;
                    else if (tmp < minB) minB = tmp;
                }
                /* correct for offset */
                tmp = other.center.x * axis.x + other.center.y * axis.y;
                minB += tmp;
                maxB += tmp;

                /* test if lines intersect, if not, return false */
                if (maxA < minB || minA > maxB) {
                    return false
                } else {
                    let o = maxA > maxB ? maxB - minA : maxA - minB;
                    if (o < overlap) {
                        overlap = o;
                        smallest = { x: axis.x, y: axis.y };
                    }
                }
            }

            /* test polygon B's sides */
            for (side = 0; side < other.getNumberOfSides(); side++) {
                /* get the axis that we will project onto */
                if (side == 0) {
                    axis.x =
                        other.points[other.getNumberOfSides() - 1].y -
                        other.points[0].y;
                    axis.y =
                        other.points[0].x -
                        other.points[other.getNumberOfSides() - 1].x;
                } else {
                    axis.x = other.points[side - 1].y - other.points[side].y;
                    axis.y = other.points[side].x - other.points[side - 1].x;
                }

                /* normalize the axis */
                tmp = Math.sqrt(axis.x * axis.x + axis.y * axis.y);
                axis.x /= tmp;
                axis.y /= tmp;

                /* project polygon A onto axis to determine the min/max */
                minA = maxA = this.points[0].x * axis.x + this.points[0].y * axis.y;
                for (i = 1; i < this.getNumberOfSides(); i++) {
                    tmp = this.points[i].x * axis.x + this.points[i].y * axis.y;
                    if (tmp > maxA) maxA = tmp;
                    else if (tmp < minA) minA = tmp;
                }
                /* correct for offset */
                tmp = this.center.x * axis.x + this.center.y * axis.y;
                minA += tmp;
                maxA += tmp;

                /* project polygon B onto axis to determine the min/max */
                minB = maxB =
                    other.points[0].x * axis.x + other.points[0].y * axis.y;
                for (i = 1; i < other.getNumberOfSides(); i++) {
                    tmp = other.points[i].x * axis.x + other.points[i].y * axis.y;
                    if (tmp > maxB) maxB = tmp;
                    else if (tmp < minB) minB = tmp;
                }
                /* correct for offset */
                tmp = other.center.x * axis.x + other.center.y * axis.y;
                minB += tmp;
                maxB += tmp;

                /* test if lines intersect, if not, return false */
                if (maxA < minB || minA > maxB) {
                    return false
                } else {
                    let o = maxA > maxB ? maxB - minA : maxA - minB;
                    if (o < overlap) {
                        overlap = o;
                        smallest = { x: axis.x, y: axis.y };
                    }
                }
            }
            return { overlap: overlap + 0.001, axis: smallest }
        }

        static fromPoints(points) {
            let min = { x: Number.MAX_VALUE, y: Number.MAX_VALUE };
            let max = { x: Number.MIN_VALUE, y: Number.MIN_VALUE };
            for (let p of points) {
                min.x = Math.min(p.x, min.x);
                max.x = Math.max(p.x, max.x);
                min.y = Math.min(p.y, min.y);
                max.y = Math.max(p.y, max.y);
            }
            let center = Points.mean(min, max);
            let polygon = new Polygon(center);
            for (let p of points) {
                polygon.addAbsolutePoint(p);
            }
            return polygon
        }
    }

    /* global apollo, subscriptions, gql */

    /**
     * A special InteractionManager for fullscreen apps, which may
     * go beyond the limits of WebGL drawing buffers. On Safari and Chrome
     * the drawing buffers are limited to 4096 in width (Safari) or 4096x4096
     * in total buffer size (Chrome). The original InteractionManager.mapPositionToPoint
     * does not work with these extreme sizes which mainly occur if large
     * retina displays (>= 4K) are used with devicePixelRatio > 1.
     *
     * @private
     * @class
     * @extends PIXI.interaction.InteractionManager
     * @see {@link http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html|PIXI.interaction.InteractionManager}
     * @see {@link https://stackoverflow.com/questions/29710696/webgl-drawing-buffer-size-does-not-equal-canvas-size}
     */
    class FullscreenInteractionManager extends PIXI.interaction.InteractionManager {

        mapPositionToPoint(point, x, y) {
            let resolution = this.renderer.resolution;
            let extendWidth = 1.0;
            let extendHeight = 1.0;
            let dy = 0;
            let canvas = this.renderer.view;
            let context = canvas.getContext('webgl');
            if (context.drawingBufferWidth < canvas.width ||
                context.drawingBufferHeight < canvas.height) {
                extendWidth = context.drawingBufferWidth / canvas.width;
                extendHeight = context.drawingBufferHeight / canvas.height;
                //dx = wantedWidth - context.drawingBufferWidth
                dy = (canvas.height - context.drawingBufferHeight) / resolution;
            }
            x *= extendWidth;
            y *= extendHeight;

            super.mapPositionToPoint(point, x, y + dy);
        }
    }

    /**
     * The class PixiApp extends the class PIXI.Application
     * by several functions and makes meaningful pre-assumptions.
     *
     * @example
     * // Create the app
     * const app = new PIXIApp({
     *     view: canvas,
     *     width: 450,
     *     height: 150,
     *     fpsLogging: true,
     *     theme: 'light',
     *     transparent: false
     * }).setup().run()
     *
     * @class
     * @extends PIXI.Application
     * @see {@link http://pixijs.download/dev/docs/PIXI.Application.html|PIXI.Application}
     */
    class PIXIApp extends PIXI.Application {

        /**
         * Creates an instance of a PixiApp.
         *
         * @constructor
         * @param {object} [opts={}] - An options object. The following options can be set:
         * @param {number} [opts.width] - The width of the renderer. If no set, the application will run in fullscreen.
         * @param {number} [opts.height] - The height of the renderer. If no set, the application will run in fullscreen.
         * @param {HTMLElement} [opts.view] - The canvas HTML element. If not set, a render-element is added inside the body.
         * @param {boolean} [opts.transparent=true] - Should the render view be transparent?
         * @param {boolean} [opts.antialias=true] - Sets antialias (only applicable in chrome at the moment).
         * @param {number} [opts.resolution=window.devicePixelRatio | 1] - The resolution / device pixel ratio of the renderer, retina would be 2.
         * @param {boolean} [opts.autoResize=true] - Should the canvas-element be resized automatically if the resolution was set?
         * @param {number} [opts.backgroundColor=0x282828] - The color of the background.
         * @param {string|Theme} [opts.theme=dark] - The name of the theme (dark, light, red) or a Theme object to use for styling.
         * @param {boolean} [opts.fpsLogging=false] - If set to true, the current frames per second are displayed in the upper left corner.
         * @param {object} [opts.progress={}] - Can be used to add options to the progress bar. See class Progress for more informations.
         * @param {boolean} [opts.forceCanvas=false] - Prevents selection of WebGL renderer, even if such is present.
         * @param {boolean} [opts.roundPixels=true] - Align PIXI.DisplayObject coordinates to screen resolution.
         * @param {boolean} [opts.monkeyPatchMapping=true] - Monkey patch for canvas fullscreen support on large displays.
         * @param {boolean} [opts.adaptive=true] - Adds Graphics adaptive calculation of quadratic curve and arc subdivision.
         */
        constructor({
            width = null, height = null, view = null,
            transparent = true, backgroundColor = 0x282828, theme = 'dark',
            antialias = true, resolution = window.devicePixelRatio || 1, autoResize = true,
            fpsLogging = false, progress = {}, forceCanvas = false, roundPixels = true, monkeyPatchMapping = true, adaptive = true,
            graphql = false }) {

            const fullScreen = !width || !height;

            if (fullScreen) {
                width = window.innerWidth;
                height = window.innerHeight;
            }

            super({
                view,
                width,
                height,
                transparent,
                antialias,
                resolution,
                autoResize,
                backgroundColor,
                forceCanvas,
                roundPixels             // not needed for PixiJS >= 5
            });

            this.width = width;
            this.height = height;
            this.theme = Theme.fromString(theme);
            this.fpsLogging = fpsLogging;
            this.progressOpts = progress;
            this.fullScreen = fullScreen;
            this.orient = null;
            this.originalMapPositionToPoint = null;
            this.monkeyPatchMapping = monkeyPatchMapping;
            if (parseInt(PIXI.VERSION) >= 5) {
                PIXI.settings.ROUND_PIXELS = roundPixels;
                PIXI.GRAPHICS_CURVES.adaptive = adaptive;
            } else {
                PIXI.Graphics.CURVES.adaptive = adaptive;
            }
            this.graphql = graphql;
            if (fullScreen || autoResize) {
                console.log('App is in fullScreen mode or autoResize mode');
                const resizeDebounced = debounce(event => this.resize(event), 50);
                window.addEventListener('resize', resizeDebounced);
                document.body.addEventListener('orientationchange', this.checkOrientation.bind(this));
            }
            if (monkeyPatchMapping) {
                console.log('Using monkey patched coordinate mapping');
                // Pluggin the specializtion does not work. Monkey patching does
                // this.renderer.plugins.interaction = new FullscreenInteractionManager(this.renderer)
                this.monkeyPatchPixiMapping();
            }
        }

        /**
         * Extra setup method to construct complex scenes, etc...
         * Overwrite this method if you need additonal views and components.
         *
         * @return {PIXIApp} A reference to the PIXIApp for chaining.
         */
        setup() {
            this.scene = this.sceneFactory();
            this.stage.addChild(this.scene);

            // fpsLogging
            if (this.fpsLogging) {
                this.addFpsDisplay();
            }

            // GraphQL
            if (this.graphql && typeof apollo !== 'undefined') {

                const networkInterface = apollo.createNetworkInterface({
                    uri: '/graphql'
                });

                const wsClient = new subscriptions.SubscriptionClient(`wss://${location.hostname}/subscriptions`, {
                    reconnect: true,
                    connectionParams: {}
                });

                const networkInterfaceWithSubscriptions = subscriptions.addGraphQLSubscriptions(
                    networkInterface,
                    wsClient
                );

                this.apolloClient = new apollo.ApolloClient({
                    networkInterface: networkInterfaceWithSubscriptions
                });
            }

            // progress
            this._progress = new Progress(Object.assign({ theme: this.theme }, this.progressOpts, { app: this }));
            this._progress.visible = false;
            this.stage.addChild(this._progress);

            return this
        }

        /**
         * Tests whether the width is larger than the height of the application.
         *
         * @return {boolean} Returns true if app is in landscape mode.
         */
        orientation() {
            return this.width > this.height
        }

        /**
         * Checks orientation and adapts view size if necessary. Implements a
         * handler for the orientationchange event.
         *
         * @param {event=} - orientationchange event
         */
        checkOrientation(event) {
            var value = this.orientation();
            if (value != this.orient) {
                setTimeout(100, function () {
                    this.orientationChanged(true);
                }.bind(this));
                this.orient = value;
            }
        }

        /**
         * Called if checkOrientation detects an orientation change event.
         *
         * @param {boolean=} [force=false] - Called if checkOrientation detects an orientation change event.
         */
        orientationChanged(force = false) {
            if (this.expandRenderer() || force) {
                this.layout();
            }
        }

        /**
         * Called after a resize. Empty method but can be overwritten to
         * adapt their layout to the new app size.
         *
         * @param {number} [width] - The width of the app.
         * @param {number} [height] - The height of the app.
         */
        layout(width, height) {

        }

        /**
         * Draws the display tree of the app. Typically this can be delegated
         * to the layout method.
         *
         */
        draw() {
            this.layout(this.width, this.height);
        }

        /*
         * Run the application. Override this method with everything
         * that is needed to maintain your App, e.g. setup calls, main loops, etc.
         *
         */
        run() {
            return this
        }

        /*
         * Overwrite this factory method if your application needs a special
         * scene object.
         *
         * @returns {PIXI.Container} - A new PIXI Container for use as a scene.
         */
        sceneFactory() {
            return new PIXI.Container()
        }

        /**
         * Adds the display of the frames per second to the renderer in the upper left corner.
         *
         * @return {PIXIApp} - Returns the PIXIApp for chaining.
         */
        addFpsDisplay() {
            const fpsDisplay = new FpsDisplay(this);
            this.stage.addChild(fpsDisplay);

            return this
        }

        /**
         * Returns the size of the renderer as an object with the keys width and height.
         *
         * @readonly
         * @member {object}
         */
        get size() {
            return { width: this.width, height: this.height }
        }

        /**
         * Returns the center of the renderer as an object with the keys x and y.
         *
         * @readonly
         * @member {object}
         */
        get center() {
            return { x: this.width / 2, y: this.height / 2 }
        }

        /**
         * Resizes the renderer to fit into the window or given width and height.
         *
         * @param {object} [event] - The event.
         * @param {object=} [opts={}] - The event.
         * @param {number} [opts.width=window.innerWidth] - The width of the app to resize to.
         * @param {number} [opts.height=window.innerHeight] - The height of the app to resize to.
         * @return {PIXIApp} - Returns the PIXIApp for chaining.
         */
        resize(event, { width = window.innerWidth, height = window.innerHeight } = {}) {
            this.width = width;
            this.height = height;
            this.expandRenderer();
            this.layout(width, height);
            //console.log("App.resize", width, height, window.innerWidth, window.innerHeight )
            // if (this.scene) {
            // console.log("gl.drawingBufferWidth", this.renderer.view.getContext('webgl').drawingBufferWidth)
            // console.log("scene", this.scene.scale, this.renderer, this.renderer.autoResize, this.renderer.resolution)
            // }
            return this
        }

        /**
         * @todo Write the documentation.
         *
         * @private
         */
        monkeyPatchPixiMapping() {
            if (this.originalMapPositionToPoint === null) {
                let interactionManager = this.renderer.plugins.interaction;
                this.originalMapPositionToPoint = interactionManager.mapPositionToPoint;
                interactionManager.mapPositionToPoint = (point, x, y) => {
                    return this.fixedMapPositionToPoint(point, x, y)
                };
            }
        }

        /**
         * In some browsers the canvas is distorted if the screen resolution and 
         * overall size of the canvas exceeds the internal limits (e.g. 4096 x 4096 pixels).
         * To compensate these distortions we need to fix the mapping to the actual
         * drawing buffer coordinates.
         * @private
         * @param {any} local
         * @param {number} x
         * @param {number} y
         * @return {} interactionManager.mapPositionToPoint
         */
        fixedMapPositionToPoint(local, x, y) {
            let resolution = this.renderer.resolution;
            let interactionManager = this.renderer.plugins.interaction;
            let extendWidth = 1.0;
            let extendHeight = 1.0;
            let dy = 0;
            let canvas = this.renderer.view;
            let context = canvas.getContext('webgl');

            if (context !== null && (context.drawingBufferWidth < canvas.width ||
                context.drawingBufferHeight < canvas.height)) {
                extendWidth = context.drawingBufferWidth / canvas.width;
                extendHeight = context.drawingBufferHeight / canvas.height;
                //dx = wantedWidth - context.drawingBufferWidth
                dy = (canvas.height - context.drawingBufferHeight) / resolution;
            }
            x *= extendWidth;
            y *= extendHeight;
            return this.originalMapPositionToPoint.call(interactionManager, local, x, y + dy)
        }

        /**
         * Expand the renderer step-wise on resize.
         *
         * @param {number} [expand] - The amount of additional space for the renderer [px].
         * @return {boolean} true if the renderer was resized.
         */
        expandRenderer(expand = 256) {
            let renderer = this.renderer;
            let resolution = this.renderer.resolution;
            let ww = this.width;
            let hh = this.height;
            let sw = this.screen.width;
            let sh = this.screen.height;
            if (ww > sw || hh > sh) {
                //console.log('App.expandRenderer')
                renderer.resize(ww + expand, hh + expand);
                return true
            }

            renderer.resize(ww, hh);
            return false
        }

        /**
         * Set the loading progress of the application. If called for the first time, display the progress bar.
         *
         * @param {number} [value] - Should be a value between 0 and 100. If 100, the progress bar will disappear.
         * @return {PIXIApp|Progress} The PixiApp object for chaining or the Progress object when the method was
         *     called without a parameter.
         */
        progress(value) {

            if (typeof value === 'undefined') {
                return this._progress
            }

            this._progress.visible = true;
            this._progress.progress = value;

            return this
        }

        /**
         * Opens a new Modal object binded to this app.
         *
         * @param {object} [opts] - An options object for the Modal object.
         * @return {Modal} Returns the Modal object.
         */
        modal(opts = {}) {

            let modal = new Modal(Object.assign({ theme: this.theme }, opts, { app: this }));
            this.scene.addChild(modal);

            return modal
        }

        /**
         * Opens a new Message object binded to this app.
         *
         * @param {object} [opts] - An options object for the Message object.
         * @return {Message} Returns the Message object.
         */
        message(opts = {}) {

            let message = new Message(Object.assign({ theme: this.theme }, opts, { app: this }));
            this.scene.addChild(message);

            return message
        }

        /**
         * Loads sprites, e.g. images into the PIXI TextureCache.
         *
         * @param {string|string[]} resources - A String or an Array of urls to the images to load.
         * @param {function} [loaded] - A callback which is executed after all resources has been loaded.
         *     Receives one paramter, a Map of sprites where the key is the path of the image which was
         *     loaded and the value is the PIXI.Sprite object.
         * @param {object} [opts] - An options object for more specific parameters.
         * @param {boolean} [opts.resolutionDependent=true] - Should the sprites be loaded dependent of the
         *     renderer resolution?
         * @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
         * @return {PIXIApp} The PIXIApp object for chaining.
         */
        loadSprites(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {

            this.loadTextures(resources, textures => {

                let sprites = new Map();

                for (let [key, texture] of textures) {
                    sprites.set(key, new PIXI.Sprite(texture));
                }

                if (loaded) {
                    loaded.call(this, sprites);
                }

            }, { resolutionDependent, progress });

            return this
        }

        /**
         * Loads textures, e.g. images into the PIXI TextureCache.
         *
         * @param {string|string[]} resources - A String or an Array of urls to the images to load.
         * @param {function} [loaded] - A callback which is executed after all resources has been loaded.
         *     Receives one paramter, a Map of textures where the key is the path of the image which was
         *     loaded and the value is the PIXI.Texture object.
         * @param {object} [opts] - An options object for more specific parameters.
         * @param {boolean} [opts.resolutionDependent=true] - Should the textures be loaded dependent of the
         *     renderer resolution?
         * @param {boolean} [opts.progress=false] - Should a progress bar display the loading status?
         * @return {PIXIApp} The PIXIApp object for chaining.
         */
        loadTextures(resources, loaded = null, { resolutionDependent = true, progress = false } = {}) {

            if (!Array.isArray(resources)) {
                resources = [resources];
            }

            const loader = this.loader;

            for (let resource of resources) {

                if (!loader.resources[resource]) {

                    if (resolutionDependent) {
                        let resolution = Math.round(this.renderer.resolution);
                        switch (resolution) {
                            case 2:
                                loader.add(resource, resource.replace(/\.([^.]*)$/, '@2x.$1'));
                                break
                            case 3:
                                loader.add(resource, resource.replace(/\.([^.]*)$/, '@3x.$1'));
                                break
                            default:
                                loader.add(resource);
                                break
                        }
                    } else {
                        loader.add(resource);
                    }
                }
            }

            if (progress) {
                loader.on('progress', e => {
                    this.progress(e.progress);
                });
            }

            loader.load((loader, resources) => {
                const textures = new Map();

                for (let key in resources) {
                    textures.set(key, resources[key].texture);
                }

                if (loaded) {
                    loaded.call(this, textures);
                }
            });

            return this
        }

        /**
         * Queries the GraphQL endpoint.
         *
         * @param {string} [query] - The GraphQL query string.
         * @param {object} [opts={}] - An options object. The following options can be set:
         *     http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient.query
         * @return {Promise} Returns a Promise which is either resolved with the resulting data or
         *     rejected with an error.
         */
        query(query, opts = {}) {

            if (typeof query === 'string') {
                opts = Object.assign({}, opts, { query });
            } else {
                opts = Object.assign({}, query);
            }

            opts.query = opts.query.trim();

            if (!opts.query.startsWith('query')) {
                if (opts.query.startsWith('{')) {
                    opts.query = `query ${opts.query}`;
                } else {
                    opts.query = `query {${opts.query}}`;
                }
            }

            opts.query = gql(opts.query);

            return this.apolloClient.query(opts)
        }

        /**
         * Mutate the GraphQL endpoint.
         *
         * @param {string} [mutation] - The GraphQL mutation string.
         * @param {object} [opts={}] - An options object. The following options can be set:
         *     http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient.mutate
         * @return {Promise} Returns a Promise which is either resolved with the resulting data or
         *     rejected with an error.
         */
        mutate(mutation, opts = {}) {

            if (typeof mutation === 'string') {
                opts = Object.assign({}, opts, { mutation });
            } else {
                opts = Object.assign({}, mutation);
            }

            opts.mutation = opts.mutation.trim();

            if (!opts.mutation.startsWith('mutation')) {
                if (opts.mutation.startsWith('{')) {
                    opts.mutation = `mutation ${opts.mutation}`;
                } else {
                    opts.mutation = `mutation {${opts.mutation}}`;
                }
            }

            opts.mutation = gql(opts.mutation);

            return this.apolloClient.mutate(opts)
        }

        /**
         * Subscribe the GraphQL endpoint.
         *
         * @param {string} [subscription] - The GraphQL subscription.
         * @param {object} [opts={}] - An options object. The following options can be set:
         *     http://dev.apollodata.com/core/apollo-client-api.html#ApolloClient.query
         * @return {Promise} Returns a Promise which is either resolved with the resulting data or
         *     rejected with an error.
         */
        subscribe(subscription, opts = {}) {

            if (typeof subscription === 'string') {
                opts = Object.assign({}, opts, { subscription });
            } else {
                opts = Object.assign({}, subscription);
            }

            opts.subscription = opts.subscription.trim();

            if (!opts.subscription.startsWith('subscription')) {
                if (opts.subscription.startsWith('{')) {
                    opts.subscription = `subscription ${opts.subscription}`;
                } else {
                    opts.subscription = `subscription {${opts.subscription}}`;
                }
            }

            opts.query = gql(opts.subscription);

            delete opts.subscription;

            return this.apolloClient.subscribe(opts)
        }

        /**
         * Supports the page as a global coordinate system and converts browser page coordinates
         * to local DisplayObject coordinates.
         *
         * @param {DisplayObject} displayObject - The PIXI displayObject.
         * @param {number} x - The x coordinate.
         * @param {number} y - The y coordinate.
         *  
         * @return {PIXI.Point} Returns a PIXI.Point.
         */

        convertPointFromPageToNode(displayObject, x, y) {
            let resolution = this.renderer.resolution;
            console.log("resolution", resolution);
            let pixiGlobal = window.convertPointFromPageToNode(app.view, x, y);
            pixiGlobal.x /= resolution;
            pixiGlobal.y /= resolution;
            return displayObject.toLocal(new PIXI.Point(pixiGlobal.x, pixiGlobal.y))
        }

        /**
         * Supports the page as a global coordinate system and converts local DisplayObject coordinates
         * to browser page coordinates.
         *
         * @param {DisplayObject} displayObject - The PIXI displayObject.
         * @param {number} x - The x coordinate.
         * @param {number} y - The y coordinate.
         *  
         * @return {Point} Returns a DOM Point.
         */

        convertPointFromNodeToPage(displayObject, x, y) {
            let resolution = this.renderer.resolution;
            let pixiGlobal = displayObject.toGlobal(new PIXI.Point(x, y));
            pixiGlobal.x *= resolution;
            pixiGlobal.y *= resolution;
            // console.log("app.convertPointFromNodeToPage", pixiGlobal)
            return window.convertPointFromNodeToPage(app.view, pixiGlobal.x, pixiGlobal.y)
        }
    }

    /**
     * The class fpsdisplay shows in the upper left corner
     * of the renderer the current image refresh rate.
     *
     * @private
     * @class
     * @extends PIXI.Graphics
     * @see {@link http://pixijs.download/dev/docs/PIXI.Graphics.html|PIXI.Graphics}
     */
    class FpsDisplay extends PIXI.Graphics {

        /**
         * Creates an instance of a FpsDisplay.
         *
         * @constructor
         * @param {PIXIApp} app - The PIXIApp where the frames per second should be displayed.
         */
        constructor(app) {

            super();

            this.app = app;

            this.lineStyle(3, 0x434f4f, 1)
                .beginFill(0x434f4f, .6)
                .drawRoundedRect(0, 0, 68, 32, 5)
                .endFill()
                .position.set(20, 20);

            this.text = new PIXI.Text(this.fps, new PIXI.TextStyle({
                fontFamily: 'Arial',
                fontSize: 14,
                fontWeight: 'bold',
                fill: '#f6f6f6',
                stroke: '#434f4f',
                strokeThickness: 3
            }));
            this.text.position.set(6, 6);

            this.addChild(this.text);

            this.refreshFps();

            window.setInterval(this.refreshFps.bind(this), 1000);
        }

        /**
         * Refreshes fps numer.
         *
         * @return {PIXIApp} Returns the PIXIApp object for chaining.
         */
        refreshFps() {
            this.text.text = `${(this.app.ticker.FPS).toFixed(1)} fps`;

            return this
        }
    }

    /**
     * A Gaussian blur filter. With this filter, you can blur an area of a PIXI.DisplayObject. This cannot
     * be done with the PIXI.filters.BlurFilter (when you use the PIXI.filters.BlurFilter with
     * an filter area, all pixels outside of the area are not displayed). Attention: The area of
     * the filter is always in global scope, NOT relative to the PIXI.DisplayObject the filter
     * is assigned to!
     *
     * @example
     * // Create the app
     * const app = new PIXIApp({
     *     view: canvas,
     *     width: 480,
     *     height: 270,
     *     transparent: false
     * }).setup().run()
     * 
     * // Add a video sprite
     * const sprite = new PIXI.Sprite(PIXI.Texture.fromVideo("assets/blurfilter.mp4"))
     * sprite.width = app.size.width
     * sprite.height = app.size.height
     * app.scene.addChild(sprite)
     * 
     * // Create the filter and assign it to the scene
     * const blurFilter = new BlurFilter(new PIXI.Rectangle(20, 20, 80, 60))
     * app.scene.filters = [blurFilter]
     * 
     * @class
     * @extends PIXI.Filter
     * @param {PIXI.Rectangle|PIXI.Circle|PIXI.DisplayObject} shape The area where the blur effect should be applied to. Relative to the
     *     canvas, NOT relative to the PIXI.DisplayObject where the blur effect is assigned to!
     * @param {number} [blur=50] The strength of the blur.
     */
    class BlurFilter extends PIXI.Filter {
        
        constructor(shape, blur = 50) {
            super();

            const normalized = this.normalize(shape);

            this.tiltShiftXFilter = new TiltShiftXFilter(normalized, blur);
            this.tiltShiftYFilter = new TiltShiftYFilter(normalized, blur);
        }

        apply(filterManager, input, output) {
            let renderTarget = filterManager.getRenderTarget(true);
            this.tiltShiftXFilter.apply(filterManager, input, renderTarget);
            this.tiltShiftYFilter.apply(filterManager, renderTarget, output);
            filterManager.returnRenderTarget(renderTarget);
        }

        /**
         * The strength of the blur.
         *
         * @member {number}
         */
        get blur() {
            return this.tiltShiftXFilter.blur
        }
        set blur(value) {
            this.tiltShiftXFilter.blur = this.tiltShiftYFilter.blur = value;
        }
        
        /**
         * The blur shape.
         *
         * @member {PIXI.Rectangle|PIXI.Circle|PIXI.DisplayObject}
         */
        get shape() {
            return this.tiltShiftXFilter.shape
        }
        set shape(value) {
            this.tiltShiftXFilter.shape = this.tiltShiftYFilter.shape = this.normalize(value);
        }

        /**
         * 
         * @private
         * @param {PIXI.Rectangle|PIXI.Circle|PIXI.DisplayObject} value
         * @returns {Object}
         */
        normalize(value) {

            let shape = null;

            if (value instanceof PIXI.Circle) {
                shape = {type: 'circle', x: value.x, y: value.y, r: value.radius};
            } else if (value instanceof PIXI.Rectangle) {
                shape = {type: 'rectangle', x: value.x, y: value.y, width: value.width, height: value.height};
            } else {
                const bounds = value.getBounds();
                shape = {type: 'rectangle', x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height};
            }

            return shape
        }
    }

    /**
     * A TiltShiftAxisFilter.
     *
     * @class
     * @extends PIXI.Filter
     * @abstract
     * @private
     */
    class TiltShiftAxisFilter extends PIXI.Filter {

        constructor(shape, blur){

            const vertex = `
            attribute vec2 aVertexPosition;
            attribute vec2 aTextureCoord;

            uniform mat3 projectionMatrix;

            varying vec2 vTextureCoord;

            void main(void) {
                gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
                vTextureCoord = aTextureCoord;
            }
        `;

            const fragment = `
            varying vec2 vTextureCoord;

            uniform vec4 filterArea;
            uniform sampler2D uSampler;
            uniform int shape;
            uniform vec4 rectangle;
            uniform vec3 circle;
            uniform float blur;
            uniform vec2 delta;
            uniform vec2 texSize;

            float random(vec3 scale, float seed) {
                return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);
            }

            void main(void) {
                // textureCoord to pixelCoord
                vec2 pixelCoord = vTextureCoord * filterArea.xy - vec2(4.0, 4.0);   // FIXME: There's a shift of 4 * 4 pixels, don't know why...

                bool inside = false;

                if (shape == 1) {
                    inside = distance(pixelCoord, circle.xy) <= circle.z;
                } else if (shape == 2) {
                    inside = pixelCoord.x >= rectangle.x && pixelCoord.x <= rectangle.z && pixelCoord.y >= rectangle.y && pixelCoord.y <= rectangle.w;
                }

                if (inside) {
                    vec4 color = vec4(0.0);
                    float total = 0.0;

                    float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);

                    for (float t = -30.0; t <= 30.0; t++) {
                        float percent = (t + offset - 0.5) / 30.0;
                        float weight = 1.0 - abs(percent);
                        vec4 sample = texture2D(uSampler, vTextureCoord + delta / texSize * percent * blur);
                        sample.rgb *= sample.a;
                        color += sample * weight;
                        total += weight;
                    }

                    gl_FragColor = color / total;
                    gl_FragColor.rgb /= gl_FragColor.a + 0.00001;
                } else {
                    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
                }
            }
        `;

            super(vertex, fragment);
            
            if (shape.type === 'circle') {
                this.uniforms.shape = 1;
                this.uniforms.circle = [shape.x, shape.y, shape.r];
            } else {
                this.uniforms.shape = 2;
                this.uniforms.rectangle = [shape.x, shape.y, shape.x + shape.width, shape.y + shape.height];
            }
            this.uniforms.blur = blur;
            this.uniforms.delta = new PIXI.Point(0, 0);
            this.uniforms.texSize = new PIXI.Point(480, 270);

            this.updateDelta();
        }

        /**
         * The strength of the blur.
         *
         * @member {number}
         * @memberof PIXI.filters.TiltShiftAxisFilter#
         */
        get blur() {
            return this.uniforms.blur
        }
        set blur(value) {
            this.uniforms.blur = value;
        }
        
        /**
         * The blur shape.
         *
         * @member {PIXI.Rectangle}
         * @memberof PIXI.filters.TiltShiftAxisFilter#
         */
        get shape() {
            if (this.uniforms.shape === 1) {
                const circle = this.uniforms.circle;
                return new PIXI.Circle(circle[0], circle[1], circle[2])
            } else {
                const rectangle = this.uniforms.rectangle;
                return new PIXI.Rectangle(rectangle[0], rectangle[1], rectangle[2], rectangle[3])
            }
        }
        set shape(value) {
            if (value.type === 'circle') {
                this.uniforms.shape = 1;
                this.uniforms.circle = [value.x, value.y, value.r];
            } else {
                this.uniforms.shape = 2;
                this.uniforms.rectangle = [value.x, value.y, value.x + value.width, value.y + value.height];
            }
        }
    }

    /**
     * A TiltShiftXFilter.
     *
     * @class
     * @extends PIXI.TiltShiftAxisFilter
     * @private
     */
    class TiltShiftXFilter extends TiltShiftAxisFilter {
        /**
         * Updates the filter delta values.
         */
        updateDelta() {
            this.uniforms.delta.x = 0.1;
            this.uniforms.delta.y = 0;
        }
    }

    /**
     * A TiltShiftYFilter.
     *
     * @class
     * @extends PIXI.TiltShiftAxisFilter
     * @private
     */
    class TiltShiftYFilter extends TiltShiftAxisFilter {
        /**
         * Updates the filter delta values.
         */
        updateDelta() {
            this.uniforms.delta.x = 0;
            this.uniforms.delta.y = 0.1;
        }
    }

    // In order to test this interface implementation run jsc interface.js

    class Interface {
        // Abstract interface that should be extended in interface subclasses.
        // By convention all interfaces should start with an upper 'I'

        static implementationError(klass) {
            let interfaceKeys = Reflect.ownKeys(this.prototype);
            let classKeys = Reflect.ownKeys(klass.prototype);
            for(let key of interfaceKeys) {
                let interfaceDesc = this.prototype[key];
                let classDesc = klass.prototype[key];
                if (typeof(classDesc) == 'undefined')
                    return 'Missing ' + key
            }
            return null
        }

        static implementedBy(klass) {
            // In the first step only checks whether the methods of this
            // interface are all implemented by the given class
            let error = this.implementationError(klass);
            return error == null
        }

            // TODO: Specify optional methods
    //     static optionalMethods() {
    //         return [this.onMouseWheel]
    //     }
    }

    let ipc = null;

    try {
        ipc = require('electron').ipcRenderer;
    } catch (e) {}

    /** Basic class for app specific logging requirements.
     * Can be used to implement persistent logging in electron apps.
     */
    class Logging {

        /** Static log function.
         * @param {*} message
         */
        static log(message) {

            if (ipc) {
                ipc.send('log', message);
            } else {
                console.log(message);
            }
        }
    }

    /* globals Hammer, propagating */

    /** Interaction patterns

        See interaction.html for explanation
    */

    class IInteractionTarget extends Interface {
        capture(event) {
            return typeof true
        }

        onStart(event, interaction) { }
        onMove(event, interaction) { }
        onEnd(event, interaction) { }

        onMouseWheel(event) { }
    }

    class IInteractionMapperTarget extends Interface {
        capture(event) {
            return typeof true
        }

        findTarget(event, local, global) {
            return IInteractionTarget
        }
    }

    class PointMap extends MapProxy {
        // Collects touch points, mouse coordinates, etc. as key value pairs.
        // Keys are pointer and touch ids, the special "mouse" key.
        // Values are points, i.e. all objects with numeric x and y properties.
        constructor(points = {}) {
            super();
            for (let key in points) {
                this.set(key, points[key]);
            }
        }

        toString() {
            let points = [];
            for (let key of this.keys()) {
                let value = this.get(key);
                points.push(`${key}:{x:${value.x}, y:${value.y}}`);
            }
            let attrs = points.join(', ');
            return `[PointMap ${attrs}]`
        }

        clone() {
            let result = new PointMap();
            for (let key of this.keys()) {
                let value = this.get(key);
                result.set(key, { x: value.x, y: value.y });
            }
            return result
        }

        keyOf(value) {
            for (let key of this.keys()) {
                let p = this.get(key);
                if (p.x == value.x && p.y == value.y) {
                    return key
                }
            }
            return null
        }

        firstKey() {
            for (let key of this.keys()) {
                return key
            }
            return null
        }

        first() {
            for (let key of this.keys()) {
                return this.get(key)
            }
            return null
        }

        farthests() {
            if (this.size == 0) {
                return null
            }
            let pairs = [];
            for (let key of this.keys()) {
                let p = this.get(key);
                p.key = key;
                for (let k of this.keys()) {
                    let q = this.get(k);
                    q.key = k;
                    pairs.push([p, q]);
                }
            }
            let sorted = pairs.sort((a, b) => {
                return Points.distance(b[0], b[1]) - Points.distance(a[0], a[1])
            });
            return sorted[0]
        }

        mean() {
            if (this.size == 0) {
                return null
            }
            let x = 0.0,
                y = 0.0;
            for (let p of this.values()) {
                x += p.x;
                y += p.y;
            }
            return { x: x / this.size, y: y / this.size }
        }
    }

    class InteractionDelta {
        constructor(x, y, zoom, rotate, about) {
            this.x = x;
            this.y = y;
            this.zoom = zoom;
            this.rotate = rotate;
            this.about = about;
        }

        toString() {
            let values = [];
            for (let key of Object.keys(this)) {
                let value = this[key];
                if (key == 'about') {
                    values.push(`${key}:{x:${value.x}, y:${value.y}}`);
                } else {
                    values.push(`${key}:${value}`);
                }
            }
            let attrs = values.join(', ');
            return `[InteractionDelta ${attrs}]`
        }
    }

    class InteractionPoints {
        constructor(parent = null) {
            this.parent = parent;
            this.current = new PointMap();
            this.previous = new PointMap();
            this.start = new PointMap();
            this.ended = new PointMap();
            this.timestamps = new Map();
        }

        moved(key) {
            let current = this.current.get(key);
            let previous = this.previous.get(key);
            return Points.subtract(current, previous)
        }

        move() {
            let current = this.current.mean();
            let previous = this.previous.mean();
            return Points.subtract(current, previous)
        }

        /**
         * Computes the delta between previous and current angles. Corrects
         * value that are larger than 45°
         * @param {*} a
         * @param {*} b
         * @returns delta
         */
        diffAngle(a, b) {
            let alpha = Math.atan2(Math.sin(a - b), Math.cos(a - b));
            if (Math.abs(alpha) > Math.PI / 4) {
                alpha -= Math.PI;
            }
            return alpha
        }

        /**
         * Computes the delta between interaction points at t and t+1.
         *
         * @returns InteractionDelta
         * @memberof InteractionPoints
         */
        delta() {
            let csize = this.current.size;
            let psize = this.previous.size;
            if (csize >= 2 && csize == psize) {
                // Reduce to the two farthests points
                let current = this.current.farthests();

                let c1 = current[0];
                let c2 = current[1];

                let p1 = this.previous.get(c1.key);
                let p2 = this.previous.get(c2.key);

                //let p1 = previous[0]
                //let p2 = previous[1]

                let d1 = Points.subtract(c1, p1);
                let d2 = Points.subtract(c2, p2);
                let cm = Points.mean(c1, c2);
                //let pm = Points.mean(p1, p2)
                // UO: Using the mean lead to jumps between time slices with 3 and 2 fingers
                // We use the mean of deltas instead
                let delta = Points.mean(d1, d2); //Points.subtract(cm, pm)
                let zoom = 1.0;
                let distance1 = Points.distance(p1, p2);
                let distance2 = Points.distance(c1, c2);
                if (distance1 != 0 && distance2 != 0) {
                    zoom = distance2 / distance1;
                }
                let currentAngle = Points.angle(c1, c2);
                let previousAngle = Points.angle(p1, p2);
                let alpha = this.diffAngle(currentAngle, previousAngle);
                return new InteractionDelta(delta.x, delta.y, zoom, alpha, cm)
            } else if (csize == 1 && psize == 1 && this.current.firstKey() == this.previous.firstKey()) {
                // We need to ensure that the keys are the same
                let current = this.current.first();
                let previous = this.previous.first();
                let delta = Points.subtract(current, previous);
                return new InteractionDelta(delta.x, delta.y, 1.0, 0.0, current)
            }
            return null
        }

        started(key, point) {
            this.current.set(key, point);
            this.start.set(key, point);
            this.previous.set(key, point);
            this.timestamps.set(key, performance.now());
        }

        update(key, point) {
            // Returns true iff the key is new
            this.current.set(key, point);
            if (!this.start.has(key)) {
                this.start.set(key, point);
                this.previous.set(key, point);
                this.timestamps.set(key, performance.now());
                return true
            }
            return false
        }

        updatePrevious() {
            for (let key of this.current.keys()) {
                this.previous.set(key, this.current.get(key));
            }
        }

        stop(key, point) {
            if (this.current.has(key)) {
                this.current.delete(key);
                this.previous.delete(key);
                this.ended.set(key, point);
            }
        }

        finish(key, point) {
            this.current.delete(key);
            this.previous.delete(key);
            this.start.delete(key);
            this.timestamps.delete(key);
            this.ended.delete(key);
        }

        isFinished() {
            return this.current.size == 0
        }

        isNoLongerTwoFinger() {
            return this.previous.size > 1 && this.current.size < 2
        }

        isTap(key) {
            return this.parent.isTap(key)
        }

        isDoubleTap(key) {
            return this.parent.isDoubleTap(key)
        }

        isLongPress(key) {
            return this.parent.isLongPress(key)
        }
    }

    class Interaction extends InteractionPoints {
        constructor(tapDistance = 10, tapDuration = 250.0, longPressTime = 500.0) {
            super();
            this.tapDistance = tapDistance;
            this.tapCounts = new Map();
            this.tapPositions = new Map();
            this.tapTimestamps = new Map();
            this.tapDuration = tapDuration;
            this.longPressTime = longPressTime;
            this.targets = new Map();
            this.subInteractions = new Map(); // target:Object : InteractionPoints
        }

        stop(key, point) {
            super.stop(key, point);
            for (let points of this.subInteractions.values()) {
                points.stop(key, point);
            }
        }

        addTarget(key, target) {
            this.targets.set(key, target);
            this.subInteractions.set(target, new InteractionPoints(this));
        }

        removeTarget(key) {
            let target = this.targets.get(key);
            this.targets.delete(key);
            // Only remove target if no keys are refering to the target
            let remove = true;
            for (let t of this.targets.values()) {
                if (target === t) {
                    remove = false;
                }
            }
            if (remove) {
                this.subInteractions.delete(target);
            }
        }

        finish(key, point) {
            super.finish(key, point);
            this.removeTarget(key);
        }

        mapInteraction(points, aspects, mappingFunc) {
            // Map centrally registered points to target interactions
            // Returns an array of [target, updated subInteraction] pairs
            let result = new Map();
            for (let key in points) {
                if (this.targets.has(key)) {
                    let target = this.targets.get(key);
                    if (this.subInteractions.has(target)) {
                        let interaction = this.subInteractions.get(target);
                        for (let aspect of aspects) {
                            let pointMap = this[aspect];
                            let point = pointMap.get(key);
                            let mapped = mappingFunc(point, target);
                            interaction[aspect].set(key, mapped);
                        }
                        result.set(target, interaction);
                    }
                }
            }
            return result
        }

        registerTap(key, point) {
            if (this.tapCounts.has(key)) {
                let count = this.tapCounts.get(key);
                this.tapCounts.set(key, count + 1);
            }
            else {
                this.tapCounts.set(key, 1);
            }
            this.tapPositions.set(key, point);
            this.tapTimestamps.set(key, performance.now());
        }

        unregisterTap(key) {
            this.tapCounts.delete(key);
            this.tapPositions.delete(key);
            this.tapTimestamps.delete(key);
        }

        isTap(key) {
            let ended = this.ended.get(key);
            let start = this.start.get(key);
            if (
                start &&
                ended &&
                Points.distance(ended, start) < this.tapDistance
            ) {
                let t1 = this.timestamps.get(key);
                let tookLong = performance.now() > t1 + this.longPressTime;
                if (tookLong) {
                    return false
                }
                return true
            }
            return false
        }

        isDoubleTap(key) {
            let ended = this.ended.get(key);
            if (this.tapCounts.has(key) && this.tapCounts.get(key) > 2) {
                this.unregisterTap(key);
            }
            if (this.tapPositions.has(key)) {
                let pos = this.tapPositions.get(key);
                if (Points.distance(ended, pos) > this.tapDistance) {
                    this.unregisterTap(key);
                }
            }
            if (this.tapTimestamps.has(key) && performance.now() > this.tapTimestamps.get(key) + this.tapDuration) {
                //console.log("tap too long")
                this.unregisterTap(key);
            }
            let result = false;
            if (this.isTap(key)) {

                this.registerTap(key, ended);
                result = this.tapCounts.get(key) == 2;
            }
            else {
                this.unregisterTap(key);
            }
            //console.log("isDoubleTap", this.tapCounts.get(key), result)
            return result
        }

        isAnyTap() {
            for (let key of this.ended.keys()) {
                if (this.isTap(key)) return true
            }
            return false
        }

        isLongPress(key) {
            let ended = this.ended.get(key);
            let start = this.start.get(key);
            if (
                start &&
                ended &&
                Points.distance(ended, start) < this.tapDistance
            ) {
                let t1 = this.timestamps.get(key);
                let tookLong = performance.now() > t1 + this.longPressTime;
                if (tookLong) {
                    return true
                }
                return false
            }
            return false
        }

        isAnyLongPress() {
            for (let key of this.ended.keys()) {
                if (this.isLongPress(key)) return true
            }
            return false
        }

        isStylus(key) {
            return key === 'stylus'
        }
    }

    /**
     * This class implements the main delegate functionality: All necessary event handlers are registered for the
     * given element. Uses PointerEvents if available or TouchEvents on iOS. The fallback is on mouse events.
     * Collects the events if the interaction target captures the start event (i.e. declares that
     * the target wants the start event as well as all following move and end evcents.)
     *
     * @export
     * @class InteractionDelegate
     */
    class InteractionDelegate {
        // Long press: http://stackoverflow.com/questions/1930895/how-long-is-the-event-onlongpress-in-the-android
        // Stylus support: https://w3c.github.io/touch-events/

        /**
         * Creates an instance of InteractionDelegate.
         * @param {any} element
         * @param {any} target
         * @param {any} [{ mouseWheelElement = null, useCapture = true, capturePointerEvents = true, debug = false }={}]
         * @memberof InteractionDelegate
         */
        constructor(
            element,
            target,
            { mouseWheelElement = null, useCapture = true, capturePointerEvents = true, cancelOnWindowOut = true, debug = false } = {}
        ) {
            this.debug = debug;
            this.interaction = new Interaction();
            this.element = element;
            this.mouseWheelElement = mouseWheelElement || element;
            this.target = target;
            this.useCapture = useCapture;
            this.capturePointerEvents = capturePointerEvents;
            this.cancelOnWindowOut = cancelOnWindowOut;
            this.setupInteraction();
        }

        setupInteraction() {
            if (this.debug) {
                let error = this.targetInterface.implementationError(
                    this.target.constructor
                );
                if (error != null) {
                    throw new Error('Expected IInteractionTarget: ' + error)
                }
            }
            this.setupTouchInteraction();
            this.setupMouseWheelInteraction();
        }

        get targetInterface() {
            return IInteractionTarget
        }

        setupTouchInteraction() {
            let element = this.element;
            let useCapture = this.useCapture;
            if (window.PointerEvent) {
                if (this.debug) console.log('Pointer API' + window.PointerEvent);
                element.addEventListener(
                    'pointerdown',
                    e => {
                        if (this.debug) console.log('pointerdown', e.pointerId);
                        if (this.capture(e)) {
                            if (this.capturePointerEvents) {
                                try {
                                    element.setPointerCapture(e.pointerId);
                                } catch (e) { }
                            }
                            this.onStart(e);
                        }
                    },
                    useCapture
                );
                element.addEventListener(
                    'pointermove',
                    e => {
                        if (this.debug) console.log('pointermove', e.pointerId, e.pointerType);

                        if (
                            e.pointerType == 'touch' ||
                            (e.pointerType == 'mouse' && Events$1.isPointerDown(e))
                        ) {
                            // this.capture(e) &&
                            if (this.debug)
                                console.log('pointermove captured', e.pointerId);
                            this.onMove(e);
                        }
                    },
                    useCapture
                );
                element.addEventListener(
                    'pointerup',
                    e => {
                        if (this.debug) console.log('pointerup', e.pointerId, e.pointerType);
                        this.onEnd(e);
                        if (this.capturePointerEvents) {
                            try {
                                element.releasePointerCapture(e.pointerId);
                            } catch (e) { }
                        }
                    },
                    useCapture
                );
                element.addEventListener(
                    'pointercancel',
                    e => {
                        if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType);
                        this.onEnd(e);
                        if (this.capturePointerEvents)
                            element.releasePointerCapture(e.pointerId);
                    },
                    useCapture
                );

                if (!this.capturePointerEvents) {
                    element.addEventListener(
                        'pointerleave',
                        e => {
                            if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType);
                            if (e.target == element) this.onEnd(e);
                        },
                        useCapture
                    );
                }

                if (!this.capturePointerEvents) {
                    element.addEventListener(
                        'pointerout',
                        e => {
                            if (this.debug) console.log('pointerout', e.pointerId, e.pointerType);
                            if (e.target == element) this.onEnd(e);
                        },
                        useCapture
                    );
                }

                if (this.cancelOnWindowOut) {
                    window.addEventListener(
                        'pointerout',
                        e => {
                            if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target);
                            if (e.target == element) {
                               this.onEnd(e);
                            }
                        },
                        useCapture);
                }

            } else if (window.TouchEvent) {
                if (this.debug) console.log('Touch API');
                element.addEventListener(
                    'touchstart',
                    e => {
                        if (this.debug)
                            console.log('touchstart', this.touchPoints(e));
                        if (this.capture(e)) {
                            for (let touch of e.changedTouches) {
                                this.onStart(touch);
                            }
                        }
                    },
                    useCapture
                );
                element.addEventListener(
                    'touchmove',
                    e => {
                        if (this.debug)
                            console.log('touchmove', this.touchPoints(e), e);
                        for (let touch of e.changedTouches) {
                            this.onMove(touch);
                        }
                        for (let touch of e.targetTouches) {
                            this.onMove(touch);
                        }
                    },
                    useCapture
                );
                element.addEventListener(
                    'touchend',
                    e => {
                        if (this.debug) console.log('touchend', this.touchPoints(e));
                        for (let touch of e.changedTouches) {
                            this.onEnd(touch);
                        }
                    },
                    useCapture
                );
                element.addEventListener(
                    'touchcancel',
                    e => {
                        if (this.debug)
                            console.log(
                                'touchcancel',
                                e.targetTouches.length,
                                e.changedTouches.length
                            );
                        for (let touch of e.changedTouches) {
                            this.onEnd(touch);
                        }
                    },
                    useCapture
                );
            } else {
                if (this.debug) console.log('Mouse API');

                element.addEventListener(
                    'mousedown',
                    e => {
                        if (this.debug) console.log('mousedown', e);
                        if (this.capture(e)) {
                            this.onStart(e);
                        }
                    },
                    useCapture
                );
                element.addEventListener(
                    'mousemove',
                    e => {
                        // Dow we only use move events if the mouse is down?
                        // HOver effects have to be implemented by other means
                        // && Events.isMouseDown(e))

                        if (Events$1.isMouseDown(e)) {
                            if (this.debug)
                                console.log('mousemove', e);
                            this.onMove(e);
                        }
                    },
                    useCapture
                );
                element.addEventListener(
                    'mouseup',
                    e => {
                        if (this.debug) console.log('mouseup', e);
                        this.onEnd(e);
                    },
                    true
                );

                if (!this.capturePointerEvents) {
                    element.addEventListener(
                        'mouseout',
                        e => {
                            if (e.target == element) {
                                this.onEnd(e);
                                console.warn("Shouldn't happen: mouseout ends interaction");
                            }

                        },
                        useCapture
                    );
                }
                if (this.cancelOnWindowOut) {
                    window.addEventListener(
                        'mouseout',
                        e => {
                            if (e.target == element) {
                                this.onEnd(e);
                            }
                        },
                        useCapture);
                }
            }
        }

        isDescendant(parent, child) {
            if (parent == child) return true
            let node = child.parentNode;
            while (node != null) {
                if (node == parent) {
                    return true
                }
                node = node.parentNode;
            }
            return false
        }

        touchPoints(event) {
            let result = [];
            for (let touch of event.changedTouches) {
                result.push(this.extractPoint(touch));
            }
            return result
        }

        setupMouseWheelInteraction() {
            this.mouseWheelElement.addEventListener(
                'mousewheel',
                this.onMouseWheel.bind(this),
                true
            );
            this.mouseWheelElement.addEventListener(
                'DOMMouseScroll',
                this.onMouseWheel.bind(this),
                true
            );
        }

        onMouseWheel(event) {
            if (this.capture(event) && this.target.onMouseWheel) {
                this.target.onMouseWheel(event);
            }
        }

        onStart(event) {
            let extracted = this.extractPoint(event);
            this.startInteraction(event, extracted);
            this.target.onStart(event, this.interaction);
        }

        onMove(event) {
            let extracted = this.extractPoint(event, 'all');
            this.updateInteraction(event, extracted);
            this.target.onMove(event, this.interaction);
            this.interaction.updatePrevious();
        }

        onEnd(event) {
            let extracted = this.extractPoint(event, 'changedTouches');
            this.endInteraction(event, extracted);
            this.target.onEnd(event, this.interaction);
            this.finishInteraction(event, extracted);
        }

        /**
         * Asks the target whether the event should be captured
         *
         * @param {any} event
         * @returns {bool}
         * @memberof InteractionDelegate
         */
        capture(event) {
            if (Events$1.isCaptured(event)) {
                return false
            }
            let captured = this.target.capture(event);
            return captured
        }

        getPosition(event) {
            return { x: event.clientX, y: event.clientY }
        }

        extractPoint(event, touchEventKey = 'all') {
            // 'targetTouches'
            let result = {};
            switch (event.constructor.name) {
                case 'MouseEvent':
                    let buttons = event.buttons || event.which;
                    if (buttons) result['mouse'] = this.getPosition(event);
                    break
                case 'PointerEvent':
                    result[event.pointerId.toString()] = this.getPosition(event);
                    break
                case 'Touch':
                    let id =
                        event.touchType === 'stylus'
                            ? 'stylus'
                            : event.identifier.toString();
                    result[id] = this.getPosition(event);
                    break
                //             case 'TouchEvent':
                //                 // Needs to be observed: Perhaps changedTouches are all we need. If so
                //                 // we can remove the touchEventKey default parameter
                //                 if (touchEventKey == 'all') {
                //                     for(let t of event.targetTouches) {
                //                         result[t.identifier.toString()] = this.getPosition(t)
                //                     }
                //                     for(let t of event.changedTouches) {
                //                         result[t.identifier.toString()] = this.getPosition(t)
                //                     }
                //                 }
                //                 else {
                //                     for(let t of event.changedTouches) {
                //                         result[t.identifier.toString()] = this.getPosition(t)
                //                     }
                //                 }
                //                 break
                default:
                    break
            }
            return result
        }

        interactionStarted(event, key, point) {
            // Callback: can be overwritten
        }

        interactionEnded(event, key, point) {
            // Callback: can be overwritten
        }

        interactionFinished(event, key, point) { }

        startInteraction(event, extracted) {
            for (let key in extracted) {
                let point = extracted[key];
                this.interaction.started(key, point);
                this.interactionStarted(event, key, point);
            }
        }

        updateInteraction(event, extracted) {
            for (let key in extracted) {
                let point = extracted[key];
                let updated = this.interaction.update(key, point);
                if (updated) {
                    console.warn("new pointer in updateInteraction shouldn't happen", key);
                    this.interactionStarted(event, key, point);
                }
            }
        }

        endInteraction(event, ended) {
            for (let key in ended) {
                let point = ended[key];
                this.interaction.stop(key, point);
                this.interactionEnded(event, key, point);
            }
        }

        finishInteraction(event, ended) {
            for (let key in ended) {
                let point = ended[key];
                this.interaction.finish(key, point);
                this.interactionFinished(event, key, point);
            }
        }
    }
    /**
     * A special InteractionDelegate that maps events to specific parts of
     * the interaction target. The InteractionTarget must implement a findTarget
     * method that returns an object implementing the IInteractionTarget interface.
     *
     * If the InteractionTarget also implements a mapPositionToPoint method this
     * is used to map the points to the local coordinate space of the the target.
     *
     * This makes it easier to lookup elements and relate events to local
     * positions.
     *
     * @export
     * @class InteractionMapper
     * @extends {InteractionDelegate}
     */
    class InteractionMapper$1 extends InteractionDelegate {

        constructor(
            element,
            target,
            { tapDistance = 10, longPressTime = 500.0, useCapture = true, mouseWheelElement = null, logInteractionsAbove = 12 } = {}
        ) {
            super(element, target, { tapDistance, useCapture, longPressTime, mouseWheelElement });
            this.logInteractionsAbove = logInteractionsAbove;
        }

        get targetInterface() {
            return IInteractionMapperTarget
        }

        mapPositionToPoint(point, element = null) {
            if (this.target.mapPositionToPoint) {
                return this.target.mapPositionToPoint(point, element)
            }
            return point
        }

        interactionStarted(event, key, point) {
            if (this.target.findTarget) {
                let local = this.mapPositionToPoint(point);
                let found = this.target.findTarget(event, local, point);
                if (found != null) {
                    this.interaction.addTarget(key, found);
                }
            }
            let size = this.interaction.current.size;
            let limit = this.logInteractionsAbove;
            if (size > limit) {
                Logging.log(`Number of interactions ${size} exceeds ${limit}`);
            }
        }

        onMouseWheel(event) {
            if (this.capture(event)) {
                if (this.target.findTarget) {
                    let point = this.getPosition(event);
                    let local = this.mapPositionToPoint(point);
                    let found = this.target.findTarget(event, local, point);
                    if (found != null && found.onMouseWheel) {
                        found.onMouseWheel(event);
                        return
                    }
                }
                if (this.target.onMouseWheel) {
                    this.target.onMouseWheel(event);
                }
            }
        }

        onStart(event) {
            let extracted = this.extractPoint(event);
            this.startInteraction(event, extracted);
            let mapped = this.interaction.mapInteraction(
                extracted,
                ['current', 'start'],
                this.mapPositionToPoint.bind(this)
            );
            for (let [target, interaction] of mapped.entries()) {
                target.onStart(event, interaction);
            }
        }

        onMove(event) {
            let extracted = this.extractPoint(event, 'all');
            this.updateInteraction(event, extracted);
            let mapped = this.interaction.mapInteraction(
                extracted,
                ['current', 'previous'],
                this.mapPositionToPoint.bind(this)
            );
            for (let [target, interaction] of mapped.entries()) {
                target.onMove(event, interaction);
                interaction.updatePrevious();
            }
            this.interaction.updatePrevious();
        }

        onEnd(event) {
            let extracted = this.extractPoint(event, 'changedTouches');
            this.endInteraction(event, extracted);
            let mapped = this.interaction.mapInteraction(
                extracted,
                ['ended'],
                this.mapPositionToPoint.bind(this)
            );
            for (let [target, interaction] of mapped.entries()) {
                target.onEnd(event, interaction);
            }
            this.finishInteraction(event, extracted);
        }

        /**
         *
         *
         * @static
         * @param {string|array} types - An event type, an array of event types or event types seperated by a space sign. The following
         *     events are possible:
         *         pan, panstart, panmove, panend, pancancel, panleft, panright, panup, pandown
         *         pinch, pinchstart, pinchmove, pinchend, pinchcancel, pinchin, pinchout
         *         press, pressup
         *         rotate, rotatestart, rotatemove, rotateend, rotatecancel
         *         swipe, swipeleft, swiperight, swipeup, swipedown
         *         tap
         * @param {HTMLElement|HTMLElement[]} elements - An HTML element or an array of HTML elements.
         * @param {function} [cb] - The callback. A function which is executed after the event occurs. Receives the event object as the
         *     first paramter
         * @param {object} [opts] - An options object. See the hammer documentation for more details.
         */
        static on(types, elements, cb, opts = {}) {
            opts = Object.assign({}, {

            }, opts);

            if (typeof Hammer === 'undefined') {
                console.error('Hammer.js not found!');
                return this
            }

            // convert to array
            types = Array.isArray(types) ? types : types.split(/\s/);
            if (elements instanceof NodeList || elements instanceof HTMLCollection) {
                elements = Array.from(elements);
            }
            elements = Array.isArray(elements) ? elements : [elements];

            for (let i = 0; i < types.length; i++) {

                const type = types[i].toLowerCase();

                // list of hammer events
                const useHammer = /^(tap|doubletap|press|pan|swipe|pinch|rotate).*$/.test(type);

                // if it is a hammer event
                if (useHammer) {

                    for (let j = 0; j < elements.length; j++) {

                        // if(elements[j].tagName == "svg") return false;

                        let hammer = new Hammer(elements[j], opts);

                        if (window.propagating !== 'undefined') {
                            hammer = propagating(hammer);
                        }

                        // recognizers
                        if (type.startsWith('pan')) {
                            hammer.get('pan').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts));
                        } else if (type.startsWith('pinch')) {
                            hammer.get('pinch').set(Object.assign({ enable: true }, opts));
                        } else if (type.startsWith('press')) {
                            hammer.get('press').set(opts);
                        } else if (type.startsWith('rotate')) {
                            hammer.get('rotate').set(Object.assign({ enable: true }, opts));
                        } else if (type.startsWith('swipe')) {
                            hammer.get('swipe').set(Object.assign({ direction: Hammer.DIRECTION_ALL }, opts));
                        } else if (type.startsWith('tap')) {
                            hammer.get('tap').set(opts);
                        }

                        hammer.on(type, event => {
                            cb(event);
                        });
                    }

                } else {

                    for (let j = 0; j < elements.length; j++) {
                        Hammer.on(elements[j], type, event => {
                            cb(event);
                        });
                    }
                }
            }

            return this
        }
    }

    window.InteractionMapper = InteractionMapper$1;

    /** Report capabilities with guaranteed values.
     */
    class Capabilities {

        /** Returns the browser userAgent.
        @return {string}
        */
        static get userAgent() {
            return navigator.userAgent || 'Unknown Agent'
        }

        /** Tests whether the app is running on a mobile device.
        Implemented as a readonly attribute.
        @return {boolean}
        */
        static get isMobile() {
            return (/Mobi/.test(navigator.userAgent))
        }

        /** Tests whether the app is running on a iOS device.
        Implemented as a readonly attribute.
        @return {boolean}
        */
        static get isIOS() {
            return (/iPad|iPhone|iPod/.test(navigator.userAgent)) && !window.MSStream
        }

        /** Tests whether the app is running in a Safari environment.
        See https://stackoverflow.com/questions/7944460/detect-safari-browser
        Implemented as a readonly attribute.
        @return {boolean}
        */
        static get isSafari() {
            return navigator.vendor && navigator.vendor.indexOf('Apple') > -1 && navigator.userAgent && !navigator.userAgent.match('CriOS')
        }

        /**
         * Distincts if the app is running inside electron or not.
         * 
         * source: https://github.com/cheton/is-electron
         */
        static get isElectron() {

            // Renderer process
            if (typeof window !== 'undefined' && typeof window.process === 'object' && window.process.type === 'renderer') {
                return true
            }

            // Main process
            if (typeof process !== 'undefined' && typeof process.versions === 'object' && !!process.versions.electron) {
                return true
            }

            // Detect the user agent when the `nodeIntegration` option is set to true
            if (typeof navigator === 'object' && typeof navigator.userAgent === 'string' && navigator.userAgent.indexOf('Electron') >= 0) {
                return true
            }

            return false
        }

        /** Returns the display resolution. Necessary for retina displays.
        @return {number}
        */
        static get devicePixelRatio() {
            return window.devicePixelRatio || 1
        }

        /** Returns true if the device is a multi-touch table. This method is currently not universal usable and not sure!
        @return {boolean}
        */
        static get isMultiTouchTable() {
            return Capabilities.devicePixelRatio > 2 && Capabilities.isMobile === false && /Windows/i.test(Capabilities.userAgent)
        }

        /** Returns true if mouse events are supported
        @return {boolean}
        */
        static supportsMouseEvents() {
            return typeof(window.MouseEvent) != 'undefined'
        }

        /** Returns true if touch events are supported
        @return {boolean}
        */
        static supportsTouchEvents() {
            return typeof(window.TouchEvent) != 'undefined'
        }

        /** Returns true if pointer events are supported
        @return {boolean}
        */
        static supportsPointerEvents() {
            return typeof(window.PointerEvent) != 'undefined'
        }

        /** Returns true if DOM templates are supported
        @return {boolean}
        */
        static supportsTemplate() {
            return 'content' in document.createElement('template');
        }
    }

    /** Basic tests for Capabilities.
     */
    class CapabilitiesTests {

        static testConfirm() {
            let bool = confirm('Please confirm');
            document.getElementById('demo').innerHTML = (bool) ? 'Confirmed' : 'Not confirmed';
        }

        static testPrompt() {
            let person = prompt('Please enter your name', 'Harry Potter');
            if (person != null) {
                demo.innerHTML =
                'Hello ' + person + '! How are you today?';
            }
        }

        static testUserAgent() {
            let agent = 'User-agent: ' + Capabilities.userAgent;
            user_agent.innerHTML = agent;
        }

        static testDevicePixelRatio() {
            let value = 'Device Pixel Ratio: ' + Capabilities.devicePixelRatio;
            device_pixel_ratio.innerHTML = value;
        }

        static testMultiTouchTable() {
            let value = 'Is the device a multi-touch table? ' + Capabilities.isMultiTouchTable;
            multi_touch_table.innerHTML = value;
        }

        static testSupportedEvents() {
            let events = [];
            if (Capabilities.supportsMouseEvents()) {
                events.push('MouseEvents');
            }
            if (Capabilities.supportsTouchEvents()) {
                events.push('TouchEvents');
            }
            if (Capabilities.supportsPointerEvents()) {
                events.push('PointerEvents');
            }
            supported_events.innerHTML = 'Supported Events: ' + events.join(', ');
        }

        static testAll() {
            this.testUserAgent();
            this.testDevicePixelRatio();
            this.testMultiTouchTable();
            this.testSupportedEvents();
        }
    }

    /* Optional global variables, needed in DocTests. */
    window.Capabilities = Capabilities;
    window.CapabilitiesTests = CapabilitiesTests;

    /**
     * A base class for scatter specific events.
     *
     * @constructor
     * @param {name} String - The name of the event
     * @param {target} Object - The target of the event
     */
    class BaseEvent {
        constructor(name, target) {
            this.name = name;
            this.target = target;
        }
    }

    // Event types
    const START = 'onStart';
    const UPDATE = 'onUpdate';
    const END = 'onEnd';

    /**
     * A scatter event that describes how the scatter has changed.
     *
     * @constructor
     * @param {target} Object - The target scatter of the event
     * @param {optional} Object - Optional parameter
     */
    class ScatterEvent extends BaseEvent {
        constructor(
            target,
            {
                translate = { x: 0, y: 0 },
                scale = null,
                rotate = 0,
                about = null,
                fast = false,
                type = null
            } = {}
        ) {
            super('scatterTransformed', { target: target });
            this.translate = translate;
            this.scale = scale;
            this.rotate = rotate;
            this.about = about;
            this.fast = fast;
            this.type = type;
        }

        toString() {
            return (
                "Event('scatterTransformed', scale: " +
                this.scale +
                ' about: ' +
                this.about.x +
                ', ' +
                this.about.y +
                ')'
            )
        }
    }

    /**
     * A scatter resize event that describes how the scatter has changed.
     *
     * @constructor
     * @param {target} Object - The target scatter of the event
     * @param {optional} Object - Optional parameter
     */
    class ResizeEvent extends BaseEvent {
        constructor(target, { width = 0, height = 0 } = {}) {
            super('scatterResized', { width: width, height: height });
            this.width = width;
            this.height = height;
        }

        toString() {
            return (
                'Event(scatterResized width: ' +
                this.width +
                'height: ' +
                this.height +
                ')'
            )
        }
    }

    /**
     * A abstract base class that implements the throwable behavior of a scatter
     * object.
     *
     * @constructor
     */
    class Throwable {
        constructor({
            movableX = true,
            movableY = true,
            throwVisibility = 44,
            throwDamping = 0.95,
            autoThrow = true,
            onThrowFinished = null
        } = {}) {
            this.movableX = movableX;
            this.movableY = movableY;
            this.throwVisibility = throwVisibility;
            this.throwDamping = throwDamping;
            this.autoThrow = autoThrow;
            this.velocities = [];
            this.velocity = null;
            this.timestamp = null;
            this.onThrowFinished = onThrowFinished;
            //console.log("onThrowFinished", onThrowFinished)
        }

        observeVelocity() {
            this.lastframe = performance.now();
        }

        addVelocity(delta, buffer = 5) {
            let t = performance.now();
            let dt = t - this.lastframe;
            this.lastframe = t;
            if (dt > 0) {
                // Avoid division by zero errors later on
                let velocity = { t: t, dt: dt, dx: delta.x, dy: delta.y };
                this.velocities.push(velocity);
                while (this.velocities.length > buffer) {
                    this.velocities.shift();
                }
            }
        }

        meanVelocity(milliseconds = 30) {
            this.addVelocity({ x: 0, y: 0 });
            let sum = { x: 0, y: 0 };
            let count = 0;
            let t = 0;
            for (let i = this.velocities.length - 1; i > 0; i--) {
                let v = this.velocities[i];
                t += v.dt;
                let nv = { x: v.dx / v.dt, y: v.dy / v.dt };
                sum = Points.add(sum, nv);
                count += 1;
                if (t > milliseconds) {
                    break
                }
            }
            if (count === 0) return sum // empty vector
            return Points.multiplyScalar(sum, 1 / count)
        }

        killAnimation() {
            this.velocity = null;
            this.velocities = [];
        }

        startThrow() {
            this.velocity = this.meanVelocity();
            if (this.velocity != null) {
                // Call next velocity to ansure that specializations
                // that use keepOnStage are called
                this.velocity = this.nextVelocity(this.velocity);
                if (this.autoThrow) this.animateThrow(performance.now());
            } else {
                this.onDragComplete();
            }
        }

        animateThrow(time) {
            if (this.velocity != null) {
                let t = performance.now();
                let dt = t - this.lastframe;
                this.lastframe = t;
                // console.log("animateThrow", dt)
                let next = this.nextVelocity(this.velocity);
                let prevLength = Points.length(this.velocity);
                let nextLength = Points.length(next);
                if (nextLength > prevLength) {
                    let factor = nextLength / prevLength;
                    next = Points.multiplyScalar(next, 1 / factor);
                    console.log('Prevent acceleration', factor, this.velocity, next);
                }
                this.velocity = next;
                let d = Points.multiplyScalar(this.velocity, dt);
                this._move(d);

                this.onDragUpdate(d);
                if (dt == 0 || this.needsAnimation()) {
                    requestAnimationFrame(this.animateThrow.bind(this));
                    return
                } else {
                    if (this.isOutside()) {
                        requestAnimationFrame(this.animateThrow.bind(this));
                        return
                    }
                }
            }
            this.onDragComplete();
            if (this.onThrowFinished != null) {
                this.onThrowFinished();
            }
        }

        needsAnimation() {
            if (this.velocity == null) {
                return false
            }
            return Points.length(this.velocity) > 0.01
        }

        nextVelocity(velocity) {
            // Must be overwritten: computes the changed velocity. Implement
            // damping, collison detection, etc. here
            let next = Points.multiplyScalar(velocity, this.throwDamping);
            return {
                x: (this.movableX) ? next.x : 0,
                y: (this.movableY) ? next.y : 0
            }
        }

        _move(delta) {
            // Overwrite if necessary
        }

        onDragComplete() {
            // Overwrite if necessary
        }

        onDragUpdate(delta) {
            // Overwrite if necessary
        }
    }

    class AbstractScatter extends Throwable {
        constructor({
            minScale = 0.1,
            maxScale = 1.0,
            startScale = 1.0,
            autoBringToFront = true,
            autoThrow = true,
            translatable = true,
            scalable = true,
            rotatable = true,
            resizable = false,
            movableX = true,
            movableY = true,
            throwVisibility = 44,
            throwDamping = 0.95,
            overdoScaling = 1,
            mouseZoomFactor = 1.1,
            rotationDegrees = null,
            rotation = null,
            onTransform = null,
            interactive = true,
            onClose = null,
            onThrowFinished = null,
            scaleAutoClose = false,
            scaleCloseThreshold = 0.10,
            scaleCloseBuffer = 0.05
        } = {}) {
            if (rotationDegrees != null && rotation != null) {
                throw new Error('Use rotationDegrees or rotation but not both')
            } else if (rotation != null) {
                rotationDegrees = Angle.radian2degree(rotation);
            } else if (rotationDegrees == null) {
                rotationDegrees = 0;
            }
            super({
                movableX,
                movableY,
                throwVisibility,
                throwDamping,
                autoThrow,
                onThrowFinished
            });

            /**
             * Closes the card when the minScale is reached and the 
             * card is released. Card can be saved by scaling it up again.
             */
            this.scaleAutoClose = scaleAutoClose;
            this.scaleCloseThreshold = scaleCloseThreshold;
            this.scaleCloseBuffer = scaleCloseBuffer;
            this.scaleAutoCloseTimeout = null;

            this.interactive = interactive;
            this.startRotationDegrees = rotationDegrees;
            this.startScale = startScale; // Needed to reset object
            this.minScale = minScale;
            this.maxScale = maxScale;
            this.overdoScaling = overdoScaling;
            this.translatable = translatable;
            if (!translatable) {
                this.movableX = false;
                this.movableY = false;
            }
            this.scalable = scalable;
            this.rotatable = rotatable;
            this.resizable = resizable;
            this.mouseZoomFactor = mouseZoomFactor;
            this.autoBringToFront = autoBringToFront;
            this.dragging = false;
            this.onTransform = onTransform != null ? [onTransform] : null;
            this.onClose = onClose != null ? [onClose] : null;
        }

        addCloseEventCallback(callback) {
            if (this.onClose == null) {
                this.onClose = [];
            }
            this.onClose.push(callback);
        }

        addTransformEventCallback(callback) {
            if (this.onTransform == null) {
                this.onTransform = [];
            }
            this.onTransform.push(callback);
        }

        startGesture(interaction) {
            this.bringToFront();
            this.killAnimation();
            this.observeVelocity();
            return true
        }

        close() {
            if (this.onClose) {
                this.onClose.forEach(callback => callback(this));
            }
        }

        gesture(interaction) {
            let delta = interaction.delta();
            //console.log("gesture", delta)
            if (delta != null) {
                this.addVelocity(delta);
                this.transform(delta, delta.zoom, delta.rotate, delta.about);
                if (delta.zoom != 1) this.interactionAnchor = delta.about;
            }
        }

        get polygon() {
            let w2 = this.width * this.scale / 2;
            let h2 = this.height * this.scale / 2;
            let center = this.center;
            let polygon = new Polygon(center);
            polygon.addPoint({ x: -w2, y: -h2 });
            polygon.addPoint({ x: w2, y: -h2 });
            polygon.addPoint({ x: w2, y: h2 });
            polygon.addPoint({ x: -w2, y: h2 });
            polygon.rotate(this.rotation);
            return polygon
        }

        isOutside() {
            let stagePolygon = this.containerPolygon;
            if (stagePolygon == null)
                return false
            let polygon = this.polygon;
            if (polygon == null)
                return false
            let result = stagePolygon.intersectsWith(polygon);
            return result === false || result.overlap < this.throwVisibility
        }

        recenter() {
            // Return a small vector that guarantees that the scatter is moving
            // towards the center of the stage
            let center = this.center;
            let target = this.container.center;
            let delta = Points.subtract(target, center);
            return Points.normalize(delta)
        }

        nextVelocity(velocity) {
            return this.keepOnStage(velocity)
        }

        bouncing() {
            // Implements the bouncing behavior of the scatter. Moves the scatter
            // to the center of the stage if the scatter is outside the stage or
            // not within the limits of the throwVisibility.

            let stagePolygon = this.containerPolygon;
            let polygon = this.polygon;
            let result = stagePolygon.intersectsWith(polygon);
            if (result === false || result.overlap < this.throwVisibility) {
                let cv = this.recenter();
                let recentered = false;
                while (result === false || result.overlap < this.throwVisibility) {
                    polygon.center.x += cv.x;
                    polygon.center.y += cv.y;
                    this._move(cv);
                    result = stagePolygon.intersectsWith(polygon);
                    recentered = true;
                }
                return recentered
            }
            return false
        }

        keepOnStage(velocity, collision = 0.5) {
            let stagePolygon = this.containerPolygon;
            if (!stagePolygon) return
            let polygon = this.polygon;
            let bounced = this.bouncing();
            if (bounced) {
                let stage = this.containerBounds;
                let x = this.center.x;
                let y = this.center.y;
                let dx = this.movableX ? velocity.x : 0;
                let dy = this.movableY ? velocity.y : 0;
                let factor = this.throwDamping;
                // if (recentered) {
                if (x < 0) {
                    dx = -dx;
                    factor = collision;
                }
                if (x > stage.width) {
                    dx = -dx;
                    factor = collision;
                }
                if (y < 0) {
                    dy = -dy;
                    factor = collision;
                }
                if (y > stage.height) {
                    dy = -dy;
                    factor = collision;
                }
                // }
                return Points.multiplyScalar({ x: dx, y: dy }, factor)
            }
            return super.nextVelocity(velocity)
        }

        endGesture(interaction) {
            this.startThrow();
            this._checkAutoClose();
        }

        _checkAutoClose() {
            if (this.scaleAutoClose)
                if (this.scale < this.minScale + this.scaleCloseThreshold - this.scaleCloseBuffer) {
                    this.zoom(this.minScale, { animate: 0.2, onComplete: this.close.bind(this) });
                } else if (this.scale < this.minScale + this.scaleCloseThreshold) {
                    this.zoom(this.minScale + this.scaleCloseThreshold, { animate: 0.4 });
                }
        }

        rotateDegrees(degrees, anchor) {
            let rad = Angle.degree2radian(degrees);
            this.rotate(rad, anchor);
        }

        rotate(rad, anchor) {
            this.transform({ x: 0, y: 0 }, 1.0, rad, anchor);
        }

        move(d, { animate = 0 } = {}) {
            if (this.translatable) {
                if (animate > 0) {
                    let startPos = this.position;
                    TweenLite.to(this, animate, {
                        x: '+=' + d.x,
                        y: '+=' + d.y,
                        /* scale: scale, uo: not defined, why was this here? */
                        onUpdate: e => {
                            let p = this.position;
                            let dx = p.x - startPos.x;
                            let dy = p.x - startPos.y;
                            this.onMoved(dx, dy);
                        }
                    });
                } else {
                    this._move(d);
                    this.onMoved(d.x, d.y);
                }
            }
        }

        moveTo(p, { animate = 0 } = {}) {
            let c = this.origin;
            let delta = Points.subtract(p, c);
            this.move(delta, { animate: animate });
        }

        centerAt(p, { animate = 0 } = {}) {
            let c = this.center;
            let delta = Points.subtract(p, c);
            this.move(delta, { animate: animate });
        }

        zoom(
            scale,
            {
                animate = 0,
                about = null,
                delay = 0,
                x = null,
                y = null,
                onComplete = null
            } = {}
        ) {
            let anchor = about || this.center;
            if (scale != this.scale) {
                if (animate > 0) {
                    TweenLite.to(this, animate, {
                        scale: scale,
                        delay: delay,
                        onComplete: onComplete,
                        onUpdate: this.onZoomed.bind(this)
                    });
                } else {
                    this.scale = scale;
                    this.onZoomed(anchor);
                }
            }
        }

        _move(delta) {
            this.x += this.movableX ? delta.x : 0;
            this.y += this.movableX ? delta.y : 0;
        }

        transform(translate, zoom, rotate, anchor) {
            let delta = {
                x: this.movableX ? translate.x : 0,
                y: this.movableY ? translate.y : 0
            };
            if (this.resizable) var vzoom = zoom;
            if (!this.translatable) delta = { x: 0, y: 0 };
            if (!this.rotatable) rotate = 0;
            if (!this.scalable) zoom = 1.0;
            if (zoom == 1.0 && rotate == 0) {
                this._move(delta);
                if (this.onTransform != null) {
                    let event = new ScatterEvent(this, {
                        translate: delta,
                        scale: this.scale,
                        rotate: 0,
                        about: anchor,
                        fast: false,
                        type: UPDATE
                    });
                    this.onTransform.forEach(function (f) {
                        f(event);
                    });
                }
                return
            }
            let origin = this.rotationOrigin;
            let beta = Points.angle(origin, anchor);
            let distance = Points.distance(origin, anchor);
            let { scale: newScale, zoom: thresholdedZoom } = this.calculateScale(zoom);

            let newOrigin = Points.arc(anchor, beta + rotate, distance * thresholdedZoom);
            let extra = Points.subtract(newOrigin, origin);
            let offset = Points.subtract(anchor, origin);
            this._move(offset);
            this.scale = newScale;
            this.rotation += rotate;
            offset = Points.negate(offset);
            offset = Points.add(offset, extra);
            offset = Points.add(offset, translate);
            this._move(offset);

            delta.x += extra.x;
            delta.y += extra.y;
            if (this.onTransform != null) {
                let event = new ScatterEvent(this, {
                    translate: delta,
                    scale: newScale,
                    rotate: rotate,
                    about: anchor
                });
                this.onTransform.forEach(function (f) {
                    f(event);
                });
            }
            if (this.resizable) {
                this.resizeAfterTransform(vzoom);
            }
        }

        /**
         * For a given zoom, a new scale is calculated, taking
         * min and max scale into account.
         * 
         * @param {number} zoom - The zoom factor, to scale the object with.
         * @returns {object} - Returns an object containing the a value for a valid scale and the corrected zoom factor.
         */
        calculateScale(zoom) {
            let scale = this.scale * zoom;

            let minScale = this.minScale / this.overdoScaling;
            let maxScale = this.maxScale * this.overdoScaling;
            if (scale < minScale) {
                scale = minScale;
                zoom = scale / this.scale;
            }
            if (scale > maxScale) {
                scale = maxScale;
                zoom = scale / this.scale;
            }

            if (this.scaleAutoClose)
                this._updateTransparency();

            return { zoom, scale }
        }

        _updateTransparency() {
            if (this.scale < this.minScale + this.scaleCloseThreshold) {
                let transparency = this.calculateScaleTransparency();
                this.element.style.opacity = transparency;
            } else this.element.style.opacity = 1;
        }

        calculateScaleTransparency() {
            let transparency = (this.scale - this.minScale) / this.scaleCloseThreshold;
            transparency = (transparency > 1) ? 1 : (transparency < 0) ? 0 : transparency;
            return transparency
        }

        resizeAfterTransform(zoom) {
            // Overwrite this in subclasses.
        }

        validScale(scale) {
            scale = Math.max(scale, this.minScale);
            scale = Math.min(scale, this.maxScale);
            return scale
        }

        animateZoomBounce(dt = 1) {
            if (this.zoomAnchor != null) {
                let zoom = 1;
                let amount = Math.min(0.01, 0.3 * dt / 100000.0);
                if (this.scale < this.minScale) zoom = 1 + amount;
                if (this.scale > this.maxScale) zoom = 1 - amount;
                if (zoom != 1) {
                    this.transform({ x: 0, y: 0 }, zoom, 0, this.zoomAnchor);
                    requestAnimationFrame(dt => {
                        this.animateZoomBounce(dt);
                    });
                    return
                }
                this.zoomAnchor = null;
            }
        }

        checkScaling(about, delay = 0) {
            this.zoomAnchor = about;
            clearTimeout(this.animateZoomBounce.bind(this));
            setTimeout(this.animateZoomBounce.bind(this), delay);
        }

        onMouseWheel(event) {
            if (event.claimedByScatter) {
                if (event.claimedByScatter != this) return
            }
            this.killAnimation();
            this.targetScale = null;
            let direction = event.detail < 0 || event.wheelDelta > 0;
            let globalPoint = { x: event.clientX, y: event.clientY };
            let centerPoint = this.mapPositionToContainerPoint(globalPoint);
            if (event.shiftKey) {
                let degrees = direction ? 5 : -5;
                let rad = Angle.degree2radian(degrees);
                return this.transform({ x: 0, y: 0 }, 1.0, rad, centerPoint)
            }
            const zoomFactor = this.mouseZoomFactor;
            let zoom = direction ? zoomFactor : 1 / zoomFactor;
            this.transform({ x: 0, y: 0 }, zoom, 0, centerPoint);
            this.checkScaling(centerPoint, 200);

            if (this.scaleAutoClose) {
                if (this.scale <= this.minScale + this.scaleCloseThreshold) {

                    if (this.scaleAutoCloseTimeout) clearTimeout(this.scaleAutoCloseTimeout);
                    this.scaleAutoCloseTimeout = setTimeout(() => {
                        this._checkAutoClose();
                    }, 600);
                }
                this._updateTransparency();
            }
            //
            //         if (this.onTransform != null) {
            //             let event = new ScatterEvent(this, {
            //                 translate: {x: 0, y: 0},
            //                 scale: this.scale,
            //                 rotate: 0,
            //                 about: null,
            //                 fast: false,
            //                 type: ZOOM
            //             })
            //             this.onTransform.forEach(function(f) {
            //                 f(event)
            //             })
            //         }
        }

        onStart(event, interaction) {

            if (this.startGesture(interaction)) {
                this.dragging = true;
                this.interactionAnchor = null;
            }
            if (this.onTransform != null) {
                let event = new ScatterEvent(this, {
                    translate: { x: 0, y: 0 },
                    scale: this.scale,
                    rotate: 0,
                    about: null,
                    fast: false,
                    type: START
                });
                this.onTransform.forEach(function (f) {
                    f(event);
                });
            }
        }

        onMove(event, interaction) {
            /** As long as mouseout && mouseleave interrupt we cannot be sure that
             * dragging remains correct.
             */
            if (this.dragging) {
                this.gesture(interaction);
            }
        }

        onEnd(event, interaction) {
            //console.log("Scatter.onEnd", this.dragging)
            if (interaction.isFinished()) {
                this.endGesture(interaction);
                this.dragging = false;
                for (let key of interaction.ended.keys()) {
                    if (interaction.isTap(key)) {
                        let point = interaction.ended.get(key);
                        this.onTap(event, interaction, point);
                    }
                }
                if (this.onTransform != null) {
                    let event = new ScatterEvent(this, {
                        translate: { x: 0, y: 0 },
                        scale: this.scale,
                        rotate: 0,
                        about: null,
                        fast: false,
                        type: END
                    });
                    this.onTransform.forEach(function (f) {
                        f(event);
                    });
                }
            }
            let about = this.interactionAnchor;
            if (about != null) {
                this.checkScaling(about, 100);
            }
        }

        onTap(event, interaction, point) { }

        onDragUpdate(delta) {
            if (this.onTransform != null) {
                let event = new ScatterEvent(this, {
                    fast: true,
                    translate: delta,
                    scale: this.scale,
                    about: this.currentAbout,
                    type: null
                });
                this.onTransform.forEach(function (f) {
                    f(event);
                });
            }
        }

        onDragComplete() {
            if (this.onTransform) {
                let event = new ScatterEvent(this, {
                    scale: this.scale,
                    about: this.currentAbout,
                    fast: false,
                    type: null
                });
                this.onTransform.forEach(function (f) {
                    f(event);
                });
            }
        }

        onMoved(dx, dy, about) {
            if (this.onTransform != null) {
                let event = new ScatterEvent(this, {
                    translate: { x: dx, y: dy },
                    about: about,
                    fast: true,
                    type: null
                });
                this.onTransform.forEach(function (f) {
                    f(event);
                });
            }
        }

        onResizing() {
            if (this.onTransform != null) {
                let event = new ScatterEvent(this, {
                    scale: this.scale,
                    fast: false,
                    type: null
                });
                this.onTransform.forEach(function (f) {
                    f(event);
                });
            }
        }

        onZoomed(about) {

            if (this.scaleAutoClose)
                this._updateTransparency();

            if (this.onTransform != null) {
                let event = new ScatterEvent(this, {
                    scale: this.scale,
                    about: about,
                    fast: false,
                    type: null
                });
                this.onTransform.forEach(function (f) {
                    f(event);
                });
            }
        }
    }


    class DOMScatter extends AbstractScatter {
        constructor(
            element,
            container,
            {
                startScale = 1.0,
                minScale = 0.1,
                maxScale = 1.0,
                overdoScaling = 1.5,
                autoBringToFront = true,
                translatable = true,
                scalable = true,
                rotatable = true,
                movableX = true,
                movableY = true,
                rotationDegrees = null,
                rotation = null,
                onTransform = null,
                transformOrigin = 'center center',
                // extras which are in part needed
                x = 0,
                y = 0,
                width = null, // required
                height = null,  // required
                resizable = false,
                simulateClick = false,
                verbose = true,
                onResize = null,
                touchAction = 'none',
                throwVisibility = 44,
                throwDamping = 0.95,
                autoThrow = true,
                scaleAutoClose = false,
                onClose = null,
                scaleCloseThreshold = 0.10,
                scaleCloseBuffer = 0.05
            } = {}
        ) {
            super({
                minScale,
                maxScale,
                startScale,
                overdoScaling,
                autoBringToFront,
                translatable,
                scalable,
                rotatable,
                movableX,
                movableY,
                resizable,
                rotationDegrees,
                rotation,
                onTransform,
                throwVisibility,
                throwDamping,
                autoThrow,
                scaleAutoClose,
                scaleCloseThreshold,
                scaleCloseBuffer,
                onClose
            });
            if (container == null || width == null || height == null) {
                throw new Error('Invalid value: null')
            }
            element.scatter = this;
            this.element = element;
            this.x = x;
            this.y = y;
            this.oldX = 0;
            this.oldY = 0;
            this.meanX = x;
            this.meanY = y;
            this.width = width;
            this.height = height;
            this.throwVisibility = Math.min(width, height, throwVisibility);
            this.container = container;
            this.simulateClick = simulateClick;
            this.scale = startScale;
            this.rotationDegrees = this.startRotationDegrees;
            this.transformOrigin = transformOrigin;
            this.initialValues = {
                x: x,
                y: y,
                width: width,
                height: height,
                scale: startScale,
                rotation: this.startRotationDegrees,
                transformOrigin: transformOrigin
            };


            // For tweenlite we need initial values in _gsTransform
            TweenLite.set(element, this.initialValues);
            this.onResize = onResize;
            this.verbose = verbose;
            if (touchAction !== null) {
                Elements$1.setStyle(element, { touchAction });
            }
            this.resizeButton = null;
            if (resizable) {
                let button = document.createElement("div");
                button.style.position = "absolute";
                button.style.right = "0px";
                button.style.bottom = "0px";
                button.style.width = "50px";
                button.style.height = "50px";
                // button.style.borderRadius = "100% 0px 0px 0px";
                // button.style.background = this.element.style.backgroundColor
                button.className = "interactiveElement";
                this.element.appendChild(button);

                button.addEventListener('pointerdown', (e) => {
                    this.startResize(e);
                });

                button.addEventListener('pointermove', (e) => {
                    this.resize(e);
                });

                button.addEventListener('pointerup', (e) => {
                    this.stopResize(e);
                });
                this.resizeButton = button;
            }
            container.add(this);
        }

        /** Returns geometry data as object. **/
        getState() {
            return {
                scale: this.scale,
                x: this.x,
                y: this.y,
                rotation: this.rotation
            }
        }

        close() {
            super.close();
            let parent = this.element.parentNode;
            if (parent) parent.removeChild(this.element);
        }

        get rotationOrigin() {
            return this.center
        }

        get x() {
            return this._x
        }

        get y() {
            return this._y
        }

        set x(value) {
            this._x = value;
            TweenLite.set(this.element, { x: value });
        }

        set y(value) {
            this._y = value;
            TweenLite.set(this.element, { y: value });
        }

        get position() {
            let transform = this.element._gsTransform;
            let x = transform.x;
            let y = transform.y;
            return { x, y }
        }

        get origin() {
            let p = this.fromNodeToPage(0, 0);
            return Points.fromPageToNode(this.container.element, p)
        }

        get bounds() {
            let stage = this.container.element.getBoundingClientRect();
            let rect = this.element.getBoundingClientRect();
            return {
                top: rect.top - stage.top,
                left: rect.left - stage.left,
                width: rect.width,
                height: rect.height
            }
        }

        get center() {
            let r = this.bounds;
            let w2 = r.width / 2;
            let h2 = r.height / 2;
            //   if (this.resizable) {
            //             w2 *= this.scale
            //             h2 *= this.scale
            //         }
            var x = r.left + w2;
            var y = r.top + h2;
            return { x, y }
        }

        set rotation(radians) {
            let rad = radians; // Angle.normalize(radians)
            let degrees = Angle.radian2degree(rad);
            TweenLite.set(this.element, { rotation: degrees });
            this._rotation = rad;
        }

        set rotationDegrees(degrees) {
            let deg = degrees; // Angle.normalizeDegree(degrees)
            TweenLite.set(this.element, { rotation: deg });
            this._rotation = Angle.degree2radian(deg);
        }

        get rotation() {
            return this._rotation
        }

        get rotationDegrees() {
            return this._rotation
        }

        set scale(scale) {
            TweenLite.set(this.element, {
                scale: scale,
                transformOrigin: this.transformOrigin
            });
            this._scale = scale;
        }

        get scale() {
            return this._scale
        }

        get containerBounds() {
            return this.container.bounds
        }

        get containerPolygon() {
            return this.container.polygon
        }

        mapPositionToContainerPoint(point) {
            return this.container.mapPositionToPoint(point)
        }

        capture(event) {
            return true
        }

        reset() {
            TweenLite.set(this.element, this.initialValues);
        }

        hide() {
            TweenLite.to(this.element, 0.1, {
                display: 'none',
                onComplete: e => {
                    this.element.parentNode.removeChild(this.element);
                }
            });
        }

        show() {
            TweenLite.set(this.element, { display: 'block' });
        }

        showAt(p, rotationDegrees) {
            TweenLite.set(this.element, {
                display: 'block',
                x: p.x,
                y: p.y,
                rotation: rotationDegrees,
                transformOrigin: this.transformOrigin
            });
        }

        bringToFront() {
            // this.element.parentNode.appendChild(this.element)
            // uo: On Chome and Electon appendChild leads to flicker
            TweenLite.set(this.element, { zIndex: DOMScatter.zIndex++ });
        }

        toggleVideo(element) {
            if (element.paused) {
                element.play();
            } else {
                element.pause();
            }
        }

        onTap(event, interaction, point) {
            if (this.simulateClick) {
                let p = Points.fromPageToNode(this.element, point);
                let iframe = this.element.querySelector('iframe');
                if (iframe) {
                    let doc = iframe.contentWindow.document;
                    let element = doc.elementFromPoint(p.x, p.y);
                    if (element == null) {
                        return
                    }
                    switch (element.tagName) {
                        case 'VIDEO':
                            console.log(element.currentSrc);
                            if (PopupMenu) {
                                PopupMenu.open(
                                    {
                                        Fullscreen: () =>
                                            window.open(element.currentSrc),
                                        Play: () => element.play()
                                    },
                                    { x, y }
                                );
                            } else {
                                this.toggleVideo(element);
                            }
                            break
                        default:
                            element.click();
                    }
                }
            }
        }

        isDescendant(parent, child) {
            let node = child.parentNode;
            while (node != null) {
                if (node == parent) {
                    return true
                }
                node = node.parentNode;
            }
            return false
        }

        fromPageToNode(x, y) {
            return Points.fromPageToNode(this.element, { x, y })
        }

        fromNodeToPage(x, y) {
            return Points.fromNodeToPage(this.element, { x, y })
        }

        _move(delta) {
            // UO: We need to keep TweenLite's _gsTransform and the private
            // _x and _y attributes aligned
            let x = this.element._gsTransform.x;
            let y = this.element._gsTransform.y;
            if (this.movableX) {
                x += delta.x;
            }
            if (this.movableY) {
                y += delta.y;
            }
            this._x = x;
            this._y = y;
            TweenLite.set(this.element, { x: x, y: y });
        }

        resizeAfterTransform(zoom) {
            //  let w = this.width * this.scale
            //         let h = this.height * this.scale
            //         TweenLite.set(this.element, { width: w, height: h })
            if (this.onResize) {
                let event = new ResizeEvent(this, { width: w, height: h });
                this.onResize(event);
            }
            if (this.resizeButton != null) ;
        }

        startResize(e) {
            e.preventDefault();
            let event = new CustomEvent('resizeStarted');

            let oldPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
            this.bringToFront();

            this.element.style.transformOrigin = "0% 0%";

            let newPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};

            let offset = Points.subtract(oldPostition, newPostition);

            this.oldX = e.clientX;
            this.oldY = e.clientY;

            e.target.setAttribute('resizing', "true");
            e.target.setPointerCapture(e.pointerId);

            TweenLite.to(this.element, 0, { css: { left: "+=" + offset.x + "px" } });
            TweenLite.to(this.element, 0, { css: { top: "+=" + offset.y + "px" } });

            this.element.dispatchEvent(event);
        }

        resize(e) {
            e.preventDefault();

            let rotation = Angle.radian2degree(this.rotation);
            rotation = (rotation + 360) % 360;
            let event = new CustomEvent('resized');
            if (e.target.getAttribute('resizing') == "true") {

                let deltaX = (e.clientX - this.oldX);
                let deltaY = (e.clientY - this.oldY);

                let r = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));
                let phi = Angle.radian2degree(Math.atan2(deltaX, deltaY));

                phi = ((phi) + 630) % 360;
                let rot = ((rotation + 90) + 630) % 360;

                let diffAngle = ((0 + rot) + 360) % 360;
                let phiCorrected = (phi + diffAngle + 360) % 360;

                let resizeW = r * Math.cos(Angle.degree2radian(phiCorrected));
                let resizeH = -r * Math.sin(Angle.degree2radian(phiCorrected));

                if (this.element.offsetWidth + resizeW / this.scale > this.width * 0.3 && this.element.offsetHeight + resizeH / this.scale > this.height * 0.3) TweenLite.to(this.element, 0, { width: this.element.offsetWidth + resizeW / this.scale, height: this.element.offsetHeight + resizeH / this.scale });

                this.oldX = e.clientX;
                this.oldY = e.clientY;
                this.onResizing();

                this.element.dispatchEvent(event);
            }
        }

        stopResize(e) {
            e.preventDefault();

            let event = new CustomEvent('resizeEnded');
            let oldPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
            this.element.style.transformOrigin = "50% 50%";
            let newPostition = {x: this.element.getBoundingClientRect().left, y: this.element.getBoundingClientRect().top};
            let offset = Points.subtract(oldPostition, newPostition);

            TweenLite.to(this.element, 0, { css: { left: "+=" + offset.x + "px" } });
            TweenLite.to(this.element, 0, { css: { top: "+=" + offset.y + "px" } });

            e.target.setAttribute('resizing', "false");

            this.element.dispatchEvent(event);
        }
    }

    DOMScatter.zIndex = 1000;

    class CardLoader {
        constructor(
            src,
            {
                x = 0,
                y = 0,
                width = 1000,
                height = 800,
                maxWidth = null,
                maxHeight = null,
                scale = 1,
                minScale = 0.5,
                maxScale = 1.5,
                rotation = 0
            } = {}
        ) {
            this.src = src;
            this.x = x;
            this.y = y;
            this.scale = scale;
            this.rotation = 0;
            this.maxScale = maxScale;
            this.minScale = minScale;
            this.wantedWidth = width;
            this.wantedHeight = height;
            this.maxWidth = maxWidth != null ? maxWidth : window.innerWidth;
            this.maxHeight = maxHeight != null ? maxHeight : window.innerHeight;
            this.addedNode = null;
            console.log({
             
                width,
                height,
                maxWidth,
                maxHeight,
               
            });
        }

        unload() {
            if (this.addedNode) {
                this.addedNode.remove();
                this.addedNode = null;
            }
        }
    }

    class DOMFlip {
        constructor(
            domScatterContainer,
            flipTemplate,
            frontLoader,
            backLoader,
            {
                closeOnMinScale = false,
                flipDuration = 1,
                fadeDuration = 0.2,
                overdoScaling = 1,
                autoLoad = false,
                center = null,
                preloadBack = false,
                translatable = true,
                scalable = true,
                rotatable = true,
                onFront = null,
                onBack = null,
                onClose = null,
                onUpdate = null,
                onRemoved = null,
                onLoaded = null
            } = {}
        ) {
            this.domScatterContainer = domScatterContainer;
            this.id = getId();
            this.flipDuration = flipDuration;
            this.fadeDuration = fadeDuration;
            this.closeOnMinScale = closeOnMinScale;
            this.flipTemplate = flipTemplate;
            this.frontLoader = frontLoader;
            this.backLoader = backLoader;
            this.translatable = translatable;
            this.scalable = scalable;
            this.rotatable = rotatable;
            this.onFrontFlipped = onFront;
            this.onBackFlipped = onBack;
            this.onClose = onClose;
            this.onRemoved = onRemoved;
            this.onUpdate = onUpdate;
            this.onLoaded = onLoaded;
            this.center = center;
            this.preloadBack = preloadBack;
            this.overdoScaling = overdoScaling;
            if (autoLoad) {
                this.load();
            }
        }

        load() {
            return new Promise((resolve, reject) => {
                let t = this.flipTemplate;
                let dom = this.domScatterContainer.element;
                let wrapper = t.content.querySelector('.flipWrapper');
                wrapper.id = this.id;
                let clone = document.importNode(t.content, true);
                dom.appendChild(clone);
                // We cannot use the document fragment itself because it
                // is not part of the main dom tree. After the appendChild
                // call we can access the new dom element by id
                this.cardWrapper = dom.querySelector('#' + this.id);
                let front = this.cardWrapper.querySelector('.front');
                this.frontLoader.load(front).then(loader => {
                    this.frontLoaded(loader).then((obj) => {
                        if (this.onLoaded) this.onLoaded();
                        resolve(this);
                    });
                });
            })
        }

        frontLoaded(loader) {
            return new Promise((resolve, reject) => {
                let scatter = new DOMScatter(
                    this.cardWrapper,
                    this.domScatterContainer,
                    {
                        x: loader.x,
                        y: loader.y,
                        startScale: loader.scale,
                        scale: loader.scale,
                        maxScale: loader.maxScale,
                        minScale: loader.minScale,
                        width: loader.wantedWidth,
                        height: loader.wantedHeight,
                        rotation: loader.rotation,
                        translatable: this.translatable,
                        scalable: this.scalable,
                        rotatable: this.rotatable,
                        overdoScaling: this.overdoScaling
                    }
                );

                if (this.center) {
                    scatter.centerAt(this.center);
                }

                if (this.closeOnMinScale) {

                    const removeOnMinScale = function () {
                        if (scatter.scale <= scatter.minScale) {
                            this.flippable.close();

                            // 'Disable' overdoscaling to avoid weird jumps on close.
                            scatter.minScale /= scatter.overdoScaling;
                            scatter.overdoScaling = 1;

                            //Remove callback
                            if (scatter.onTransform) {
                                let callbackIdx = scatter.onTransform.indexOf(removeOnMinScale);
                                scatter.onTransform.splice(callbackIdx, 1);
                            }
                        }

                    }.bind(this);



                    scatter.addTransformEventCallback(removeOnMinScale);
                }

                let flippable = new DOMFlippable(this.cardWrapper, scatter, this);
                let back = this.cardWrapper.querySelector('.back');

                if (this.preloadBack) {
                    this.backLoader.load(back).then(loader => {
                        this.setupFlippable(flippable, loader);
                    });
                }
                this.flippable = flippable;
                resolve(this);
            })
        }

        centerAt(p) {
            this.center = p;
            this.flippable.centerAt(p);
        }

        zoom(scale) {
            this.flippable.zoom(scale);
        }

        setupFlippable(flippable, loader) {
            flippable.wantedWidth = loader.wantedWidth;
            flippable.wantedHeight = loader.wantedHeight;
            flippable.wantedScale = loader.scale;
            flippable.minScale = loader.minScale;
            flippable.maxScale = loader.maxScale;
            flippable.scaleButtons();
        }

        start({ targetCenter = null } = {}) {
            console.log('DOMFlip.start', targetCenter);
            if (this.preloadBack) this.flippable.start({ duration: this.flipDuration, targetCenter });
            else {
                let back = this.cardWrapper.querySelector('.back');
                let flippable = this.flippable;
                this.backLoader.load(back).then(loader => {
                    this.setupFlippable(flippable, loader);
                    flippable.start({ duration: this.flipDuration, targetCenter });
                });
            }
        }

        fadeOutAndRemove() {
            TweenLite.to(this.cardWrapper, this.fadeDuration, {
                opacity: 0,
                onComplete: () => {
                    this.cardWrapper.remove();
                }
            });
        }

        closed() {
            this.unload();
        }

        unload() {
            if (!this.preloadBack) {
                this.backLoader.unload();
            }
        }
    }

    class DOMFlippable {
        constructor(element, scatter, flip) {
            // Set log to console.log or a custom log function
            // define data structures to store our touchpoints in

            this.element = element;
            this.flip = flip;
            this.card = element.querySelector('.flipCard');
            this.front = element.querySelector('.front');
            this.back = element.querySelector('.back');
            this.flipped = false;
            this.scatter = scatter;
            this.onFrontFlipped = flip.onFrontFlipped;
            this.onBackFlipped = flip.onBackFlipped;
            this.onClose = flip.onClose;
            this.onRemoved = flip.onRemoved;
            this.onUpdate = flip.onUpdate;

            this.flipDuration = flip.flipDuration;
            this.fadeDuration = flip.fadeDuration;
            scatter.addTransformEventCallback(this.scatterTransformed.bind(this));
            console.log('lib.DOMFlippable', 5000);
            TweenLite.set(this.element, { perspective: 5000 });
            TweenLite.set(this.card, { transformStyle: 'preserve-3d' });
            TweenLite.set(this.back, { rotationY: -180 });
            TweenLite.set([this.back, this.front], {
                backfaceVisibility: 'hidden',
                perspective: 5000
            });
            TweenLite.set(this.front, { visibility: 'visible' });
            this.infoBtn = element.querySelector('.infoBtn');
            this.backBtn = element.querySelector('.backBtn');
            this.closeBtn = element.querySelector('.closeBtn');
            /* Buttons are not guaranteed to exist. */
            if (this.infoBtn) {
                InteractionMapper$1.on('tap', this.infoBtn, event => this.flip.start());

                this.enable(this.infoBtn);
            }
            if (this.backBtn) {
                InteractionMapper$1.on('tap', this.backBtn, event => this.start());
            }
            if (this.closeBtn) {
                InteractionMapper$1.on('tap', this.closeBtn, event => this.close());
                this.enable(this.closeBtn);
            }
            this.scaleButtons();
            this.bringToFront();
        }

        close() {
            this.disable(this.infoBtn);
            this.disable(this.closeBtn);
            if (this.onClose) {
                this.onClose(this);
                this.flip.closed();
            } else {
                this.scatter.zoom(0.1, {
                    animate: this.fadeDuration,
                    onComplete: () => {
                        this.element.remove();
                        this.flip.closed();
                        if (this.onRemoved) {
                            this.onRemoved.call(this);
                        }
                    }
                });
            }
        }

        showFront() {
            TweenLite.set(this.front, { visibility: 'visible' });
        }

        centerAt(p) {
            this.scatter.centerAt(p);
        }

        zoom(scale) {
            this.scatter.zoom(scale);
        }

        get buttonScale() {
            let iscale = 1.0;

            if (this.scatter != null) {
                let scale = this.scatter.scale || 1;
                iscale = 1.0 / scale;
            }
            return iscale
        }

        scaleButtons() {
            //This also works for svgs.
            // if (this.infoBtn)
            //     this.infoBtn.style.transform = "scale(" + this.buttonScale + ")"

            // if (this.backBtn)
            //     this.backBtn.style.transform = "scale(" + this.buttonScale + ")"

            // if (this.closeBtn)
            //     this.closeBtn.style.transform = "scale(" + this.buttonScale + ")"

            console.log(this.buttonScale);
            //// This did not work with svgs!
            TweenLite.set([this.infoBtn, this.backBtn, this.closeBtn], {
                scale: this.buttonScale
            });
        }

        bringToFront() {
            this.scatter.bringToFront();
            TweenLite.set(this.element, { zIndex: DOMScatter.zIndex++ });
        }

        clickInfo() {
            this.bringToFront();
            this.infoBtn.click();
        }

        scatterTransformed(event) {
            this.scaleButtons();
        }

        targetRotation(alpha) {
            let ortho = 90;
            let rest = alpha % ortho;
            let delta = 0.0;
            if (rest > ortho / 2.0) {
                delta = ortho - rest;
            } else {
                delta = -rest;
            }
            return delta
        }

        infoValues(info) {
            let startX = this.element._gsTransform.x;
            let startY = this.element._gsTransform.y;
            let startAngle = this.element._gsTransform.rotation;
            let startScale = this.element._gsTransform.scaleX;
            let w = this.element.style.width;
            let h = this.element.style.height;
            console.log(info, startX, startY, startAngle, startScale, w, h);
        }

        show(element, duration = 0, alpha = 1) {
            if (element) {
                TweenLite.to(element, duration, { autoAlpha: alpha }); // visibility: 'visible', display: 'initial'})
            }
        }

        hide(element, duration = 0, alpha = 0) {
            if (element) {
                TweenLite.to(element, duration, { autoAlpha: alpha }); // {visibility: 'hidden', display: 'none'})
            }
        }



        enable(button) {
            this.show(button, this.fadeDuration);
            if (button) {
                TweenLite.set(button, { pointerEvents: 'auto' });
            }
        }

        disable(button) {
            this.hide(button, this.fadeDuration);
            if (button) {
                TweenLite.set(button, { pointerEvents: 'none' });
            }
        }

        start({ targetCenter = null } = {}) {
            this.bringToFront();
            if (!this.flipped) {
                this.startX = this.element._gsTransform.x;
                this.startY = this.element._gsTransform.y;
                this.startAngle = this.element._gsTransform.rotation;
                this.startScale = this.element._gsTransform.scaleX;
                this.startWidth = this.element.style.width;
                this.startHeight = this.element.style.height;
                this.scatterStartWidth = this.scatter.width;
                this.scatterStartHeight = this.scatter.height;
                this.show(this.back);
                this.disable(this.infoBtn);
                this.disable(this.closeBtn);
            } else {
                this.show(this.front, this.fadeDuration);
                this.disable(this.backBtn);
            }
            let { scalable, translatable, rotatable } = this.scatter;
            this.saved = { scalable, translatable, rotatable };
            this.scatter.scalable = false;
            this.scatter.translatable = false;
            this.scatter.rotatable = false;
            this.scatter.killAnimation();

            this.flipped = !this.flipped;
            let targetY = this.flipped ? 180 : 0;
            let targetZ = this.flipped
                ? this.startAngle + this.targetRotation(this.startAngle)
                : this.startAngle;
            let targetScale = this.flipped ? this.wantedScale : this.startScale;
            let w = this.flipped ? this.wantedWidth : this.startWidth;
            let h = this.flipped ? this.wantedHeight : this.startHeight;
            let dw = this.wantedWidth - this.scatter.width;
            let dh = this.wantedHeight - this.scatter.height;
            let tc = targetCenter;
            let xx = tc != null ? tc.x - w / 2 : this.startX - dw / 2;
            let yy = tc != null ? tc.y - h / 2 : this.startY - dh / 2;
            let x = this.flipped ? xx : this.startX;
            let y = this.flipped ? yy : this.startY;

            console.log("DOMFlippable.start", this.flipped, targetCenter, x, y, this.saved);
            let onUpdate = this.onUpdate !== null ? () => this.onUpdate(this) : null;
            console.log(this.flipDuration);
            TweenLite.to(this.card, this.flipDuration, {
                rotationY: targetY,
                ease: Power1.easeOut,
                transformOrigin: '50% 50%',
                onUpdate,
                onComplete: e => {
                    if (this.flipped) {
                        //this.hide(this.front)
                        this.enable(this.backBtn);
                        this.show(this.backBtn);

                        if (this.onFrontFlipped) {
                            this.onFrontFlipped(this);
                        }
                    } else {

                        if (this.onBackFlipped == null) {
                            this.enable(this.infoBtn, this.fadeDuration);
                            this.enable(this.closeBtn, this.fadeDuration);
                        } else {
                            this.onBackFlipped(this);
                        }
                        this.flip.unload();
                    }
                    this.scatter.scale = targetScale;
                    this.scaleButtons();
                    this.scatter.rotationDegrees = targetZ;
                    this.scatter.width = this.flipped ? w : this.scatterStartWidth;
                    this.scatter.height = this.flipped ? h : this.scatterStartHeight;

                    let { scalable, translatable, rotatable } = this.saved;
                    this.scatter.scalable = scalable;
                    this.scatter.translatable = translatable;
                    this.scatter.rotatable = rotatable;
                },
                force3D: true
            });

            // See https://greensock.com/forums/topic/7997-rotate-the-shortest-way/
            TweenLite.to(this.element, this.flipDuration / 2, {
                scale: targetScale,
                ease: Power1.easeOut,
                rotationZ: targetZ + '_short',
                transformOrigin: '50% 50%',
                width: w,
                height: h,
                x: x,
                y: y,
                onComplete: e => {
                    if (this.flipped) {
                        this.hide(this.front);
                        // this.hide(this.infoBtn)
                    } else {
                        this.hide(this.back);
                        // this.show(this.infoBtn)
                    }
                }
            });
        }
    }

    const deepZoomTileCache = new Map();


    /** The current Tile implementation simply uses PIXI.Sprites.
     *
     * BTW: PIXI.extras.TilingSprite is not appropriate. It should be used for
     * repeating patterns.
     **/
    class Tile extends PIXI.Sprite {
        constructor(texture, url) {
            super(texture);
            this.url = url;
            this.register(url);
        }

        static fromImage(imageId, crossorigin, scaleMode) {
            return new Tile(PIXI.Texture.fromImage(imageId, crossorigin, scaleMode), imageId)
        }

        /**
         * Registers the tile in the global reference counter for textures
         *
         * @param {*} url
         * @param {boolean} [debug=false]
         * @memberof Tile
         */
        register(url, debug = false) {
            if (deepZoomTileCache.has(url)) {
                let tiles = deepZoomTileCache.get(url);
                tiles.add(this);
                if (debug) console.log("Tile.register", url, tiles.size);
            }
            else {
                deepZoomTileCache.set(url, new Set([this]));
                if (debug) console.log("Tile.register", url, 1);
            }
        }

        /**
         * Unregisters the rile in the global reference counter for textures
         *
         * @returns {number} The number of how often a texture is used.
         * @memberof Tile
         */
        unregister() {
            let tiles = deepZoomTileCache.get(this.url);
            tiles.delete(this);
            if (tiles.size == 0) {
                deepZoomTileCache.delete(this.url);
            }
            return tiles.size
        }

        /**
         * Destroys this sprite and optionally its texture and children
         *
         * @param {*} options  Part of the PIXI API, but ignored in the implementation
         * @memberof Tile
         */
        destroy(options, debug = false) {
            if (this.parent != null) ;
            let count = this.unregister();
            if (count <= 0) {
                let opts = { children: true, texture: true, baseTexture: true };
                super.destroy(opts);
                if (debug) console.log("Tile.destroy", deepZoomTileCache.size, opts);
            }
            else {
                let opts = { children: true, texture: false, baseTexture: false };
                if (debug) console.log("Tile.destroy", deepZoomTileCache.size, opts);
                super.destroy(opts);
            }
        }
    }

    /**
     * A Tile Loader component that can be plugged into a Tiles Layer.
     */
    class TileLoader {
        constructor(tiles) {
            this.debug = false;
            this.tiles = tiles;
            this.setup();
        }

        /** Setup collections and instance vars. */
        setup() {
            this.map = new Map(); // Map {url : [ col, row]}
            this.loading = new Set(); // Set url
            this.loaded = new Map(); // Map {url : sprite }
            this.loadQueue = [];
        }

        /** Schedules a tile url for loading. The loading itself must be triggered
        by a call to loadOneTile or loadAll

        * @param {String} url - the url of the texture / tile
        * @param {Number} col - the tile col
        * @param {Number} row - the tile row
        **/
        schedule(url, col, row) {
            if (this.loaded.has(url)) return false
            if (this.loading.has(url)) return false
            this.map.set(url, [col, row]);
            this.loading.add(url);
            this.loadQueue.push(url);
            return true
        }

        unschedule(url) {
            if (this.loaded.has(url)) this.loaded.delete(url);
            if (this.loading.has(url)) this.loading.delete(url);
            this.loadQueue = this.loadQueue.filter(item => item != url);
        }

        /** Cancels loading by clearing the load queue **/
        cancel() {
            this.loadQueue = [];
            this.loading.clear();
        }

        /** Destroys alls collections. **/
        destroy() {
            this.setup();
        }

        /** Private method. Informs the tile layer about a texture for a given url.
         * Creates the sprite for the loaded texture and informs the tile layer.
         * @param {String} url - the url
         * @param {Object} texture - the loaded resource
         **/
        _textureAvailable(url, col, row, texture) {
            let tile = this.loaded.get(url);
            if (tile != null) {
                console.warn("Tile already loaded");
                tile.unregister();
            }
            tile = new Tile(texture, url);
            this.loaded.set(url, tile);
            this.tiles.tileAvailable(tile, col, row, url);
        }
    }

    /**
     * Uses the PIXI Loader but can be replaced with othe loaders implementing
     * the public methods without underscore.
     * Calls the Tiles.tileAvailable method if the texture is available.
     **/
    class PIXITileLoader extends TileLoader {

        constructor(tiles, compression) {
            super(tiles);
            this.destroyed = false;
            this.loader = new PIXI.loaders.Loader();
            this.loader.on('load', this._onLoaded.bind(this));
            this.loader.on('error', this._onError.bind(this));
            if (compression) {
                this.loader.pre(PIXI.compressedTextures.imageParser());
            }
        }

        schedule(url, col, row) {
            // Overwritten schedule to avoid BaseTexture and Texture already loaded errors.
            if (this.loaded.has(url)) return false
            if (this.loading.has(url)) return false

            if (deepZoomTileCache.has(url)) {
                let tiles = deepZoomTileCache.get(url);
                for (let tile of tiles.values()) {
                    //console.log("Reusing cached texture", tile.parent)
                    let texture = tile.texture;
                    this._textureAvailable(url, col, row, texture);
                    return false
                }
            }
            
            let texture = PIXI.utils.TextureCache[url];
            if (texture) {
                if (this.debug) console.log('Texture already loaded', texture);
                this._textureAvailable(url, col, row, texture);
                return false
            }
            let base = PIXI.utils.BaseTextureCache[url];
            if (base) {
                if (this.debug) console.log('BaseTexture already loaded', base);
                let texture = new PIXI.Texture(base);
                this._textureAvailable(url, col, row, texture);
                return false
            }
            return super.schedule(url, col, row)
        }

        /** Load one and only one of the scheduled tiles **/
        loadOneTile() {
            if (this.destroyed)
                return
            this._loadOneTile();
        }

        /** Load all scheduled tiles **/
        loadAll() {
            if (this.destroyed)
                return
            this._loadAllTiles();
        }

        /** Destroys the loader completly **/
        destroy() {
            this.destroyed = true;
            super.destroy();
            try {
                this.loader.reset();
            } catch (error) {
                console.warn("Error while resetting loader", error);
            }
        }

        _onError(loader, error) {
            console.warn('Cannot load', error);
        }

        /** Private method. Called by the PIXI loader after each successfull
         * loading of a single tile.
         * Creates the sprite for the loaded texture and informs the tile layer.
         * @param {Object} loader - the loader instance
         * @param {Object} resource - the loaded resource with url and texture attr
         **/
        _onLoaded(loader, resource) {
            if (this.destroyed) {
                let texture = resource.texture;
                let destroyBase = !deepZoomTileCache.has(resource.url);
                texture.destroy(destroyBase);
                console.warn("Received resource after destroy", texture);
                return
            }
            try {
                let [col, row] = this.map.get(resource.url);
                this._textureAvailable(resource.url, col, row, resource.texture);
            }
            catch (err) {
                console.warn("Texture unavailable: " + err.message);
            }
        }

        /** Private method: loads one tile from the queue. **/
        _loadOneTile(retry = 1) {
            //console.log("_loadOneTile")
            if (this.destroyed) {
                //console.warn("_loadOneTile after destroy")
                return
            }
            if (this.loader.loading) {
                setTimeout(() => {
                    this._loadOneTile();
                }, retry);
                return
            }
            if (this.loadQueue.length > 0) {
                let url = this.loadQueue.pop();
                this.loader.add(url, url);
                this.loader.load();
            }
        }

        /** Private method: loads all tiles from the queue in batches. Batches are
        helpfull to avoid loading tiles that are no longer needed because the
        user has already zoomed to a different level.**/
        _loadAllTiles(batchSize = 8, retry = 16) {
            if (this.destroyed) {
                return
            }
            if (this.loadQueue.length > 0) {
                if (this.loader.loading) {
                    //console.log("Loader busy", this.loadQueue.length)
                    setTimeout(() => {
                        this._loadAllTiles();
                    }, retry);
                    return
                }
                let i = 0;
                let urls = [];
                while (i < batchSize && this.loadQueue.length > 0) {
                    let url = this.loadQueue.pop();
                    if (!this.loaded.has(url)) {
                        let resource = this.loader.resources[url];
                        if (resource) {
                            console.log("Resource already added", url);
                        }
                        else {
                            urls.push(url);
                            i += 1;
                        }
                    }
                }
                this.loader.add(urls).load(() => {
                    this._loadAllTiles();
                });
            }
        }
    }


    /**
     * Uses Workers but can be replaced with other loaders implementing
     * the public methods without underscore.
     * Calls the Tiles.tileAvailable method if the texture is available.
     **/
    class WorkerTileLoader extends TileLoader {

        constructor(tiles) {
            super(tiles);
            let worker = this.worker = new Worker("../../lib/pixi/deepzoom/tileloader.js");
            worker.onmessage = (event) => {
                if (event.data.success) {
                    let { url, col, row, buffer } = event.data;
                    //console.log("WorkerTileLoader.loaded", url, buffer)
                    let CompressedImage = PIXI.compressedTextures.CompressedImage;
                    let compressed = CompressedImage.loadFromArrayBuffer(buffer, url);
                    let base = new PIXI.BaseTexture(compressed);
                    let texture = new PIXI.Texture(base);
                    this._textureAvailable(url, col, row, texture);
                }
            };
        }

        loadOne() {
            if (this.loadQueue.length > 0) {
                let url = this.loadQueue.pop();
                let [col, row] = this.map.get(url);
                let tile = [col, row, url];
                this.worker.postMessage({ command: "load", tiles: [tile] });
            }
        }

        loadAll() {
            let tiles = [];
            while (this.loadQueue.length > 0) {
                let url = this.loadQueue.pop();
                let [col, row] = this.map.get(url);
                tiles.push([col, row, url]);
            }
            this.worker.postMessage({ command: "load", tiles });
        }

        cancel() {
            super.cancel();
            this.worker.postMessage({ command: "abort" });
        }

        destroy() {
            this.worker.postMessage({ command: "abort" });
            this.worker.terminate();
            this.worker = null;
            super.destroy();
        }
    }

    /**
     * A layer of tiles that represents a zoom level of a DeepZoomImage as a grid
     * of sprites.
     * @constructor
     * @param {number} level - the zoom level of the tile layer
     * @param {DeepZoomImage} view - the zoomable image the layer belongs to
     * @param {number} scale - the scale of the tile layer
     * @param {number} cols - the number of columns of the layer
     * @param {number} rows - the number of rows of the layer
     * @param {number} width - the width of the layer in pixel
     * @param {number} height - the height of the layer in pixel
     * @param {number} tileSize - the size of a single tile in pixel
     * @param {number} overlap - the overlap of the tiles in pixel
     * @param {number} fadeInTime - time needed to fade in tiles if TweenLite is set
     **/
    class Tiles extends PIXI.Container {
        constructor(
            level,
            view,
            scale,
            cols,
            rows,
            width,
            height,
            tileSize,
            overlap,
            fadeInTime = 0.33
        ) {
            super();
            this.debug = false;
            this.showGrid = false;
            this.view = view;
            this.level = level;
            this.cols = cols;
            this.rows = rows;
            this.pixelWidth = width;
            this.pixelHeight = height;
            this.tileSize = tileSize;
            this.overlap = overlap;
            this.needed = new Map(); // url as key, [col, row] as value
            this.requested = new Set();
            this.available = new Map();
            this.scale.set(scale, scale);
            this.tileScale = scale;
            this.fadeInTime = fadeInTime;
            this.keep = false;
            if (this.view.preferWorker && view.info.compression.length > 0)
                this.loader = new WorkerTileLoader(this);
            else
                this.loader = new PIXITileLoader(this, view.info.compression);
            this.interactive = false;
            this._highlight = null;

            this._info = null;

            this._centerPoint = null;
            this._boundsRect = null;

            this.infoColor = Colors.random();
            this.pprint();
            this.destroyed = false;
        }



        /** Tests whether all tiles are loaded. **/
        isComplete() {
            return this.cols * this.rows === this.children.length
        }

        /** Returns the highligh graphics layer for debugging purposes.
         **/
        get highlight() {
            if (this._highlight == null) {
                let graphics = new PIXI.Graphics();
                graphics.beginFill(0xffff00, 0.1);
                graphics.lineStyle(2, 0xffff00);
                graphics.drawRect(1, 1, this.tileSize - 2, this.tileSize - 2);
                graphics.endFill();
                graphics.interactive = false;
                this._highlight = graphics;
            }
            return this._highlight
        }

        /** Returns the highligh graphics layer for debugging purposes.
         **/
        get info() {
            if (this._info == null) {
                let graphics = new PIXI.Graphics();
                graphics.lineStyle(4, 0xff0000);
                graphics.interactive = false;
                this._info = graphics;
                this.addChild(this._info);
            }
            return this._info
        }

        /** Helper method pretty printing debug information. **/
        pprint() {
            if (this.debug)
                console.log(
                    'Tiles level: ' +
                    this.level +
                    ' scale: ' +
                    this.scale.x +
                    ' cols: ' +
                    this.cols +
                    ' rows: ' +
                    this.rows +
                    ' w: ' +
                    this.pixelWidth +
                    ' h: ' +
                    this.pixelHeight +
                    ' tsize:' +
                    this.tileSize
                );
        }

        /** Computes the tile position and obeys the overlap.
         * @param {number} col - The column of the tile
         * @param {number} row - The row of the tile
         * @returns {PIXI.Point} obj
         **/
        tilePosition(col, row) {
            let x = col * this.tileSize;
            let y = row * this.tileSize;
            let overlap = this.overlap;
            if (col != 0) {
                x -= overlap;
            }
            if (row != 0) {
                y -= overlap;
            }
            return new PIXI.Point(x, y)
        }

        /** Computes the tile size without overlap
         * @param {number} col - The column of the tile
         * @param {number} row - The row of the tile
         * @returns {PIXI.Point} obj
         **/
        tileDimensions(col, row) {
            let w = this.tileSize;
            let h = this.tileSize;
            let pos = this.tilePosition(col, row);
            if (col == this.cols - 1) {
                w = this.pixelWidth - pos.x;
            }
            if (row == this.rows - 1) {
                h = this.pixelHeight - pos.y;
            }
            return new PIXI.Point(w, h)
        }

        /** Method to support debugging. Highlights the specified tile at col, row **/
        highlightTile(col, row) {
            if (col > -1 && row > -1 && col < this.cols && row < this.rows) {
                let graphics = this.highlight;
                let dim = this.tileDimensions(col, row);
                graphics.position = this.tilePosition(col, row);
                graphics.clear();
                graphics.beginFill(0xff00ff, 0.1);
                graphics.lineStyle(2, 0xffff00);
                graphics.drawRect(1, 1, dim.x - 2, dim.y - 2);
                graphics.endFill();
                this.addChild(this.highlight);
            } else {
                this.removeChild(this.highlight);
            }
        }

        /** Loads the tiles for the given urls and adds the tiles as sprites.
         * @param {array} urlpos - An array of URL, pos pairs
         * @param {boolean} onlyone - Loads only on tile at a time if true
         **/
        loadTiles(urlpos, onlyone, refCol, refRow) {
            if (this.showGrid) {
                this.highlightTile(refCol, refRow);
            }
            urlpos.forEach(d => {
                let [url, col, row] = d;
                if (this.loader.schedule(url, col, row)) {
                    if (onlyone) {
                        return this.loader.loadOneTile()
                    }
                }
            });
            this.loader.loadAll();
        }

        /** Private method: add a red border to a tile for debugging purposes. **/
        _addTileBorder(tile, col, row) {
            let dim = this.tileDimensions(col, row);
            let graphics = new PIXI.Graphics();
            graphics.beginFill(0, 0);
            graphics.lineStyle(2, 0xff0000);
            graphics.drawRect(1, 1, dim.x - 2, dim.y - 2);
            graphics.endFill();
            tile.addChild(graphics);
        }

        /** Adds a tile. **/
        addTile(tile, col, row, url) {
            if (this.available.has(url)) {
                console.warn('Trying to add available tile');
                return
            }
            this.addChildAt(tile, 0);
            this.available.set(url, tile);
            if (this.destroyed) {
                console.warn('Adding to destroyed tiles layer');
            }
            // this._addTileBorder(tile, col, row)
        }

        /** Called by the loader after each successfull loading of a single tile.
         * Adds the sprite to the tile layer.
         * @param {Object} tile - the loaded tile sprite
         * @param {Number} col - the col position
         * @param {Number} row - the rowposition
         **/
        tileAvailable(tile, col, row, url) {
            let pos = this.tilePosition(col, row);
            if (this.showGrid) {
                this._addTileBorder(tile, col, row);
            }
            tile.position = pos;
            tile.interactive = false;
            if (TweenLite) {
                tile.alpha = 0;
                TweenLite.to(tile, this.fadeInTime, { alpha: this.alpha });
            }
            this.addTile(tile, col, row, url);
        }

        /** Destroys the tiles layer and destroys the loader. Async load calls are
         * cancelled.
         **/
        destroy() {
            this.destroyed = true;
            this.loader.destroy();
            super.destroy({ children: true }); // Calls destroyChildren
            this.available.clear();
            this.requested.clear();
            this.needed.clear();
        }

        destroyTile(url, tile) {
            this.loader.unschedule(url);
            this.removeChild(tile);
            tile.destroy();
            this.available.delete(url);
        }

        destroyTileByUrl(url) {
            if (this.available.has(url)) {
                let tile = this.available.get(url);
                this.destroyTile(url, tile);
            }
        }

        /* Destroys the tiles which are not with the bounds of the app to free
        * memory.
        **/
        destroyTiles(quadTrees) {
            let count = 0;
            for (let [url, tile] of this.available.entries()) {
                if (!quadTrees.has(url)) {
                    this.destroyTile(url, tile);
                    count += 1;
                }
            }
            if (count && this.debug)
                console.log('destroyTiles', this.level, count);
        }

        destroyUnneededTiles() {
            let count = 0;
            for (let [url, tile] of this.available.entries()) {
                if (!this.needed.has(url)) {
                    this.destroyTile(url, tile);
                    count += 1;
                }
            }
            if (count && this.debug)
                console.log('destroyUnneededTiles', this.level, count);
        }

        highlightInfos() {
            let graphics = this.info;
            let color = this.infoColor;
            graphics.clear();
            graphics.lineStyle(2, color);
            for (let [col, row] of this.needed.values()) {
                let dim = this.tileDimensions(col, row);
                let pos = this.tilePosition(col, row);
                graphics.beginFill(color, 0.2);
                graphics.drawRect(pos.x + 1, pos.y + 1, dim.x - 2, dim.y - 2);
                graphics.endFill();
            }
            let r = this._boundsRect;
            if (r != null) {
                graphics.lineStyle(20, color);
                graphics.drawRect(r.x, r.y, r.width, r.height);
                graphics.moveTo(r.x, r.y);
                graphics.lineTo(r.x + r.width, r.y + r.height);

                graphics.moveTo(r.x, r.y + r.height);
                graphics.lineTo(r.x + r.width, r.y);
            }

            let p = this._centerPoint;
            if (p != null) {
                graphics.drawCircle(p.x, p.y, 20);
            }
        }

        tintTiles(quadTrees) {
            for (let [url, tile] of this.available.entries()) {
                if (!quadTrees.has(url)) tile.tint = 0xff0000;
            }
        }

        untintTiles() {
            for (let [url, tile] of this.available.entries()) {
                tile.tint = 0xffffff;
            }
        }
    }

    function isEven(n) {
        return n % 2 == 0
    }


    function printTileCacheInfos() {
        let references = new Map();
        let multiples = 0;
        for (let [url, tiles] of deepZoomTileCache.entries()) {
            let count = tiles.size;
            references.set(url, count);
            if (count > 1) {
                multiples += 1;
            }
        }
        console.log({ multiples, references });
    }
    /**
     * A utility class that holds information typically provided by DZI files, i.e.
     * height and width of the overall image, overlap, and image type.
     *
     * @constructor
     * @param {obj} attrs - A JSON-Object holding the listed keys and values
     * @example
     *     {
     *         "tileSize": 1024,
     *         "format": "jpeg",
     *         "overlap": 1,
     *         "height": 4794,
     *         "width": 4095,
     *         "clip": { "minLevel": 12, "maxLevel": 20, "startCol": 301436, "startRow": 354060 },
     *                   // optional: minLevel and maxLevel define the level bounds
     *                   // startCol: first col at maxLevel
     *                   // startRow: first row at maxLevel
     *         "path": "var/Vermeer/Vermeer_files",
     *         "type": "dzi",  // optional: dzi (default) or map
     *         "urlTileTemplate": "{path}/{level}/{column}/{row}.{format}"
     *           // optional: {path}/{level}/{column}_{row}.{format} (default) or
     *           // a template String with the format of the URL
     *     }
     */
    class DeepZoomInfo {
        constructor(attrs) {
            for (let key in attrs) {
                this[key] = attrs[key];
            }
            this.maxLevel = 0; // The highest level number, typically corresponds to the
            // number in the file system for the folder with tiles
            this.clip = this.clip || null; // e.g. { level: 12, col: 301436, row: 354060 }
            this.type = this.type || 'dzi';
            this.urlTileTemplate =
                this.urlTileTemplate || '{path}/{level}/{column}_{row}.{format}';
            this.setupDimensions();
        }

        /* Computes the needed number of layers from the width and height
        *  of the image. Note that this includes the level 0, i.e. 0 ... 4
        * means that 5 levels exist.
        **/
        numLevels() {
            let maxDimension = Math.max(this.width, this.height);
            let boundary = this.type === 'dzi' ? 1 : this.tileSize;
            let numLevels = 0;
            while (maxDimension >= boundary) {
                maxDimension /= 2;
                numLevels++;
            }
            return numLevels
        }

        /** Computes the scale at the given level.
         * @param {number} level - The level of the wanted layer
         * @returns {number} scale
         **/
        getScale(level) {
            let scale = 1;
            if (this.type === 'dzi') {
                scale = Math.pow(0.5, this.maxLevel - level + 1);
            } else {
                scale = Math.pow(0.5, this.maxLevel - level);
            }
            return scale
        }

        /** Computes the scaled width and height of the given level.
         * @param {number} level - The level of the wanted layer
         * @returns {array} size - The width and height
         **/
        getDimensions(level) {
            let scale = this.getScale(level);
            let w = Math.ceil(this.width * scale);
            let h = Math.ceil(this.height * scale);
            return [w, h]
        }

        /** Computes the number of cols and rows of tiles.
         * @param {number} level - The level of the wanted layer
         * @returns {array} size - The cols and rows
         **/
        getNumTiles(level) {
            let dim = this.getDimensions(level);
            let cols = Math.ceil(dim[0] / this.tileSize);
            let rows = Math.ceil(dim[1] / this.tileSize);
            if (this.clip) {
                let rest = this.rests[level];
                if (rest) {
                    if (rest.restCol) {
                        cols += 1;
                    }
                    if (rest.restRows) {
                        rows += 1;
                    }
                }
            }
            return [cols, rows]
        }

        setupDimensions(loadBaseImage = false) {
            /** Setup instance variables and load the base image, i.e. the largest
            image that can be represented as a single tile.
            @private
            **/
            let ww = this.width;
            let hh = this.height;
            let scale = 1.0;
            let level = 0;
            let single = 0;
            const tsize = this.tileSize;

            if (this.clip) {
                this.baseLevel = this.clip.minLevel;
                this.maxLevel = this.clip.maxLevel;
                this.baseImage = null;
                this.size = this.getDimensions(this.baseLevel);
                this.offsets = {};
                this.rests = {};
                let startCol = this.clip.startCol;
                let startRow = this.clip.startRow;
                let floatStartCol = startCol;
                let floatStartRow = startRow;
                for (let i = this.maxLevel; i >= this.baseLevel; i--) {
                    this.offsets[i] = { startCol, startRow };
                    let restCol = floatStartCol % 1;
                    let restRow = floatStartRow % 1;
                    this.rests[i] = { restCol, restRow };
                    startCol = Math.floor(startCol / 2);
                    startRow = Math.floor(startRow / 2);
                    floatStartCol /= 2;
                    floatStartRow /= 2;
                }
            } else {
                const boundary = this.type === 'dzi' ? 1.0 : tsize;
                while (ww > boundary && hh > boundary) {
                    if (ww >= tsize && hh >= tsize) {
                        single += 1;
                    }
                    scale = scale / 2.0;
                    ww = Math.ceil(this.width * scale);
                    hh = Math.ceil(this.height * scale);
                    level += 1;
                }
                this.baseLevel = level - single;
                this.maxLevel = this.numLevels() - 1;
                this.baseURL = this.urlForTile(this.baseLevel, 0, 0, false);

                if (loadBaseImage) {
                    this.imageForURL(this.baseURL, e => {
                        this.size = [e.target.naturalWidth, e.target.naturalHeight];
                        this.baseImage = e.target;
                    });
                } else {
                    this.baseImage = null;
                    this.size = this.getDimensions(this.baseLevel);
                }
            }
        }

        get maxLoadableLevel() {
            if (this.clip) {
                return this.maxLevel
            }
            return this.type === 'dzi' ? this.maxLevel : this.maxLevel
        }

        /** Computes the url for the given level, column and and row.
         * @param {number} level - The level of the wanted layer
         * @param {number} column - The column of the tile
         * @param {number} row - The row of the tile
         * @returns {string} url
         **/
        urlForTile(level, column, row, compressed = true) {
            let format = this.format;
            if (compressed && this.compression) {
                let supported = Capabilities.isIOS ? 'pvr' : 'dds';
                if (this.compression.indexOf(supported) >= 0) {
                    format = supported;
                }
            }
            if (this.clip) {
                let offset = this.offsets[level];
                if (offset) {
                    let { startCol, startRow } = offset;
                    column += startCol;
                    row += startRow;
                }
            }
            let url = this.urlTileTemplate
                .replace(/\{path\}/g, this.path)
                .replace(/\{level\}/g, level)
                .replace(/\{row\}/g, row)
                .replace(/\{column\}/g, column)
                .replace(/\{format\}/g, format);
            return url
        }

        /** Loads the image for the given url and executes a callback function
        on completion.
        * @param {string} url - The url of the tile
        * @param {function} complete - The callback function
        * @returns {Image} obj
        **/
        imageForURL(url, complete) {
            let img = new Image();
            img.onload = complete.bind(this);
            img.src = url;
            return img
        }

        /** Computes the columns and rows as well as scaled width and height.
         * @param {number} level - The level of the wanted layer
         * @returns {array} [cols, rows, width, height]
         **/
        dimensions(level) {
            let dim = this.getDimensions(level);
            let tiles = this.getNumTiles(level);
            return [tiles[0], tiles[1], dim[0], dim[1]]
        }

        test() {
            //console.log("w=" + this.width + " h=" + this.height + " maxlevel=" + this.maxLevel + " base=" + this.baseLevel)
            for (let i = 0; i <= this.maxLevel; i++) {
                console.log(
                    ' ' +
                    i +
                    ' -> ' +
                    this.getScale(i) +
                    ' [' +
                    this.dimensions(i) +
                    ']'
                );
            }
            console.log(this.urlForTile(this.baseLevel, 0, 0));
        }
    }

    /**
     * A utility class that describes a quad tree of tiles. Each tile on a given
     * level has up to four corresponding tiles on the next level. A TileQuadNode
     * uses the attributes nw (i.e. northwest), ne, sw, se to link to the
     * quad nodes on the next level. The previous attributes links to the quad
     * one level below that holds the given quad as nw, ne, sw, or se.
     * We use this node class because we need a representation of tiles that are
     * needed but not loaded yet to compute tiles which can be abandoned to reduce
     * the memory pressure.
     *
     * @constructor
     * @param {level} Number - The level the quad node belongs to
     * @param {col} Number - The col of the quad
     * @param {row} Number - The level the quad node belongs to
     * @param {url} String - The level the quad node belongs to
     */
    class TileQuadNode {
        constructor(level, col, row, url) {
            this.level = level;
            this.col = col;
            this.row = row;
            this.url = url;
            this.nw = null;
            this.ne = null;
            this.sw = null;
            this.se = null;
            this.previous = null;
        }

        /** Return True if this node has no successors and can be used as
        an indicator of tiles to free.
        **/
        noQuads() {
            if (this.previous === null) return false
            return (
                this.nw === null &&
                this.ne === null &&
                this.sw === null &&
                this.se === null
            )
        }

        /** Unlink the given quad node

        * @param {node} TileQuadNode - The TileQuadNode to remove
        **/
        unlink(node) {
            if (this.nw === node) this.nw = null;
            if (this.ne === node) this.ne = null;
            if (this.sw === node) this.sw = null;
            if (this.se === node) this.se = null;
        }

        /** Link this quad node to the given previous node. Use the north
        * and west flags to address nw, ne, sw, and se.

        * @param {node} TileQuadNode - The TileQuadNode to remove
        * @param {north} Boolean - Link to north (true) or south (false)
        * @param {west} Boolean - Link to west (true) or east (false)
        **/
        link(north, west, previous) {
            this.previous = previous;
            if (north) {
                if (west) {
                    previous.nw = this;
                } else {
                    previous.ne = this;
                }
            } else {
                if (west) {
                    previous.sw = this;
                } else {
                    previous.se = this;
                }
            }
        }
    }


    /**
     * 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.

     * @constructor
     * @param {DeepZoomInfo} deepZoomInfo - Information extracted from a JSON-Object
     */
    class DeepZoomImage extends PIXI.Container {
        constructor(
            deepZoomInfo,
            {
                debug = false,
                shadow = false,
                center = false,
                world = null,               // Defines the world bounds the images lives in
                highResolution = true,
                autoLoadTiles = true,
                preferWorker = false,
                minimumLevel = 0,
                alpha = 1,
                app = window.app
            } = {}
        ) {
            super();
            this.app = app;
            this.debug = debug;
            this.shadow = shadow;
            this.world = world;
            this.preferWorker = preferWorker;
            this.resolution = highResolution
                ? Math.round(window.devicePixelRatio)
                : 1;
            this.alpha = alpha;
            this.fastLoads = 0;
            this.autoLoadTiles = autoLoadTiles;
            this.minimumLevel = minimumLevel;
            this.quadTrees = new Map(); // url as keys, TileQuadNodes as values
            this.setup(deepZoomInfo, center);
        }

        get point() {
            if (this._point == null) {
                let graphics = new PIXI.Graphics();
                graphics.lineStyle(2, 0x00ff00);
                graphics.drawCircle(0, 0, 2);
                graphics.interactive = false;
                this._point = graphics;
            }
            return this._point
        }

        /** Reads the DeepZoomInfo object and initializes all tile layers.
         * Called by the constructor.
         * Creates the sprite for the loaded texture and add the sprite to the tile
         * layer.
         * @param {Object} deepZoomInfo - the DeepZoomInfo instance
         * @param {boolean} center - If true ensures that the pivot is set to the center
         **/
        setup(deepZoomInfo, center) {
            this.info = deepZoomInfo;
            this.interactive = true;
            this.tileLayers = {};

            this._foreground = null;
            this.tileContainer = new PIXI.Container();
            this.tileContainer.interactive = false;

            let [w, h] = this.baseSize;
            if (this.shadow) {
                this.filters = [new PIXI.filters.DropShadowFilter(45, 3)];
            }
            this.addChild(this.tileContainer);

            if (deepZoomInfo.clip) {
                let mask = new PIXI.Graphics();
                mask.beginFill(1, 1);
                mask.drawRect(0, 0, w, h);
                mask.endFill();
                this.mask = mask;
                mask.alpha = 0;
                this.addChild(mask);
                this.minimumLevel = deepZoomInfo.baseLevel;
            }
            this.currentLevel = Math.max(this.minimumLevel, deepZoomInfo.baseLevel);
            console.log("autoLoadTiles", this.autoLoadTiles);
            if (this.autoLoadTiles) {
                this.setupTiles(center);
            }
        }

        /** Default setup method for tiles. Loads all tiles of the current level.
        Can be overwritten in subclasses.
        @param {boolean} center - If true ensures that the pivot is set to the center
        **/
        setupTiles(center = false) {
            // First load background tile
            let tiles = this.ensureAllTiles(this.currentLevel);
            if (center) {
                this.pivot.set(w / 2, h / 2);
            }
            let scaleLevel = this.levelForScale(1);
            this.ensureAllTiles(scaleLevel);
        }

        removeTileQuadNode(level, col, row, url) {
            if (this.quadTrees.has(url)) {
                let quad = this.quadTrees.get(url);
                this.tileQuadRemoved(quad);
                this.quadTrees.delete(url);
            }
        }

        addTileQuadNode(level, col, row, url) {
            if (this.quadTrees.has(url)) return this.quadTrees.get(url)
            let quad = new TileQuadNode(level, col, row, url);
            this.quadTrees.set(url, quad);
            this.tileQuadAdded(quad);
            return quad
        }

        tileQuadRemoved(quad) {
            let below = quad.previous;
            // if (this.debug) console.log("tileQuadRemoved", quad)
            if (below) {
                below.unlink(quad);
                if (below.noQuads()) {
                    if (this.debug) console.log('Removed tile below');
                    let levelBelow = quad.level - 1;
                    if (levelBelow < this.minimumLevel) return
                    let c = Math.floor(quad.col / 2);
                    let r = Math.floor(quad.row / 2);
                    let urlBelow = this.info.urlForTile(levelBelow, c, r);
                    if (this.quadTrees.has(urlBelow)) {
                        this.removeTileQuadNode(levelBelow, c, r, urlBelow);
                    }
                }
            }
        }

        tileQuadAdded(quad) {
            let levelBelow = quad.level - 1;
            if (levelBelow < this.minimumLevel) return
            //if (this.debug) console.log("tileQuadAdded", quad)
            let c = Math.floor(quad.col / 2);
            let r = Math.floor(quad.row / 2);
            let urlBelow = this.info.urlForTile(levelBelow, c, r);
            let below = null;
            if (!this.quadTrees.has(urlBelow)) {
                below = this.addTileQuadNode(levelBelow, c, r, urlBelow);
                quad.link(isEven(quad.row), isEven(quad.col), below);
            }
        }

        /** Returns the tile layer level that corresponds to the given scale.
         * @param {number} scale - the scale factor
         **/
        levelForScale(scale) {
            let level = Math.round(Math.log2(scale * this.resolution)); // Math.floor(Math.log2(event.scale))+1
            let newLevel = this.info.baseLevel + Math.max(level, 0);
            return Math.min(newLevel, this.info.maxLoadableLevel)
        }

        /** Returns the tile layer level that corresponds to the given scale.
         * @param {number} scale - the scale factor
         **/
        levelAndAlphaForScale(scale) {
            let value = Math.log2(scale * this.resolution);
            let level = Math.round(value);
            let newLevel = this.info.baseLevel + Math.max(level, 0);

            return { level: Math.min(newLevel, this.info.maxLoadableLevel), alpha: value - level }
        }

        /** Adds a tile layer to the DeepZoomImage.
         * @param {string} key - the access key
         * @param {Tiles} tiles - the tile layer object
         **/
        addTiles(key, tiles) {
            if (key in this.tileLayers) {
                console.warn('Tiles already availabl', key);
            }
            this.tileContainer.addChild(tiles);
            this.tileLayers[key] = tiles;
        }

        destroyTiles(key) {
            let tiles = this.tileLayers[key];
            this.tileContainer.removeChild(tiles);
            tiles.destroy();
            delete this.tileLayers[key];
        }

        /** Getter for PIXI.Container foreground layer.
         * Adds a PIXI.Container if necessary.
         **/
        get foreground() {
            if (this._foreground == null) {
                this._foreground = new PIXI.Container();
                this.addChild(this._foreground);
            }
            return this._foreground
        }

        /** Getter for the DeepZoomInfo base level size.
         **/
        get baseSize() {
            return this.info.getDimensions(this.info.baseLevel)
        }

        /** Getter for the current scaled size in pixels.
         **/
        get pixelSize() {
            let [w, h] = this.baseSize;
            return [w * this.scale.x, h * this.scale.y]
        }

        /** Getter for the max scale factor.
         **/
        get maxScale() {
            let delta = this.info.maxLevel - this.info.baseLevel;
            return Math.pow(2, delta) / this.resolution * 2
        }

        /** Getter for the current width.
         **/
        get width() {
            return this.pixelSize[0]
        }

        /** Getter for the current height.
         **/
        get height() {
            return this.pixelSize[1]
        }


        /* Overrides PIXI.Container.hitArea()
         * Allows to optimize the hit testing. Container with hit areas are directly
         * hit tested without consideration of children.
         */
        get hitArea() {
            // Defining the hitArea resulted hitting the scatter in masked area
            // when a mask was used (@Tüsch[submaps]). Removing the hitArea() altogether
            // broke the interaction in other projects (@googleart).
            // Fix: When masked, the hitArea is ignored by returning null.
            // TODO: test if childs are hittested, without setting interactiveChildren.
            // Opel, 03-05-2018
            if (this.mask) {
                return null
            }
            return this
        }

        /* Overrides PIXI.Container.contains()
         * Allows to optimize the hit testing.
         */
        contains(x, y) {
            let [w, h] = this.baseSize;
            return x >= 0 && x <= w && y >= 0 && y <= h
        }

        /** Overrides PIXI.Container._calculateBounds()
         * Only considers the base size and reduces the calculation to a single
         * rect.
         */
        _calculateBounds() {
            let [w, h] = this.baseSize;
            this._bounds.addFrame(this.transform, 0, 0, w, h);
        }

        /** Overrides PIXI.Container.calculateBounds()
         * Skips the children and only considers the deep zoom base size. Calls
         * the also overwritten _calculateBounds method.
         */
        calculateBounds() {
            this._bounds.clear();
            this._calculateBounds();
            this._lastBoundsID = this._boundsID;
        }

        /** Returns a single sprite that can be used a thumbnail representation of
         * large images.
         * @return {Sprite} sprite - A sprite with a single tile texture
         */
        thumbnail() {
            return new PIXI.Sprite.fromImage(this.info.baseURL)
        }

        /** Returns a list of all tiles of a given level.
         * @param {Tiles} tiles - the grid of tiles
         * @param {number} level - The zoom level of the grid
         * @return {Array[]} - An array of [url, col, row] arrays
         **/
        allTiles(tiles, level) {
            let result = [];
            for (let col = 0; col < tiles.cols; col++) {
                for (let row = 0; row < tiles.rows; row++) {
                    let url = this.info.urlForTile(level, col, row);
                    result.push([url, col, row]);
                }
            }
            return result
        }

        worldBounds() {
            let viewBounds = this.app.scene.bounds;
            // Using getBounds extends visible scope after loading tiles and leads
            // to excessive loading
            if (this.world != null) {
                let bounds = this.world.bounds;
                let x = Math.max(-bounds.width, bounds.x);
                let y = Math.max(-bounds.height, bounds.y);
                let width = Math.min(viewBounds.width, bounds.width);
                let height = Math.min(viewBounds.height, bounds.height);
                //console.log("worldBounds new", { x, y, width, height })
                return { x, y, width, height }
            }
            //console.log("worldBounds old", viewBounds)
            return viewBounds
        }

        /** Loads all tiles that are needed to fill the app bounds.
         * @param {Tiles} tiles - the grid of tiles
         * @param {number} level - The zoom level of the grid
         * @param {boolean} debug
         * @return {Array[]} - An array of [url, col, row] arrays
         */
        neededTiles(tiles, level, debug = false) {
            let needed = [];
            let tsize = tiles.tileSize;
            let worldBounds = this.worldBounds();
            let maxWidth = worldBounds.width;
            let maxHeight = worldBounds.height;

            let pointInWindow = new PIXI.Point();
            let worldTopLeft = new PIXI.Point(worldBounds.x, worldBounds.y);
            let worldBottomRight = new PIXI.Point(worldBounds.x + maxWidth, worldBounds.y + maxHeight);
            let worldCenter = new PIXI.Point(worldBounds.x + maxWidth / 2, worldBounds.y + maxHeight / 2);
            let tilesCenter = tiles.toLocal(worldCenter);

            let topLeft = tiles.toLocal(worldTopLeft);
            let bottomRight = tiles.toLocal(worldBottomRight);
            tiles._centerPoint = tilesCenter;
            let bounds = new PIXI.Rectangle(
                topLeft.x,
                topLeft.y,
                bottomRight.x - topLeft.x,
                bottomRight.y - topLeft.y);

            tiles._boundsRect = bounds;

            /* UO: we need a toLocal call here since the transform may need an update
            which is guaranteed by the toLocal method. */
            let centerCol = Math.floor(tilesCenter.x / tsize);
            let centerRow = Math.floor(tilesCenter.y / tsize);

            // Expand because we want to test for included centers
            bounds.x -= tsize / 2;
            bounds.y -= tsize / 2;
            bounds.width += tsize;
            bounds.height += tsize;

            try {
                let maxTilesWidth = Math.ceil(maxWidth / tsize);
                let maxTilesHeight = Math.ceil(maxHeight / tsize);

                maxTilesWidth += 2;
                maxTilesHeight += 2;

                let startCol = Math.max(0, centerCol - maxTilesWidth);
                let endCol = Math.min(tiles.cols, centerCol + maxTilesWidth);

                let startRow = Math.max(0, centerRow - maxTilesHeight);
                let endRow = Math.min(tiles.rows, centerRow + maxTilesHeight);

                for (let col = startCol; col < endCol; col++) {
                    let cx = (col + 0.5) * tsize;
                    for (let row = startRow; row < endRow; row++) {
                        let cy = (row + 0.5) * tsize;
                        let tileCenter = new PIXI.Point(cx, cy);
                        if (bounds.contains(tileCenter.x, tileCenter.y)) {
                            let url = this.info.urlForTile(level, col, row);
                            needed.push([url, col, row]);
                        }
                    }
                }
            } catch (error) {
                console.warn(error.message);
            }
            return { centerCol, centerRow, needed }
        }




        /** Returns all changed tiles for a given level.
         * @param {Tiles} tiles - the grid of tiles
         * @param {number} level - The zoom level of the grid
         * @return {object} - An object with the keys added and removed which values are [url, col, row] arrays
         */
        changedTiles(tiles, level) {
            if (this.debug) console.time('changedTiles');
            let changed = { added: [], removed: [] };
            let newNeeded = new Map();
            let { centerCol, centerRow, needed } = this.neededTiles(tiles, level);
            needed.forEach(d => {
                let [url, col, row] = d;
                newNeeded.set(url, [col, row]);
                if (!tiles.requested.has(url)) {
                    changed.added.push(d);
                }
            });
            for (let url of tiles.needed.keys()) {
                if (!newNeeded.has(url)) {
                    let [col, row] = tiles.needed.get(url);
                    changed.removed.push([url, col, row]);
                }
            }
            tiles.needed = newNeeded;
            if (this.debug) console.log(newNeeded);
            if (this.debug) console.timeEnd('changedTiles');
            return { centerCol, centerRow, changed }
        }

        /** Populates all tiles for a given level.
         * @param {Tiles} tiles - the grid of tiles
         * @param {number} level - The zoom level of the grid
         */
        populateAllTiles(tiles, level) {
            let all = this.allTiles(tiles, level);
            for (let [url, col, row] of all) {
                this.addTileQuadNode(level, col, row, url);
            }
            tiles.loadTiles(all, false, 0, 0);
        }

        /** Loads all tiles that are needed to fill the browser window.
         * If the optional about parameter is provided (as a point with col as x,
         * and row as y attr) the tiles are sorted by the distance to this point.
         *
         * @param {Tiles} tiles - the grid of tiles
         * @param {number} level - The zoom level of the grid
         * Optional parameter:
         * @param {boolean} onlyone - if true only one tile is loaded
         * @param {PIXI.Point} about - point of interaction
         */
        populateTiles(tiles, level, { onlyone = false, about = null } = {}) {
            if (tiles.isComplete())
                return
            let referenceCol = -1;
            let referenceRow = -1;
            let { centerCol, centerRow, changed } = this.changedTiles(tiles, level);
            if (about != null) {
                // We want to load tiles in the focus of the user first, therefore
                // we sort according to the distance of the focus of interaction
                let refPoint = this.toLocal(about);
                let scaledTileSize = tiles.tileSize * tiles.tileScale;
                referenceCol = Math.floor(refPoint.x / scaledTileSize);
                referenceRow = Math.floor(refPoint.y / scaledTileSize);
            }
            else {
                referenceCol = centerCol;
                referenceRow = centerRow;
            }
            referenceCol = centerCol;
            referenceRow = centerRow;

            let removed = changed.removed;
            for (let [url, col, row] of removed) {
                this.removeTileQuadNode(level, col, row, url);
            }
            let added = changed.added;
            if (added.length == 0) return
            for (let [url, col, row] of added) {
                this.addTileQuadNode(level, col, row, url);
            }
            let ref = new PIXI.Point(referenceCol, referenceRow);
            // Note: The array must be sorted in a way that the nearest tiles
            // are at the end of the array since the load queue uses Array.push
            // Array.pop
            added.sort((a, b) => {
                let aa = new PIXI.Point(a[1], a[2]);
                let bb = new PIXI.Point(b[1], b[2]);
                let da = Points.distance(aa, ref);
                let db = Points.distance(bb, ref);
                return db - da
            });
            tiles.loadTiles(added, onlyone, referenceCol, referenceRow);
        }

        /** Private method: creates all tiles for a given level.
         * @param {number} level - The zoom level of the grid
         * @return {Tiles} - tiles
         */
        _createTiles(key, level) {
            let [cols, rows, w, h] = this.info.dimensions(level);
            let increasedLevels = level - this.info.baseLevel;
            let invScale = Math.pow(0.5, increasedLevels);
            let tiles = new Tiles(
                level,
                this,
                invScale,
                cols,
                rows,
                w,
                h,
                this.info.tileSize,
                this.info.overlap
            );
            this.addTiles(key, tiles);
            if (this.info.clip) {
                let rest = this.info.rests[level];
                if (rest) {
                    let x = rest.restCol * this.info.tileSize * invScale;
                    let y = rest.restRow * this.info.tileSize * invScale;
                    tiles.x = -x;
                    tiles.y = -y;
                }
            }
            return tiles
        }

        /** Ensures that all needed tiles of a given level are loaded. Creates
         * a new Tiles layer if necessary
         * @param {number} level - The zoom level of the grid
         * @return {Tiles} tiles
         */
        ensureTiles(level, about) {
            let key = level.toString();
            if (key in this.tileLayers) {
                let tiles = this.tileLayers[key];
                this.populateTiles(tiles, level, { about: about });
                return tiles
            }
            let tiles = this._createTiles(key, level);
            this.populateTiles(tiles, level, { about: about });
            //console.log("ensureTiles", level)
            return tiles
        }

        untintTiles(level) {
            let key = level.toString();
            if (key in this.tileLayers) {
                let tiles = this.tileLayers[key];
            }
        }

        /** Ensures that all tiles of a given level are loaded.
         * @param {number} level - The zoom level of the grid
         */
        ensureAllTiles(level) {
            let key = level.toString();
            if (key in this.tileLayers) {
                let tiles = this.tileLayers[key];
                this.populateAllTiles(tiles, level);
                tiles.keep = true;
                return
            }
            let tiles = this._createTiles(key, level);
            this.populateAllTiles(tiles, level);
            tiles.keep = true;
            return tiles
        }

        hideTilesAboveLevel(level) {
            Object.keys(this.tileLayers).forEach(key => {
                let tiles = this.tileLayers[key];
                if (tiles.level > level) {
                    tiles.visible = false;
                }
            });
        }

        /** Destroys all tiles above a given level to ensure that the memory can
         * be reused.
         * @param {number} level - The zoom level of the grid
         */
        destroyTilesAboveLevel(level) {
            Object.keys(this.tileLayers).forEach(key => {
                let tiles = this.tileLayers[key];
                if (tiles.level > level && !tiles.keep) {
                    for (let url of tiles.available.keys()) {
                        let quad = this.quadTrees.get(url);
                        if (quad) this.removeTileQuadNode(quad);
                    }
                    this.destroyTiles(key);
                }
            });
        }

        destroyAllTiles() {
            Object.keys(this.tileLayers).forEach(key => {
                this.destroyTiles(key);
            });
        }

        /**
         * Tint tiles in all layers that are no longer needed
         *
         * @memberof DeepZoomImage
         */
        tintObsoleteTiles() {
            Object.keys(this.tileLayers).forEach(key => {
                let tiles = this.tileLayers[key];
                tiles.untintTiles();
                if (!tiles.keep) {
                    tiles.tintObsoleteTiles();
                }
            });
        }


        /**
         * Destroy tiles in all layers that are no longer needed
         *
         * @memberof DeepZoomImage
         */
        destroyUnneededTiles() {
            Object.keys(this.tileLayers).forEach(key => {
                let tiles = this.tileLayers[key];
                if (!tiles.keep) {
                    tiles.destroyUnneededTiles();
                }
            });
        }

        /**
         * Destroy tiles in all layers that are no longer needed
         *
         * @memberof DeepZoomImage
         */
        destroyObsoleteTiles() {
            Object.keys(this.tileLayers).forEach(key => {
                let tiles = this.tileLayers[key];
                if (!tiles.keep) {
                    tiles.destroyObsoleteTiles();
                }
            });
        }

        /**
         * Destroy tiles in all layers that are not part of the
         * visible quadTrees
         *
         * @memberof DeepZoomImage
         */
        destroyTiles() {
            Object.keys(this.tileLayers).forEach(key => {
                let tiles = this.tileLayers[key];
                if (!tiles.keep) {
                    tiles.destroyTiles(this.quadTrees);
                }
            });
        }

        /* Tint all tiles
        * @param {number} level - The zoom level of the grid
        */
        tintTilesBelowLevel(level) {
            Object.keys(this.tileLayers).forEach(key => {
                let tiles = this.tileLayers[key];
                if (tiles.level < level) {
                    tiles.tintTiles(this.quadTrees);
                }
            });
        }

        /**
         * Ensure that the given tiles layer is the topmost one and visible.
         * @param {*} tiles 
         */
        bringTilesToFront(tiles) {
            this.tileContainer.addChild(tiles);
            tiles.visible = true;
        }

        /** A callback function that can be used by a Scatter view to inform
         * the zoomable image that it has been moved, rotated or scaled, and should
         * load tiles accordingly.
         * @param {PIXI.Point} translated - the movement of the scatter
         * @param {number} scale - the zoom factor
         * @param {PIXI.Point} about - the anchor point of the zoom
         * @param {boolean} fast - informs the callback to return as fast as possible,
         *  i.e. after loading a single tile
         * @param {boolean} debug - log debug infos
         */
        transformed(event) {
            let key = this.currentLevel.toString();
            let currentTiles = this.tileLayers[key];
            if (typeof currentTiles == 'undefined') {
                return
            }
            if (event.fast) {
                this.fastLoads += 1;
                this.populateTiles(currentTiles, this.currentLevel, {
                    onlyone: false,
                    about: event.about
                });
                if (this.fastLoads == 3) {
                    this.fastLoads = 0;
                }
                else {
                    return
                }
            }
            if (event.scale == null) {
                this.ensureTiles(this.currentLevel, event.about);
                return
            }
            
            let level = this.levelForScale(event.scale);
            let newLevel = Math.max(level, this.minimumLevel);
            if (newLevel != this.currentLevel) {
                if (!currentTiles.keep) {
                    currentTiles.loader.cancel();
                }
                this.hideTilesAboveLevel(newLevel);
                currentTiles = this.ensureTiles(newLevel, event.about);
                this.currentLevel = newLevel;
            } else {
                this.ensureTiles(this.currentLevel, event.about);
            }
            this.bringTilesToFront(currentTiles);
            if (this._foreground) {
                this.addChild(this._foreground);
            }
        }

        /**
       *Activates the textures on the DeepZoomImage.
       *
       * @memberof DeepZoomImage
       */
        activate() {
            this.destroyTilesAboveLevel(this.currentLevel);
            this.ensureTiles(this.currentLevel, null);
            //console.log("Activate Textures!", this.currentLevel)
        }

        /**
       *Dectivates the textures on the DeepZoomImage.
       *
       * @memberof DeepZoomImage
       */
        deactivate() {
            this.destroyAllTiles();
            Object.keys(this.tileLayers).forEach(key => {
                this.destroyTiles(key);
            });
            this.tileContainer.destroy({ children: true });
            printTileCacheInfos();
        }

        throwFinished() {
            console.log("throwFinished");
            let key = this.currentLevel.toString();
            let currentTiles = this.tileLayers[key];
            if (typeof currentTiles == 'undefined') {
                return
            }

            this.ensureTiles(this.currentLevel);
            // let all = new Set()
            // for (let tile of currentTiles.children) {
            //     all.add(tile.url)
            // }
            // let { centerCol, centerRow, needed } = this.neededTiles(currentTiles, this.currentLevel)
            // for (let [url, col, row] of needed) {
            //     all.delete(url)
            // }
            // for (let url of all) {
            //     currentTiles.destroyTileByUrl(url)
            // }
            // currentTiles.loader.loader.reset()
        }
    }

    let globalScatterLoaderCanvas = null;

    class ScatterLoader extends CardLoader {

        get scatter() {
            return this.src
        }

        unscaledSize() {
            let displayObject = this.scatter.displayObject;
            let w = displayObject.width;
            let h = displayObject.height;
            return [w / displayObject.scale.x, h / displayObject.scale.y]
        }

        scaledSize() {
            let displayObject = this.scatter.displayObject;
            let w = displayObject.width;
            let h = displayObject.height;
            return [w, h]
        }

        cloneScatterImage() {
            let w = this.scatter.width;
            let h = this.scatter.height;
            let isSprite = this.scatter.displayObject instanceof PIXI.Sprite;
            let isDeepZoom = this.scatter.displayObject instanceof DeepZoomImage;
            let resolution = app.renderer.resolution;
            if (isSprite) {
                w = this.scatter.displayObject.texture.width;
                h = this.scatter.displayObject.texture.height;
            }
            else if (isDeepZoom) {
                let [ww, hh] = this.scatter.displayObject.baseSize;
                w = ww;
                h = hh;
            }
            if (globalScatterLoaderCanvas === null) {
                globalScatterLoaderCanvas = document.createElement('canvas');
            }
            let canvas = globalScatterLoaderCanvas;
            canvas.width = w;
            canvas.height = h;
            let renderer = new PIXI.WebGLRenderer(w, h, {
                                        view: canvas,
                                        resolution: resolution});

            let displayObject = this.scatter.displayObject;
            let x = displayObject.x;
            let y = displayObject.y;
            let rot = displayObject.rotation;
            let sx = displayObject.scale.x;
            let sy = displayObject.scale.y;
            displayObject.rotation = 0;
            // The Safari WebGLRenderer wants everything flipped
            // See https://github.com/pixijs/pixi.js/issues/2283
            displayObject.x = 0;
            if (Capabilities.isSafari) {
                displayObject.y = h;
                displayObject.scale.set(1, -1); // sx, -sy)
            }
            else {
                displayObject.y = 0;
                displayObject.scale.set(1, 1);
            }
            if (isSprite) {
                displayObject.width = w;
                displayObject.height = h;
            }
            renderer.render(displayObject);
            displayObject.rotation = rot;
            displayObject.x = x;
            displayObject.y = y;
            displayObject.scale.set(sx, sy);

            let url = canvas.toDataURL();
            return [x, y, w, h, url]
        }

        load(domNode) {
            return new Promise((resolve, reject) => {
                let isImage = domNode instanceof HTMLImageElement;
                let isSprite = this.scatter.displayObject instanceof PIXI.Sprite;
                let image = (isImage) ? domNode : document.createElement("img");
                let [x, y, w, h, cloneURL] = this.cloneScatterImage();
                let [ww, hh] = this.unscaledSize();
                image.onload = (e) => {
                    if (!isImage)
                        domNode.appendChild(image);
                    this.x = x;
                    this.y = y;
                    this.wantedWidth = ww;
                    this.wantedHeight = hh;
                    this.scale = 1;
                    this.rotation = this.scatter.rotation;
                    resolve(this);
                };
                image.onerror = (e) => {
                    reject(this);
                };
                image.src = cloneURL;
                })
        }

    }

    class FlipEffect {

        constructor(scatter, domScatterContainer, flipTemplate, backLoader) {
            this.flipped = false;
            this.scatter = scatter;
            this.backLoader = backLoader;
            this.scatterLoader = new ScatterLoader(scatter);
            this.domFlip = new DOMFlip(domScatterContainer, flipTemplate,
                                        this.scatterLoader,
                                        backLoader, {
                                            onBack: this.backCardClosed.bind(this)
                                        });
            this.setupInfoButton();
        }

        startFlip() {
            let center = this.flipCenter();
            let loader = this.backLoader;
            this.domFlip.load().then((domFlip) => {
                this.scatter.displayObject.visible = false;
                domFlip.centerAt(center);
                domFlip.zoom(this.scatter.scale);
                let target = this.constraintFlipCenter(center, loader);
                console.log("FlipEffect.startFlip", target, loader);
                domFlip.start({targetCenter: target});
            });
        }

        unscaledSize() {
            return this.scatterLoader.unscaledSize()
        }

        flipCenter() {
            let isSprite = this.scatter.displayObject instanceof PIXI.Sprite;
            let resolution = (isSprite) ? app.renderer.resolution : 1;
            let center = this.scatter.center;
            let canvas = app.renderer.view;
            let domNode = this.domFlip.domScatterContainer.element;
            let page = window.convertPointFromNodeToPage(canvas,
                                                            center.x*resolution,
                                                            center.y*resolution);
            let local = window.convertPointFromPageToNode(domNode, page.x, page.y);
            return local
        }

        constraintFlipCenter(center, loader) {
            let w = loader.wantedWidth;
            let h = loader.wantedHeight;
            console.log("constraintFlipCenter", w, h);
            let canvas = app.renderer.view;
            let x = center.x;
            let y = center.y;
            if (x < w/2)
                x = w/2;
            if (y < h/2)
               y = h/2;
            if (x > canvas.width)
                x = canvas.width - w/2;
            if (y > canvas.height)
                y = canvas.height - h/2;
            return { x, y }
        }

        setupInfoButton() {
            let iscale = 1.0 / this.scatter.scale;
            this.infoBtn = new PIXI.Graphics();
            this.infoBtn.beginFill(0x333333);
            this.infoBtn.lineStyle(4, 0xFFFFFF);
            this.infoBtn.drawCircle(0, 0, 22);
            this.infoBtn.endFill();

            this.infoBtn.beginFill(0xFFFFFF);
            this.infoBtn.lineStyle(0);
            this.infoBtn.drawCircle(0, -8, 4);
            this.infoBtn.endFill();

            this.infoBtn.lineStyle(6, 0xFFFFFF);
            this.infoBtn.moveTo(0, -2);
            this.infoBtn.lineTo(0, 14);
            this.infoBtn.endFill();

            this.infoBtn.on('click', (e) => { this.infoSelected(); });
            this.infoBtn.on('tap', (e) => { this.infoSelected(); });

            this.infoBtn.interactive = true;
            this.infoBtn.width = 44;
            this.infoBtn.height = 44;
            this.infoBtn.pivot.x = 30;
            this.infoBtn.pivot.y = 30;

            let displayObject = this.scatter.displayObject;
            let [w, h] = this.unscaledSize();
            this.infoBtn.position = new PIXI.Point(w, h);
            if (displayObject.foreground) {
                this.infoBtn.scale.x = iscale;
                this.infoBtn.scale.y = iscale;
                displayObject.foreground.addChild(this.infoBtn);
            }
            else {
                displayObject.addChild(this.infoBtn);
            }

            this.scatter.addTransformEventCallback(e => {
                let displayObject = this.scatter.displayObject;
                if (displayObject.foreground) {
                    if (e.scale) {
                        let iscale = 1.0 / e.scale;
                        this.infoBtn.scale.x = iscale;
                        this.infoBtn.scale.y = iscale;
                    }
                }
            });
        }

        setupButton(url) {
            let svgImage = new Image();
            let canvas = document.createElement('canvas');
            canvas.width = 88 * 4;
            canvas.height = 44 * 4;
            svgImage.onload = e => {
                let displayObject = this.scatter.displayObject;
                canvas.getContext ('2d').drawImage(svgImage, 0, 0,
                                                canvas.width, canvas.height);
                let texure = new PIXI.Texture(new PIXI.BaseTexture(canvas));
                this.infoBtn = new PIXI.Sprite(texure);
                this.infoBtn.anchor.set(0.5, 0.5);
                if (displayObject.foreground) {
                    displayObject.foreground.addChild(this.infoBtn);
                }
                else {
                    displayObject.addChild(this.infoBtn);
                }
                this.infoBtn.scale.set(0.5, 0.5);

                let [w, h] = this.unscaledSize();
                this.infoBtn.position = new PIXI.Point(w, h);
                this.infoBtn.interactive = true;
                this.infoBtn.updateTransform();
                this.infoBtn.on('click', (e) => { this.infoSelected(); });
                this.infoBtn.on('tap', (e) => { this.infoSelected(); });
            };
            svgImage.src = url;
        }

        infoSelected() {
            this.startFlip();
        }

        backSelected() {
            this.domFlip.start();
        }

        backCardClosed() {
            /*** The flip effect should now be in it's initial state again. All
            memory should be freed. ***/
            let displayObject = this.scatter.displayObject;
            displayObject.visible = true;
            this.domFlip.fadeOutAndRemove();
            this.flipped = false;
        }

        targetRotation(alpha) {
            let ortho = 90;
            let rest = alpha % ortho;
            let delta = 0.0;
            if (rest > (ortho / 2.0)) {
                delta = ortho - rest;
            }
            else {
                delta = -rest;
            }
            return delta
        }
    }

    /* globals Power2, Sine */
    /*eslint no-console: ["error", { allow: ["log", "info", "error"] }]*/

    /**
     * Callback for the flippable onStart function.
     *
     * @callback onStartCallback
     * @param {Flippable} flippable - A reference to the flippable (also this refers to the flippable).
     */

    /**
     * Callback for the flippable onUpdate function.
     *
     * @callback onUpdateCallback
     * @param {Flippable} flippable - A reference to the flippable (also this refers to the flippable).
     */

    /**
     * Callback for the flippable onComplete function.
     *
     * @callback onCompleteCallback
     * @param {Flippable} flippable - A reference to the flippable (also this refers to the flippable).
     */

    /**
     * Class that represents a PixiJS Flippable.
     *
     * @example
     * const front = PIXI.Sprite.fromImage('./assets/front.jpg')
     * const back = PIXI.Sprite.fromImage('./assets/back.jpg')
     * app.scene.addChild(front)
     * 
     * // Create the flippable
     * const flippable = new Flippable(front, back, app.renderer)
     * 
     * front.interactive = true
     * front.on('click', event => flippable.toggle())
     *
     * @class
     * @extends PIXI.projection.Camera3d
     * @see {@link https://github.com/pixijs/pixi-projection|PixiJS Projection}
     * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/flippable.html|DocTest}
     */
    class Flippable extends PIXI.projection.Camera3d {

        /**
         * Creates an instance of a Flippable.
         *
         * @constructor
         * @param {PIXI.DisplayObject} front - The object to show initially. Should have been added to the scene.
         * @param {PIXI.DisplayObject} back - The object to show on the backside. Should have not been added to the scene.
         * @param {PIXI.WebGLRenderer|PIXI.CanvasRenderer} renderer - The renderer of the application.
         * @param {object} [opts] - An options object which can contain the following properties.
         * @param {number} [opts.duration=1] - The duration of the flip animation in seconds.
         * @param {GSAP.Ease} [opts.ease=Power2.easeOut] - The ease of the flip animation.
         * @param {boolean} [opts.shadow=false] - Should be a shadow been display during the animation?
         * @param {numer} [opts.eulerX=0] - The shift of the x-axis during the animation.
         * @param {numer} [opts.eulerY=0] - The shift of the y-axis during the animation.
         * @param {GSAP.Ease} [opts.eulerEase=Power1.easeOut] - The ease of the shift.
         * @param {boolean} [opts.useBackTransforms=false] - When set to true, the flip animation also animates to the transform parameters of the back-object.
         * @param {GSAP.Ease} [opts.transformEase=Power2.easeOut] - The ease of the transform.
         * @param {numer} [opts.focus=800] - The value of the focus of the 3D camera (see pixi-projection).
         * @param {numer} [opts.near=10] - The near value of the 3D camera (see pixi-projection).
         * @param {numer} [opts.far=10000] - The far value of the 3D camera (see pixi-projection).
         * @param {boolean} [opts.orthographic=false] - Should the flip animation be an orthographic animation?
         * @param {function} [opts.onStart=null] - A callback executed on start of the flip animation.
         * @param {function} [opts.onUpdate=null] - A callback executed on each step of the flip animation.
         * @param {function} [opts.onComplete=null] - A callback executed when the flip animation is finished.
         */
        constructor(front, back, renderer, opts = {}) {

            super();

            this.opts = Object.assign({}, {
                front,
                back,
                renderer,
                duration: 1,
                ease: Power2.easeOut,
                shadow: false,
                eulerX: 0,
                eulerY: 0,
                eulerEase: Power1.easeOut,
                useBackTransforms: false,
                transformEase: Power2.easeOut,
                focus: 800,
                near: 10,
                far: 10000,
                orthographic: false
            }, opts);

            // planes
            //--------------------
            this.setPlanes(this.opts.focus, this.opts.near, this.opts.far, this.opts.orthographic);

            // flipped
            //--------------------
            this._flipped = false;

            // objects
            //--------------------
            this.objects = {};

            // setup
            //--------------------
            this.setup();
        }

        /**
         * Creates children and instantiates everything.
         *
         * @private
         * @return {Flippable} A reference to the flippable for chaining.
         */
        setup() {

            const scale = .5;

            // filters
            //--------------------
            const blurFilter = new PIXI.filters.BlurFilter();
            blurFilter.blur = 0.2;
            this.objects.blurFilter = blurFilter;

            // outer
            //--------------------
            const outer = new PIXI.projection.Container3d();
            outer.scale3d.set(scale);
            this.addChild(outer);
            this.objects.outer = outer;

            // shadow
            //--------------------
            const shadow = new PIXI.projection.Sprite3d(PIXI.Texture.fromImage('../../assets/images/shadow.png'));
            shadow.renderable = false;
            shadow.anchor.set(0.5);
            shadow.scale3d.set(.98);
            shadow.alpha = 0.7;
            shadow.filters = [blurFilter];
            shadow.visible = this.opts.shadow;
            outer.addChild(shadow);
            this.objects.shadow = shadow;
            
            // inner
            //--------------------
            const inner = new PIXI.projection.Container3d();
            inner.euler.y = Math.PI;
            outer.addChild(inner);
            this.objects.inner = inner;

            // front
            //--------------------
            const front = new PIXI.projection.Sprite3d(PIXI.Texture.EMPTY);
            front.scale.set(-1 / scale, 1 / scale);
            front.renderable = true;
            front.anchor.set(.5);
            inner.addChild(front);
            this.objects.front = front;

            // back
            //--------------------
            const back = new PIXI.projection.Sprite3d(PIXI.Texture.EMPTY);
            back.scale.set(1 / scale, 1 / scale);
            back.renderable = false;
            back.anchor.set(.5);
            inner.addChild(back);
            this.objects.back = back;

            return this
        }

        /**
         * Gets or sets the flipped state.
         *
         * @member {boolean}
         */
        get flipped() {
            return this._flipped
        }
        set flipped(toBack) {

            this._flipped = toBack;

            // references
            //--------------------
            const front = this.objects.front;
            const back = this.objects.back;
            const inner = this.objects.inner;
            const shadow = this.objects.shadow;
            const blurFilter = this.objects.blurFilter;

            const half = this.opts.duration / 2;
            const ease = this.opts.eulerEase;

            const fromObject = toBack ? this.opts.front : this.opts.back;
            const toObject = toBack ? this.opts.back : this.opts.front;

            // set textures for virtual front and virtual back
            //--------------------
            front.texture = this.generateTexture(this.opts.front);
            back.texture = this.generateTexture(this.opts.back);
            
            // switch objects and set params for virtual objects
            //--------------------
            const fromCenter = this.anchorToCenter(fromObject);
            const toCenter = this.anchorToCenter(toObject);

            // from values
            //--------------------
            this.x = fromCenter.x;
            this.y = fromCenter.y;
            front.width = fromObject.width * 2;
            front.height = fromObject.height * 2;
            back.width = fromObject.width * 2;
            back.height = fromObject.height * 2;
            this.rotation = fromObject.rotation;
            this.skew.x = fromObject.skew.x;
            this.skew.y = fromObject.skew.y;

            // calculate to values
            //--------------------
            const to = {
                x: this.opts.useBackTransforms ? toCenter.x : fromCenter.x,
                y: this.opts.useBackTransforms ? toCenter.y : fromCenter.y,
                anchorX: this.opts.useBackTransforms ? toObject.x : fromObject.x,
                anchorY: this.opts.useBackTransforms ? toObject.y : fromObject.y,
                width: this.opts.useBackTransforms ? toObject.width * 2 : fromObject.width * 2,
                height: this.opts.useBackTransforms ? toObject.height * 2 : fromObject.height * 2,
                rotation: this.opts.useBackTransforms ? toObject.rotation : fromObject.rotation,
                skewX: this.opts.useBackTransforms ? toObject.skew.x : fromObject.skew.x,
                skewY: this.opts.useBackTransforms ? toObject.skew.y : fromObject.skew.y
            };

            // set toObject end values
            //--------------------
            toObject.x = to.anchorX;
            toObject.y = to.anchorY;
            toObject.width = to.width / 2;
            toObject.height = to.height / 2;
            toObject.rotation = to.rotation;
            toObject.skew.x = to.skewX;
            toObject.skew.y = to.skewY;

            // flip
            //--------------------
            TweenLite.to(inner.euler, this.opts.duration, {
                y: toBack ? 0 : Math.PI,
                ease: this.opts.ease,
                onStart: () => {
                    this.switchDisplayObject(fromObject, this);
                    shadow.renderable = true;
                    if (this.opts.onStart) {
                        this.opts.onStart(this, this);
                    }
                },
                onUpdate: () => {
                    this.layout();
                    if (this.opts.onUpdate) {
                        this.opts.onUpdate(this, this);
                    }
                },
                onComplete: () => {
                    this.switchDisplayObject(this, toObject);
                    shadow.renderable = false;
                    if (this.opts.onComplete) {
                        this.opts.onComplete(this, this);
                    }
                }
            });

            // x & y
            //--------------------
            TweenLite.to(this, this.opts.duration, {
                x: to.x,
                y: to.y,
                ease: this.opts.transformEase
            });

            // width & height
            //--------------------
            TweenLite.to([front, back], this.opts.duration, {
                width: to.width,
                height: to.height,
                ease: this.opts.transformEase
            });

            // rotation
            //--------------------
            TweenLite.to(this, this.opts.duration, {
                directionalRotation: {
                    rotation: `${to.rotation}_short`,
                    useRadians: true
                },
                ease: this.opts.transformEase
            });

            // skewX & skewY
            //--------------------
            TweenLite.to(this.skew, this.opts.duration, {
                x: to.skewX,
                y: to.skewY,
                ease: this.opts.transformEase
            });

            // camera
            //--------------------
            new TimelineMax()
                .to(this.euler, half, {x: this.opts.eulerX, y: this.opts.eulerY, ease})
                .to(this.euler, half, {x: 0, y: 0, ease});

            // shadow
            //--------------------
            new TimelineMax()
                .to(shadow, half, {alpha: .3, ease})
                .to(shadow, half, {alpha: .7, ease});
            
            // blurfilter
            //--------------------
            new TimelineMax()
                .to(blurFilter, half, {blur: 6, ease})
                .to(blurFilter, half, {blur: .2, ease});
        }

        /**
         * Should be called to refresh the layout of the camera.
         *
         * @return {Flippable} A reference to the flippable for chaining.
         */
        layout() {

            const front = this.objects.front;
            const back = this.objects.back;
            const shadow = this.objects.shadow;
            const inner = this.objects.inner;
            
            inner.position3d.z = -Math.sin(inner.euler.y) * front.texture.baseTexture.width * 2;

            //this.objects.shadow.euler = this.objects.inner.euler
            shadow.euler.x = -inner.euler.x;
            shadow.euler.y = -inner.euler.y;
            
            if (this.frontSideInFront) {
                front.renderable = true;
                back.renderable = false;
                shadow.width = front.width;
                shadow.height = front.height;
            } else {
                front.renderable = false;
                back.renderable = true;
                shadow.width = back.width;
                shadow.height = back.height;
            }

            return this
        }

        /**
         * Toggles the flippable. Switches the sides.
         *
         * @private
         * @return {Flippable} A reference to the flippable for chaining.
         */
        toggle() {
            this.flipped = !this.flipped;

            return this
        }

        /**
         * Gets the alignment state. true if the front side is in front, false otherwise.
         *
         * @member {boolean}
         */
        get frontSideInFront() {
            return !this.objects.inner.isFrontFace()
        }

        /**
         * Calculates the center point of an PIXI.DisplayObject.
         *
         * @private
         * @param {PIXI.DisplayObject} displayObject - The DisplayObject from which to calculate the center.
         * @return {object} Return an object with x and y.
         */
        anchorToCenter(displayObject) {
            const bounds = displayObject.getBounds();
            return {
                x: bounds.x + bounds.width / 2,
                y: bounds.y + bounds.height / 2
            }
        }

        /**
         * Creates children and instantiates everything.
         *
         * @private
         * @param {PIXI.DisplayObject} displayObject - The DisplayObject from which to generate the texture.
         * @return {PIXI.Texture} The generated PIXI.Texture.
         */
        generateTexture(displayObject) {

            // renderTexture
            //--------------------
            const renderTexture = PIXI.RenderTexture.create(displayObject.width, displayObject.height);

            // save position
            const transform = [displayObject.x, displayObject.y, displayObject.scale.x, displayObject.scale.y, displayObject.rotation, displayObject.skew.x, displayObject.skew.y, displayObject.pivot.x, displayObject.pivot.y];

            displayObject.position.set(0, 0);
            displayObject.skew.set(0, 0);
            displayObject.rotation = 0;

            // render
            //--------------------
            this.opts.renderer.render(displayObject, renderTexture);
            
            // restore position
            displayObject.setTransform(...transform);

            return renderTexture
        }

        /**
         * Removed the first DisplayObject and adds the second one at the exactly same position.
         *
         * @private
         * @param {PIXI.DisplayObject} first - The old DisplayObject.
         * @param {PIXI.DisplayObject} second - The new DisplayObject.
         * @return {Flippable} A reference to the flippable for chaining.
         */
        switchDisplayObject(first, second) {
            if (first && second && first.parent) {
                const parent = first.parent;
                const index = parent.getChildIndex(first);
                parent.addChildAt(second, index);
                parent.removeChild(first);
            }

            return this
        }
    }

    /**
     * 
     */
    class Popover extends PIXI.Graphics {

        constructor({title = null, text = null, x = 0, y = 0, placement = 'top', width = 250, titleStyle = {}, textStyle = {fontSize: '1.6em'}} = {}) {
            super();

            this.opts = {title, text, x, y, placement, width, titleStyle, textStyle};
            
            this.padding = 12;

            let style = {
                fontFamily: 'Arial',
                fontSize: '2em',
                stroke: '#f6f6f6',
                strokeThickness: 3,
                wordWrap: true,
                wordWrapWidth: width - (this.padding * 2)
            };

            this.titleTextStyle = new PIXI.TextStyle(Object.assign({}, style, titleStyle));
            this.textTextStyle = new PIXI.TextStyle(Object.assign({}, style, textStyle));
            
            if (title || text) {
                this.setup();
                this.draw();
                this.positioning();
            }
        }

        setup() {
            this.removeChildren();

            if (this.opts.title) {
                this.titleText = new PIXI.Text(this.opts.title, this.titleTextStyle);
                this.titleText.position.set(this.padding, this.padding);
                this.addChild(this.titleText);
            }

            this.titleY = this.titleText ? this.titleText.y : 0;
            this.titleHeight = this.titleText ? this.titleText.height : 0;

            if (this.opts.text) {
                this.textText = new PIXI.Text(this.opts.text, this.textTextStyle);
                this.textText.position.set(this.padding, this.titleY + this.titleHeight + this.padding);
                this.addChild(this.textText);
            }

            this.textY = this.textText ? this.textText.y : 0;
            this.textHeight = this.textText ? this.textText.height : 0;
        }

        close() {
            this.parent.removeChild(this);
        }

        draw() {
            this.clear();
            this.beginFill(0xffffff, 1);
            this.lineStyle(1, 0x282828, .5);

            // Draw rounded rectangle
            const height = this.height + this.padding;
            this.drawRoundedRect(0, 0, this.opts.width, height, 8);

            // Draw anchor
            this.drawAnchor(this.opts.placement);

            // Draw title background
            if (this.opts.title) {
                this.lineStyle(0);
                this.beginFill(0xf7f7f7, 1);
                let x = 1;
                let y = this.titleText.x + this.titleText.height + (this.padding / 2);
                this.moveTo(x, y);
                y = 9;
                this.lineTo(x, y);
                this.quadraticCurveTo(x, y - 8, x + 8, y - 8);
                x += this.opts.width - 7;
                y -= 8;
                this.lineTo(x, y);
                this.quadraticCurveTo(x + 5, y, x + 5, y + 8);
                x += 5;
                y += this.titleText.x + this.titleText.height + (this.padding / 2);
                this.lineTo(x, y);
                if (this.opts.text) {
                    x = 1;
                    this.lineTo(x, y);
                } else {
                    this.quadraticCurveTo(x, y, x - 5, y + 4);
                    x = 6;
                    y += 4;
                    this.lineTo(x, y);
                    this.quadraticCurveTo(x, y, x - 5, y - 4);
                }
            }

            this.endFill();
        }

        drawAnchor(placement) {

            let x = 0;
            let y = 0;

            switch (placement) {
                case 'bottom':
                    if (this.opts.title) {
                        this.beginFill(0xf7f7f7, 1);
                    }
                    x = (this.width / 2) - 10;
                    y = 1;
                    this.moveTo(x, y);
                    x += 10;
                    y -= 10;
                    this.lineTo(x, y);
                    x += 10;
                    y += 10;
                    this.lineTo(x, y);
                    break
                case 'right':
                    x = 1;
                    y = (this.height / 2) - 10;
                    if (this.titleY + this.titleHeight > y) {
                        this.beginFill(0xf7f7f7, 1);
                    }
                    this.moveTo(x, y);
                    x -= 10;
                    y += 10;
                    this.lineTo(x, y);
                    x += 10;
                    y += 10;
                    this.lineTo(x, y);
                    break
                case 'left':
                    x = this.width - 2;
                    y = (this.height / 2) - 10;
                    if (this.titleY + this.titleHeight > y) {
                        this.beginFill(0xf7f7f7, 1);
                    }
                    this.moveTo(x, y);
                    x += 10;
                    y += 10;
                    this.lineTo(x, y);
                    x -= 10;
                    y += 10;
                    this.lineTo(x, y);
                    break
                default:
                    x = (this.width / 2) - 10;
                    y = this.height - 2;
                    this.moveTo(x, y);
                    x += 10;
                    y += 10;
                    this.lineTo(x, y);
                    x += 10;
                    y -= 10;
                    this.lineTo(x, y);
                    break
            }
        }

        positioning() {

            const x = this.opts.x;
            const y = this.opts.y;

            switch (this.opts.placement) {
                case 'bottom':
                    this.position.set(x - (this.width / 2), y + 10);
                    break
                case 'right':
                    this.position.set(x, y - (this.height / 2));
                    break
                case 'left':
                    this.position.set(x - this.width, y - (this.height / 2));
                    break
                default:
                    this.position.set(x - (this.width / 2), y - this.height);
                    break
            }
        }
    }

    /** A container for scatter objects, which uses a single InteractionMapper
     * for all children. This reduces the number of registered event handlers
     * and covers the common use case that multiple objects are scattered
     * on the same level.
     */
    class ScatterContainer extends PIXI.Graphics {

        /**
        * @constructor
        * @param {PIXI.Renderer} renderer - PIXI renderer, needed for hit testing
        * @param {Bool} stopEvents - Whether events should be stopped or propagated
        * @param {Bool} claimEvents - Whether events should be marked as claimed
        *                             if findTarget return as non-null value.
        * @param {PIXI.Container} container - A container for the scatter
        * @param {Bool} showBounds - Show bounds for debugging purposes.
        * @param {Bool} showTouches - Show touches and pointer for debugging purposes.
        * @param {Color} backgroundColor - Set background color if specified.
        * @param {PIXIApp} app - Needed if showBounds is true to register
        *                                update handler.
        */
        constructor(renderer, {
            stopEvents = true,
            claimEvents = true,
            container = null,
            showBounds = false,
            showPolygon = false,
            showTouches = false,
            backgroundColor = null,
            app = window.app
        } = {}) {
            super();
            this.container = container;
            if (this.container)
                this.containerDimensions = {
                    x: this.container.width,
                    y: this.container.height
                };
            this.backgroundWidth = null;
            this.backgroundHeight = null;
            this.app = app;
            this.renderer = renderer;
            this.stopEvents = stopEvents;
            this.claimEvents = claimEvents;
            this.delegate = new InteractionMapper$1(this.eventReceiver, this);
            this.showBounds = showBounds;
            this.showTouches = showTouches;
            this.showPolygon = showPolygon;
            this.backgroundColor = backgroundColor;
            if (showBounds || showTouches || showPolygon) {
                //console.log("Show TOUCHES!!!")
                this.app.ticker.add((delta) => this.update(delta), this);
            }
            if (backgroundColor) {
                this.updateBackground();
            }
        }

        updateBackground() {
            this.clear();
            let rect = this.bounds;
            this.beginFill(this.backgroundColor, 1);
            this.drawRect(0, 0, rect.width, rect.height);
            this.endFill();
        }

        get eventReceiver() {
            return this.renderer.plugins.interaction.interactionDOMElement
        }

        get bounds() {
            let x = 0;
            let y = 0;
            // @container: We need to call the constant values, as the container
            // gets resized, when a child moves outside the original boundaries.
            let w = (this.container) ? this.containerDimensions.x : (this.backgroundWidth || this.app.width);
            let h = (this.container) ? this.containerDimensions.y : (this.backgroundHeight || this.app.height);

            if (this.app.fullscreen && this.app.monkeyPatchMapping) {
                let fixed = this.mapPositionToPoint({ x: w, y: 0 });
                if (fixed.x < w) {
                    w = fixed.x;
                }
                if (fixed.y > 0) {
                    y += fixed.y;
                    h -= fixed.y;
                }
            }
            return new PIXI.Rectangle(x, y, w, h)
        }

        get center() {
            let r = this.bounds;
            return { x: r.width / 2, y: r.height / 2 }
        }

        get polygon() {
            let r = this.bounds;
            let w2 = r.width / 2;
            let h2 = r.height / 2;
            let center = { x: w2, y: h2 };
            let polygon = new Polygon(center);
            polygon.addPoint({ x: -w2, y: -h2 });
            polygon.addPoint({ x: w2, y: -h2 });
            polygon.addPoint({ x: w2, y: h2 });
            polygon.addPoint({ x: -w2, y: h2 });
            return polygon
        }

        update(dt) {
            this.clear();
            this.lineStyle(1, 0x0000FF);
            if (this.showBounds) {
                for (let child of this.children) {
                    if (child.scatter) {
                        //let {x, y, width, height} = child.scatter.throwBounds()
                        // new PIXI.Rectangle(x, y, width, height)
                        this.drawShape(child.scatter.bounds);
                        let center = child.scatter.center;
                        this.drawCircle(center.x, center.y, 4);
                        this.drawCircle(child.scatter.x, child.scatter.y, 4);
                    }
                }
                this.lineStyle(2, 0x0000FF);
                this.drawShape(this.bounds);
            }
            if (this.showPolygon) {
                this.lineStyle(2, 0xFF0000);
                for (let child of this.children) {
                    if (child.scatter) {
                        let polygon = child.scatter.polygon;
                        let shape = new PIXI.Polygon(polygon.flatAbsolutePoints());
                        shape.close();
                        this.drawShape(shape);
                    }
                }
            }
            if (this.showTouches) {
                let current = this.delegate.interaction.current;
                for (let [key, point] of current.entries()) {
                    let local = this.mapPositionToPoint(point);
                    this.drawCircle(local.x, local.y, 12);
                }
            }
        }

        capture(event) {
            if (this.stopEvents)
                Events$1.stop(event);
            return true
        }

        fakeInteractionEvent(point, key) {
            return { data: { global: point, key: key } }
        }

        findHitScatter(data, displayObject, hit) {
            //     if (hit) {
            //             console.log("findHitScatter", displayObject)
            //         }
            if (hit && this.hitScatter === null && typeof (displayObject) != undefined) {
                this.hitScatter = (displayObject.scatter) ? displayObject.scatter : null;
            }
        }

        mapPositionToPoint(point, element = null) {
            // In case of nested scatters we get an additional parameter that
            // contains the found scatter
            let local = new PIXI.Point();
            let interactionManager = this.renderer.plugins.interaction;
            interactionManager.mapPositionToPoint(local, point.x, point.y);
            if (element instanceof DisplayObjectScatter && element.displayObject.parent != null) {
                return element.displayObject.parent.toLocal(local)
            }
            return local
        }

        /**
         * New method hitTest implemented (in InteractionManager, since 4.5.0).
         * See https://github.com/pixijs/pixi.js/pull/3878
         */
        findTarget(event, local, global) {
            if (event.claimedByScatter) {
                return null
            }
            this.hitScatter = null;
            let interactionManager = this.renderer.plugins.interaction;
            let fakeEvent = this.fakeInteractionEvent(local);
            interactionManager.processInteractive(fakeEvent,
                this,
                this.findHitScatter.bind(this), true);
            if (this.claimEvents)
                event.claimedByScatter = this.hitScatter;
            return this.hitScatter
        }

        findTargetNew(event, local, global) {
            // UO: still problematic. Does not find non interactive elements
            // which are needed for some stylus applications
            if (event.claimedByScatter) {
                return null
            }
            this.hitScatter = null;
            let interactionManager = this.renderer.plugins.interaction;
            let displayObject = interactionManager.hitTest(local, this);
            if (displayObject != null && displayObject.scatter != null)
                this.hitScatter = displayObject.scatter;
            if (this.claimEvents)
                event.claimedByScatter = this.hitScatter;
            return this.hitScatter
        }


        onStart(event, interaction) {

        }

        onMove(event, interaction) {

        }

        onEnd(event, interaction) {
            for (let key of interaction.ended.keys()) {
                let point = interaction.ended.get(key);
                if (interaction.isLongPress(key)) {
                    this.onLongPress(key, point);
                }
                if (interaction.isTap(key)) {
                    this.onTap(key, point);
                }
            }
        }

        onTap(key, point) {
            console.info('ScatterContainer.onTap');
        }

        onLongPress(key, point) {
            console.info('ScatterContainer.onLongPress');
        }

        bringToFront(displayObject) {
            this.addChild(displayObject);
        }

        layout(width, height) {
            this.backgroundWidth = width;
            this.backgroundHeight = height;
            if (this.backgroundColor) {
                this.updateBackground();
            }
            
        }
    }

    /** A wrapper for child elements of a ScatterContainer. Can be used
     *  to combine scattered objects with non-scattered objects. Any
     *  PIXI.DisplayObject can be wrapped.
     */
    class DisplayObjectScatter extends AbstractScatter {

        constructor(displayObject, renderer,
            { x = null, y = null,
                minScale = 0.1,
                maxScale = 1.0,
                startScale = 1.0,
                autoBringToFront = true,
                translatable = true, scalable = true, rotatable = true, resizable = false,
                movableX = true,
                movableY = true,
                throwVisibility = 44,
                throwDamping = 0.95,
                autoThrow = true,
                rotationDegrees = null,
                rotation = null,
                overdoScaling = 1.5,
                onTransform = null,
                onThrowFinished = null } = {}) {
            // For the simulation of named parameters,
            // see: http://exploringjs.com/es6/ch_parameter-handling.html
            super({
                overdoScaling,
                minScale, maxScale,
                startScale,
                autoBringToFront,
                translatable, scalable, rotatable, resizable,
                movableX, movableY, throwVisibility, throwDamping,
                autoThrow,
                onThrowFinished,
                rotationDegrees, rotation,
                onTransform
            });
            this.displayObject = displayObject;
            this.displayObject.scatter = this;
            this.renderer = renderer;
            this.scale = startScale;
            this.rotationDegrees = this.startRotationDegrees;

            // Only set x and y if they are specified.
            // Otherwise the displayobject gets corrupted.
            if (x != null) this.x = x;
            if (y != null) this.y = y;
        }

        getWorldScatter() {
            return this
        }

        /** Returns geometry data as object. **/
        getState() {
            return {
                scale: this.scale,
                x: this.x,
                y: this.y,
                rotation: this.rotation
            }
        }

        setup() {
            this.setupMouseWheelInteraction();
        }

        roundPixel(value) {
            // UO: Should be obsolete because Renderer supports roundPixels by default
            return value
            let res = this.renderer.resolution;
            return Math.round(value * res) / res
        }

        get container() {
            // return this.displayObject.parent
            let obj = this.displayObject;
            while (obj.parent != null && !(obj.parent instanceof ScatterContainer))
                obj = obj.parent;
            return obj.parent
        }

        get x() {
            return this.position.x
        }

        set x(value) {
            this.position.x = value;
        }

        get y() {
            return this.position.y
        }

        set y(value) {
            this.position.y = value;
        }

        get polygon() {
            let polygon = new Polygon(this.center);
            let w2 = this.width / 2;
            let h2 = this.height / 2;
            polygon.addPoint({ x: -w2, y: -h2 });
            polygon.addPoint({ x: w2, y: -h2 });
            polygon.addPoint({ x: w2, y: h2 });
            polygon.addPoint({ x: -w2, y: h2 });
            polygon.rotate(this.rotation);
            return polygon
        }

        get containerBounds() {
            return this.container.bounds
        }

        get containerPolygon() {
            let container = this.container;
            if (container == null) return null
            return container.polygon
        }

        get position() {
            return this.displayObject.position
        }

        set position(value) {
            this.displayObject.position = value;
        }

        get scale() {
            return this.displayObject.scale.x
        }

        set scale(value) {
            this.displayObject.scale.x = value;
            this.displayObject.scale.y = value;
        }

        get width() {
            return this.displayObject.width
        }

        get height() {
            return this.displayObject.height
        }

        get bounds() {
            return this.displayObject.getBounds()
        }

        get pivot() {
            return this.displayObject.pivot
        }

        get rotation() {
            return this.displayObject.rotation
        }

        set rotation(value) {
            this.displayObject.rotation = value;
        }

        get rotationDegrees() {
            return Angle.radian2degree(this.displayObject.rotation)
        }

        set rotationDegrees(value) {
            this.displayObject.rotation = Angle.degree2radian(value);
        }

        get center() {
            let w2 = this.width / 2;
            let h2 = this.height / 2;
            let dist = Math.sqrt(w2 * w2 + h2 * h2);
            let angle = Points.angle({ x: w2, y: h2 }, { x: 0, y: 0 });
            let p = this.displayObject.x;
            let c = Points.arc(this.position, this.rotation + angle, dist);
            return c // Points.subtract(c, this.pivot)
        }

        get rotationOrigin() {
            // In PIXI the default rotation and scale origin is the position
            return this.position // Points.add(this.position, this.pivot)
        }

        mapPositionToContainerPoint(point) {
            // UO: We need the coordinates related to this scatter in case
            // of nested scatters
            if (this.container != null)
                return this.container.mapPositionToPoint(point, this)
            return point
        }

        capture(event) {
            return true
        }

        bringToFront() {
            if (this.autoBringToFront) {
                if (this.displayObject.parent instanceof ScatterContainer) {
                    let scatterContainer = this.displayObject.parent;
                    scatterContainer.bringToFront(this.displayObject);
                } else if (this.displayObject.parent != null && this.displayObject.parent.scatter) {
                    this.displayObject.parent.scatter.toFront(this.displayObject);
                }
            }
        }

        toFront(displayObject) {
            this.displayObject.addChild(displayObject);
        }

        validScale(scale) {
            scale = Math.max(scale, this.minScale);
            scale = Math.min(scale, this.maxScale);
            return scale
        }
    }

    /**
     *
     */
    class Command extends PIXI.Graphics {
        /*** Abstract base class for record, play, and stop commands. ***/
        constructor(tools, selectedColor, shape) {
            super();
            this.tools = tools;
            this.shape = shape;
            this.selected = false;
            this.disabled = false;
            this.selectedColor = selectedColor;
            this.draw();
            this.setup();
        }

        setup() {
        }

        draw() {
            this.clear();
            var color = (this.selected) ? this.selectedColor : 0xFFFFFF;
            this.lineStyle(0);
            this.beginFill(color, 1);
            this.drawShape(this.shape);
            this.endFill();
        }

        select() {
            this.selected = true;
            this.draw();
        }

        deselect() {
            this.selected = false;
            this.draw();
        }

        toggle() {
            this.selected = !this.selected;
            this.draw();
        }

        stop() {
            this.selected = false;
            this.draw();
        }
    }

    class RecordCommand extends Command {
        /*** Records events for later replay. ***/
        setup() {
            this.recorder = new EventRecorder();
        }

        toggle() {
            super.toggle();
            if (!this.selected) {
                this.recorder.stopRecording();
            }
        }

        recordEvent(event) {
            this.recorder.record(event);
        }

        normalize(value, limit) {
            return value / limit
        }

        normalizeX(value) {
            return this.normalize(value, window.innerWidth)
        }

        normalizeY(value) {
            return this.normalize(value, window.innerHeight)
        }

        whileNotStopped() {
            return this.tools.play.selected
        }

        startReplay() {
            let whileCondition = this.whileNotStopped.bind(this);
            this.recorder.startReplay(whileCondition, () => this.tools.play.stop());
        }
    }

    class PlayCommand extends Command {
        /*** Plays recorded events. ***/
        toggle() {
            super.toggle();
            if (this.selected && this.tools.record.recorder.recorded.length > 0) {
                this.tools.startReplay();
            }
        }
    }

    class StopCommand extends Command {
        /*** Stops recording and playing. ***/
        toggle() {
            super.toggle();
            this.tools.record.stop();
            this.tools.play.stop();
            setTimeout(this.deselect.bind(this), 500);
        }
    }

    class RecorderTools extends PIXI.Container {

        constructor(renderer) {
            super(renderer);
            this.renderer = renderer;
            this.setupToolbar();
            this.replayRate = 100.0;
            this.onReset = null;
            this.touchGraphics = new PIXI.Graphics();
            this.showTouches();
        }

        setup(container) {
            // Since this delegate might shadow another delegate, we mus avoid
            // capturing PointerEvents.
            this.delegate = new InteractionMapper(container, this, { capturePointerEvents: false });
        }

        findTarget(event, local, global) {
            return this
        }

        setupToolbar() {
            this.toolbar = new PIXI.Graphics();
            this.record = new RecordCommand(this, 0xCC0000, new PIXI.Circle(0, 0, 16));
            this.play = new PlayCommand(this, 0x0000CC, new PIXI.Polygon(0, 16,
                32, 16 + 16,
                0, 16 + 32,
                0, 16));
            this.stop = new StopCommand(this, 0x0000CC,
                new PIXI.Rectangle(0, 0, 32, 32));
            this.toolbar.addChild(this.record).position.set(44, 48);
            this.toolbar.addChild(this.play).position.set(44 + 44, 16);
            this.toolbar.addChild(this.stop).position.set(44 + 44 + 44 + 16, 32);
            this.updateToolbar();
            this.addChild(this.toolbar);
        }

        updateToolbar() {
            var graphics = this.toolbar;
            graphics.clear();
            graphics.beginFill(0x000000, 0.5);
            graphics.lineStyle(2, 0xFFFFFF, 1);
            graphics.drawRoundedRect(16, 16, 44 * 4 + 8, 64, 8);
            graphics.endFill();
        }

        onMouseWheel(event) {
            console.log('onMouseWheel missing');
        }

        onPress(point) {
            if (this.record.containsPoint(point)) {
                this.record.toggle();
            }
            if (this.play.containsPoint(point)) {
                this.play.toggle();
            }
            if (this.stop.containsPoint(point)) {
                this.stop.toggle();
                if (this.onReset) {
                    this.onReset();
                }
            }
        }

        mapPositionToPoint(point) {
            let local = new PIXI.Point();
            this.renderer.plugins.interaction.mapPositionToPoint(local, point.x, point.y);
            return local
        }

        extractLocal(event) {
            return this.mapPositionToPoint(Events.extractPoint(event))
        }

        capture(event) {
            if (typeof event.mouseDownSubstitute != 'undefined')
                return false
            return true
        }

        startReplay() {
            if (this.onReset) {
                this.onReset();
            }
            this.record.startReplay();
        }

        showTouches() {
            this.addChild(this.touchGraphics);
        }

        recordEvent(event) {
            if (this.record.selected) {
                this.record.recordEvent(event);
            }
        }

        onStart(event, interaction) {
            let local = this.extractLocal(event);
            if (!this.toolbar.containsPoint(local)) {
                this.recordEvent(event);
                this.updateTouchGraphics(interaction);
            }
        }

        onMove(event, interaction) {
            let local = this.extractLocal(event);
            if (!this.toolbar.containsPoint(local)) {
                this.recordEvent(event);
                this.updateTouchGraphics(interaction);
            }
        }

        onEnd(event, interaction) {
            let local = this.extractLocal(event);
            if (this.toolbar.containsPoint(local)) {
                this.onPress(local);
            }
            else {
                this.recordEvent(event);
                this.updateTouchGraphics(interaction);
            }
        }

        updateTouchGraphics(interaction) {
            let current = interaction.current;
            let graphics = this.touchGraphics;
            if (graphics != null) {
                graphics.clear();
                for (let key of current.keys()) {
                    if (interaction.ended.has(key)) {
                        continue
                    }
                    let p = current.get(key);
                    if (key == 'mouse') {
                        graphics.beginFill(0xCC0000, 0.5);
                    } else {
                        graphics.beginFill(0xCCCCCC, 0.5);
                    }
                    graphics.drawCircle(p.x, p.y, 20);
                }
                graphics.endFill();
            }
        }
    }

    class AppTest extends PIXIApp {

        constructor(canvas, container) {
            super({ view: canvas, backgroundColor: 0x000000 });
            this.container = container;
        }

        sceneFactory() {
            return new RecorderTools(this.renderer)
        }

        setup() {
            super.setup();
            this.scene.setup(this.container);
        }

        run(reset = null) {
            this.scene.onReset = reset;
            console.log('Running AppTest');
            return this
        }
    }

    /**
     * Defines usefull default text styles.
     */
    class FontInfo {

        static get small() {
            return app.theme.textStyleSmall
        }

        static get normal() {
            return app.theme.textStyle
        }

        static get centered() {
            return Object.assign({}, app.theme.textStyle, { align: 'center' })
        }
    }

    /**
     * Static methods to support hyphenation of lines.
     * 
     * @class Hypenate
     */
    class Hypenate {

        static splitPart(part) {
            let parts = part.split('-');
            if (parts.length == 1)
                return [part]
            let result = [];
            let last = parts.pop();
            for (let p of parts) {
                result.push(p + '-');
            }
            result.push(last);
            return result.filter(p => p.length > 0)
        }

        static splitWord(word) {
            if (typeof (language) == 'undefined') {
                if (word.indexOf('-') > -1) {
                    return word.split('-')
                }
                return [word]
            }
            let parts = language.hyphenate(word);
            let result = [];
            for (let part of parts) {
                for (let splitted of this.splitPart(part)) {
                    result.push(splitted);
                }
            }
            return result
        }

        static abbreviateLine(label, style, width) {
            const pixiStyle = new PIXI.TextStyle(style);   
            let metrics = PIXI.TextMetrics.measureText(label, pixiStyle);
            while(metrics.width > width && label.length > 3) {
                label = label.slice(0, label.length-1);
                metrics = PIXI.TextMetrics.measureText(label, pixiStyle);
            }
            label = label.slice(0, label.length-1);
            return label + '…'
        }

        static splitLine(line, pixiStyle, width, space, minus) {
            let x = 0;
            let result = '';
            let words = line.split(' ');
            for (let word of words) {
                let wordMetrics = PIXI.TextMetrics.measureText(word, pixiStyle);
                if (x + wordMetrics.width >= width) {
                    let parts = this.splitWord(word);
                    let newWord = '';
                    if (parts.length == 1) {
                        newWord += '\n' + word + ' ';
                        x = wordMetrics.width + space.width;
                    }
                    else {
                        let first = true;
                        let lastPart = '';
                        for (let part of parts) {
                            let partMetrics = PIXI.TextMetrics.measureText(part, pixiStyle);
                            if (x + partMetrics.width + space.width > width) {
                                newWord += ((first || lastPart.endsWith('-')) ? '\n' : '-\n') + part;
                                x = partMetrics.width;
                            }
                            else {
                                newWord += part;
                                x += partMetrics.width;
                            }
                            lastPart = part;
                            first = false;
                        }
                        x += space.width;
                    }
                    result += newWord + ' ';
                }
                else {
                    result += word + ' ';
                    x += wordMetrics.width + space.width;
                }
            }
            return result
        }

        /**
         *  Main method and entry point for text hyphenation 
         *
         * @static
         * @param {*} text
         * @param {*} style
         * @param {*} width
         * @memberof Hypenate
         * @returns {string}
         */
        static splitLines(text, style, width) {
            const pixiStyle = new PIXI.TextStyle(style);
            const lines = text.split('\n');
            const space = PIXI.TextMetrics.measureText(' ', pixiStyle);
            const minus = PIXI.TextMetrics.measureText('-', pixiStyle);
            let result = [];
            for (let line of lines) {
                result.push(this.splitLine(line, pixiStyle, width, space, minus));
            }
            return result.join('\n')
        }
    }

    class TextLabel extends PIXI.Text {

        /**
         *Creates an instance of TextLabel.
         * @param {string} text - The string that you would like the text to display
         * @param {object|PIXI.TextStyle} [style] - The style parameters 
         * @param {canvas} 
         * @memberof TextLabel
         */
        constructor(text, style=null, canvas=null, { minZoom = 0.1, maxZoom = 10} = {}) {
            super(text, style, canvas );
            this.normFontSize = this.style.fontSize; 
            this.minZoom = minZoom;
            this.maxZoom = maxZoom;
        }

        zoom(factor) {
            let oldValue = parseFloat(this.style.fontSize) / this.normFontSize;
            let value = oldValue * factor;
            this.setZoom(value);
        }

        setZoom(value) {
            let oldValue = parseFloat(this.style.fontSize) / this.normFontSize;
            if (value > this.maxZoom) {
                value = this.maxZoom;
            }
            if (value < this.minZoom) {
                value = this.minZoom;
            }
            if (value != oldValue) {
                this.style.fontSize = Math.max(value * this.normFontSize, 1);
            }
        }

        setZoomAndScale(scale) {
            this.scale.set(1 / scale);
            this.setZoom(scale);
        }
    }

    /**
     * A specialization of the PIXI.Graphics class that allows to
     * resuse and place labels across different layout variants
     *
     * @export
     * @class LabeledGraphics
     * @extends {PIXI.Graphics}
     */
    class LabeledGraphics extends PIXI.Graphics {

        /**
         * Creates an instance of LabeledGraphics and defines a local label cache.
         * 
         * @memberof LabeledGraphics
         */
        constructor() {
            super();
            this.labels = new Map();
        }

        _createText(label, fontInfo) {
            return new TextLabel(label, fontInfo)
        }

        
        /**
         * Main additional method. Ensures that a text object is created that is cached
         * under the given key.
         *
         * @param {*} key - The cache key
         * @param {*} label - The label to show
         * @param {*} [attrs={}] - Defines attributes of the text object. 
         *                               align: 'right', 'left', or 'center'
         *                               justify: 'top', 'bottom', or 'center'
         *                               maxLines: {integer} truncates the text and adds ellipsis
         *                               maxHeight: {number} truncates text that needs more space and adds ellipsis
         *                               maxWidth: {number} word wraps text using hyphenation if possible
         * @param {*} [fontInfo=FontInfo.normal] - Defines PIXI.TextStyle attributes
         * @returns {PIXI.Text} - instance
         * @memberof LabeledGraphics
         */
        ensureLabel(key, label, attrs = {}, fontInfo = FontInfo.normal) {

            if (attrs.maxWidth && attrs.maxLines == 1) {
                label = Hypenate.abbreviateLine(label, fontInfo, attrs.maxWidth);
            }
            else {
                if (attrs.maxWidth) {
                    label = Hypenate.splitLines(label, fontInfo, attrs.maxWidth);
                }
                if (attrs.maxLines) {
                    label = this.truncateLabel(label, fontInfo, attrs.maxLines);
                }
                if (attrs.maxHeight) {
                    let styleInfo = new PIXI.TextStyle(fontInfo);
                    let metrics = PIXI.TextMetrics.measureText(label, styleInfo);
                    let maxLines = Math.max(attrs.maxHeight / metrics.lineHeight, 1);
                    label = this.truncateLabel(label, fontInfo, maxLines);
                }
            }
           
            if (!this.labels.has(key)) {
                let text = this._createText(label, fontInfo);
                this.labels.set(key, text);
                this.addChild(text);
            }
            let text = this.labels.get(key);
            for (let k in attrs) {
                text[k] = attrs[k];
            }
            if (label != text.text)
                text.text = label;
            // We do not follow the flexbox jargon and use align for x and justify for y axis
            // This deviation is needed to ensure backward compatability
            switch (attrs.justify || null) {
                case 'top':
                    text.anchor.y = 0;
                    break
                case 'bottom':
                    text.anchor.x = 1;
                    break
                default:
                    text.anchor.y = 0.5;
                    break
            }
            switch (attrs.align) {
                case 'right':
                    text.anchor.x = 1;
                    break
                case 'center':
                    text.anchor.x = 0.5;
                    break
                default:
                    text.anchor.x = 0;
                    break
            }
            text.visible = true;
            return text
        }

        /**
         * Private method that truncates the text and adds an ellipsis if there are more lines
         * than wanted
         *
         * @param {*} text
         * @param {*} style
         * @param {*} [maxLines=Infinity]
         * @returns {string}
         * @memberof LabeledGraphics
         */
        truncateLabel(text, style, maxLines = Infinity) {
            if (maxLines === Infinity) {
                return text
            }
            const { wordWrapWidth } = style;
            const pixiStyle = new PIXI.TextStyle(style);
            const { lines } = PIXI.TextMetrics.measureText(text, pixiStyle);
            let newText = text;
            if (lines.length > maxLines) {
                const truncatedLines = lines.slice(0, maxLines);
                const lastLine = truncatedLines[truncatedLines.length - 1];
                const words = lastLine.split(' ');
                const wordMetrics = PIXI.TextMetrics.measureText(`\u00A0\n...\n${words.join('\n')}`, pixiStyle);
                const [spaceLength, dotsLength, ...wordLengths] = wordMetrics.lineWidths;
                const { text: newLastLine } = wordLengths.reduce((data, wordLength, i) => {
                    if (data.length + wordLength + spaceLength >= wordWrapWidth) {
                        return { ...data, length: wordWrapWidth }
                    }
                    return {
                        text: `${data.text}${i > 0 ? ' ' : ''}${words[i]}`,
                        length: data.length + wordLength + spaceLength,
                    };
                }, { text: '', length: dotsLength });
                truncatedLines[truncatedLines.length - 1] = `${newLastLine}...`;
                newText = truncatedLines.join('\n');
            }
            return newText
        }

        /**
         * Returns the label for the given key.
         *
         * @param {*} key
         * @returns {Object}
         * @memberof LabeledGraphics
         */
        getLabel(key) {
            return this.labels.get(key)
        }

        /** 
         * Hides the label with the given key.
         * @param {*} key
         * @memberof LabeledGraphics
         */
        hideLabel(key) {
            let label = this.labels.get(key);
            if (label) {
                label.visible = false;
            }
        }

        /** 
         * Removes the label with the given key.
         * @param {*} key
         * @memberof LabeledGraphics
         */
        removeLabel(key) {
            let label = this.labels.get(key);
            this.labels.delete(key);
            label.destroy();
        }

       
        /**
         * Ensures that labels are hidden on clear.
         *
         * @memberof LabeledGraphics
         */
        clear() {
            super.clear();
            for (let key of this.labels.keys()) {
                this.hideLabel(key);
            }
        }

        /**
         * Logs debugging infos
         *
         * @memberof LabeledGraphics
         */
        debugInfos() {
            console.log({ size: this.labels.size, labels: this.labels });
        }
    }


    const labelCache = new Map();

    function getTexture(label, fontInfo = FontInfo.normal) {
        let key = label + fontInfo.fontFamily + fontInfo.fontSize;

        if (labelCache.has(key)) {
            return labelCache.get(key)
        }
        let expandedFont = Object.assign({}, fontInfo);
        expandedFont.fontSize *= window.devicePixelRatio;
        let text = new PIXI.Text(label, expandedFont);
        text.updateText();
        labelCache.set(key, text.texture);
        return text.texture
    }

    class SpriteLabel extends PIXI.Sprite {

        constructor(label, fontInfo) {
            let texture = getTexture(label, fontInfo);
            super(texture);
            this.label = label;
            this.fontInfo = fontInfo;
            this.scale.set(0.8 / window.devicePixelRatio);
        }

        set text(label) {
            this.label = label;
            this.texture = getTexture(label, this.fontInfo);
        }

        get text() {
            return this.label
        }
    }

    class BitmapLabeledGraphics extends LabeledGraphics {

        _createText(label, fontInfo) {
            let texture = getTexture(label, fontInfo);
            return new SpriteLabel(texture)
        }

    }

    class Ticks {

        get reservedPrefixes() {
            return ['decade', 'year', 'month', 'day', 'hour', 'minute', 'second']
        }

        get minWidth() {
            return 10
        }

        format(available) {
            return { year: '2-digit', timeZone: 'UTC' }
        }

        get minLabelWidth() {
            return 44
        }

        get formatKey() {
            return this.key
        }

        dateKey(date) {
            return this.key + date.getFullYear()
        }

        *iter(start, end) {
            let date = this.iterStart(start);
            while (date <= end) {
                yield date;
                date = this.next(date);
            }
            yield date;
        }

        *iterRanges(range) {
            for (let date of this.iter(range.start, range.end)) {
                let next = this.next(date);
                yield { start: date, end: next };
            }
        }

        selectedRange(timeline, info) {
            let first = null;
            let last = null;
            let visibleFirst = null;
            let visibleLast = null;
            let units = 0;
            for (let { start, end } of this.iterRanges(info)) {
                if (timeline.visibleRange(start, end)) {
                    if (first == null) {
                        first = start;
                    }
                    last = end;
                }
                if (timeline.visibleDate(start) && timeline.visibleDate(end)) {
                    units += 1;
                    if (visibleFirst == null) {
                        visibleFirst = start;
                    }
                    visibleLast = end;
                }
            }
            if (first == null)
                return info
            return { start: first, end: last, visibleStart: visibleFirst, visibleEnd: visibleLast, units: units }
        }

        drawTick(timeline, x, y, date) {
            let visible = date > timeline.start && date < timeline.end;
            if (!visible)
                return false
            timeline.drawTick(x);
            return true
        }

        toLocaleString(date, format) {
            return date.toLocaleDateString('de', format)
        }

        draw(timeline, range, width, height, available, format, nextFormat, level) {
            let first = null;
            let last = null;
            let keyedFormat = (format) ? format[this.formatKey] : null;
            let keyedNextFormat = (nextFormat) ? nextFormat[this.formatKey] : null;
            let redundant = (nextFormat) ? this.formatKey in nextFormat : false;
            let fullyRedundant = keyedFormat != null && keyedFormat == keyedNextFormat;
            let y = timeline.getY();

            for (let { start, end } of this.iterRanges(range)) {
                let x = timeline.toX(start);
                let xx = x;
                let yy = y + timeline.tickLabelOffset(-1);
                if (this.drawTick(timeline, x, y, start) && format) {
                    let key = this.dateKey(start);
                    let text = this.toLocaleString(start, format);
                    let align = 'center';
                    let downTick = false;
                    if (nextFormat) {
                        yy = y + timeline.tickLabelOffset(-1, 1);
                        align = 'left';
                        timeline.drawTick(x, 4.2);
                        let nextX = timeline.toX(end) - 100;
                        if (x < 0 && nextX > -100 && !redundant) {
                            xx = Math.min(4, nextX);
                        }
                        else {
                            xx -= 2;
                        }
                        downTick = true;
                    }
                    else if (level > 0) {
                        xx = x + available / 2;
                    }
                    else {
                        downTick = true;
                    }
                    if (!fullyRedundant) {
                        timeline.ensureLabel(key, text,
                            { x: xx, y: yy, align },
                            FontInfo.small);
                    }
                    if (downTick) timeline.drawTick(x, -1);
                }
                if (timeline.visibleRange(start, end)) {
                    if (first == null)
                        first = start;
                    last = end;
                }
            }
            if (first == null)
                return null
            return { start: first, end: last }
        }
    }

    class DecadeTicks extends Ticks {

        get milliseconds() {
            return 10 * 365 * 24 * 60 * 60 * 1000
        }

        format(available) {
            return { year: 'numeric', timeZone: 'UTC' }
        }

        selection(timeline, dates, selected) {
            return dates
        }

        get key() {
            return 'decade'
        }

        get formatKey() {
            return 'year'
        }

        iterStart(start) {
            let modulo = start.getFullYear() % 10;
            let year = start.getFullYear() - modulo;
            return Dates.create(year, 0, 1)
        }

        next(decade) {
            return Dates.nextYear(decade, 10)
        }
    }

    class YearTicks extends Ticks {

        get milliseconds() {
            return 365 * 24 * 60 * 60 * 1000
        }

        format(available) {
            if (available < 44)
                return { year: '2-digit', timeZone: 'UTC' }
            return { year: 'numeric', timeZone: 'UTC' }
        }

        get minLabelWidth() {
            return 22
        }

        get key() {
            return 'year'
        }

        iterStart(start) {
            return Dates.create(start.getFullYear(), 0, 1)
        }

        next(year) {
            return Dates.nextYear(year)
        }
    }

    class MonthTicks extends Ticks {

        get milliseconds() {
            return (365 / 12) * 24 * 60 * 60 * 1000
        }

        format(available) {
            let format = { month: 'narrow', timeZone: 'UTC' };
            if (available > 44)
                format.month = 'short';
            if (available > 66)
                format.year = '2-digit';
            if (available > 100) {
                format.month = 'long';
                format.year = 'numeric';
            }
            return format
        }

        get minLabelWidth() {
            return 32
        }

        get key() {
            return 'month'
        }

        dateKey(date) {
            return this.key + date.getFullYear() + date.getMonth()
        }

        iterStart(start) {
            return Dates.create(start.getFullYear(), start.getMonth(), 1)
        }

        next(month) {
            return Dates.nextMonth(month)
        }
    }

    class DayTicks extends Ticks {

        get milliseconds() {
            return 24 * 60 * 60 * 1000
        }

        format(available) {
            let format = { day: 'numeric', timeZone: 'UTC' };
            if (available > 44)
                format.month = 'short';
            if (available > 100) {
                format.month = 'long';
                format.year = '2-digit';
            }
            if (available > 150) {
                format.weekday = 'short';
            }
            if (available > 200) {
                format.year = 'numeric';
                format.weekday = 'long';
            }
            return format
        }

        get key() {
            return 'day'
        }

        dateKey(date) {
            return this.key + date.getFullYear() + date.getMonth() + date.getDate()
        }

        iterStart(start) {
            return Dates.create(start.getFullYear(), start.getMonth(), start.getDate())
        }

        next(date) {
            return Dates.nextDay(date)
        }
    }

    class TimeTicks {

        constructor(...ticks) {
            this.ticks = ticks;
        }

        selectedRange(timeline) {
            let info = { start: timeline.start, end: timeline.end, units: 0 };
            for (let ticks of this.ticks) {
                info = ticks.selectedRange(timeline, info);
                if (info.units > 1) {
                    timeline.selection = [info.visibleStart, info.visibleEnd];
                    return
                }
            }
            timeline.selection = [info.start, info.end];
        }

        draw(timeline, width, height) {
            let range = timeline;
            let start = timeline.toX(range.start);
            let end = timeline.toX(range.end);
            let size = end - start;
            let duration = timeline.end - timeline.start;
            let formats = new Map();
            let nextFormats = new Map();
            let availables = new Map();
            let previous = null;
            let visible = [];
            for (let ticks of this.ticks) {
                let amount = ticks.milliseconds / duration;
                let available = amount * size;
                availables.set(ticks, available);
                if (available < ticks.minWidth)
                    break
                formats.set(ticks, (available < ticks.minLabelWidth) ? null : ticks.format(available));
                nextFormats.set(previous, formats.get(ticks));
                previous = ticks;
                visible.push(ticks);
            }
            let level = 0;
            for (let ticks of visible) {
                if (range == null)
                    return
                range = ticks.draw(timeline, range, width, height,
                    availables.get(ticks),
                    formats.get(ticks),
                    nextFormats.get(ticks), level);
                level += 1;
            }
        }
    }

    class ColorRanges {

        constructor(label, color, ranges) {
            this.label = label;
            this.color = color;
            this.ranges = ranges;
        }

        draw(timeline, width, height, size = 12) {
            let minimum = 1 / Capabilities.devicePixelRatio;
            let h2 = size;
            timeline.lineStyle(size, this.color);
            for (let range of this.ranges) {
                if (range.to === null) {
                    range.to = Dates.nextDay(range.from);
                }
                let start = timeline.toX(range.from);
                let end = timeline.toX(range.to);
                if (end < start + minimum) {
                    end = start + minimum;
                }
                timeline.moveTo(start, h2);
                timeline.lineTo(end, h2);
            }
        }
    }

    class Timeline extends BitmapLabeledGraphics {

        constructor(width, height, { ticks = null,
            baseLine = 0.5, showRange = true, throwDamping = 0.95 } = {}) {
            super();
            this.wantedWidth = width;
            this.wantedHeight = height;
            this.extraLeft = 0;
            this.extraRight = 0;
            this.inset = 5;
            this.showRange = showRange;
            this.baseLine = baseLine;
            this.tickHeight = 4;
            this.zoom = 1;
            this.minZoom = 1;
            this.maxZoom = 12000;
            this.scroll = 0;
            this.deltas = [];
            this.labelDates = [];
            this.colorRanges = [];
            this.rangeColors = new Cycle(Colors.eminence,
                Colors.steelblue,
                Colors.ochre,
                Colors.turquoise);
            this.callbacks = [];
            this.onTapCallbacks = [];
            this.onDoubleTapCallbacks = [];
            this.onLongPressCallbacks = [];
            this.progress = null;
            this.start = null;
            this.end = null;
            this.selection = null;
            this.autoScroll = false;
            this.direction = -1;
            this.throwDamping = throwDamping;
            this.timeticks = ticks || new TimeTicks(new DecadeTicks(),
                new YearTicks(),
                new MonthTicks(),
                new DayTicks());
            this.labelPrefix = '__';
        }

        updateSelection() {
            if (this.visibleDate(this.start) && this.visibleDate(this.end)) {
                this.selection = [this.start, this.end];
            }
            else {
                this.timeticks.selectedRange(this);
            }

            return this.selection
        }

        addCallback(callback) {
            this.callbacks.push(callback);
        }

        addTabCallback(callback) {
            this.onTapCallbacks.push(callback);
        }

        addDoubleTapCallback(callback) {
            this.onDoubleTapCallbacks.push(callback);
        }

        addLongPressCallback(callback) {
            this.onLongPressCallbacks.push(callback);
        }

        addLabels(labels) {
            this.labelDates = labels;
        }

        range(start, end) {
            this.start = start;
            this.end = end;
        }

        draw(width, height) {
            this.wantedWidth = width;
            this.wantedHeight = height;
            this.redraw();
        }

        updateColorRanges(w, h) {
            let xx = w - this.inset;
            let size = FontInfo.small.fontSize;
            let yy = h - size;
            for (let i = this.colorRanges.length - 1; i >= 0; i--) {
                let cr = this.colorRanges[i];
                let label = cr.label;
                cr.draw(this, w, h);
                let current = this.ensureLabel('colorRange:' + label, label,
                    { x: xx, y: yy, align: 'right' }, FontInfo.small);
                let r = current.getBounds();
                xx -= r.width + 16;

                this.lineStyle(size, cr.color);
                this.moveTo(xx, yy);
                this.lineTo(xx + size, yy);
                xx -= size + 4;
            }
        }

        drawSelectedRamge(selected) {
            this.lineStyle(2, app.theme.primaryColor);
            let start = this.toX(selected[0]);
            let end = this.toX(selected[1]);
            this.moveTo(start, 0);
            this.lineTo(end, 0);
            this.drawTick(start, -1.5, 0);
            this.drawTick(end, -1.5, 0);
        }

        redraw() {
            this.clear();
            let h = this.wantedHeight;
            let w = this.wantedWidth;
            let y = this.getY();
            this.prepareLabels();
            this.updateColorRanges(w, h);

            this.lineStyle(2, 0xFFFFFF);
            if (this.start != null && this.end != null) {
                this.moveTo(this.toX(this.start), y);
                this.lineTo(this.toX(this.end), y);
                this.updateTicksAndLabels(w, h);
                this.updateSelection();
                let selected = this.selection;
                if (selected[0] != this.start && selected[1] != this.end) {
                    if (this.showRange)
                        this.drawSelectedRamge(selected);
                }
                for (let callback of this.callbacks) {
                    callback(this.scroll, this.zoom, this.selection);
                }
            }
            else {
                this.moveTo(this.inset, y);
                this.lineTo(w - this.inset, y);
            }

            if (this.progress != null && this.progress < 1) {
                this.lineStyle(2, 0xCCCCFF);
                this.moveTo(this.inset, y);
                this.lineTo((w - this.inset) * this.progress, y);
            }
        }

        totalWidth(bounded = false) {
            let w = this.wantedWidth - (2 * this.inset);
            return w * this.validZoom(this.zoom, bounded)
        }

        validZoom(zoom, bounded = true) {
            let overshoot = (bounded) ? 1.0 : 2.0;
            zoom = Math.max(zoom, this.minZoom / overshoot);
            zoom = Math.min(zoom, this.maxZoom * overshoot);
            return zoom
        }

        getY() {
            return this.wantedHeight * this.baseLine
        }

        toX(date) {
            let total = this.end - this.start;
            let offset = this.inset + this.scroll;
            let width = this.totalWidth();
            let delta = date - this.start;
            let ratio = delta / total;
            return offset + ratio * width
        }

        fromX(value) {
            let total = this.end - this.start;
            let offset = this.inset + this.scroll;
            let width = this.totalWidth();
            let ratio = (value - offset) / width;
            let time = this.start.getTime() + total * ratio;
            let date = new Date(time);
            return date
        }

        drawTick(x, direction = 1, y = null) {
            if (y == null) {
                y = this.getY();
            }
            this.moveTo(x, y);
            this.lineTo(x, y - (this.tickHeight * direction * this.direction));
        }

        prepareLabels() {
            for (let key of this.labels.keys()) {
                if (!key.startsWith(this.labelPrefix))
                    this.labels.get(key).visible = false;
            }
        }

        updateTicksAndLabels(width, height) {
            this.drawTick(this.toX(this.start));
            this.drawTick(this.toX(this.end));
            this.timeticks.draw(this, width, height);
            this.updateLabels(width, height);
        }

        visibleDate(date, offset = 0) {
            if (date >= this.start && date <= this.end) {
                let x = this.toX(date) + offset;
                return (x > 0 && x < this.wantedWidth)
            }
            return false
        }

        visibleRange(start, end) {
            let x = this.toX(start);
            if (x > this.wantedWidth)
                return false
            x = this.toX(end);
            if (x < 0)
                return false
            return true
        }

        tickLabelOffset(direction = 1, level = 0) {
            let fs = FontInfo.small.fontSize;
            let dh = fs + (level * (fs + 2));
            return this.direction * direction * dh
        }

        updateLabels(width, height) {
            let h2 = height / 2;
            if (this.labelDates) {
                let last = null;
                let y = h2 + this.tickLabelOffset();
                for (let i = this.labelDates.length - 1; i >= 0; i--) {
                    let [label, date] = this.labelDates[i];
                    let align = 'center'; // (last == null) ? 'right' : 'left'
                    let x = this.toX(date);
                    let current = this.ensureLabel(this.labelPrefix + label, label,
                        {
                            x: x, y: y,
                            align
                        },
                        FontInfo.small);
                    let r = current.getBounds();
                    current.visible = !(last != null && r.x + r.width > last.x);
                    if (current.visible) {
                        this.drawTick(x, -1);
                        last = r;
                    }
                }
            }
            else {
                let start = this.start.toLocaleDateString('de', { year: 'numeric', month: 'numeric', day: 'numeric' });
                let end = this.end.toLocaleDateString('de', { year: 'numeric', month: 'numeric', day: 'numeric' });
                this.ensureLabel(this.labelPrefix + 'start', start, { x: this.toX(this.start), y: h2 });
                this.ensureLabel(this.labelPrefix + 'end', end, { x: this.toX(this.end), y: h2, align: 'right' });
            }
        }

        onZoom(zoom, anchor) {
            let date = this.fromX(anchor.x);
            let newZoom = this.validZoom(this.zoom * zoom, false);
            this.zoom = newZoom;
            let newX = this.toX(date);
            this.scroll += anchor.x - newX;
        }

        onStart(event, interaction) {
            this.killTweens();
            this.deltas = [];
            this.validScroll();
            if (typeof ThrowPropsPlugin != "undefined") {
                ThrowPropsPlugin.track(this, 'delta');
            }
        }

        onMove(event, interaction) {
            let delta = interaction.delta();
            this.scroll += delta.x;
            while (this.deltas.length > 10) {
                this.deltas.pop(0);
            }
            this.deltas.push(delta.x);
            if (interaction.current.size > 1) {
                this.onZoom(delta.zoom, delta.about);
            }
            this.redraw();
        }

        onEnd(event, interaction) {

            if (typeof ThrowPropsPlugin != "undefined") {
                let vel = ThrowPropsPlugin.getVelocity(this, 'delta');
                ThrowPropsPlugin.untrack(this);
            }

            this.killTweens();
            this.redraw();
            let delta = 0;
            for (let d of this.deltas) {
                delta += d;
            }
            if (this.deltas.length > 0) {
                delta /= this.deltas.length;
            }
            this.autoScroll = true;
            let anchor = interaction.current.mean();
            this.keepInBounds(delta, anchor);

            for(let key of interaction.ended.keys()) {
                if (interaction.isDoubleTap(key)) {
                    this.onDoubleTap(event, interaction, key);
                }
                else if (interaction.isTap(key)) {
                    this.onTap(event, interaction, key);
                }
                else if (interaction.isLongPress(key)) {
                    this.onLongPress(event, interaction, key);
                }
            }
        }

        onLongPress(event, interaction, key) {
            for(let callback of this.onLongPressCallbacks) {
                callback(event, interaction, key);
            }
        }

        onTap(event, interaction, key) {
            for(let callback of this.onTapCallbacks) {
                callback(event, interaction, key);
            }
        }

        onDoubleTap(event, interaction, key) {
            for(let callback of this.onDoubleTapCallbacks) {
                callback(event, interaction, key);
            }
        }

        _scrollMinimum(bounded) {
            let total = this.totalWidth(bounded);
            return -total + this.wantedWidth - 2 * this.inset
        }

        _scrollMaximum(bounded) {
            let total = this.totalWidth(bounded);
            let limit = this.wantedWidth;
            if (total > limit)
                return 0
            let w = limit - 2 * this.inset;
            return (w - total) / 2
        }

        scrollMinimum(bounded) {
            return this._scrollMinimum(bounded) - this.extraRight
        }

        scrollMaximum(bounded) {
            return this._scrollMaximum(bounded) + this.extraLeft
        }

        killTweens() {
            TweenLite.killTweensOf(this);
            this.autoScroll = false;
        }


        validScroll(bounded = true) {
            let minimum = this.scrollMinimum(bounded);
            let maximum = this.scrollMaximum(bounded);
            if (this.scroll < minimum) {
                this.scroll = minimum;
            }
            if (this.scroll > maximum) {
                this.scroll = maximum;
            }
        }

        keepInBounds(delta, anchor) {
            let bounded = true;
            let minimum = this.scrollMinimum(bounded);
            let maximum = this.scrollMaximum(bounded);
            let tweens = {};
            if (this.zoom > this.maxZoom) {
                tweens.zoom = this.maxZoom;
                let date = this.fromX(anchor.x);
                let oldZoom = this.zoom;
                this.zoom = this.maxZoom;
                let newX = this.toX(date);
                tweens.scroll = this.scroll + anchor.x - newX;
                this.zoom = oldZoom;
            }
            else {
                if (this.zoom < this.minZoom) {
                    tweens.zoom = this.minZoom;
                }
                if (this.scroll > maximum) {
                    tweens.scroll = maximum;
                }
                if (this.scroll < minimum) {
                    tweens.scroll = minimum;
                }
            }
            if (!isEmpty(tweens)) {
                tweens.onUpdate = () => { this.redraw(); };
                TweenLite.to(this, 0.5, tweens).delay(0.1);
                return
            }
            this.scroll += delta;
            delta *= this.throwDamping;
            this.redraw();
            if (Math.abs(delta) > 1 && this.autoScroll) {
                setTimeout(() => this.keepInBounds(delta, anchor), 1000 / 100);
            }
        }

        onMouseWheel(event) {
            this.killTweens();
            let direction = event.detail < 0 || event.wheelDelta > 0;
            let anchor = { x: event.clientX, y: event.clientY };
            const zoomFactor = 1.5;
            this.onZoom((direction) ? zoomFactor : 1 / zoomFactor, anchor);
            this.redraw();
            this.keepInBounds(0, anchor);
        }

        showRanges(ranges, label = "Untitled", color = null) {
            for (let cr of this.colorRanges) {
                if (cr.label == label)
                    return
            }
            while (this.colorRanges.length >= this.rangeColors.length) {
                this.colorRanges.shift();
            }
            this.colorRanges.push(new ColorRanges(label, color, ranges));
            this.redraw();
        }
    }

    /**
     * pixi.js scrollbox: a masked content box that can scroll vertically or horizontally with scrollbars
     */
    class Scrollbox extends PIXI.Container {
        /**
         * create a scrollbox
         * @param {object} options
         * @param {boolean} [options.dragScroll=true] user may drag the content area to scroll content
         * @param {string} [options.overflowX=auto] (none, scroll, hidden, auto) this changes whether the scrollbar is shown
         * @param {string} [options.overflowY=auto] (none, scroll, hidden, auto) this changes whether the scrollbar is shown
         * @param {string} [options.overflow] (none, scroll, hidden, auto) sets overflowX and overflowY to this value
         * @param {number} [options.boxWidth=100] width of scrollbox including scrollbar (in pixels)
         * @param {number} [options.boxHeight=100] height of scrollbox including scrollbar (in pixels)
         * @param {number} [options.scrollbarSize=10] size of scrollbar (in pixels)
         * @param {number} [options.scrollbarOffsetHorizontal=0] offset of horizontal scrollbar (in pixels)
         * @param {number} [options.scrollbarOffsetVertical=0] offset of vertical scrollbar (in pixels)
         * @param {boolean} [options.stopPropagation=true] call stopPropagation on any events that impact scrollbox
         * @param {number} [options.scrollbarBackground=0xdddddd] background color of scrollbar
         * @param {number} [options.scrollbarBackgroundAlpha=1] alpha of background of scrollbar
         * @param {number} [options.scrollbarForeground=0x888888] foreground color of scrollbar
         * @param {number} [options.scrollbarForegroundAlpha=1] alpha of foreground of scrollbar
         * @param {string} [options.underflow=top-left] what to do when content underflows the scrollbox size: none: do nothing; (left/right/center AND top/bottom/center); OR center (e.g., 'top-left', 'center', 'none', 'bottomright')
         * @param {(boolean|number)} [options.fade] fade the scrollbar when not in use (true = 1000ms)
         * @param {number} [options.fadeWait=3000] time to wait before fading the scrollbar if options.fade is set
         * @param {(string|function)} [options.fadeEase=easeInOutSine] easing function to use for fading
         */
        constructor(options)
        {
            super();
            this.options = Object.assign({}, {
                boxWidth: 100,
                boxHeight: 100,
                scrollbarSize: 10,
                scrollbarBackground: 14540253,
                scrollbarBackgroundAlpha: 1,
                scrollbarForeground: 8947848,
                scrollbarForegroundAlpha: 1,
                dragScroll: true,
                stopPropagation: true,
                scrollbarOffsetHorizontal: 0,
                scrollbarOffsetVertical: 0,
                underflow: 'top-left',
                fadeScrollbar: false,
                fadeWait: 3000,
                fadeEase: 'easeInOutSine'
            }, options);
            this.ease = new PIXI.extras.Ease.list();

            this.on('added', event => {
                this.update();
            });

            /**
             * content in placed in here
             * you can use any function from pixi-viewport on content to manually move the content (see https://davidfig.github.io/pixi-viewport/jsdoc/)
             * @type {PIXI.extras.Viewport}
             */
            this.content = this.addChild(new PIXI.extras.Viewport({ passiveWheel: this.options.stopPropagation, stopPropagation: this.options.stopPropagation, screenWidth: this.options.boxWidth, screenHeight: this.options.boxHeight }));
            this.content
                .decelerate()
                .on('moved', () => this._drawScrollbars());

            /**
             * graphics element for drawing the scrollbars
             * @type {PIXI.Graphics}
             */
            this.scrollbar = this.addChild(new PIXI.Graphics());
            this.scrollbar.interactive = true;
            this.scrollbar.on('pointerdown', this.scrollbarDown, this);
            this.interactive = true;
            this.on('pointermove', this.scrollbarMove, this);
            this.on('pointerup', this.scrollbarUp, this);
            this.on('pointercancel', this.scrollbarUp, this);
            this.on('pointerupoutside', this.scrollbarUp, this);
            this._maskContent = this.addChild(new PIXI.Graphics());
            this.update();
        }

        /**
         * offset of horizontal scrollbar (in pixels)
         * @type {number}
         */
        get scrollbarOffsetHorizontal()
        {
            return this.options.scrollbarOffsetHorizontal
        }
        set scrollbarOffsetHorizontal(value)
        {
            this.options.scrollbarOffsetHorizontal = value;
        }

        /**
         * offset of vertical scrollbar (in pixels)
         * @type {number}
         */
        get scrollbarOffsetVertical()
        {
            return this.options.scrollbarOffsetVertical
        }
        set scrollbarOffsetVertical(value)
        {
            this.options.scrollbarOffsetVertical = value;
        }

        /**
         * disable the scrollbox (if set to true this will also remove the mask)
         * @type {boolean}
         */
        get disable()
        {
            return this._disabled
        }
        set disable(value)
        {
            if (this._disabled !== value)
            {
                this._disabled = value;
                this.update();
            }
        }

        /**
         * call stopPropagation on any events that impact scrollbox
         * @type {boolean}
         */
        get stopPropagation()
        {
            return this.options.stopPropagation
        }
        set stopPropagation(value)
        {
            this.options.stopPropagation = value;
        }

        /**
         * user may drag the content area to scroll content
         * @type {boolean}
         */
        get dragScroll()
        {
            return this.options.dragScroll
        }
        set dragScroll(value)
        {
            this.options.dragScroll = value;
            if (value)
            {
                this.content.drag();
            }
            else
            {
                this.content.removePlugin('drag');
            }
            this.update();
        }

        /**
         * width of scrollbox including the scrollbar (if visible)- this changes the size and not the scale of the box
         * @type {number}
         */
        get boxWidth()
        {
            return this.options.boxWidth
        }
        set boxWidth(value)
        {
            this.options.boxWidth = value;
            this.content.screenWidth = value;
            this.update();
        }

        /**
         * sets overflowX and overflowY to (scroll, hidden, auto) changing whether the scrollbar is shown
         * scroll = always show scrollbar
         * hidden = hide overflow and do not show scrollbar
         * auto = if content is larger than box size, then show scrollbar
         * @type {string}
         */
        get overflow()
        {
            return this.options.overflow
        }
        set overflow(value)
        {
            this.options.overflow = value;
            this.options.overflowX = value;
            this.options.overflowY = value;
            this.update();
        }

        /**
         * sets overflowX to (scroll, hidden, auto) changing whether the scrollbar is shown
         * scroll = always show scrollbar
         * hidden = hide overflow and do not show scrollbar
         * auto = if content is larger than box size, then show scrollbar
         * @type {string}
         */
        get overflowX()
        {
            return this.options.overflowX
        }
        set overflowX(value)
        {
            this.options.overflowX = value;
            this.update();
        }

        /**
         * sets overflowY to (scroll, hidden, auto) changing whether the scrollbar is shown
         * scroll = always show scrollbar
         * hidden = hide overflow and do not show scrollbar
         * auto = if content is larger than box size, then show scrollbar
         * @type {string}
         */
        get overflowY()
        {
            return this.options.overflowY
        }
        set overflowY(value)
        {
            this.options.overflowY = value;
            this.update();
        }

        /**
         * height of scrollbox including the scrollbar (if visible) - this changes the size and not the scale of the box
         * @type {number}
         */
        get boxHeight()
        {
            return this.options.boxHeight
        }
        set boxHeight(value)
        {
            this.options.boxHeight = value;
            this.content.screenHeight = value;
            this.update();
        }

        /**
         * scrollbar size in pixels
         * @type {number}
         */
        get scrollbarSize()
        {
            return this.options.scrollbarSize
        }
        set scrollbarSize(value)
        {
            this.options.scrollbarSize = value;
        }

        /**
         * width of scrollbox less the scrollbar (if visible)
         * @type {number}
         * @readonly
         */
        get contentWidth()
        {
            return this.options.boxWidth - (this.isScrollbarVertical ? this.options.scrollbarSize : 0)
        }

        /**
         * height of scrollbox less the scrollbar (if visible)
         * @type {number}
         * @readonly
         */
        get contentHeight()
        {
            return this.options.boxHeight - (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0)
        }

        /**
         * is the vertical scrollbar visible
         * @type {boolean}
         * @readonly
         */
        get isScrollbarVertical()
        {
            return this._isScrollbarVertical
        }

        /**
         * is the horizontal scrollbar visible
         * @type {boolean}
         * @readonly
         */
        get isScrollbarHorizontal()
        {
            return this._isScrollbarHorizontal
        }

        /**
         * top coordinate of scrollbar
         */
        get scrollTop()
        {
            return this.content.top
        }

        /**
         * left coordinate of scrollbar
         */
        get scrollLeft()
        {
            return this.content.left
        }

        /**
         * width of content area
         * if not set then it uses content.width to calculate width
         */
        get scrollWidth()
        {
            return this._scrollWidth || this.content.width
        }
        set scrollWidth(value)
        {
            this._scrollWidth = value;
        }

        /**
         * height of content area
         * if not set then it uses content.height to calculate height
         */
        get scrollHeight()
        {
            return this._scrollHeight || this.content.height
        }
        set scrollHeight(value)
        {
            this._scrollHeight = value;
        }

        /**
         * draws scrollbars
         * @private
         */
        _drawScrollbars()
        {
            this._isScrollbarHorizontal = this.overflowX === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowX) !== -1 ? false : this.scrollWidth > this.options.boxWidth;
            this._isScrollbarVertical = this.overflowY === 'scroll' ? true : ['hidden', 'none'].indexOf(this.overflowY) !== -1 ? false : this.scrollHeight > this.options.boxHeight;
            this.scrollbar.clear();
            let options = {};
            options.left = 0;
            options.right = this.scrollWidth + (this._isScrollbarVertical ? this.options.scrollbarSize : 0);
            options.top = 0;
            options.bottom = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
            const width = this.scrollWidth + (this.isScrollbarVertical ? this.options.scrollbarSize : 0);
            const height = this.scrollHeight + (this.isScrollbarHorizontal ? this.options.scrollbarSize : 0);
            this.scrollbarTop = (this.content.top / height) * this.boxHeight;
            this.scrollbarTop = this.scrollbarTop < 0 ? 0 : this.scrollbarTop;
            this.scrollbarHeight = (this.boxHeight / height) * this.boxHeight;
            this.scrollbarHeight = this.scrollbarTop + this.scrollbarHeight > this.boxHeight ? this.boxHeight - this.scrollbarTop : this.scrollbarHeight;
            this.scrollbarLeft = (this.content.left / width) * this.boxWidth;
            this.scrollbarLeft = this.scrollbarLeft < 0 ? 0 : this.scrollbarLeft;
            this.scrollbarWidth = (this.boxWidth / width) * this.boxWidth;
            this.scrollbarWidth = this.scrollbarWidth + this.scrollbarLeft > this.boxWidth ? this.boxWidth - this.scrollbarLeft : this.scrollbarWidth;
            if (this.isScrollbarVertical)
            {
                this.scrollbar
                    .beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
                    .drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, 0, this.scrollbarSize, this.boxHeight)
                    .endFill();
            }
            if (this.isScrollbarHorizontal)
            {
                this.scrollbar
                    .beginFill(this.options.scrollbarBackground, this.options.scrollbarBackgroundAlpha)
                    .drawRect(0, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.boxWidth, this.scrollbarSize)
                    .endFill();
            }
            if (this.isScrollbarVertical)
            {
                this.scrollbar
                    .beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
                    .drawRect(this.boxWidth - this.scrollbarSize + this.options.scrollbarOffsetVertical, this.scrollbarTop, this.scrollbarSize, this.scrollbarHeight)
                    .endFill();
            }
            if (this.isScrollbarHorizontal)
            {
                this.scrollbar
                    .beginFill(this.options.scrollbarForeground, this.options.scrollbarForegroundAlpha)
                    .drawRect(this.scrollbarLeft, this.boxHeight - this.scrollbarSize + this.options.scrollbarOffsetHorizontal, this.scrollbarWidth, this.scrollbarSize)
                    .endFill();
            }
            // this.content.forceHitArea = new PIXI.Rectangle(0, 0 , this.boxWidth, this.boxHeight)
            this.activateFade();
        }

        /**
         * draws mask layer
         * @private
         */
        _drawMask()
        {
            this._maskContent
                .beginFill(0)
                .drawRect(0, 0, this.boxWidth, this.boxHeight)
                .endFill();
            this.content.mask = this._maskContent;
        }

        /**
         * call when scrollbox content changes
         */
        update()
        {
            this.content.mask = null;
            this._maskContent.clear();
            if (!this._disabled)
            {
                this._drawScrollbars();
                this._drawMask();
                if (this.options.dragScroll)
                {
                    const direction = this.isScrollbarHorizontal && this.isScrollbarVertical ? 'all' : this.isScrollbarHorizontal ? 'x' : 'y';
                    if (direction !== null)
                    {
                        this.content
                            .drag({ clampWheel: true, direction })
                            .clamp({ direction, underflow: this.options.underflow });
                    }
                }
            }
        }

        /**
         * show the scrollbar and restart the timer for fade if options.fade is set
         */
        activateFade()
        {
            if (this.options.fade)
            {
                if (this.fade)
                {
                    this.ease.remove(this.fade);
                }
                this.scrollbar.alpha = 1;
                const time = this.options.fade === true ? 1000 : this.options.fade;
                this.fade = this.ease.to(this.scrollbar, { alpha: 0 }, time, { wait: this.options.fadeWait, ease: this.options.fadeEase });
                this.fade.on('each', () => this.content.dirty = true);
            }
        }

        /**
         * handle pointer down on scrollbar
         * @param {PIXI.interaction.InteractionEvent} e
         * @private
         */
        scrollbarDown(e)
        {
            const local = this.toLocal(e.data.global);
            if (this.isScrollbarHorizontal)
            {
                if (local.y > this.boxHeight - this.scrollbarSize)
                {
                    if (local.x >= this.scrollbarLeft && local.x <= this.scrollbarLeft + this.scrollbarWidth)
                    {
                        this.pointerDown = { type: 'horizontal', last: local };
                    }
                    else
                    {
                        if (local.x > this.scrollbarLeft)
                        {
                            this.content.left += this.content.worldScreenWidth;
                            this.update();
                        }
                        else
                        {
                            this.content.left -= this.content.worldScreenWidth;
                            this.update();
                        }
                    }
                    if (this.options.stopPropagation)
                    {
                        e.stopPropagation();
                    }
                    return
                }
            }
            if (this.isScrollbarVertical)
            {
                if (local.x > this.boxWidth - this.scrollbarSize)
                {
                    if (local.y >= this.scrollbarTop && local.y <= this.scrollbarTop + this.scrollbarWidth)
                    {
                        this.pointerDown = { type: 'vertical', last: local };
                    }
                    else
                    {
                        if (local.y > this.scrollbarTop)
                        {
                            this.content.top += this.content.worldScreenHeight;
                            this.update();
                        }
                        else
                        {
                            this.content.top -= this.content.worldScreenHeight;
                            this.update();
                        }
                    }
                    if (this.options.stopPropagation)
                    {
                        e.stopPropagation();
                    }
                    return
                }
            }
        }

        /**
         * handle pointer move on scrollbar
         * @param {PIXI.interaction.InteractionEvent} e
         * @private
         */
        scrollbarMove(e)
        {
            if (this.pointerDown)
            {
                if (this.pointerDown.type === 'horizontal')
                {
                    const local = this.toLocal(e.data.global);
                    this.content.left += local.x - this.pointerDown.last.x;
                    this.pointerDown.last = local;
                    this.update();
                }
                else if (this.pointerDown.type === 'vertical')
                {
                    const local = this.toLocal(e.data.global);
                    this.content.top += local.y - this.pointerDown.last.y;
                    this.pointerDown.last = local;
                    this.update();
                }
                if (this.options.stopPropagation)
                {
                    e.stopPropagation();
                }
            }
        }

        /**
         * handle pointer down on scrollbar
         * @private
         */
        scrollbarUp()
        {
            this.pointerDown = null;
        }

        /**
         * resize the mask for the container
         * @param {object} options
         * @param {number} [options.boxWidth] width of scrollbox including scrollbar (in pixels)
         * @param {number} [options.boxHeight] height of scrollbox including scrollbar (in pixels)
         * @param {number} [options.scrollWidth] set the width of the inside of the scrollbox (leave null to use content.width)
         * @param {number} [options.scrollHeight] set the height of the inside of the scrollbox (leave null to use content.height)
         */
        resize(options)
        {
            this.options.boxWidth = typeof options.boxWidth !== 'undefined' ? options.boxWidth : this.options.boxWidth;
            this.options.boxHeight = typeof options.boxHeight !== 'undefined' ? options.boxHeight : this.options.boxHeight;
            if (options.scrollWidth)
            {
                this.scrollWidth = options.scrollWidth;
            }
            if (options.scrollHeight)
            {
                this.scrollHeight = options.scrollHeight;
            }
            this.content.resize(this.options.boxWidth, this.options.boxHeight, this.scrollWidth, this.scrollHeight);
            this.update();
        }

        /**
         * ensure that the bounding box is visible
         * @param {number} x - relative to content's coordinate system
         * @param {number} y
         * @param {number} width
         * @param {number} height
         */
        ensureVisible(x, y, width, height)
        {
            this.content.ensureVisible(x, y, width, height);
            this._drawScrollbars();
        }
    }

    /**
     * Class that represents a PixiJS Scrollview.
     * 
     * @example
     * // Create the app
     * const app = new PIXIApp({
     *     view: canvas,
     *     width: 600,
     *     height: 400
     * }).setup().run()
     * 
     * // Create the Scrollview
     * app.loader
     *     .add('elephant', './assets/elephant-1.jpg')
     *     .load((loader, resources) => {
     *         const sprite = new PIXI.Sprite(resources.elephant.texture)
     *         const scrollview = new Scrollview({boxWidth: 400, boxHeight: 300})
     *         scrollview.content.addChild(sprite)
     *         app.scene.addChild(scrollview)
     *
     * @class
     * @extends PIXI.extras.Scrollbox
     * @see {@link https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html|Scrollbox}
     * @see {@link https://davidfig.github.io/pixi-viewport/jsdoc/Viewport.html|Viewport}
     */
    class Scrollview extends Scrollbox {
        
        /**
         * Creates an instance of a Scrollview.
         * 
         * @constructor
         * @see https://davidfig.github.io/pixi-scrollbox/jsdoc/Scrollbox.html
         */
        constructor(opts = {}) {

            super(opts);

            this.opts = opts;

            // setup
            //-----------------
            this.setup();

            // layout
            //-----------------
            this.layout();
        }
        
        /**
         * Creates children and instantiates everything.
         * 
         * @private
         * @return {Scrollview} A reference to the Scrollview for chaining.
         */
        setup() {

            return this
        }
        
        /**
         * Should be called to refresh the layout of the Scrollview. Can be used after resizing.
         * 
         * @return {Scrollview} A reference to the Scrollview for chaining.
         */
        layout() {

            this.update();

            return this
        }
    }

    /**
     * Callback for the slider action onStart.
     *
     * @callback onStartCallback
     * @param {object} event - The event object.
     * @param {Slider} slider - A reference to the slider (also this refers to the slider).
     */

    /**
     * Callback for the slider action onUpdate.
     *
     * @callback onUpdateCallback
     * @param {object} event - The event object.
     * @param {Slider} slider - A reference to the slider (also this refers to the slider).
     */

    /**
     * Callback for the slider action onComplete.
     *
     * @callback onCompleteCallback
     * @param {object} event - The event object.
     * @param {Slider} slider - A reference to the slider (also this refers to the slider).
     */

    /**
     * Class that represents a PixiJS Slider.
     * 
     * @example
     * // Create the app
     * const app = new PIXIApp({
     *     view: canvas,
     *     width: 900,
     *     height: 250
     * }).setup().run()
     * 
     * // Create the slider
     * const slider = new Slider({
     *     x: 10,
     *     y: 20
     * })
     *
     * // Add the slider to a DisplayObject
     * app.scene.addChild(slider)
     *
     * @class
     * @extends PIXI.Container
     * @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PIXI.Container}
     * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/slider.html|DocTest}
     */
    class Slider extends PIXI.Container {
        
        /**
         * Creates an instance of a Slider.
         * 
         * @constructor
         * @param {object} [opts] - An options object to specify to style and behaviour of the slider.
         * @param {number} [opts.id=auto generated] - The id of the slider.
         * @param {number} [opts.x=0] - The x position of the slider. Can be also set after creation with slider.x = 0.
         * @param {number} [opts.y=0] - The y position of the slider. Can be also set after creation with slider.y = 0.
         * @param {string|Theme} [opts.theme=dark] - The theme to use for this slider. Possible values are dark, light, red
         *     or a Theme object.
         * @param {number} [opts.width=250] - The width of the slider.
         * @param {number} [opts.height=2] - The height of the slider.
         * @param {PIXI.DisplayObject} [opts.container=window.app|object] - The container where the slider events should be attached to.
         * @param {number} [opts.fill=Theme.fill] - The color of the slider background as a hex value.
         * @param {number} [opts.fillAlpha=Theme.fillAlpha] - The alpha value of the background.
         * @param {number} [opts.stroke=Theme.stroke] - The color of the border as a hex value.
         * @param {number} [opts.strokeWidth=Theme.strokeWidth] - The width of the border in pixel.
         * @param {number} [opts.strokeAlpha=Theme.strokeAlpha] - The alpha value of the border.
         * @param {number} [opts.controlFill=Theme.stroke] - The color of the slider control background as a hex value.
         * @param {number} [opts.controlFillAlpha=Theme.strokeAlpha] - The alpha value of the background.
         * @param {number} [opts.controlStroke=Theme.stroke] - The color of the border as a hex value.
         * @param {number} [opts.controlStrokeWidth=Theme.strokeWidth * 0.8] - The width of the border in pixel.
         * @param {number} [opts.controlStrokeAlpha=Theme.strokeAlpha] - The alpha value of the border.
         * @param {number} [opts.controlRadius=16] - The radius of the slider control.
         * @param {boolean} [opts.disabled=false] - Is the slider disabled? When disabled, the slider has a lower alpha value
         *     and cannot be clicked (interactive is set to false).
         * @param {onStartCallback} [opts.onStart] - Executed when the slider control starts to move.
         * @param {onUpdateCallback} [opts.onUpdate] - Executed when the slider control is moved.
         * @param {onCompleteCallback} [opts.onComplete] - Executed when the slider control was dropped.
         * @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip
         *     to display. 
         * @param {boolean} [opts.visible=true] - Is the slider initially visible (property visible)?
         */
        constructor(opts = {}) {

            super();
            
            const theme = Theme.fromString(opts.theme);
            this.theme = theme;

            this.opts = Object.assign({}, {
                id: PIXI.utils.uid(),
                x: 0,
                y: 0,
                width: 250,
                height: 2,
                container: null,
                fill: theme.fill,
                fillAlpha: theme.fillAlpha,
                stroke: theme.stroke,
                strokeWidth: theme.strokeWidth,
                strokeAlpha: theme.strokeAlpha,
                controlFill: theme.fill,
                controlFillAlpha: .5,
                controlStroke: theme.primaryColor,
                controlStrokeWidth: 2,
                controlStrokeAlpha: theme.strokeAlpha,
                controlRadius: 16,
                orientation: 'horizontal',
                min: 0,
                max: 100,
                value: 0,
                disabled: false,
                onStart: null,
                onUpdate: null,
                onComplete: null,
                tooltip: null,
                visible: true
            }, opts);
            
            this.opts.container = this.opts.container || this;

            // Validation
            //-----------------
            if (this.opts.height > this.opts.width) {
                this.opts.height = this.opts.width;
            }

            if (this.opts.value < this.opts.min) {
                this.opts.value = this.opts.min;
            }

            if (this.opts.value > this.opts.max) {
                this.opts.value = this.opts.max;
            }

            // Properties
            //-----------------
            this.id = this.opts.id;
            this.radius = this.opts.height / 2;

            this._value = this.opts.value;
            this._disabled = null;

            this.sliderObj = null;
            this.control = null;
            this.tooltip = null;
            
            this.visible = this.opts.visible;

            // setup
            //-----------------
            this.setup();

            // layout
            //-----------------
            this.layout();
        }
        
        /**
         * Creates children and instantiates everything.
         * 
         * @private
         * @return {Slider} A reference to the slider for chaining.
         */
        setup() {

            // Container events
            //-----------------
            const container = this.opts.container;

            this.on('pointermove', e => {
                if (this.control.dragging) {
                    const moveX = this.control.event.data.getLocalPosition(this.control.parent).x;
                    this._value = this.pixelToValue(moveX - this.control.delta - this.opts.controlRadius);
                    let x = this.valueToPixel(this._value) + this.opts.controlRadius;
                    this.control.x = x;

                    if (this.opts.onUpdate) {
                        this.opts.onUpdate.call(this, e, this);
                    }
                }
            });

            if (container instanceof Element) {
                container.addEventListener('pointerup', e => this.onEnd(e), false);
                container.addEventListener('pointercancel', e => this.onEnd(e), false);
                container.addEventListener('pointerleave', e => this.onEnd(e), false);
                container.addEventListener('pointerout', e => this.onEnd(e), false);
                container.addEventListener('mouseup', e => this.onEnd(e), false);
                container.addEventListener('mousecancel', e => this.onEnd(e), false);
                container.addEventListener('mouseleave', e => this.onEnd(e), false);
                container.addEventListener('mouseout', e => this.onEnd(e), false);
            } else {
                container.interactive = true;
                container.on('pointerup', e => this.onEnd(e));
                container.on('pointercancel', e => this.onEnd(e));
                container.on('pointerleave', e => this.onEnd(e));
                container.on('pointerout', e => this.onEnd(e));
            }

            // Slider
            //-----------------
            let sliderObj = new PIXI.Graphics();
            this.sliderObj = sliderObj;
            this.addChild(sliderObj);

            // Control
            //-----------------
            let control = new PIXI.Graphics();
            control.x = this.opts.controlRadius + this.valueToPixel(this.opts.value);
            control.y = this.opts.controlRadius;

            // pointerdown on the control for dragndrop
            control.on('pointerdown', e => {
                control.event = e;
                control.delta = e.data.getLocalPosition(this.control).x;
                control.dragging = true;
                
                if (this.opts.onStart) {
                    this.opts.onStart.call(this, e, this);
                }
            });

            this.control = control;

            this.addChild(this.control);
            
            // interaction
            //-----------------
            this.sliderObj.on('pointerover', e => {
                TweenLite.to(this.control, this.theme.fast, {alpha: .83});
            });

            this.sliderObj.on('pointerout', e => {
                TweenLite.to(this.control, this.theme.fast, {alpha: 1});
            });

            this.sliderObj.on('pointerdown', e => {
                this.sliderObj.pointerdowned = true;
                TweenLite.to(this.control, this.theme.fast, {alpha: .7});
            });

            // Click on the slider bar
            this.sliderObj.on('pointerup', e => {
                if (this.sliderObj.pointerdowned) {
                    this.sliderObj.pointerdowned = false;
                    const position = e.data.getLocalPosition(this.control.parent);
                    this.value = this.pixelToValue(position.x - this.opts.controlRadius);
                    TweenLite.to(this.control, this.theme.fast, {alpha: .83});
                }
            });

            // disabled
            //-----------------
            this.disabled = this.opts.disabled;
            
            // tooltip
            //-----------------
            if (this.opts.tooltip) {
                if (typeof this.opts.tooltip === 'string') {
                    this.tooltip = new Tooltip({
                        object: this,
                        content: this.opts.tooltip
                    });
                } else {
                    this.opts.tooltip.object = this;
                    this.tooltip = new Tooltip(this.opts.tooltip);
                }
            }

            return this
        }
        
        /**
         * Should be called to refresh the layout of the slider. Can be used after resizing.
         * 
         * @return {Slider} A reference to the slider for chaining.
         */
        layout() {
            
            // set position
            //-----------------
            this.position.set(this.opts.x, this.opts.y);

            // draw
            //-----------------
            this.draw();

            return this
        }
        
        /**
         * Draws the slider to the canvas.
         * 
         * @private
         * @return {Slider} A reference to the slider for chaining.
         */
        draw() {

            const r = this.radius;
            const cr = this.opts.controlRadius;
            const w = this.opts.width;
            const h = this.opts.height;
            const x = cr + r;
            const y = cr + r - h;

            this.sliderObj.clear();
            this.sliderObj.beginFill(0xffffff, 0);
            this.sliderObj.drawRect(0, 0, x + w + cr, cr * 2);
            this.sliderObj.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha);
            this.sliderObj.beginFill(this.opts.fill, this.opts.fillAlpha);
            this.sliderObj.moveTo(x, y);
            this.sliderObj.lineTo(x + w, y);
            this.sliderObj.arcTo(x + w + r, y, x + w + r, y + r, r);
            this.sliderObj.lineTo(x + w + r, y + r + 1);                     // BUGFIX: If not specified, there is a small area without a stroke.
            this.sliderObj.arcTo(x + w + r, y + h, x + w, y + h, r);
            this.sliderObj.lineTo(x, y + h);
            this.sliderObj.arcTo(x - r, y + h, x - r, y + r, r);
            this.sliderObj.arcTo(x - r, y, x, y, r);
            this.sliderObj.endFill();

            // Draw control
            this.control.clear();
            this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha);
            this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha);
            this.control.drawCircle(0, 0, cr - 1);
            this.control.beginFill(this.opts.controlStroke, this.opts.controlStrokeAlpha);
            this.control.drawCircle(0, 0, cr / 6);
            this.control.endFill();

            return this
        }

        /**
         * Executed, when the slider control movement ended.
         * 
         * @private
         * @return {Slider} A reference to the slider for chaining.
         */
        onEnd(e) {

            if (this.control.dragging) {
                this.control.event = null;
                this.control.dragging = false;
                if (this.opts.onComplete) {
                    this.opts.onComplete.call(this, e, this);
                }
            }

            return this
        }

        /**
         * Calculates the value for a given pixel.
         * 
         * @private
         * @param {number} value 
         * @returns  {number} The calucalted pixel.
         */
        valueToPixel(value) {
            if (value < this.opts.min) {
                value = this.opts.min;
            } else if (value > this.opts.max) {
                value = this.opts.max;
            }
            return this.opts.width * (value - this.opts.min) / (this.opts.max - this.opts.min)
        }

        /**
         * Calculates the pixel for a given value.
         * 
         * @private
         * @param {number} pixel 
         * @returns {number} The calucalted value.
         */
        pixelToValue(pixel) {
            if (pixel < 0) {
                pixel = 0;
            } else if (pixel > this.opts.width) {
                pixel = this.opts.width;
            }
            return this.opts.min + ((this.opts.max - this.opts.min) * pixel / this.opts.width)
        }
        
        /**
         * Gets or sets the value.
         * 
         * @member {number}
         */
        get value() {
            return Math.round(this._value)
        }
        set value(value) {
            if (value < this.opts.min) {
                value = this.opts.min;
            } else if (value > this.opts.max) {
                value = this.opts.max;
            }
            this._value = value;

            const x = this.valueToPixel(value) + this.opts.controlRadius;

            TweenLite.to(this.control, this.theme.fast, {x});
        }
        
        /**
         * Gets or sets the disabled state. When disabled, the slider cannot be clicked.
         * 
         * @member {boolean}
         */
        get disabled() {
            return this._disabled
        }
        set disabled(value) {

            this._disabled = value;
            
            if (this._disabled) {
                this.interactive = false;
                this.sliderObj.interactive = false;
                this.control.interactive = false;
                this.control.buttonMode = false;
                this.alpha = .5;
            } else {
                this.interactive = true;
                this.sliderObj.interactive = true;
                this.control.interactive = true;
                this.control.buttonMode = true;
                this.alpha = 1;
            }
        }

        /**
         * Shows the slider (sets his alpha values to 1).
         * 
         * @return {Slider} A reference to the slider for chaining.
         */
        show() {

            this.opts.strokeAlpha = 1;
            this.opts.fillAlpha = 1;
            this.opts.controlStrokeAlpha = 1;
            this.opts.controlFillAlpha = 1;

            this.layout();

            return this
        }
        
        /**
         * Hides the slider (sets his alpha values to 1).
         * 
         * @return {Slider} A reference to the slider for chaining.
         */
        hide() {

            this.opts.strokeAlpha = 0;
            this.opts.fillAlpha = 0;
            this.opts.controlStrokeAlpha = 0;
            this.opts.controlFillAlpha = 0;

            this.layout();

            return this
        }
    }

    /**
     * Callback for the switch action.
     *
     * @callback actionCallback
     * @param {object} event - The event object.
     * @param {Switch} switch - A reference to the switch (also this refers to the switch).
     */

    /**
     * Callback for the switch action.
     *
     * @callback actionActiveCallback
     * @param {object} event - The event object.
     * @param {Switch} switch - A reference to the switch (also this refers to the switch).
     */

    /**
     * Callback for the switch beforeAction.
     *
     * @callback beforeActionCallback
     * @param {object} event - The event object.
     * @param {Switch} switch - A reference to the switch (also this refers to the switch).
     */

    /**
     * Callback for the switch afterAction.
     *
     * @callback afterActionCallback
     * @param {object} event - The event object.
     * @param {Switch} switch - A reference to the switch (also this refers to the switch).
     */

    /**
     * Class that represents a PixiJS Switch.
     * 
     * @example
     * // Create the app
     * const app = new PIXIApp({
     *     view: canvas,
     *     width: 900,
     *     height: 250
     * }).setup().run()
     * 
     * // Create the switch
     * const switch1 = new Switch({
     *     x: 10,
     *     y: 20
     * })
     *
     * // Add the switch to a DisplayObject
     * app.scene.addChild(switch1)
     *
     * @class
     * @extends PIXI.Container
     * @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PIXI.Container}
     * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/switch.html|DocTest}
     */
    class Switch extends PIXI.Container {
        
        /**
         * Creates an instance of a Switch.
         * 
         * @constructor
         * @param {object} [opts] - An options object to specify to style and behaviour of the switch.
         * @param {number} [opts.id=auto generated] - The id of the switch.
         * @param {number} [opts.x=0] - The x position of the switch. Can be also set after creation with switch.x = 0.
         * @param {number} [opts.y=0] - The y position of the switch. Can be also set after creation with switch.y = 0.
         * @param {string|Theme} [opts.theme=dark] - The theme to use for this switch. Possible values are dark, light, red
         *     or a Theme object.
         * @param {number} [opts.width=44] - The width of the switch.
         * @param {number} [opts.height=28] - The height of the switch.
         * @param {number} [opts.fill=Theme.fill] - The color of the switch background as a hex value.
         * @param {number} [opts.fillAlpha=Theme.fillAlpha] - The alpha value of the background.
         * @param {number} [opts.fillActive=Theme.fillActive] - The color of the switch background when activated.
         * @param {number} [opts.fillActiveAlpha=Theme.fillActiveAlpha] - The alpha value of the background when activated.
         * @param {number} [opts.stroke=Theme.stroke] - The color of the border as a hex value.
         * @param {number} [opts.strokeWidth=Theme.strokeWidth] - The width of the border in pixel.
         * @param {number} [opts.strokeAlpha=Theme.strokeAlpha] - The alpha value of the border.
         * @param {number} [opts.strokeActive=Theme.strokeActive] - The color of the border when activated.
         * @param {number} [opts.strokeActiveWidth=Theme.strokeActiveWidth] - The width of the border in pixel when activated.
         * @param {number} [opts.strokeActiveAlpha=Theme.strokeActiveAlpha] - The alpha value of the border when activated.
         * @param {number} [opts.controlFill=Theme.stroke] - The color of the switch control background as a hex value.
         * @param {number} [opts.controlFillAlpha=Theme.strokeAlpha] - The alpha value of the background.
         * @param {number} [opts.controlFillActive=Theme.stroke] - The color of the switch control background when activated.
         * @param {number} [opts.controlFillActiveAlpha=Theme.strokeAlpha] - The alpha value of the background when activated.
         * @param {number} [opts.controlStroke=Theme.stroke] - The color of the border as a hex value.
         * @param {number} [opts.controlStrokeWidth=Theme.strokeWidth * 0.8] - The width of the border in pixel.
         * @param {number} [opts.controlStrokeAlpha=Theme.strokeAlpha] - The alpha value of the border.
         * @param {number} [opts.controlStrokeActive=Theme.stroke] - The color of the border when activated.
         * @param {number} [opts.controlStrokeActiveWidth=Theme.strokeActiveWidth * 0.8] - The width of the border in pixel when activated.
         * @param {number} [opts.controlStrokeActiveAlpha=Theme.strokeActiveAlpha] - The alpha value of the border when activated.
         * @param {number} [opts.duration=Theme.fast] - The duration of the animation when the switch gets activated in seconds.
         * @param {number} [opts.durationActive=Theme.fast] - The duration of the animation when the switch gets deactivated in seconds.
         * @param {boolean} [opts.disabled=false] - Is the switch disabled? When disabled, the switch has a lower alpha value
         *     and cannot be clicked (interactive is set to false).
         * @param {boolean} [opts.active=false] - Is the button initially active?
         * @param {actionCallback} [opts.action] - Executed when the switch was triggered in inactive state (by pointerup).
         * @param {actionActiveCallback} [opts.actionActive] - Executed when the button was triggered in active state (by pointerup).
         * @param {beforeActionCallback} [opts.beforeAction] - Executed before an action is triggered.
         * @param {afterActionCallback} [opts.afterAction] - Executed after an action was triggered.
         * @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip
         *     to display. 
         * @param {boolean} [opts.visible=true] - Is the switch initially visible (property visible)?
         */
        constructor(opts = {}) {

            super();
            
            const theme = Theme.fromString(opts.theme);
            this.theme = theme;

            this.opts = Object.assign({}, {
                id: PIXI.utils.uid(),
                x: 0,
                y: 0,
                width: 44,
                height: 28,
                fill: theme.fill,
                fillAlpha: theme.fillAlpha,
                fillActive: theme.primaryColor,
                fillActiveAlpha: theme.fillActiveAlpha,
                stroke: theme.stroke,
                strokeWidth: theme.strokeWidth,
                strokeAlpha: theme.strokeAlpha,
                strokeActive: theme.primaryColor,
                strokeActiveWidth: theme.strokeActiveWidth,
                strokeActiveAlpha: theme.strokeActiveAlpha,
                controlFill: theme.stroke,
                controlFillAlpha: theme.strokeAlpha,
                controlFillActive: theme.stroke,
                controlFillActiveAlpha: theme.strokeAlpha,
                controlStroke: theme.stroke,
                controlStrokeWidth: theme.strokeWidth * .8,
                controlStrokeAlpha: theme.strokeAlpha,
                controlStrokeActive: theme.stroke,
                controlStrokeActiveWidth: theme.strokeActiveWidth * .8,
                controlStrokeActiveAlpha: theme.strokeActiveAlpha,
                duration: theme.fast,
                durationActive: theme.fast,
                disabled: false,
                active: false,
                action: null,
                actionActive: null,
                beforeAction: null,
                afterAction: null,
                tooltip: null,
                visible: true
            }, opts);

            this.opts.controlRadius = this.opts.controlRadius || (this.opts.height / 2);
            this.opts.controlRadiusActive = this.opts.controlRadiusActive || this.opts.controlRadius;

            // Validation
            //-----------------
            if (this.opts.height > this.opts.width) {
                this.opts.height = this.opts.width;
            }

            // Properties
            //-----------------
            this.id = this.opts.id;
            this.radius = this.opts.height / 2;

            this._active = null;
            this._disabled = null;

            this.switchObj = null;
            this.control = null;
            this.tooltip = null;
            
            this.visible = this.opts.visible;

            // animated
            //-----------------
            this.tempAnimated = {
                fill: this.opts.fill,
                fillAlpha: this.opts.fillAlpha,
                stroke: this.opts.stroke,
                strokeWidth: this.opts.strokeWidth,
                strokeAlpha: this.opts.strokeAlpha,
                controlFill: this.opts.controlFill,
                controlFillAlpha: this.opts.controlFillAlpha,
                controlStroke: this.opts.controlStroke,
                controlStrokeWidth: this.opts.controlStrokeWidth,
                controlStrokeAlpha: this.opts.controlStrokeAlpha,
                controlRadius: this.opts.controlRadius
            };

            // setup
            //-----------------
            this.setup();

            // layout
            //-----------------
            this.layout();
        }
        
        /**
         * Creates children and instantiates everything.
         * 
         * @private
         * @return {Switch} A reference to the switch for chaining.
         */
        setup() {

            // Switch
            //-----------------
            let switchObj = new PIXI.Graphics();
            this.switchObj = switchObj;
            this.addChild(switchObj);

            // Control
            //-----------------
            this.xInactive = this.opts.controlRadius;
            this.xActive = this.opts.width - this.opts.controlRadiusActive;
            
            let control = new PIXI.Graphics();
            control.x = this.opts.active ? this.xActive : this.xInactive;
            control.y = this.opts.height / 2;

            this.control = control;

            this.addChild(this.control);
            
            // interaction
            //-----------------
            this.switchObj.on('pointerover', e => {
                TweenLite.to(this.control, this.theme.fast, {alpha: .83});
            });

            this.switchObj.on('pointerout', e => {
                TweenLite.to(this.control, this.theme.fast, {alpha: 1});
            });

            this.switchObj.on('pointerdown', e => {
                TweenLite.to(this.control, this.theme.fast, {alpha: .7});
            });

            this.switchObj.on('pointerup', e => {

                if (this.opts.beforeAction) {
                    this.opts.beforeAction.call(this, e, this);
                }

                this.active = !this.active;

                if (this.active) {
                    if (this.opts.action) {
                        this.opts.action.call(this, e, this);
                    }
                } else {
                    if (this.opts.actionActive) {
                        this.opts.actionActive.call(this, e, this);
                    }
                }

                TweenLite.to(this.control, this.theme.fast, {alpha: .83});

                if (this.opts.afterAction) {
                    this.opts.afterAction.call(this, e, this);
                }
            });

            // disabled
            //-----------------
            this.disabled = this.opts.disabled;

            // active
            //-----------------
            this.active = this.opts.active;
            
            // tooltip
            //-----------------
            if (this.opts.tooltip) {
                if (typeof this.opts.tooltip === 'string') {
                    this.tooltip = new Tooltip({
                        object: this,
                        content: this.opts.tooltip
                    });
                } else {
                    this.opts.tooltip.object = this;
                    this.tooltip = new Tooltip(this.opts.tooltip);
                }
            }

            return this
        }
        
        /**
         * Should be called to refresh the layout of the switch. Can be used after resizing.
         * 
         * @return {Switch} A reference to the switch for chaining.
         */
        layout() {
            
            // set position
            //-----------------
            this.position.set(this.opts.x, this.opts.y);

            // draw
            //-----------------
            this.draw();

            return this
        }
        
        /**
         * Draws the switch to the canvas.
         * 
         * @private
         * @return {Switch} A reference to the switch for chaining.
         */
        draw() {

            this.switchObj.clear();
            if (this.active) {
                this.switchObj.lineStyle(this.opts.strokeActiveWidth, this.opts.strokeActive, this.opts.strokeActiveAlpha);
                this.switchObj.beginFill(this.opts.fillActive, this.opts.fillActiveAlpha);
            } else {
                this.switchObj.lineStyle(this.opts.strokeWidth, this.opts.stroke, this.opts.strokeAlpha);
                this.switchObj.beginFill(this.opts.fill, this.opts.fillAlpha);
            }
            this.switchObj.moveTo(this.radius, 0);
            this.switchObj.lineTo(this.opts.width - this.radius, 0);
            this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius);
            this.switchObj.lineTo(this.opts.width, this.radius + 1);                                   // BUGFIX: If not specified, there is a small area without a stroke.
            this.switchObj.arcTo(this.opts.width, this.opts.height, this.opts.width - this.radius, this.opts.height, this.radius);
            this.switchObj.lineTo(this.radius, this.opts.height);
            this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius);
            this.switchObj.arcTo(0, 0, this.radius, 0, this.radius);
            this.switchObj.endFill();

            // Draw control
            this.control.clear();
            if (this.active) {
                this.control.lineStyle(this.opts.controlStrokeActiveWidth, this.opts.controlStrokeActive, this.opts.controlStrokeActiveAlpha);
                this.control.beginFill(this.opts.controlFillActive, this.opts.controlFillActiveAlpha);
                this.control.drawCircle(0, 0, this.opts.controlRadiusActive - 1);
            } else {
                this.control.lineStyle(this.opts.controlStrokeWidth, this.opts.controlStroke, this.opts.controlStrokeAlpha);
                this.control.beginFill(this.opts.controlFill, this.opts.controlFillAlpha);
                this.control.drawCircle(0, 0, this.opts.controlRadius - 1);
            }
            this.control.endFill();

            return this
        }
        
        /**
         * Draws the animation.
         * 
         * @private
         * @return {Switch} A reference to the switch for chaining.
         */
        drawAnimated() {

            this.switchObj.clear();
            this.switchObj.lineStyle(this.tempAnimated.strokeWidth, this.tempAnimated.stroke, this.tempAnimated.strokeAlpha);
            this.switchObj.beginFill(this.tempAnimated.fill, this.tempAnimated.fillAlpha);
            this.switchObj.moveTo(this.radius, 0);
            this.switchObj.lineTo(this.opts.width - this.radius, 0);
            this.switchObj.arcTo(this.opts.width, 0, this.opts.width, this.radius, this.radius);
            this.switchObj.lineTo(this.opts.width, this.radius + 1);                                   // BUGFIX: If not specified, there is a small area without a stroke.
            this.switchObj.arcTo(this.opts.width, this.opts.height, this.opts.width - this.radius, this.opts.height, this.radius);
            this.switchObj.lineTo(this.radius, this.opts.height);
            this.switchObj.arcTo(0, this.opts.height, 0, this.radius, this.radius);
            this.switchObj.arcTo(0, 0, this.radius, 0, this.radius);
            this.switchObj.endFill();

            this.control.clear();
            this.control.lineStyle(this.tempAnimated.controlStrokeWidth, this.tempAnimated.controlStroke, this.tempAnimated.controlStrokeAlpha);
            this.control.beginFill(this.tempAnimated.controlFill, this.tempAnimated.controlFillAlpha);
            this.control.drawCircle(0, 0, this.tempAnimated.controlRadius - 1);
            this.control.endFill();

            return this
        }
        
        /**
         * Gets or sets the active state.
         * 
         * @member {boolean}
         */
        get active() {
            return this._active
        }

        set active(value) {

            this._active = value;

            if (this._active) {

                TweenLite.to(this.control, this.opts.duration, {x: this.xActive});
                TweenLite.to(this.tempAnimated, this.opts.duration, {
                    colorProps: {
                        fill: this.opts.fillActive,
                        stroke: this.opts.strokeActive,
                        controlFill: this.opts.controlFillActive,
                        controlStroke: this.opts.controlStrokeActive,
                        format: 'number'
                    },
                    fillAlpha: this.opts.fillActiveAlpha,
                    strokeWidth: this.opts.strokeActiveWidth,
                    strokeAlpha: this.opts.strokeActiveAlpha,
                    controlFillAlpha: this.opts.controlFillActiveAlpha,
                    controlStrokeWidth: this.opts.controlStrokeActiveWidth,
                    controlStrokeAlpha: this.opts.controlStrokeActiveAlpha,
                    controlRadius: this.opts.controlRadiusActive,
                    onUpdate: () => this.drawAnimated(),
                    onComplete: () => this.draw()
                });


            } else {
                TweenLite.to(this.control, this.opts.durationActive, {x: this.xInactive});
                TweenLite.to(this.tempAnimated, this.opts.durationActive, {
                    colorProps: {
                        fill: this.opts.fill,
                        stroke: this.opts.stroke,
                        controlFill: this.opts.controlFill,
                        controlStroke: this.opts.controlStroke,
                        format: 'number'
                    },
                    fillAlpha: this.opts.fillAlpha,
                    strokeWidth: this.opts.strokeWidth,
                    strokeAlpha: this.opts.strokeAlpha,
                    controlFillAlpha: this.opts.controlFillAlpha,
                    controlStrokeWidth: this.opts.controlStrokeWidth,
                    controlStrokeAlpha: this.opts.controlStrokeAlpha,
                    controlRadius: this.opts.controlRadius,
                    onUpdate: () => this.drawAnimated(),
                    onComplete: () => this.draw()
                });
            }
        }
        
        /**
         * Gets or sets the disabled state. When disabled, the switch cannot be clicked.
         * 
         * @member {boolean}
         */
        get disabled() {
            return this._disabled
        }

        set disabled(value) {

            this._disabled = value;
            
            if (this._disabled) {
                this.switchObj.interactive = false;
                this.switchObj.buttonMode = false;
                this.switchObj.alpha = .5;
                this.control.alpha = .5;
            } else {
                this.switchObj.interactive = true;
                this.switchObj.buttonMode = true;
                this.switchObj.alpha = 1;
                this.control.alpha = 1;
            }
        }

        /**
         * Shows the switch (sets his alpha values to 1).
         * 
         * @return {Switch} A reference to the switch for chaining.
         */
        show() {

            this.opts.strokeAlpha = 1;
            this.opts.strokeActiveAlpha = 1;
            this.opts.fillAlpha = 1;
            this.opts.fillActiveAlpha = 1;
            this.opts.controlStrokeAlpha = 1;
            this.opts.controlStrokeActiveAlpha = 1;
            this.opts.controlFillAlpha = 1;
            this.opts.controlFillActiveAlpha = 1;

            this.layout();

            return this
        }
        
        /**
         * Hides the switch (sets his alpha values to 1).
         * 
         * @return {Switch} A reference to the switch for chaining.
         */
        hide() {

            this.opts.strokeAlpha = 0;
            this.opts.strokeActiveAlpha = 0;
            this.opts.fillAlpha = 0;
            this.opts.fillActiveAlpha = 0;
            this.opts.controlStrokeAlpha = 0;
            this.opts.controlStrokeActiveAlpha = 0;
            this.opts.controlFillAlpha = 0;
            this.opts.controlFillActiveAlpha = 0;

            this.layout();

            return this
        }
    }

    /**
     * Class that represents a PixiJS PopupMenu.
     * 
     * @example
     * // Create the button and the modal when clicked
     * const button = new Button({
     *     label: 'Show PopupMenu',
     *     action: e => {
     *         const popupmenu = new PopupMenu({
     *             items: [
     *                 {label: 'Save', action: () => alert('Saved')},
     *                 {label: 'Edit', action: () => alert('Edited')},
     *                 {label: 'Delete', action: () => alert('Deleted')}
     *             ]
     *         })
     *         app.scene.addChild(popupmenu)
     *     }
     * })
     *
     * // Add the button to a DisplayObject
     * app.scene.addChild(button)
     *
     * @class
     * @extends Popup
     * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/popupmenu.html|DocTest}
     */
    class PopupMenu$1 extends Popup {
        
        /**
         * Creates an instance of a PopupMenu.
         * 
         * @constructor
         * @param {object} [opts] - An options object to specify to style and behaviour of the modal.
         * @param {object[]} [opts.items=[]] - A list of the menu items. Each item must be of type object.
         *     If an object has a label property, a PIXI.Text object is created (using the textStyle property).
         *     If an object hasn't a label property, it must contain a content property which has to be a
         *     PIXI.DisplayObject.
         * @param {number} [opts.margin=Theme.margin / 2] - The app where the modal belongs to.
         * @param {object} [opts.textStyle=Theme.textStyle] - The color of the background.
         * @param {boolean} [opts.closeOnPopup=true] - The opacity of the background.
         */
        constructor(opts = {}) {
            
            const theme = Theme.fromString(opts.theme);
            
            opts = Object.assign({}, {
                items: [],
                margin: theme.margin / 2,
                textStyle: theme.textStyle,
                closeOnPopup: true
            }, opts);

            super(opts);
        }
        
        /**
         * Creates children and instantiates everything.
         * 
         * @private
         * @return {PopupMenu} A reference to the popupmenu for chaining.
         */
        setup() {

            // content
            //-----------------
            const content = new PIXI.Container();
            
            let y = 0;
            for (let item of this.opts.items) {

                let object = null;

                if (item.label) {
                    object = new PIXI.Text(item.label, item.textStyle || this.opts.textStyle);
                } else {
                    object = item.content;
                }

                object.y = y;

                if (item.action) {
                    if (item.disabled) {
                        object.alpha = .5;
                    } else {
                        object.interactive = true;
                        object.buttonMode = true;
                    }
                    object.on('pointerover', e => {
                        TweenLite.to(object, this.theme.fast, {alpha: .83, overwrite: 'none'});
                    });
                    object.on('pointerout', e => {
                        TweenLite.to(object, this.theme.fast, {alpha: 1, overwrite: 'none'});
                    });
                    object.on('pointerup', e => {
                        item.action.call(object, e, object);
                        if (this.opts.closeOnAction) {
                            this.hide();
                        }
                    });
                }

                content.addChild(object);

                y += object.height + this.opts.margin;
            }

            this.opts.content = content;

            super.setup();
        }
    }

    /* global Quad */

    /**
     * Class that represents a PixiJS Volatile.
     * 
     * @example
     * const app = new PIXIApp({
     *     view: canvas,
     *     width: 900,
     *     height: 250
     * }).setup().run()
     * 
     * const button = new Button({
     *     label: 'Volatile!',
     *     action: () => {
     *         new Volatile({
     *             object: button,
     *             direction: 'right',
     *             destroyOnComplete: false
     *         })
     *     }
     * })
     * 
     * app.scene.addChild(button)
     *
     * @class
     * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/volatile.html|DocTest}
     */
    class Volatile {
        
        /**
         * Creates an instance of a Volatile.
         * 
         * @constructor
         * @param {object} [opts] - An options object to specify to style and behaviour of the modal.
         * @param {number} [opts.id=auto generated] - The id of the tooltip.
         * @param {PIXI.DisplayObject|PIXI.DisplayObject[]} opts.object - The object where the volatile should be applied to.
         * @param {string} [opts.direction=top] - The animation direction. Possible values: top, right, bottom, left.
         * @param {function} [opts.onStart] - A function which is executed when the volatile animation starts.
         * @param {function} [opts.onComplete] - A function which is executed when the volatile animation finishes.
         * @param {number} [opts.distance=160] - The animation distance.
         * @param {number} [opts.duration=1.5] - The duration of the animation in seconds.
         * @param {object} [opts.ease=Quad.easeOut] - The easing of the animation, see {@link https://greensock.com/docs/Easing}
         * @param {boolean} [opts.destroyOnComplete=true] - Should the object be destroyed after the volatile animation?
         */
        constructor(opts = {}) {
            
            const theme = Theme.fromString(opts.theme);
            this.theme = theme;

            this.opts = Object.assign({}, {
                id: PIXI.utils.uid(),
                object: null,
                direction: 'top',               // top, right, bottom, left
                onStart: null,
                onComplete: null,
                distance: 160,
                duration: 1.5,
                ease: Quad.easeOut,
                destroyOnComplete: true
            }, opts);

            this.id = this.opts.id;

            if (!Array.isArray(this.opts.object)) {
                this.opts.object = [this.opts.object];
            }

            this.objects = this.opts.object;

            // setup
            //-----------------
            this.setup();

            // layout
            //-----------------
            this.layout();

            // run
            //-----------------
            this.run();
        }
        
        /**
         * Creates children and instantiates everything.
         * 
         * @private
         * @return {Volatile} A reference to the volatile for chaining.
         */
        setup() {

            return this
        }
        
        /**
         * Should be called to refresh the layout of the volatile. Can be used after resizing.
         * 
         * @return {Volatile} A reference to the volatile for chaining.
         */
        layout() {
            
            return this
        }
        
        /**
         * Starts the volatile animation.
         * 
         * @private
         * @return {Volatile} A reference to the volatile for chaining.
         */
        run() {

            for (let object of this.objects) {

                let x = object.x;
                let y = object.y;

                switch (this.opts.direction) {
                    case 'top':
                        y -= this.opts.distance;
                        break
                    case 'right':
                        x += this.opts.distance;
                        break
                    case 'bottom':
                        y += this.opts.distance;
                        break
                    case 'left':
                        x -= this.opts.distance;
                        break
                }

                TweenLite.to(object, this.opts.duration, {
                    x,
                    y,
                    alpha: 0,
                    ease: this.opts.ease,
                    overwrite: 'all',
                    onStart: () => {
                        if (this.opts.onStart) {
                            this.opts.onStart.call(object, object);
                        }
                    },
                    onComplete: () => {
                        
                        if (this.opts.onComplete) {
                            this.opts.onComplete.call(object, object);
                        }

                        if (this.opts.destroyOnComplete) {
                            object.destroy({children: true});
                        }
                    }
                });
            }

            return this
        }
    }

    /* globals */

    /**
     * Class that represents a PixiJS List.
     *
     * @example
     * const elephant1 = PIXI.Sprite.fromImage('./assets/elephant-1.jpg')
     * const elephant2 = PIXI.Sprite.fromImage('./assets/elephant-2.jpg')
     * 
     * // Create the list
     * const list = new List([elephant1, elephant2])
     * 
     * app.scene.addChild(list)
     *
     * @class
     * @extends PIXI.Container
     * @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PixiJS Container}
     * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/list.html|DocTest}
     */
    class List extends PIXI.Container {

        /**
         * Creates an instance of a Flippable.
         *
         * @constructor
         * @param {PIXI.DisplayObject[]} items - An array of PIXI.DisplayObjects.
         * @param {object} [opts] - An options object which can contain the following properties.
         * @param {number} [opts.width] - The width of the list. If the items are larger than this width, the overflow
         *     will be hidden.
         * @param {number} [opts.height] - The height of the list. If the items are larger than this height, the overflow
         *     will be hidden.
         * @param {number} [opts.padding=10] - The inner spacing (distance from one item to the previous/next item).
         * @param {number} [opts.margin=10] - The outer spacing (distance from one item to the border).
         * @param {string} [opts.orientation=vertical] - The orientation of the button group. Can be horizontal or vertical.
         * @param {string} [opts.align=left] - The horizontal position of the items. Possible values are
         *     left, center and right.
         * @param {string} [opts.verticalAlign=middle] - The vertical position of the items. Possible values are
         *     top, middle and bottom.
         * @param {PIXI.Application} [opts.app] - The PixiJS Application. Must be set if you want to use the mousewheel to
         *     scroll your list.
         */
        constructor(items = [], opts = {}) {

            super();

            this.opts = Object.assign({}, {
                padding: 10,
                margin: 10,
                orientation: 'vertical',
                align: 'left',
                verticalAlign: 'middle',
                width: null,
                height: null,
                app: null
            }, opts);

            this.__items = items;
            this.__dragging = false;

            // setup
            //--------------------
            this.setup();
        }

        /**
         * Creates children and instantiates everything.
         *
         * @private
         * @return {List} A reference to the list for chaining.
         */
        setup() {

            // inner container
            //--------------------
            const container = new PIXI.Container();
            this.addChild(container);
            this.container = container;

            // mask
            //--------------------
            const mask = new PIXI.Graphics();
            this.addChild(mask);
            this.__mask = mask;

            // add items
            //--------------------
            for(let item of this.__items) {
                container.addChild(item);
            }

            // interaction
            //--------------------
            this.interactive = this.opts.width || this.opts.height;
            this.on('pointerdown', this.onStart.bind(this));
            this.on('pointermove', this.onMove.bind(this));
            this.on('pointerup', this.onEnd.bind(this));
            this.on('pointercancel', this.onEnd.bind(this));
            this.on('pointerout', this.onEnd.bind(this));
            this.on('pointerupoutside', this.onEnd.bind(this));
            this.on('scroll', this.onScroll.bind(this));

            // mousewheel
            //--------------------
            if (this.opts.app) {
                const app = this.opts.app;
                app.view.addEventListener('mousewheel', event => {
                    const bounds = this.mask ? this.mask.getBounds() : this.getBounds();
                    const x = event.clientX - app.view.getBoundingClientRect().left;
                    const y = event.clientY - app.view.getBoundingClientRect().top;
                    if (bounds.contains(x, y)) {
                        event.preventDefault();
                        this.emit('scroll', event);
                    }
                });
            }

            this.layout();

            return this
        }

        /**
         * Replaces the existing items and relayouts the list.
         *
         * @param {PIXI.DisplayObject[]} items - An array of PIXI.DisplayObjects.
         * @return {List} A reference to the list for chaining.
         */
        setItems(items) {
            this.container.removeChildren();
            this.__items = items;
            for(let item of this.__items) {
                this.container.addChild(item);
            }
            this.layout();
        }

        /**
         * Should be called to refresh the layout of the list (the width or the height).
         *
         * @return {List} A reference to the list for chaining.
         */
        layout() {

            const margin = this.opts.margin;

            let x = margin;
            let y = margin;

            for (let item of this.__items) {

                item.x = x;
                item.y = y;

                if (this.opts.orientation === 'vertical') {
                    y += item.height + this.opts.padding;
                } else {
                    x += item.width + this.opts.padding;
                }
            }

            // vertical
            //--------------------
            if (this.opts.orientation === 'vertical') {
                switch (this.opts.align) {
                    case 'center':
                        this.__items.forEach(it => it.x = margin + this.width / 2 - it.width / 2);
                        break
                    case 'right':
                        this.__items.forEach(it => it.x = margin + this.width - it.width);
                        break
                    default:
                        this.__items.forEach(it => it.x = margin);
                        break
                }

                if (this.opts.height) {
                    const mask = this.__mask;
                    mask.clear();
                    mask.beginFill(0x000);
                    mask.drawRect(0, 0, this.width + 2 * margin, this.opts.height);
                    this.mask = mask;

                    this.interactive = this.innerHeight > this.opts.height;
                }
            }

            // horizontal
            //--------------------
            if (this.opts.orientation === 'horizontal') {
                switch (this.opts.verticalAlign) {
                    case 'top':
                        this.__items.forEach(it => it.y = margin);
                        break
                    case 'bottom':
                        this.__items.forEach(it => it.y = margin + this.height - it.height);
                        break
                    default:
                        this.__items.forEach(it => it.y = margin + this.height / 2 - it.height / 2);
                        break
                }

                if (this.opts.width) {
                    const mask = this.__mask;
                    mask.clear();
                    mask.beginFill(0x000);
                    mask.drawRect(0, 0, this.opts.width, this.height + 2 * margin);
                    this.mask = mask;

                    this.interactive = this.innerWidth > this.opts.width;
                }
            }

            return this
        }

        /**
         * 
         */
        get innerWidth() {

            let size = 0;

            this.__items.forEach(it => size += it.width);
            size += this.opts.padding * (this.__items.length - 1);
            size += 2 * this.opts.margin;

            return size
        }

        /**
         * 
         */
        get innerHeight() {

            let size = 0;

            this.__items.forEach(it => size += it.height);
            size += this.opts.padding * (this.__items.length - 1);
            size += 2 * this.opts.margin;

            return size
        }

        /**
         * Resizes the list.
         * 
         * @param {number} widthOrHeight - The new width (if orientation is horizontal) or height (if orientation is vertical) of the list.
         */
        resize(widthOrHeight) {

            if (this.opts.orientation === 'horizontal') {
                this.opts.width = widthOrHeight;
            } else {
                this.opts.height = widthOrHeight;
            }

            this.layout();
        }

        /**
         * 
         * @private
         * @param {*} event 
         */
        onStart(event) {

            this.__dragging = true;

            this.capture(event);

            this.__delta = {
                x: this.container.position.x - event.data.global.x,
                y: this.container.position.y - event.data.global.y
            };

            TweenLite.killTweensOf(this.container.position, {x: true, y: true});
            if (typeof ThrowPropsPlugin != "undefined") {
                ThrowPropsPlugin.track(this.container.position, 'x,y');
            }
        }

        /**
         * 
         * @private
         * @param {*} event 
         */
        onMove(event) {

            if (this.__dragging) {
            
                this.capture(event);

                if (this.opts.orientation === 'horizontal') {
                    this.container.position.x = event.data.global.x + this.__delta.x;
                } else {
                    this.container.position.y = event.data.global.y + this.__delta.y;
                }
            }
        }

        /**
         * 
         * @private
         * @param {*} event 
         */
        onEnd(event) {

            if (this.__dragging) {
                this.__dragging = false;

                this.capture(event);

                const throwProps = {};
                
                if (this.opts.orientation === 'horizontal') {
                    let min = this.opts.width - this.innerWidth;
                    min = min > 0 ? 0 : min;
                    throwProps.x = {
                        velocity: 'auto',
                        min,
                        max: 0
                    };
                } else {
                    let min = this.opts.height - this.innerHeight;
                    min = min > 0 ? 0 : min;
                    throwProps.y = {
                        velocity: 'auto',
                        min,
                        max: 0
                    };
                }

                if (typeof ThrowPropsPlugin != "undefined") {
                    ThrowPropsPlugin.to(this.container.position, {
                        throwProps,
                        ease: Strong.easeOut,
                        onComplete: () => ThrowPropsPlugin.untrack(this.container.position)
                    }, .8, .4);
                }
            }
        }

        /**
         * 
         * @private
         * @param {*} event 
         */
        onScroll(event) {

            this.capture(event);

            if (this.opts.orientation === 'horizontal') {
                this.container.position.x -= event.deltaX;
                if (this.container.position.x > 0) {
                    this.container.position.x = 0;
                } else if (this.container.position.x + this.innerWidth < this.opts.width) {
                    this.container.position.x = this.opts.width - this.innerWidth;
                }
            } else {
                this.container.position.y -= event.deltaY;
                if (this.container.position.y > 0) {
                    this.container.position.y = 0;
                } else if (this.container.position.y + this.innerHeight < this.opts.height) {
                    this.container.position.y = this.opts.height - this.innerHeight;
                }
            }
        }

        /**
         * Captures an event to inform InteractionMapper about processed events.
         *
         * @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
         */
        capture(event) {
            const originalEvent = event.data && event.data.originalEvent ? event.data.originalEvent : event;
            Events$1.capturedBy(originalEvent, this);
        }
    }

    /* Needed to ensure that rollup.js includes class definitions and the classes
    are visible inside doctests.
    */
    window.PIXIApp = PIXIApp;
    window.BlurFilter = BlurFilter;
    window.FlipEffect = FlipEffect;
    window.Flippable = Flippable;
    window.DeepZoomInfo = DeepZoomInfo;
    window.DeepZoomImage = DeepZoomImage;
    window.Popover = Popover;
    window.ScatterContainer = ScatterContainer;
    window.DisplayObjectScatter = DisplayObjectScatter;
    window.Command = Command;
    window.RecorderTools = RecorderTools;
    window.Timeline = Timeline;
    window.AppTest = AppTest;
    window.Theme = Theme;
    window.Button = Button;
    window.ButtonGroup = ButtonGroup;
    window.Scrollview = Scrollview;
    window.Slider = Slider;
    window.Switch = Switch;
    window.Popup = Popup;
    window.PopupMenu = PopupMenu$1;
    window.Modal = Modal;
    window.Volatile = Volatile;
    window.Message = Message;
    window.Tooltip = Tooltip;
    window.Badge = Badge;
    window.Progress = Progress;
    window.List = List;
    window.LabeledGraphics = LabeledGraphics;
    window.FontInfo = FontInfo;

}());