const {fileURL} = require('./utils.js')
const path = require('path')
const electron = require('electron');

/* A specialization that ignores webview events and thus allows
 * webviews to get touch, mouse and wheel events.
 */
class DOMPadContainer extends DOMScatterContainer {

    capture(event) {
        if (event.target.tagName === 'WEBVIEW' || event.target.classList.contains('interactiveElement'))
            return false
        return super.capture(event)
    }
}

/* A wrapper for a webview that behaves like a virtual tablet browser.
 * Uses a DOMScatter to zoom and rotate the virtual browser window.
 * The position of buttons and the border size remain constant.
 */
class Pad {

    constructor(scatterContainer, {
        startScale=1.0, minScale=0.25, maxScale=10.5,
        autoBringToFront=true,
        title='new Pad',
        type='pad',
        url="https://www.iwm-tuebingen.de/www/index.html",
        hideOnStart=false,
        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,
        height=null,
        resizable=false,
    } ={}) {

        this.x = x
        this.y = y
        this.type = type
        this.title=title
        this.url = url
        this.hideOnStart = hideOnStart
        this.width = width
        this.height = height
        this.minScale = minScale
        this.maxScale = maxScale
        this.scatterContainer = scatterContainer
        this.startScale = startScale
        this.scale = startScale
        this.scalable = scalable
        this.rotatable = rotatable
        this.rotationDegrees = this.startRotationDegrees
        this.transformOrigin = transformOrigin

        this.frame = document.createElement('div')
        this.frame.classList.add("pad")
        this.border = 50 / startScale

        Elements.setStyle(this.frame, {
            backgroundColor: "#333",
            position: "absolute",
            display: 'flex',
            width: this.width+"px",
            height: this.height+"px",
            top: 0,
            left: 0,
            visibility: "visible",
            // boxShadow: `10px 10px 10px rgba(0, 0, 0, 0.5)`,
            // borderRadius: '10px',
            overflow: "visible"})

        document.body.appendChild( this.frame)

        this.web=document.createElement("webview")
        this.webBackground=document.createElement("div")
        this.webViewSnapshot=document.createElement("img")
        this.overlay = document.createElement('div')

        this.loadAnim = document.createElement("div")        
        this.loadAnim.style.webkitAnimation= "spin 2s linear infinite"
        this.loadAnim.style.animation= "spin 2s linear infinite"
        this.loadAnim.style.position = "absolute"
        
        document.styleSheets[0].insertRule('\
			@keyframes spin {\
				from { transform: rotateZ(0deg);   }\
				to   { transform: rotateZ(360deg); }\
			}'
        )

        this.overlay.appendChild(this.loadAnim)

        Elements.setStyle(this.web, {
            position: "absolute",
            overflow: "auto",
            border: "1px solid #fff"
        })

        Elements.setStyle(this.webBackground, {
            position: "absolute",
            overflow: "auto",
            background: "white"
        })

        Elements.setStyle(this.overlay, {
            position: "absolute",
            overflow: "auto",
            background: "white",
            opacity: "0.8"
        })

        Elements.setStyle(this.webViewSnapshot, {
            position: "absolute",
            overflow: "auto"
        })

        this.frame.appendChild(this.webBackground)
        this.frame.appendChild(this.web)
        this.frame.appendChild(this.webViewSnapshot)
        // this.frame.appendChild(this.overlay)

        this.webViewSnapshot.style.visibility="hidden"

        this.web.src=url
        this.web.preload= path.join(__dirname, './preloadPad.js')

        this.closeButton = this.addButton("../assets/icons/svg/cross.svg", "close")
        this.backButton = this.addButton("../assets/icons/svg/left.svg", "go back")
        this.forwardButton = this.addButton("../assets/icons/svg/right.svg", "go forward")

        this.backButton.style.opacity = 0.5
        this.forwardButton.style.opacity = 0.5

        /*for (let callback of window.padLoadedHandler) {
            callback(this, url)
        }*/
        this.layout()
        
        this.web.addEventListener('new-window', (e) => {

            if(e.url.indexOf("youtube")>-1)return
            
            if (urlPadMap.has(e.url)) {
                let childPad = urlPadMap.get(e.url)
                childPad.scatter.moveTo(x, y)
                return childPad
            }
            let childPad = new Pad(this.scatterContainer, {
                x: this.scatter.position.x+100,
                y: this.scatter.position.y+100,
                url: e.url,
                width: this.scatter.width,
                height: this.scatter.height,
                scalable: true,
                rotatable: true})
            urlPadMap.set(e.url, childPad)
            
            for(let callback of window.padLoadedHandler) {
                callback(childPad, url)
            }
        })

        this.web.addEventListener('did-navigate', (e) => {
            this.enableButtons()
        })

        this.web.addEventListener('dom-ready',()=>{
            //if(this.url.indexOf('local')>-1)this.web.openDevTools()
        })

        this.web.addEventListener('ipc-message', (e) => {
            if(e.channel=='webviewPointerDown')this.scatter.bringToFront()
        })
        
        this.web.addEventListener('did-start-loading', ()=>{
            this.overlay.style.visibility="visible"
            
            let w = this.overlay.offsetWidth
            let h = this.overlay.offsetHeight

            // console.log("did start loading",h,w)
            
            let animationSize = w<h ? w*0.5 : h*0.5
            let animationRingWidth = animationSize*0.1;

            this.loadAnim.style.border=animationRingWidth+"px solid #f3f3f3"
            this.loadAnim.style.borderTop=animationRingWidth+"px solid #ffb18c"
            this.loadAnim.style.borderRadius="50%"
            this.loadAnim.style.height=animationSize-animationRingWidth*2+"px"
            this.loadAnim.style.width=animationSize-animationRingWidth*2+"px"
            this.loadAnim.style.top = h*0.25+"px"
            this.loadAnim.style.left = w*0.25+"px"
            w<h ? this.loadAnim.style.top = 0.5*(h-animationSize)+"px"  : this.loadAnim.style.left = 0.5*(w-animationSize)+"px"
        })

        this.web.addEventListener('did-stop-loading', (e)=>{
            this.overlay.style.visibility="hidden"
            let query="#"+this.title+"expandButton"
            $(query).css("opacity","1.0")
        })

        this.backButton.addEventListener('click', (e)=>{
            if(this.web.canGoBack()){
                TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
                    TweenMax.to(e.target, 0.1, {scale:"1.0"})
                }})
                this.web.goBack()
            }
        })

        this.forwardButton.addEventListener('click', (e)=>{
            if(this.web.canGoForward()){
                TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
                    TweenMax.to(e.target, 0.1, {scale:"1.0"})
                }})
                this.web.goForward()
            }
        })

        this.closeButton.addEventListener('click', (e)=>{
            TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
                TweenMax.to(e.target, 0.1, {scale:"1.0"})
            }})
            this.close()
        })

        this.scatter = new DOMScatter(this.frame, scatterContainer, {
            x: this.x,
            y: this.y,
            startScale: this.startScale,
            width: this.width,
            height: this.height,
            minScale: this.minScale,
            maxScale: this.maxScale,
            scalable: this.scalable,
            resizable: true,
            rotatable: this.rotatable})
        
        let img=document.createElement("img")
        img.style.width = "70%"
        img.style.position = "absolute"
        img.style.bottom = "20%"
        img.style.right = "20%"
        img.style.pointerEvents="none"
        img.src = "../../assets/icons/png/flat/resize.png"
        this.scatter.resizeButton.appendChild(img)

        this.scatter.moveTo({x, y})
        this.scatter.bringToFront()
        
        this.scatter.addTransformEventCallback((e) => {
            let newBorder = 50 / e.scale
            if (newBorder !== this.border) {
                this.border = newBorder
                this.layout()
            }
        })

    }

    rad2degree(alpha){
        return alpha * 180 / Math.PI;
    }

    degree2rad(alpha){
        return alpha * Math.PI / 180;
    }

    close() {
        // this.frame.style.display="none"
        this.frame.parentNode.removeChild(this.frame)
        urlPadMap.delete(this.url)
    }

    enableButtons() {
        this.backButton.style.opacity = (this.web.canGoBack()) ? 1 : 0.5
        this.forwardButton.style.opacity = (this.web.canGoForward()) ? 1 : 0.5
    }

    addButton(src, value) {
        let button = document.createElement("img")
        button.type = "image"
        button.className = "frameButton"
        button.style.position = "absolute"
        button.src = fileURL(src)
        button.value="close"
        button.draggable = false
        this.frame.appendChild(button)
        return button
    }

    layout() {
        let b = this.border
        let b2 = b * 2
        let b8 = b / 8
        let b25 = b / 25
        let b15 = b / 15
        Elements.setStyle(this.frame, {
            // borderRadius: b8 + "px",
            // boxShadow: `${b25}px ${b15}px ${b8}px rgba(0, 0, 0, 0.5)`
        })
        let size = "calc(100% - " + (2*b+2) +"px)"
        Elements.setStyle(this.web, {
            width: size,
            height: size,
            margin: b+"px"})
        Elements.setStyle(this.webViewSnapshot, {
            width: size,
            height: size,
             margin: b+"px"})
        Elements.setStyle(this.webBackground, {
            width: size,
            height: size,
             margin: b+"px"})

        Elements.setStyle(this.overlay, {
            width: size,
            height: size,
            margin: b+"px"})
        Elements.setStyle(this.closeButton, {
            right: (b * 1.75) + "px",
            bottom: "0px",
            width: b+"px",
            height: b+"px"})
        Elements.setStyle(this.backButton, {
            left: (b * 0.8) +"px",
            bottom: "0px",
            width: b+"px",
            height: b+"px"})
        Elements.setStyle(this.forwardButton, {
            left: (this.border + (b * 0.8)) +"px",
            bottom: "0px",
            width: b+"px",
            height: b+"px"})
    }

}
class PadAccordion {
    
    constructor(scatterContainer, {
        startScale=1.0, minScale=0.25, maxScale=10.5,
        autoBringToFront=true,
        type = 'accordion',
        title="new Pad",
        urlList=["https://www.iwm-tuebingen.de/www/index.html"],
        hideOnStart=false,
        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,
        height=null,
        resizable=false,
    } ={}) {
        
        let w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0]
        this.pageWidth = w.innerWidth || e.clientWidth || g.clientWidth,
        this.pageHeight = w.innerHeight|| e.clientHeight|| g.clientHeight

        this.x = x
        this.y = y
        this.type = type
        this.title=title
        this.urlList = urlList
        this.hideOnStart = hideOnStart
        this.width = width
        this.height = height
        this.minScale = minScale
        this.maxScale = maxScale
        this.scatterContainer = scatterContainer
        this.startScale = startScale
        this.scale = startScale
        this.scalable = scalable
        this.rotatable = rotatable
        this.rotationDegrees = this.startRotationDegrees
        this.transformOrigin = transformOrigin

        this.webviewID = 0
        this.externalPadID = 0
        this.currentWebviewBackground = null
        this.currentWebviewFrame = null
        this.currentWebview = null
        this.currentWebviewImage = null
        this.currentSource=""
        this.webviewMap = new Map()
        this.padMap = new Map()
        this.frame = document.createElement('div')
        this.webFrame = document.createElement('div')
        this.titlebar = document.createElement('div')
        this.frame.classList.add("pad")
        this.border = this.pageHeight*0.023148 / startScale

        this.zIndex=1000
        this.numWebviewsReady = 0

        this.closeAllButton = this.addButton("../assets/icons/png/flat/clear_all.png", "close all")
        this.closeButton = this.addButton("../assets/icons/png/flat/clear.png", "close")
        this.backButton = this.addButton("../assets/icons/svg/left.svg", "go back")
        this.forwardButton = this.addButton("../assets/icons/svg/right.svg", "go forward")
        this.expandButton = this.addButton("../assets/icons/png/flat/launch.png", "expand")

        this.expandButton.id=this.title+"expandButton"

        this.backButton.style.opacity = 0.5
        this.forwardButton.style.opacity = 0.5
        
        /*let pad = new Pad(nodePadContainer, {
            x: 500,
            y: 200,
            title: this.title,
            url: "var/blank.html",
            startScale:1,
            hideOnStart: false,
            width: 1500,
            height: 1500,
            scalable: true,
            rotatable: false})
            

        this.bufferPad=pad*/
        
        // this.bufferPad.frame.id = this.title+"bufferPadFrame"
        // this.bufferPad.web.id = this.title+"bufferPadWeb"
        // this.bufferPad.frame.style.visibility="hidden"

        Elements.setStyle(this.frame, {
            backgroundColor: "#333",
            position: "absolute",
            width: this.width+"px",
            height: this.height+"px",
            visibility: "visible",
            top: 0,
            left: 0
            // boxShadow: `10px 10px 10px rgba(0, 0, 0, 0.5)`,
            // borderRadius: '10px',
        })

        Elements.setStyle(this.webFrame, {
            backgroundColor: "#333",
            position: "absolute",
            // display: 'flex',
            // flexFlow: "row no-wrap",
            overflowX: "hidden",
            width: "100%",
            height: "80%",
            top: 0,
            left: 0
            // boxShadow: `10px 10px 10px rgba(0, 0, 0, 0.5)`,
            // borderRadius: '10px',
        })

        this.titlebar.innerHTML = this.title
        Elements.setStyle(this.titlebar, {
            color: "#fff",
            // backgroundColor: "#F53",
            // innerHTML:"title",
            position: "absolute",
            // display: 'flex',
            // flexFlow: "row no-wrap",
            overflowX: "hidden"
        })

        this.clicker=document.createElement('div')

        Elements.setStyle(this.clicker, {
            backgroundColor: "#F53",
            position: "absolute",
            width: "60px",
            height: "50px",
            bottom: 0,
            left: 0
            // boxShadow: `10px 10px 10px rgba(0, 0, 0, 0.5)`,
            // borderRadius: '10px',
        })


        document.body.appendChild( this.frame)
        this.frame.appendChild( this.webFrame)
        this.frame.appendChild( this.titlebar)
        // this.frame.appendChild( this.clicker)

        this.clicker.addEventListener('click',(e)=>{
            this.arrangeWebviews()
        })

        for(var i=0; i<this.urlList.length; i++){
            this.appendWebView(this.urlList[i].url,this.urlList[i].source)
        }

        // this.appendWebView(this.urlList[0].url,this.urlList[0].source)

        /*for (let callback of window.padLoadedHandler) {
            callback(this, url)
        }*/
        
        /*this.web.addEventListener('new-window', (e) => {

            if(e.url.indexOf("youtube")>-1)return
            
            if (urlPadMap.has(e.url)) {
                let childPad = urlPadMap.get(e.url)
                childPad.scatter.moveTo(x, y)
                return childPad
            }
            let childPad = new Pad(this.scatterContainer, {
                x: this.scatter.position.x+100,
                y: this.scatter.position.y+100,
                url: e.url,
                width: this.scatter.width,
                height: this.scatter.height,
                scalable: true,
                rotatable: true})
            urlPadMap.set(e.url, childPad)
            
            for(let callback of window.padLoadedHandler) {
                callback(childPad, url)
            }
        })

        this.web.addEventListener('did-navigate', (e) => {
            this.enableButtons()
        })

        this.web.addEventListener('dom-ready',()=>{
            //if(this.url.indexOf('local')>-1)this.web.openDevTools()
        })

        this.web.addEventListener('ipc-message', (e) => {
            if(e.channel=='webviewPointerDown')this.scatter.bringToFront()
        })
        
        this.web.addEventListener('did-start-loading', ()=>{
            this.overlay.style.visibility="visible"
            
            let w = this.overlay.offsetWidth
            let h = this.overlay.offsetHeight

            console.log("did start loading",h,w)
            
            let animationSize = w<h ? w*0.5 : h*0.5
            let animationRingWidth = animationSize*0.1;

            this.loadAnim.style.border=animationRingWidth+"px solid #f3f3f3"
            this.loadAnim.style.borderTop=animationRingWidth+"px solid #ffb18c"
            this.loadAnim.style.borderRadius="50%"
            this.loadAnim.style.height=animationSize-animationRingWidth*2+"px"
            this.loadAnim.style.width=animationSize-animationRingWidth*2+"px"
            this.loadAnim.style.top = h*0.25+"px"
            this.loadAnim.style.left = w*0.25+"px"
            w<h ? this.loadAnim.style.top = 0.5*(h-animationSize)+"px"  : this.loadAnim.style.left = 0.5*(w-animationSize)+"px"
        })

        this.web.addEventListener('did-stop-loading', ()=>{
            this.overlay.style.visibility="hidden"
        })*/

        this.scatter = new DOMScatter(this.frame, scatterContainer, {
            x: this.x,
            y: this.y,
            startScale: this.startScale,
            width: this.width,
            height: this.height,
            minScale: this.minScale,
            maxScale: this.maxScale,
            scalable: this.scalable,
            resizable: true,
            rotatable: this.rotatable})
        
        let img=document.createElement("img")
        img.style.width = "70%"
        img.style.position = "absolute"
        img.style.bottom = "20%"
        img.style.right = "20%"
        img.style.pointerEvents="none"
        img.src = "../../assets/icons/png/flat/resize.png"
        this.scatter.resizeButton.appendChild(img)

        this.scatter.moveTo({x, y})
        this.scatter.bringToFront()

        this.currentWebviewHeight = 0

        this.scatter.element.addEventListener('resized',(e)=>{
            // $(this.webFrame).find('.accordionWebimage').css('height',this.currentWebviewHeight)
            
            this.arrangeWebviews()
            // console.log("resized",e,e.detail)
        })

        this.scatter.element.addEventListener('resizeStarted',()=>{
            // this.currentWebviewHeight =  this.webFrame.offsetHeight
            // console.log("resizeStarted")
        })

        this.scatter.element.addEventListener('resizeEnded',()=>{
            /*let h = this.webFrame.offsetHeight
            let cWebview = this.currentWebview
            $(this.webFrame).find('.accordionWebview').each(function(i, obj) {
                // obj.style.visibility="visible"
                if(obj!=cWebview){
                    obj.style.visibility="visible"
                    obj.capturePage((image)=>{
                        obj.parentElement.childNodes[3].src=image.toDataURL()
                        
                        obj.style.visibility="hidden"
                        $(this.webFrame).find('.accordionWebimage').css('height',h)
                    })

                }
            })*/
            // console.log("resizeEnded")
        })
        
        this.scatter.addTransformEventCallback((e) => {
            let newBorder = this.pageHeight*0.023148 / e.scale
            if (newBorder !== this.border) {
                this.border = newBorder
                this.layout()
            }
            else{
            }
        })
        this.layout()

        this.backButton.addEventListener('click', (e)=>{
            if(this.currentWebview.canGoBack()){
                TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
                    TweenMax.to(e.target, 0.1, {scale:"1.0"})
                }})
                this.currentWebview.goBack()
            }
        })

        this.forwardButton.addEventListener('click', (e)=>{
            if(this.currentWebview.canGoForward()){
                TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
                    TweenMax.to(e.target, 0.1, {scale:"1.0"})
                }})
                this.currentWebview.goForward()
            }
        })

        this.closeAllButton.addEventListener('click', (e)=>{
            TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
                TweenMax.to(e.target, 0.1, {scale:"1.0"})
            }})
            this.close()
        })

        this.closeButton.addEventListener('click', (e)=>{
            if(this.webviewMap.size>1)this.removeWebView()
        })

        this.expandButton.addEventListener('click',(e)=>{
            TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
                TweenMax.to(e.target, 0.1, {scale:"1.0"})
            }})
            this.externalPadID++
            let newPadKey=this.title+this.externalPadID
            console.log("NEW PAD KEY",newPadKey)
            // console.log("expanding",this.currentWebview.getTitle())
            // console.log("expanding",this.currentWebview.getURL())

            let newPad= new minimalPad(nodePadContainer, {
                x: 500,
                y: 200,
                padMapKey: newPadKey,
                title: this.title+" - "+ this.expandButton.getAttribute('source'),//this.currentWebview.getTitle(),
                urlList: [this.currentWebview.src],
                startScale:1,
                hideOnStart: false,
                width: this.pageWidth*0.3906,
                height: this.pageWidth*0.3906,
                scalable: true,
                rotatable: false})

            urlPadMap.set(newPadKey,newPad)
           /* document.getElementById(this.title+"bufferPadFrame").style.visibility="visible"
            document.getElementById(this.title+"bufferPadFrame").id=""
            document.getElementById(this.title+"bufferPadWeb").id=""*/
            /*if(e.target.style.opacity=="1"){
                this.bufferPad.frame.style.visibility="visible"
                this.bufferPad.scatter.bringToFront()
                // this.bufferPad.frame.id=""
                // this.bufferPad.web.id=""

                let newPad= new Pad(nodePadContainer, {
                    x: 500,
                    y: 200,
                    title: this.title,
                    url: "var/blank.html",
                    startScale:1,
                    hideOnStart: false,
                    width: 1500,
                    height: 1500,
                    scalable: true,
                    rotatable: false})

                this.bufferPad=newPad
                // newPad.web.src=this.currentWebview.src
                // this.bufferPad.frame.id = this.title+"bufferPadFrame"
                // this.bufferPad.web.id = this.title+"bufferPadWeb"
                this.bufferPad.frame.style.visibility = "hidden"
                this.bufferPad.web.src=this.currentWebview.src
            }*/
        })
        // TweenMax.to(this.frame,0,{opacity:"0.001"})

    }

    removeWebView(){
        let webVIewRemovedID=parseInt(this.currentWebview.getAttribute('id'))

        this.webviewMap.delete(webVIewRemovedID)
        this.webFrame.removeChild(this.currentWebview.parentNode)
        
        let cWeb = null
        let cWebviewFrame = null
        
        this.webviewMap.forEach(function (entry, key) {
            cWeb = entry.childNodes[3]
            cWebviewFrame = entry
        })
        this.currentWebview = cWeb
        this.currentWebviewFrame = cWebviewFrame
        this.currentSource = cWeb.src
        this.bringWebToFront()
    }

    appendWebView(newUrl,source){
        let fs = nodeRequire("fs")

        let web=document.createElement("webview")
        let webOffloading=document.createElement("webview")
        let webImage=document.createElement("img")
        let heinz=document.createElement("img")
        let webBackground=document.createElement("div")
        let webviewFrame=document.createElement("div")
        let shadow=document.createElement("img")
        let shadowReverse=document.createElement("img")
        let overlay = document.createElement('img')
        let progressBar = document.createElement('div')

        web.setAttribute("plugins",true)
        web.classList.add("accordionWebview")
        // web.classList.add("interactiveElement")
        webviewFrame.classList.add("accordionWebviewFrame")
        shadow.classList.add("accordionWebviewShadow")
        shadowReverse.classList.add("accordionWebviewShadow")
        webBackground.classList.add("accordionWebviewBackground")
        webBackground.setAttribute('source',source)
        webImage.classList.add("accordionWebimage")
        overlay.classList.add("accordionOverlay")
        overlay.src="img/overlay.png"
        
        webviewFrame.classList.add("interactiveElement")
        webBackground.classList.add("interactiveElement")
        webImage.classList.add("interactiveElement")
        overlay.classList.add("interactiveElement")
        web.classList.add("interactiveElement")

        let loadAnim = document.createElement("div")        
        loadAnim.style.webkitAnimation= "spin 2s linear infinite"
        loadAnim.style.animation= "spin 2s linear infinite"
        loadAnim.style.position = "absolute"
        
        document.styleSheets[0].insertRule('\
			@keyframes spin {\
				from { transform: rotateZ(0deg);   }\
				to   { transform: rotateZ(360deg); }\
			}'
        )

        // overlay.appendChild(loadAnim)

        // webBackground.className= "item"

        Elements.setStyle(webviewFrame, {
            position: "absolute",
            overflow: "hidden",
            top: "0px",
            left: this.webviewID*50+"px",
            // display:"flex",
            width: "20%",
            left: "0%",
            // minWidth:"5px",
            // maxWidth:"500px",
            height: "100%"
            // pointerEvents: 'none',
            // boxShadow: "-5px 5px 50px 10px #555",
            // border:"2px solid blue",
            // overflow: "hidden",
            // overflowX: "scroll",
            // flex: "0 0 50%",
            // whiteSpace: "nowrap",
        })

        Elements.setStyle(webBackground, {
            position: "absolute",
            overflow: "hidden",
            left: "5%",
            // display:"flex",
            width: "90%",
            // pointerEvents: 'none',
            // minWidth:"5px",
            // maxWidth:"500px",
            height: "100%",
            // boxShadow: "-5px 5px 50px 10px #555",
            // border:"2px solid blue",
            // overflow: "hidden",
            // overflowX: "scroll",
            // flex: "0 0 50%",
            // whiteSpace: "nowrap",
            background: "white"
        })

        shadow.src = "img/shadow.png"
        Elements.setStyle(shadow, {
            position: "absolute",
            overflow: "hidden",
            top: "0px",
            left: "95%",
            width: "5%",
            height: "100%",
            // background: "#252",
            // opacity: "0.1",
            pointerEvents:"none"
        })

        shadowReverse.src = "img/shadowReverse.png"
        Elements.setStyle(shadowReverse, {
            position: "absolute",
            overflow: "hidden",
            top: "0px",
            left: "0%",
            width: "5%",
            height: "100%",
            // background: "#252",
            // opacity: "0.1",
            pointerEvents:"none"
        })

        Elements.setStyle(web, {
            position: "absolute",
            overflow: "hidden",
            top: "0px",
            left: "5%",
            width: "90%",
            // pointerEvents: 'none',
            // filter: "blur(10px)",
            // display: "none",
            visibility: "hidden",
            // border: "1px solid #fff",
            height: "100%"
        })

        Elements.setStyle(webOffloading, {
            position: "absolute",
            overflow: "hidden",
            top: "0px",
            left: "-100%",
            width: "90%",
            // pointerEvents: 'none',
            // filter: "blur(10px)",
            // display: "none",
            visibility: "visible",
            // border: "1px solid #fff",
            height: "100%"
        })

        Elements.setStyle(webImage, {
            position: "absolute",
            overflow: "hidden",
            top: "0px",
            left: "5%",
            width: "90%",
            height: this.webFrame.offsetHeight+"px",
            pointerEvents: 'none',
            // display: "none",
            visibility: "visible"
            // border: "1px solid #fff",
        })

        Elements.setStyle(heinz, {
            position: "absolute",
            overflow: "hidden",
            top: "0px",
            left: "0px",
            width: "100%",
            background: "pink",
            // display: "none",
            visibility: "visible",
            // border: "1px solid #fff",
            height: "100%"
        })

        Elements.setStyle(overlay, {
            position: "absolute",
            overflow: "hidden",
            top: "0px",
            left: "5%",
            // background: "pink",
            // pointerEvents: 'none',
            width: "90%",
            height: "100%"
            // opacity: "0.1"
        })

        Elements.setStyle(progressBar, {
            position: "absolute",
            overflow: "hidden",
            top: "0%",
            left: "10%",
            visibility: "hidden",
            background: "white",
            filter: "blur(50px)",
            opacity: "0.2",
            // pointerEvents: 'none',
            width: "40%",
            height: "100%"
            // opacity: "0.1"
        })

        
        this.currentWebviewFrame=webviewFrame
        this.currentWebviewBackground=webBackground
        this.currentWebview = web
        this.currentWebviewImage = webImage
        this.currentSource = source

        // document.body.appendChild(webOffloading)

        this.webFrame.appendChild(webviewFrame)
        webviewFrame.appendChild(webBackground)
        webviewFrame.appendChild(shadow)
        webviewFrame.appendChild(shadowReverse)
        webviewFrame.appendChild(web)
        webviewFrame.appendChild(webImage)
        // webBackground.appendChild(heinz)
        webviewFrame.appendChild(overlay)
        webviewFrame.appendChild(progressBar)

        web.setAttribute('id',this.webviewID)
        web.setAttribute('isLoading','true')
        this.webviewMap.set(this.webviewID, webviewFrame)
        this.webviewID++
        web.src=newUrl
        webOffloading.src=newUrl

        // web.src="https://www.golem.de/"
        
        // console.log("Appending WebView",newUrl)
        // // document.getElementById(this.title+"bufferPadWeb").src=newUrl
        // webImage.src='var/'+source+'.png'
        web.preload= path.join(__dirname, './preloadPad.js')

        web.addEventListener('ipc-message', (e) => {
            if(e.channel=='webviewPointerDown')this.scatter.bringToFront()
        })
       
        web.addEventListener('did-fail-load',()=>{
            console.log("failed loading",newUrl)
        })
        let obj = { blur: 2 }
        let loadAnimation = new TimelineMax({repeat:-1})
        // loadAnimation.add( TweenMax.to(obj, 0.5, {blur: 5,onUpdate: () => {web.style.filter = "blur(" + obj.blur + "px)"}}) )
        // loadAnimation.add( TweenMax.to(obj, 0.5, {blur: 2,onUpdate: () => {web.style.filter = "blur(" + obj.blur + "px)"}}) )
        loadAnimation.add( TweenMax.to(progressBar, 0.5, {left:"50%"}) )
        loadAnimation.add( TweenMax.to(progressBar, 0, {left:"20%"}) )
        loadAnimation.add( TweenMax.to(progressBar, 0.5, {left:"50%"}) )
        loadAnimation.stop()
        // loadAnimation.add( TweenLite.to(web, 1, {filter:"blur(0px)"}) );

        web.addEventListener('did-start-loading', ()=>{
            web.setAttribute('isLoading','true')
            loadAnimation.play()
            overlay.style.visibility="visible"
            progressBar.style.visibility="visible"
            web.style.filter = "blur(10px)"
            overlay.style.pointerEvents="none"

            // web.style.filter = "blur(10px)"

            // console.log('did-start-loading')
            // loadAnim.style.visibility="visible"
            
            let w = overlay.offsetWidth
            let h = overlay.offsetHeight

            // console.log("accordion webview did start loading",h,w)
            
            /*let animationSize = w<h ? w*0.5 : h*0.5
            let animationRingWidth = animationSize*0.1;

            loadAnim.style.border=animationRingWidth+"px solid #f3f3f3"
            loadAnim.style.borderTop=animationRingWidth+"px solid #ffb18c"
            loadAnim.style.borderRadius="50%"
            loadAnim.style.height=animationSize-animationRingWidth*2+"px"
            loadAnim.style.width=animationSize-animationRingWidth*2+"px"
            loadAnim.style.top = h*0.25+"px"
            loadAnim.style.left = w*0.25+"px"
            w<h ? loadAnim.style.top = 0.5*(h-animationSize)+"px"  : loadAnim.style.left = 0.5*(w-animationSize)+"px"*/
        })

        web.addEventListener('did-stop-loading', ()=>{
        
            /*let win = new BrowserWindow({width: 800, height: 600, x: -1000, y: -1000, webPreferences: {offscreen: true}})
            win.webContents.on('paint', (event, dirty, image) => {
                webImage.src=image.toDataURL()
                win.close()
            })
            win.loadURL(newUrl)*/

            if(this.currentWebview==web)overlay.style.visibility="hidden"
            overlay.style.pointerEvents="all"
            // loadAnimation.stop()
            loadAnimation.stop()
            progressBar.style.visibility="hidden"
            web.style.filter = "blur(0px)"
            web.setAttribute('isLoading','false')
            // console.log('did-stop-loading')
            // loadAnim.style.visibility="hidden"
            if(web==this.currentWebview){
                // this.bufferPad.web.src=web.src
            }
            if(web!=this.currentWebview){
            }
            // if(this.webviewID<this.urlList.length)this.appendWebView(this.urlList[this.webviewID].url,this.urlList[this.webviewID].source)
            /*webImage.src='var/cosmic.png'
            web.capturePage((image)=>{
                // webImage.src=image.toDataURL()
            })*/
            
            // console.log('did-stop-loading',webImage)
        })
        /*web.addEventListener('did-navigate', ()=>{            
            console.log('did-navigate')
            web.capturePage((image)=>{
                webImage.src=image.toDataURL()
            })
        })
        web.addEventListener('did-navigate-in-page', ()=>{            
            console.log('did-navigate-in-page')
            web.capturePage((image)=>{
                webImage.src=image.toDataURL()
            })
        })
        web.addEventListener('did-frame-finish-load', ()=>{            
            console.log('did-frame-finish-load')
            web.capturePage((image)=>{
                webImage.src=image.toDataURL()
            })
        })
        web.addEventListener('load-commit', ()=>{            
            console.log('load-commit')
            web.capturePage((image)=>{
                webImage.src=image.toDataURL()
            })
        })
        web.addEventListener('page-title-updated', ()=>{            
            console.log('page-title-updated')
            web.capturePage((image)=>{
                webImage.src=image.toDataURL()
            })
        })*/

            
        /*let phantom = require('phantom')
        
        let date = new Date()
            
        let captureFile=nodePath.join(nodeDirname, '../dev/tumortisch/var/PhantomScreenshots/phantom_'+source+date.getMinutes()+date.getSeconds()+'.png')
        if (fs.existsSync(captureFile)) {
            fs.unlink(captureFile, (err) => {
                if (err) {
                    return
                }
                console.log("File succesfully deleted")                
            })
        }
        phantom.create().then(function(ph) {
            ph.createPage().then(function(page) {
                page.open(web.src).then(function(status) {
                    page.render(captureFile).then(function(){
                        let tmpIMG=document.createElement('img')
                        tmpIMG.src=captureFile
                        tmpIMG.addEventListener('load',()=>{
                            webImage.src=captureFile
                            webImage.style.height = tmpIMG.height+"px"
                            // webImage.style.width = tmpIMG.width+"px"
                        })
                    })
                })
            })
        })*/
        web.addEventListener('dom-ready', ()=>{

            /*let id=this.webviewID
            let nextURL = this.urlList[id].url
            let nextSource = this.urlList[id].source*/

            // webImage.src='var/'+source+'.png'
            // console.log('dom-ready')
            web.setAttribute('isLoading','false')
            if(web==this.currentWebview){
                // this.bufferPad.web.src=web.src
            }
            if(web!=this.currentWebview){
            }
           /* this.currentWebviewBackground = web.parentElement
            this.currentWebview = web
            this.currentSource = source
            this.arrangeWebviews()*/
            
           let captureRect = {
                x: 0, y: 0,
                width: 2000,
                height: 4000
            }
            web.capturePage(captureRect,function(image) {
                webImage.src=image.toDataURL()
                console.log("web.capturePage",newUrl)
                let buf = image.toPNG()
                let captureFile=nodePath.join(nodeDirname, '../dev/tumortisch/var/'+source+'.png')
            
                fs.writeFile(captureFile, buf, function(err) {
                    if (err) {
                        console.log("ERROR Failed to save file", err)
                    }
                    else{
                    }
                })
            })
            /*this.numWebviewsReady++
            if(this.numWebviewsReady==7){
                this.arrangeWebviews()
                TweenMax.to(this.frame,0.0,{opacity:"1"})
            }*/
            
           /* web.capturePage((image)=>{
                // webImage.src='var/cosmic.png'
                // console.log("Captured after Load",web.src)
                webImage.src=image.toDataURL()

               /* let captureFile=nodePath.join(nodeDirname, '../dev/tumortisch/var/'+source+'.png')
                let buf = image.toPng()

                fs.writeFile(captureFile, buf, function(err) {
                    if (err) {
                        console.log("ERROR Failed to save file", err)
                    }
                    else{
                    }
                })*/
            //})
            this.backButton.style.opacity = (web.canGoBack()) ? 1 : 0.5
            this.forwardButton.style.opacity = (web.canGoForward()) ? 1 : 0.5
            // webImage.style.display="inline"
            // web.openDevTools()
        })

        web.addEventListener('new-window', (e) => {
            this.appendWebView(e.url)
            console.log("this.currentSource",source)
            this.urlList.push({'url':e.url,'source':source})
        })

        overlay.addEventListener('click',(e)=>{
            // console.log("Overlay wurde geklickt",this.currentWebview.src)
            e.stopPropagation()
            e.preventDefault()
            this.currentWebview.capturePage((image)=>{
                console.log(this.webFrame.offsetHeight)
                this.currentWebviewImage.style.height = this.webFrame.offsetHeight+"px"//"100%"
                this.currentWebviewImage.src=image.toDataURL()
                this.currentWebviewFrame = e.target.parentElement
                // this.bringWebToFront()
                e.target.style.visibility="hidden"
                
                this.currentSource=source
                this.expandButton.setAttribute('source',source)     
    
                this.currentWebviewFrame = e.target.parentElement
                this.currentWebview = web
                this.currentSource = source
                this.currentWebviewImage = webImage
                this.arrangeWebviews()
                // this.bufferPad.web.src=web.src
    
                this.backButton.style.opacity = (web.canGoBack()) ? 1 : 0.5
                this.forwardButton.style.opacity = (web.canGoForward()) ? 1 : 0.5
            })
            //e.target.parentElement.style.zIndex=this.zIndex

        })
        /*overlay.addEventListener('click',(e)=>{
            e.stopPropagation()
            e.preventDefault()
            this.currentWebviewBackground = e.target.parentElement
            this.bringWebToFront()
            e.target.style.visibility="hidden"
            //e.target.parentElement.style.zIndex=this.zIndex
        })*/

        webImage.addEventListener('pointerenter',(e)=>{
            // TweenMax.to(webBackground, 0.1, {x:"+= 50"})
        })

        webImage.addEventListener('pointerleave',(e)=>{
            // TweenMax.to(webBackground, 0.1, {x:"-= 50"})
        })

        webImage.addEventListener('click',(e)=>{

            this.currentSource=source
            this.expandButton.setAttribute('source',source)
            
            // this.expandButton.style.opacity="0.5"
            e.stopPropagation()
            e.preventDefault()
            let oldWeb=this.currentWebview
            let oldWebImage = this.currentWebviewImage

            oldWeb.capturePage((image)=>{
                oldWebImage.src=image.toDataURL()

                this.currentWebviewBackground = e.target.parentElement
                this.currentWebview = web
                this.currentWebviewImage = webImage
                this.currentSource = source
                this.arrangeWebviews()
            })

            web.capturePage((image)=>{
                webImage.src=image.toDataURL()

               /* let captureFile=nodePath.join(nodeDirname, '../dev/tumortisch/var/'+source+'.png')
                let buf = image.toPNG()

                fs.writeFile(captureFile, buf, function(err) {
                    if (err) {
                        console.log("ERROR Failed to save file", err)
                    }
                    else{
                    }
                })*/
            })

            // this.bufferPad.web.src=web.src

            this.backButton.style.opacity = (web.canGoBack()) ? 1 : 0.5
            this.forwardButton.style.opacity = (web.canGoForward()) ? 1 : 0.5
            // e.target.style.visibility="hidden"
            //e.target.parentElement.style.zIndex=this.zIndex
        })

        /*overlay.addEventListener('pointerenter',(e)=>{
            TweenMax.to(webBackground, 0.1, {x:"+= 20"})
        })

        overlay.addEventListener('pointerleave',(e)=>{
            TweenMax.to(webBackground, 0.1, {x:"-= 20"})
        })*/
        this.arrangeWebviews()
    }

    arrangeWebviews(){
        let numWebviews = this.webviewMap.size
        let index = 0
        let increment = 1
        let z = this.zIndex
        let current=this.currentWebviewFrame
        let shadowWidth = 0
        this.webviewMap.forEach(function (entry, key) {
            entry.style.maxWidth="1000px"
            // entry.style.width=100-Math.sqrt(entry.parentElement.offsetWidth-590)+"%"
            entry.style.width="70%"
            shadowWidth =  $(entry).find(".accordionWebviewShadow").outerWidth()
            // console.log("entry.parentElement.offsetWidth",entry.parentElement.offsetWidth)
            z+=increment
            let offset=index*(entry.parentElement.offsetWidth+2*shadowWidth-entry.offsetWidth)/(numWebviews-1)
            // console.log("Offset",entry.parentElement.offsetWidth-(offset+entry.offsetWidth))
            entry.style.left=entry.parentElement.offsetWidth+2*shadowWidth-(offset+entry.offsetWidth)-shadowWidth+"px"
            entry.style.zIndex=z
            // $( entry ).children(".accordionWebview[isLoading='false']").css( "visibility", "hidden" )
            $( entry ).children(".accordionWebview").css( "visibility", "hidden" )
           /* $( entry ).children(".accordionWebview").css( "visibility", "hidden" ).each(function(i, obj) {
                     console.log("isLoading()",obj.isLoading())
            })*/
            $( entry ).children('.accordionOverlay').css( "visibility", "visible" )
            $( entry ).children('.accordionWebimage').css( "visibility", "visible" )
            // entry.style.left=index*(entry.parentElement.offsetWidth-entry.offsetWidth)/(numWebviews-1)+"px"
            index++            
            if(entry==current){
                $( entry ).children('.accordionWebview').css( "visibility", "visible" )
                $( entry ).children('.accordionOverlay').css( "visibility", "hidden" )
                $( entry ).children('.accordionWebimage').css( "visibility", "hidden" )
                increment*=-1
                // entry.childNodes[1].style.opacity=0.8  
            }
        })
        this.zIndex=z

        // this.enableButtons()
        /*this.zIndex++
        this.currentWebviewBackground.style.zIndex=this.zIndex
        $( this.currentWebviewBackground ).children('.accordionWebview').css( "visibility", "visible" )
        $( this.currentWebviewBackground ).children('.accordionOverlay').css( "visibility", "hidden" )
        $( this.currentWebviewBackground ).children('.accordionWebimage').css( "visibility", "hidden" )*/
}

    bringWebToFront(){
        this.arrangeWebviews()        
        this.zIndex++
        this.currentWebviewFrame.style.zIndex=this.zIndex
        // this.currentWebviewBackground.childNodes[2].style.opacity=0.8
    }
    rad2degree(alpha){
        return alpha * 180 / Math.PI;
    }

    degree2rad(alpha){
        return alpha * Math.PI / 180;
    }

    close() {
        // this.frame.style.display="none"
        this.frame.parentNode.removeChild(this.frame)
        urlPadMap.delete(this.url)
        urlPadMap.delete(this.title)
        let geneTab = document.getElementById(this.title +"_tab")
        TweenMax.to(geneTab, 0.4, {scaleX:"1.0",x:"0px"});
        geneTab.style.boxShadow = "none"
        geneTab.setAttribute('open','false')
    }

    enableButtons() {
        this.backButton.style.opacity = (this.currentWebview.canGoBack()) ? 1 : 0.5
        this.forwardButton.style.opacity = (this.currentWebview.canGoForward()) ? 1 : 0.5
    }

    addButton(src, value) {
        let button = document.createElement("img")
        button.type = "image"
        button.className = "frameButton"
        button.style.position = "absolute"
        button.src = fileURL(src)
        button.value="close"
        button.draggable = false
        this.frame.appendChild(button)
        return button
    }

    layout() {
        console.log("LAYOUT")
        let b = this.border
        let b2 = b * 2
        let b8 = b / 8
        let b25 = b / 25
        let b15 = b / 15
        Elements.setStyle(this.frame, {
            // borderRadius: b8 + "px",
            // boxShadow: `${b25}px ${b15}px ${b8}px rgba(0, 0, 0, 0.5)`
        })
        let size = "calc(100% - " + (2*b+2) +"px)"
        let h = "calc(100% - " + (b) +"px)"
        let w = "calc(100% - "+2  +"px)"

        this.scatter.resizeButton.style.width=b+"px"
        this.scatter.resizeButton.style.height=b+"px"

        Elements.setStyle(this.webFrame, {
            width: w,
            height: h,
            margin: "1px"})
        /*Elements.setStyle(this.webBackground, {
            width: size,
            height: size,
             margin: b+"px"})

        Elements.setStyle(this.overlay, {
            width: size,
            height: size,
            margin: b+"px"})*/

        Elements.setStyle(this.titlebar, {
            left: (b * 5.75) + "px",
            bottom: "0px",
            fontSize: 0.7*b+"px",
            // paddingTop: 10+"px",
            // textAlign: "center",
            margin: 0.1*b+"px",
            height: 0.8*b+"px"})
        Elements.setStyle(this.closeAllButton, {
            right: (b * 1.75) + "px",
            bottom: "0px",
            width: b+"px",
            height: b+"px"})
        Elements.setStyle(this.backButton, {
            left: (b * 0.8) +"px",
            bottom: "0px",
            width: b+"px",
            height: b+"px"})
        Elements.setStyle(this.forwardButton, {
            left: (this.border + (b * 0.8)) +"px",
            bottom: "0px",
            width: b+"px",
            height: b+"px"})
        Elements.setStyle(this.expandButton, {
            left: (this.border + (b * 1.8)) +"px",
            bottom: "0px",
            // opacity: "0.5",
            margin: 0.1*b+"px",
            width: 0.8*b+"px",
            height: 0.8*b+"px"})
        Elements.setStyle(this.closeButton, {
            left: (this.border + (b * 2.8)) +"px",
            bottom: "0px",
            width: b+"px",
            height: b+"px"})
    }

}

class PadFromElement {

    constructor(element, scatterContainer, {
        startScale=1.0, minScale=0.1, maxScale=1.0,
        autoBringToFront=true,
        translatable=true, scalable=true, rotatable=true,
        movableX=true,
        movableY=true,
        type = 'fromElement',
        title = 'New Pad',
        rotationDegrees=null,
        rotation=null,
        onTransform=null,
        transformOrigin = 'center center',
        // extras which are in part needed
        x=0,
        y=0,
        width=null,
        height=null,
        resizable=false,
    } ={}) {

        this.element = element
        this.type = type
        this.title = title
        this.x = x
        this.y = y
        this.width = width
        this.height = height
        this.minScale = minScale
        this.maxScale = maxScale
        this.scatterContainer = scatterContainer
        this.scale = startScale
        this.scalable = scalable
        this.rotatable = rotatable
        this.rotationDegrees = this.startRotationDegrees
        this.transformOrigin = transformOrigin

        this.frame = document.createElement('div')
        Elements.setStyle(this.frame, {
            width: this.width+"px",
            height: this.height+"px",
            backgroundColor: "#333",
            position: "fixed",
            visibility: "visible",
            top: 0,
            left: 0,
            overflow: "auto"})

        this.closeButton = this.addButton("../assets/icons/svg/cross.svg", "close")

        document.body.appendChild( this.frame)
        this.border = 50

        this.frame.appendChild(this.element)

        this.title = document.createElement("div")
        this.title.innerHTML = "Titel"
        this.title.style.color = "white"
        this.frame.appendChild(this.title)

        Elements.setStyle(this.title, {
            position: "absolute"
        })
        //        this.element.style.overflow = "auto"
        //        this.element.style.position = "absolute"

        this.layout()

        this.closeButton.addEventListener('click', (e)=>{
            TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
                TweenMax.to(e.target, 0.1, {scale:"1.0"})
            }})
            this.frame.style.visibility="hidden"
        })

        this.scatter = new DOMScatter(this.frame, scatterContainer, {
            x: this.x,
            y: this.y,
            startScale: this.startScale,
            width: this.width,
            height: this.height,
            minScale: this.minScale,
            maxScale: this.maxScale,
            scalable: this.scalable,
            resizable: true,
            rotatable: this.rotatable})

        this.scatter.bringToFront()
        this.scatter.addTransformEventCallback((e) => {
            let newBorder = 50 / e.scale
            if (newBorder !== this.border) {
                this.border = newBorder
                this.layout()
            }
        })

        this.element.addEventListener('pointerdown', (e) => {
            this.scatter.bringToFront()
        })
    }

    close() {
        // this.frame.style.display="none"
        this.frame.parentNode.removeChild(this.frame)
        // urlPadMap.delete(this.url)
    }

    addButton(src, value) {
        let button = document.createElement("img")
        button.type = "image"
        button.className = "frameButton"
        button.style.position = "absolute"
        button.src = fileURL(src)
        button.value="close"
        button.draggable = false
        this.frame.appendChild(button)
        return button
    }

    layout() {
        let b = this.border
        let b2 = b * 2
        let b8 = b / 8
        let b25 = b / 25
        let b15 = b / 15
        Elements.setStyle(this.frame, {
            // borderRadius: b8 + "px",
            // boxShadow: `${b25}px ${b15}px ${b8}px rgba(0, 0, 0, 0.5)`
        })
        let size = "calc(100% - " + (2*b+2) +"px)"
        Elements.setStyle(this.element, {
            width: size,
            height:  size,
            top:  b+"px",
            left:  b+"px"})
        Elements.setStyle(this.closeButton, {
            right: (b * 0.75) + "px",
            bottom: "0px",
            width: b+"px",
            height: b+"px"})
        Elements.setStyle(this.title, {
            left: (b * 1.5) + "px",
            fontSize: (b * 0.8) + "px",
            top: (0.1)+"0px"})
    }
}
class minimalPad {

    constructor(scatterContainer, {
        startScale=1.0, minScale=0.25, maxScale=10.5,
        autoBringToFront=true,
        type = 'minimal',
        title="new Pad",
        urlList=["https://www.iwm-tuebingen.de/www/index.html"],
        padMapKey="key",
        // url="https://www.iwm-tuebingen.de/www/index.html",
        hideOnStart=false,
        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,
        height=null,
        resizable=false,
    } ={}) {

        let w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0]
        this.pageWidth = w.innerWidth || e.clientWidth || g.clientWidth,
        this.pageHeight = w.innerHeight|| e.clientHeight|| g.clientHeight

        this.x = x
        this.y = y
        this.type = type
        // this.url = url
        this.urlList = urlList
        this.padMapKey = padMapKey,
        this.title = title,
        this.hideOnStart = hideOnStart
        this.width = width
        this.height = height
        this.minScale = minScale
        this.maxScale = maxScale
        this.scatterContainer = scatterContainer
        this.startScale = startScale
        this.scale = startScale
        this.scalable = scalable
        this.rotatable = rotatable
        this.rotationDegrees = this.startRotationDegrees
        this.transformOrigin = transformOrigin

        this.web = null
        this.WebviewCounter = 0
        this.id=0

        this.webviewMap = new Map()
        this.overlayMap = new Map()
        this.tabMap = new Map()
        this.listMap = new Map()

        this.frame = document.createElement('div')
        this.frame.classList.add("pad")
        this.border = this.pageHeight*0.023148 / startScale

        Elements.setStyle(this.frame, {
            backgroundColor: "#333",
            position: "absolute",
            display: 'flex',
            width: this.width+"px",
            height: this.height+"px",
            visibility: "visible",
            top: 0,
            left: 0,
            // boxShadow: `10px 10px 10px rgba(0, 0, 0, 0.5)`,
            // borderRadius: '10px',
            overflow: "visible"})

        document.body.appendChild( this.frame)

        this.tabs=document.createElement("div")
        this.webBackground=document.createElement("div")
        this.webviewList=document.createElement("div")
        this.titlebar = document.createElement("div")
        this.webViewSnapshot=document.createElement("img")

        this.tabs.classList.add("interactiveElement")
        this.tabs.classList.add("tabs")
        // this.tabs.style.display="flex"
        // this.tabs.style.flexFlow="row nowrap"

        Elements.setStyle(this.tabs, {
            position: "absolute",
            background: "white",
            overflowX: "auto",
            overflowY: "hidden",
            display: "flex",
            flexFlow:"row nowrap",
            // justifyContent: "flex-end",
            alignItems: "flex-end"
            // overflow: "auto",
        })

        this.titlebar.innerHTML = this.title
        Elements.setStyle(this.titlebar, {
            color: "#fff",
            position: "absolute",
            overflowX: "hidden"
        })

        Elements.setStyle(this.webBackground, {
            position: "absolute",
            overflow: "hidden",
            background: "white"
        })

        this.webviewList.classList.add("interactiveElement")

        Elements.setStyle(this.webviewList, {
            position: "absolute",
            visibility: "hidden",
            overflow: "auto",
            background: "white",
            boxShadow: "5px 5px 10px #bbb"
        })

        /*Elements.setStyle(this.overlay, {
            position: "absolute",
            overflow: "auto",
            background: "white",
            opacity: "0.8"
        })*/

        Elements.setStyle(this.webViewSnapshot, {
            position: "absolute",
            overflow: "auto"
        })

        this.frame.appendChild(this.titlebar)
        this.frame.appendChild(this.webBackground)
        // this.frame.appendChild(this.webViewSnapshot)
        this.frame.appendChild(this.tabs)
        this.frame.appendChild(this.webviewList)

        for(var i=0; i<this.urlList.length; i++){
            this.addNewWebview(this.urlList[i])
        }

        this.webViewSnapshot.style.visibility="hidden"

        this.closeButton = this.addButton("../assets/icons/svg/cross.svg", "close")
        this.backButton = this.addButton("../assets/icons/svg/left.svg", "go back")
        this.forwardButton = this.addButton("../assets/icons/svg/right.svg", "go forward")
        this.showWebviewListButton = this.addButton("../assets/icons/svg/flat/ic_list_48px.svg", "show list")
        

        this.backButton.style.opacity = 0.5
        this.forwardButton.style.opacity = 0.5

        /*for (let callback of window.padLoadedHandler) {
            callback(this, url)
        }*/

        // this.pseudoFrame = document.createElement('div')
        this.pseudoFrameTop = document.createElement('div')
        this.pseudoFrameLeft = document.createElement('div')
        this.pseudoFrameRight = document.createElement('div')

        /*Elements.setStyle(this.pseudoFrame, {
            position: "absolute",
            top: "0px",
            left: "0px",
            width: "100%",
            height: "100%",
            pointerEvents: "none"
        })*/

        Elements.setStyle(this.pseudoFrameTop, {
            position: "absolute",
            // background: "pink",
            top: "0px",
            left: "0px",
            width: "100%"
            // height: "50px"
        })

        Elements.setStyle(this.pseudoFrameLeft, {
            position: "absolute",
            // background: "pink",
            top: "0px",
            left: "0px",
            // width: "5px",
            height: "100%"
        })

        Elements.setStyle(this.pseudoFrameRight, {
            position: "absolute",
            // background: "pink",
            top: "0px",
            right: "0px",
            // width: "5px",
            height: "100%"
        })
        this.frame.appendChild(this.pseudoFrameTop)
        this.frame.appendChild(this.pseudoFrameLeft)
        this.frame.appendChild(this.pseudoFrameRight)
        // this.frame.appendChild(this.pseudoFrame)

        this.pseudoFrameTop.addEventListener('pointerenter',(e)=>{
            this.scatter.scalable=false
            this.web.pointerEvents = "none"
            e.target.style.cursor = "move"
        })
        this.pseudoFrameTop.addEventListener('pointerleave',(e)=>{
            this.scatter.scalable=true
            // this.frame.style.cursor = "initial"
        })

        this.pseudoFrameLeft.addEventListener('pointerenter',(e)=>{
            // e.target.setPointerCapture(e.pointerId)
            this.scatter.scalable=false
            this.web.pointerEvents = "none"
            e.target.style.cursor = "move"
        })
        this.pseudoFrameLeft.addEventListener('pointerleave',(e)=>{
            this.scatter.scalable=true
            // this.frame.style.cursor = "initial"
        })

        this.pseudoFrameRight.addEventListener('pointerenter',(e)=>{
            this.scatter.scalable=false
            this.web.pointerEvents = "none"
            e.target.style.cursor = "move"
        })
        this.pseudoFrameRight.addEventListener('pointerleave',(e)=>{
            this.scatter.scalable=true
            // this.frame.style.cursor = "initial"
        })

        /*this.web.addEventListener('new-window', (e) => {

            if(e.url.indexOf("youtube")>-1)return
            
            if (urlPadMap.has(e.url)) {
                let childPad = urlPadMap.get(e.url)
                childPad.scatter.moveTo(x, y)
                return childPad
            }
            let childPad = new minimalPad(this.scatterContainer, {
                x: this.scatter.position.x+100,
                y: this.scatter.position.y+100,
                url: e.url,
                width: this.scatter.width,
                height: this.scatter.height,
                scalable: true,
                rotatable: true})
            urlPadMap.set(e.url, childPad)
            
            for(let callback of window.padLoadedHandler) {
                callback(childPad, url)
            }
        })*/

        this.backButton.addEventListener('click', (e)=>{
            if(this.web.canGoBack()){
                TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
                    TweenMax.to(e.target, 0.1, {scale:"1.0"})
                }})
                this.web.goBack()
            }
        })

        this.forwardButton.addEventListener('click', (e)=>{
            if(this.web.canGoForward()){
                TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
                    TweenMax.to(e.target, 0.1, {scale:"1.0"})
                }})
                this.web.goForward()
            }
        })

        this.closeButton.addEventListener('click', (e)=>{
            TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
                TweenMax.to(e.target, 0.1, {scale:"1.0"})
            }})
            this.close()
        })

        this.showWebviewListButton.addEventListener('click', (e)=>{
            TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
                TweenMax.to(e.target, 0.1, {scale:"1.0"})
            }})
            this.webviewList.style.visibility=="visible" ? this.webviewList.style.visibility="hidden" :  this.webviewList.style.visibility="visible"
        })

        this.scatter = new DOMScatter(this.frame, scatterContainer, {
            x: this.x,
            y: this.y,
            startScale: this.startScale,
            width: this.width,
            height: this.height,
            minScale: this.minScale,
            maxScale: this.maxScale,
            scalable: this.scalable,
            resizable: true,
            rotatable: this.rotatable})
        
        let img=document.createElement("img")
        img.style.width = "70%"
        img.style.position = "absolute"
        img.style.bottom = "20%"
        img.style.right = "20%"
        img.style.pointerEvents="none"
        img.src = "../../assets/icons/png/flat/resize.png"
        this.scatter.resizeButton.appendChild(img)

        this.scatter.moveTo({x, y})
        this.scatter.bringToFront()
        
        this.scatter.addTransformEventCallback((e) => {
            let newBorder = this.pageHeight*0.023148 / e.scale
            if (newBorder !== this.border) {
                this.border = newBorder
                this.layout()
            }
        })

        this.layout()
        
        /*this.test = document.createElement('div')

        Elements.setStyle(this.test, {
            position: "absolute",
            width: "400px",
            height: "400px",
            overflow: "auto",
            background: "pink"
        })
        this.frame.appendChild(this.test)

        this.test.addEventListener('click',()=>{
            // this.frame.style.visibility="hidden"
            console.log($( this.webBackground ).children())
            $( this.webBackground ).children().css( "visibility", "hidden" )
            $( this.frame ).children().css( "visibility", "hidden" )
        })*/

    }

    addNewWebview(src){
       /* if(this.web!=null){
            this.web.style.visibility="hidden"
            this.web.setAttribute('selected','0')
        }*/
        
        let webview=document.createElement("webview")   
        let progressBar = document.createElement('div')
        webview.setAttribute("plugins",true)
        this.web=webview
        webview.setAttribute('loaded','0')
        this.webBackground.appendChild(webview)
        this.webviewMap.set(src+this.padMapKey, webview)
        // console.log("number of webviews",this.webviewMap.size)
        // $("webview").each(function(i, obj) {
        //     obj.setAttribute('selected','0')
        // })

        Elements.setStyle(webview, {
            position: "absolute",
            overflow: "auto",
            width: "100%",
            height: "100%",
            // border: "1px solid #fff"
        })

        Elements.setStyle(progressBar, {
            position: "absolute",
            overflow: "hidden",
            top: "0%",
            left: "10%",
            visibility: "hidden",
            background: "white",
            filter: "blur(50px)",
            opacity: "0.2",
            // pointerEvents: 'none',
            width: "40%",
            height: "100%"
            // opacity: "0.1"
        })

        webview.src=src
        webview.preload= path.join(__dirname, './preloadPad.js')

        let listItem=document.createElement('div')
        listItem.className="interactiveElement"
        listItem.classList.add("webviewListItem")
        listItem.setAttribute('id',src+this.padMapKey)
        // listItem.style.height = "5%"
        // // listItem.style.width = "80%"
        // listItem.style.marginLeft="10%"
        // listItem.style.marginTop="5%"
        listItem.style.padding = "10px"
        // listItem.style.paddingBottom = "10px"
        this.webviewList.appendChild(listItem)
        this.listMap.set(src+this.padMapKey,listItem)

        webview.setAttribute('id',src+this.padMapKey)

        this.setSelectedWebview(src+this.padMapKey)

        this.addNewTab(webview,src)

        listItem.addEventListener('click',(e)=>{
            console.log(e.target.getAttribute('id'))
            this.setSelectedWebview(e.target.getAttribute('id'))
            this.webviewList.style.visibility = "hidden"
            $(this.tabs).animate({scrollLeft: $(".tab[id='"+e.target.getAttribute('id')+"']").prop('offsetLeft') - 10}, "slow")
            this.enableButtons()
        })

        listItem.addEventListener('pointerenter',(e)=>{
            e.target.style.background = "#ddd"
            let webview=null
            this.webviewMap.forEach(function (item, key, mapObj) {
                item.style.visibility="hidden"
                if(item.getAttribute('id')==e.target.getAttribute("id")){
                    item.style.visibility="visible"
                    if(item.getAttribute('selected')=='0')item.style.opacity="0.5"
                    webview=item
                    // obj.style.width="50%"
                    // obj.style.height="50%"
                }
            })
            this.overlayMap.forEach(function (item, key, mapObj) {
                item.style.visibility="hidden"
                if(item.getAttribute('id')==e.target.getAttribute("id")){
                    item.style.visibility="visible"
                }
            })
            // webview.getAttribute('loaded')=='0' ? this.overlay.style.visibility='visible' : this.overlay.style.visibility='hidden'
        })

        listItem.addEventListener('pointerleave',(e)=>{
            e.target.style.background = "#fff"
            if(e.target.getAttribute('selected')=='1') e.target.style.background = "#999"
            this.webviewMap.forEach(function (item, key, mapObj) {
                if(item.getAttribute('selected')=='0'){
                    item.style.visibility="hidden"
                }
                if(item.getAttribute('selected')=='1'){
                    item.style.visibility="visible"
                    item.style.opacity="1"
                }
                // obj.style.width="100%"
                // obj.style.height="100%"
            })
        })
        let overlay = document.createElement('img')
        overlay.style.position="absolute"
        overlay.style.width="100%"
        overlay.style.height="100%"
        overlay.style.top="0px"
        overlay.style.left="0px"
        // overlay.style.background="white"
        overlay.classList.add("minimalPadOverlay")
        overlay.src="img/overlay.png"

        this.overlayMap.set(src,overlay)

        let loadAnim = document.createElement("div")        
        loadAnim.style.webkitAnimation= "spin 2s linear infinite"
        loadAnim.style.animation= "spin 2s linear infinite"
        loadAnim.style.position = "absolute"
        
        document.styleSheets[0].insertRule("div.tabs::-webkit-scrollbar {display: none;}");
        document.styleSheets[0].insertRule('\
			@keyframes spin {\
				from { transform: rotateZ(0deg);   }\
				to   { transform: rotateZ(360deg); }\
            }'
        )

        // overlay.appendChild(loadAnim)

        this.webBackground.appendChild(overlay)
        this.webBackground.appendChild(progressBar)

        webview.addEventListener('did-navigate', (e) => {
            this.enableButtons()
            //this.backButton.style.opacity = (webview.canGoBack()) ? 1 : 0.5
            //this.forwardButton.style.opacity = (webview.canGoForward()) ? 1 : 0.5
        })

        webview.addEventListener('dom-ready',()=>{
            // console.log("DOM READY TABBED WEBVIEW!!!!!!!!!!")
            listItem.innerHTML=webview.getTitle()+"   "+src
            $(".tab[id='"+src+this.padMapKey+"']").children()[0].innerHTML=webview.getTitle()
            // $(".tab[id='"+src+"']").children()[0].innerHTML="READY LOADED"
            $(this.tabs).animate({scrollLeft: $(".tab[id='"+src+"']").prop('offsetLeft') - 10}, "slow")
        })

        webview.addEventListener('ipc-message', (e) => {
            if(e.channel=='webviewPointerDown')this.scatter.bringToFront()
        })
        
        let obj = { blur: 2 }
        let loadAnimation = new TimelineMax({repeat:-1})
        // loadAnimation.add( TweenMax.to(obj, 0.5, {blur: 5,onUpdate: () => {web.style.filter = "blur(" + obj.blur + "px)"}}) )
        // loadAnimation.add( TweenMax.to(obj, 0.5, {blur: 2,onUpdate: () => {web.style.filter = "blur(" + obj.blur + "px)"}}) )
        loadAnimation.add( TweenMax.to(progressBar, 0.5, {left:"60%"}) )
        loadAnimation.add( TweenMax.to(progressBar, 0, {left:"20%"}) )
        loadAnimation.add( TweenMax.to(progressBar, 0.5, {left:"60%"}) )
        loadAnimation.stop()

        webview.addEventListener('did-start-loading', ()=>{
            console.log("started loading page")
            
            webview.setAttribute('loaded','0')
            overlay.style.visibility="visible"
            webview.style.filter = "blur(10px)"
            progressBar.style.visibility="visible"
            loadAnimation.play()
            
            let w = overlay.offsetWidth
            let h = overlay.offsetHeight
            
            /*let animationSize = w<h ? w*0.5 : h*0.5
            let animationRingWidth = animationSize*0.1;

            loadAnim.style.border=animationRingWidth+"px solid #f3f3f3"
            loadAnim.style.borderTop=animationRingWidth+"px solid #ffb18c"
            loadAnim.style.borderRadius="50%"
            loadAnim.style.height=animationSize-animationRingWidth*2+"px"
            loadAnim.style.width=animationSize-animationRingWidth*2+"px"
            loadAnim.style.top = h*0.25+"px"
            loadAnim.style.left = w*0.25+"px"
            w<h ? loadAnim.style.top = 0.5*(h-animationSize)+"px"  : loadAnim.style.left = 0.5*(w-animationSize)+"px"*/
        })

        webview.addEventListener('did-stop-loading', ()=>{            
            loadAnimation.stop()
            webview.style.filter = "blur(0px)"
            webview.setAttribute('loaded','1')
            this.layout()
            progressBar.style.visibility="hidden"
            overlay.style.visibility="hidden"
        })

        webview.addEventListener('new-window', (e) => {            
            if (!this.webviewMap.has(e.url+this.padMapKey)){
                this.addNewWebview(e.url)
            }
        })
        this.id++
    }

    setSelectedWebview(id){
        let webview=null
        this.webviewMap.forEach(function (item, key, mapObj) {
            item.setAttribute('selected','0')
            item.style.opacity = "0"
            item.style.visibility = "hidden"
            if(key==id){
                webview=item
                item.setAttribute('selected','1')
                item.style.opacity = "1"
                item.style.visibility = "visible"
            }
        })
                
        this.tabMap.forEach(function (tab, key, mapObj) {
            tab.style.border="none"
            if(key==id){ 
                    tab.style.borderLeft="1px solid black"
                    tab.style.borderTop="1px solid black"
                    tab.style.borderRight="1px solid black"                        
            }
        })
                
        this.listMap.forEach(function (entry, key, mapObj) {
            entry.style.background = "white"
            entry.setAttribute('selected','0')
            if(key==id){
                entry.style.background = "#999"
                entry.setAttribute('selected','1')
            }
        })
        this.web = webview
        // webview.getAttribute('loaded')=='0' ? this.overlay.style.visibility='visible' : this.overlay.style.visibility='hidden'
    }

    addNewTab(webview,src){
                
        this.tabMap.forEach(function (tab, key, mapObj) {
            tab.style.border="none"
        })
        let tab=document.createElement('div')
        tab.className="tab"
        tab.classList.add("interactiveElement")
        tab.style.display="flex"
        tab.style.flexFlow="row nowrap"
        tab.style.textOverflow="ellipsis"
        tab.setAttribute('id',src+this.padMapKey)
        // tab.innerHTML="  "
        tab.style.color="black"
        tab.style.background="white"
        tab.style.borderLeft="1px solid black"
        tab.style.borderTop="1px solid black"
        tab.style.borderRight="1px solid black"
        tab.style.position="relative"
        tab.style.borderRadius="5px 5px 0 0"
        tab.style.maxWidth="25%"
        tab.style.height="80%"
        tab.style.alignItems= "center"
        // tab.style.display="inline"
        // tab.style.marginLeft="10px"
        tab.style.paddingLeft="10px"
        this.tabs.appendChild(tab)
        this.tabMap.set(src+this.padMapKey,tab)
        let newSelectedWebview=null

        let title = document.createElement('div')
        title.classList.add('tabTitle')
        // title.style.display="flex"
        // title.style.flexFlow="row nowrap"
        title.style.overflow="hidden"
        title.style.whiteSpace="nowrap"
        title.style.textOverflow="ellipsis"
        title.style.pointerEvents="none"
        title.innerHTML="new Tab"
        tab.appendChild(title)

        let close = document.createElement('img')
        close.setAttribute('id',src+this.padMapKey)
        close.classList.add('tabCloseButton')
        close.style.background="#666"
        close.style.height="50%"
        close.style.marginLeft="10px"
        close.style.marginRight="10px"
        close.style.borderRadius="100%"
        close.style.visibility="hidden"
        close.src = "../../assets/icons/svg/cross.svg"
        tab.appendChild(close)

        close.addEventListener('click',(e)=>{
            e.stopPropagation()
            e.preventDefault()
            let newSelectedItem = false
            
            if(this.webviewMap.size>1){
                let next=this.getNextTab(e.target.getAttribute("id"))
                let previous=this.getPreviousTab(e.target.getAttribute("id"))

                this.webviewMap.forEach(function (item, key, mapObj) {
                    if(item.getAttribute('id')==e.target.getAttribute("id")){
                        if(item.getAttribute('selected')=='1'){
                            newSelectedItem=true
                        }
                        mapObj.delete(key)                   
                        $(item).remove()
                    }
                })
                
                this.tabMap.forEach(function (tab, key, mapObj) {
                    if(tab.getAttribute('id')==e.target.getAttribute("id")){     
                        mapObj.delete(key)               
                        $(tab).remove()
                    }
                })
                
                this.listMap.forEach(function (entry, key, mapObj) {
                    if(entry.getAttribute('id')==e.target.getAttribute("id")){     
                        mapObj.delete(key)
                    }
                })
                $(".webviewListItem[id='"+e.target.getAttribute("id")+"']").remove()
                $(e.target).remove()
                if(newSelectedItem){
                    next!=null ? this.setSelectedWebview(next.getAttribute('id')) : this.setSelectedWebview(previous.getAttribute('id'))
                }
            }
        })

       tab.addEventListener('pointerenter',(e)=>{
            if(this.webviewMap.size>1)e.target.childNodes[1].style.visibility="visible"
            let z=this.frame.style.zIndex
             
            let webview=null
            e.target.style.background="#ddd"
            this.webviewMap.forEach(function (item, key, mapObj) {
                item.style.visibility="hidden"
                if(item.getAttribute('id')==e.target.getAttribute("id")){
                    item.style.visibility="visible"
                    if(item.getAttribute('selected')=='0')item.style.opacity="0.5"
                    webview=item
                    // obj.style.width="50%"
                    // obj.style.height="50%"
                }
            })
            this.overlayMap.forEach(function (item, key, mapObj) {
                item.style.visibility="hidden"
                if(item.getAttribute('id')==e.target.getAttribute("id")){
                    item.style.visibility="visible"
                }
            })
            // webview.getAttribute('loaded')=='0' ? this.overlay.style.visibility='visible' : this.overlay.style.visibility='hidden'
            /*Popup.open({"text":webview.getTitle()},
                       {x: e.clientX, y: e.clientY},
                       { fontSize: "2vh", maxWidth:  width*0.2, spacing: '10px', notchPosition: 'topLeft', zIndex: z+100})*/
        })

        tab.addEventListener('pointerleave',(e)=>{
            e.target.childNodes[1].style.visibility="hidden"
            e.target.style.background="#fff"
            this.webviewMap.forEach(function (item, key, mapObj) {
                if(item.getAttribute('selected')=='0'){
                    item.style.visibility="hidden"
                }
                if(item.getAttribute('selected')=='1'){
                    item.style.visibility="visible"
                    item.style.opacity="1"
                }
                // obj.style.width="100%"
                // obj.style.height="100%"
            })
            //this.web.style.visibility="visible"
            //this.web.style.opacity="1"
        })
        tab.addEventListener('click',(e)=>{
            this.tabMap.forEach(function (item, key, mapObj) {
                item.style.border="none"
            })

            e.target.style.borderLeft="1px solid black"
            e.target.style.borderTop="1px solid black"
            e.target.style.borderRight="1px solid black"

            this.setSelectedWebview(e.target.getAttribute('id'))

            if(e.target.offsetLeft+e.target.offsetWidth>this.tabs.offsetWidth+this.tabs.scrollLeft){
                $(this.tabs).animate({scrollLeft: e.target.offsetLeft-this.tabs.offsetWidth+e.target.offsetWidth}, "slow")
            }
            if(e.target.offsetLeft<this.tabs.scrollLeft){
                $(this.tabs).animate({scrollLeft: e.target.offsetLeft-10}, "slow")
            }

           /* $("webview").each(function(i, obj) {
                obj.style.visibility="hidden"
                obj.setAttribute('selected','0')
                if(obj.getAttribute('id')==src){
                    obj.style.visibility="visible"
                    obj.style.opacity="1"
                    newSelectedWebview=obj
                    obj.setAttribute('selected','1')
                }
            })*/
            //this.web = newSelectedWebview
            this.enableButtons()
        })
    }

    getPreviousTab(val){
        let obj=null
        let returnValue=null
        this.webviewMap.forEach(function (item, key, mapObj) {
            if(key==val){
                returnValue=obj
            }
            obj=item
        })
        return returnValue
    }

    getNextTab(val){
        console.log("this.webviewMap",this.webviewMap[0])
        let obj=null
        let oldKey=null
        let returnValue=null
        this.webviewMap.forEach(function (item, key, mapObj) {
            obj=item
            if(oldKey==val){
                returnValue=obj
            }
            oldKey=key
        })
        return returnValue
    }

    rad2degree(alpha){
        return alpha * 180 / Math.PI;
    }

    degree2rad(alpha){
        return alpha * Math.PI / 180;
    }

    close() {
        // this.frame.style.display="none"
        this.frame.parentNode.removeChild(this.frame)
        urlPadMap.delete(this.padMapKey)
    }

    enableButtons() {
        console.log("enabling buttons")
        this.backButton.style.opacity = (this.web.canGoBack()) ? 1 : 0.5
        this.forwardButton.style.opacity = (this.web.canGoForward()) ? 1 : 0.5
    }

    addButton(src, value) {
        let button = document.createElement("img")
        button.type = "image"
        button.className = "frameButton"
        button.style.position = "absolute"
        button.src = fileURL(src)
        button.value="close"
        button.draggable = false
        this.frame.appendChild(button)
        return button
    }

    layout() {
        let b = this.border
        let b2 = b * 2
        let b8 = b / 8
        let b25 = b / 25
        let b15 = b / 15
        Elements.setStyle(this.frame, {
            // borderRadius: b8 + "px",
            // boxShadow: `${b25}px ${b15}px ${b8}px rgba(0, 0, 0, 0.5)`
        })
        
        let size = "calc(100% - " + (2*b) +"px)"
        let h = "calc(100% - " + (b) +"px)"
        let w = "calc(100% - "+2  +"px)"
        let w2 = "calc(100% - " + (b+2) +"px)"

       /* Elements.setStyle(this.web, {
            width: w,
            height: h,
            margin: "0px"})*/
        $(this.frame).find(".tabCloseButton").css('height',0.5*b+"px")
        $(this.frame).find(".tabCloseButton").css('width',0.5*b+"px")
        $(this.frame).find(".tabCloseButton").css('borderRadius',b+"px")
        $(this.frame).find(".tabTitle").css('fontSize',0.3*b+"px")
        $(this.frame).find(".tab").css('borderLeft',0.01*b+'px solid black')
        $(this.frame).find(".tab").css('borderTop',0.01*b+'px solid black')
        $(this.frame).find(".tab").css('borderRight',0.01*b+'px solid black')
        // $(".tabTitle").css('fontSize',0.3*b+"px")

        this.scatter.resizeButton.style.width=b+"px"
        this.scatter.resizeButton.style.height=b+"px"
        
        Elements.setStyle(this.titlebar, {
            left: (b * 5.75) + "px",
            bottom: "0px",
            fontSize: 0.7*b+"px",
            // paddingTop: 10+"px",
            // textAlign: "center",
            height: b+"px"})
        Elements.setStyle(this.webViewSnapshot, {
            width: w,
            height: h,
            margin: "0px"})
        Elements.setStyle(this.tabs, {
            width: w2,
            height: b+"px",
            bottom: b+"px",
            margin: "1px"})
        Elements.setStyle(this.webBackground, {
            width: w,
            height: size,
            margin: "1px"})
        Elements.setStyle(this.webviewList, {
            bottom: 2*b+2+"px",
            right: b+"px",
            width: "50%",
            margin: "0px"})
       /* Elements.setStyle(this.overlay, {
            width: w,
            height: h,
            margin: "0px"})*/
        Elements.setStyle(this.pseudoFrameTop, {
            width: w,
            height: 0.1*b+"px",
            margin: "0px"})
        Elements.setStyle(this.pseudoFrameLeft, {
            width: 0.1*b+"px",
            height: h,
            margin: "0px"})
        Elements.setStyle(this.pseudoFrameRight, {
            width: 0.1*b+"px",
            height: h,
            margin: "0px"})
        Elements.setStyle(this.closeButton, {
            right: (b * 0.75) + "px",
            bottom: "0px",
            width: b+"px",
            height: b+"px"})
        Elements.setStyle(this.backButton, {
            left: (b * 0.1) +"px",
            bottom: "0px",
            width: b+"px",
            height: b+"px"})
        Elements.setStyle(this.forwardButton, {
            left: (this.border + (b * 0.1)) +"px",
            bottom: "0px",
            width: b+"px",
            height: b+"px"})
        Elements.setStyle(this.showWebviewListButton, {
            right: "2px",
            background: "white",
            bottom: b+2+"px",
            width: b+"px",
            height: b+"px"})
    }
    
}

class minimalPadFromElement {

    constructor(element, scatterContainer, {
        startScale=1.0, minScale=0.1, maxScale=1.0,
        autoBringToFront=true,
        type = 'minimalFromElement',
        title = 'new Pad',
        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,
        height=null,
        resizable=false,
    } ={}) {

        this.element = element
        this.x = x
        this.y = y
        this.type = type
        this.title = title
        this.width = width
        this.height = height
        this.minScale = minScale
        this.maxScale = maxScale
        this.scatterContainer = scatterContainer
        this.scale = startScale
        this.scalable = scalable
        this.rotatable = rotatable
        this.rotationDegrees = this.startRotationDegrees
        this.transformOrigin = transformOrigin

        this.frame = document.createElement('div')
        this.toolButtonMap = new Map()
        Elements.setStyle(this.frame, {
            width: this.width+"px",
            height: this.height+"px",
            backgroundColor: "#333",
            position: "fixed",
            visibility: "visible",
            top: 0,
            left: 0,
            overflow: "auto"})


        this.closeButton = this.addButton("../assets/icons/svg/cross.svg", "close")
        // this.addContentButton = this.addButton("../assets/icons/png/flat/note_add.png", "addContent")
        // this.copyButton = this.addButton("../assets/icons/png/flat/content_copy.png", "copy")
        // this.pasteButton = this.addButton("../assets/icons/png/flat/content_paste.png", "paste")
        // this.saveButton = this.addButton("../assets/icons/png/flat/save.png", "save")
        // this.deleteButton = this.addButton("../assets/icons/png/flat/delete.png", "delete")

        document.body.appendChild( this.frame)
        this.border = 50

        this.frame.appendChild(this.element)

        // this.pseudoFrame = document.createElement('div')
        this.pseudoFrameTop = document.createElement('div')
        this.pseudoFrameLeft = document.createElement('div')
        this.pseudoFrameRight = document.createElement('div')

        /*Elements.setStyle(this.pseudoFrame, {
            position: "absolute",
            top: "0px",
            left: "0px",
            width: "100%",
            height: "100%",
            pointerEvents: "none"
        })*/

        Elements.setStyle(this.pseudoFrameTop, {
            position: "absolute",
            // background: "pink",
            top: "0px",
            left: "0px",
            width: "100%"
            // height: "50px"
        })

        Elements.setStyle(this.pseudoFrameLeft, {
            position: "absolute",
            // background: "pink",
            top: "0px",
            left: "0px",
            // width: "5px",
            height: "100%"
        })

        Elements.setStyle(this.pseudoFrameRight, {
            position: "absolute",
            // background: "pink",
            top: "0px",
            right: "0px",
            // width: "5px",
            height: "100%"
        })
        this.frame.appendChild(this.pseudoFrameTop)
        this.frame.appendChild(this.pseudoFrameLeft)
        this.frame.appendChild(this.pseudoFrameRight)
        // this.frame.appendChild(this.pseudoFrame)

        this.pseudoFrameTop.addEventListener('pointerenter',(e)=>{
            this.scatter.scalable=false
            this.element.pointerEvents = "none"
            e.target.style.cursor = "move"
        })
        this.pseudoFrameTop.addEventListener('pointerleave',(e)=>{
            this.scatter.scalable=true
            // this.frame.style.cursor = "initial"
        })

        this.pseudoFrameLeft.addEventListener('pointerenter',(e)=>{
            // e.target.setPointerCapture(e.pointerId)
            this.scatter.scalable=false
            this.element.pointerEvents = "none"
            e.target.style.cursor = "move"
        })
        this.pseudoFrameLeft.addEventListener('pointerleave',(e)=>{
            this.scatter.scalable=true
            // this.frame.style.cursor = "initial"
        })

        this.pseudoFrameRight.addEventListener('pointerenter',(e)=>{
            this.scatter.scalable=false
            this.element.pointerEvents = "none"
            e.target.style.cursor = "move"
        })
        this.pseudoFrameRight.addEventListener('pointerleave',(e)=>{
            this.scatter.scalable=true
            // this.frame.style.cursor = "initial"
        })
        //        this.element.style.overflow = "auto"
        //        this.element.style.position = "absolute"

        this.layout()

        this.closeButton.addEventListener('click', (e)=>{
            TweenMax.to(e.target, 0.1, {scale:"1.1", onComplete: ()=>{
                TweenMax.to(e.target, 0.1, {scale:"1.0"})
            }})
            this.frame.style.visibility="hidden"
        })

        this.scatter = new DOMScatter(this.frame, scatterContainer, {
            x: this.x,
            y: this.y,
            startScale: this.startScale,
            width: this.width,
            height: this.height,
            minScale: this.minScale,
            maxScale: this.maxScale,
            scalable: this.scalable,
            resizable: true,
            rotatable: this.rotatable})
        
        let img=document.createElement("img")
        img.style.width = "70%"
        img.style.position = "absolute"
        img.style.bottom = "20%"
        img.style.right = "20%"
        img.style.pointerEvents="none"
        img.src = "../../assets/icons/png/flat/resize.png"
        this.scatter.resizeButton.appendChild(img)

        this.scatter.bringToFront()
        this.scatter.addTransformEventCallback((e) => {
            let newBorder = 50 / e.scale
            if (newBorder !== this.border) {
                this.border = newBorder
                this.layout()
            }
        })

        this.element.addEventListener('pointerdown', (e) => {
            this.scatter.bringToFront()
        })
    }

    close() {
        // this.frame.style.display="none"
        this.frame.parentNode.removeChild(this.frame)
        urlPadMap.delete(this.url)
    }

    addButton(src, value) {
        let button = document.createElement("img")
        button.type = "image"
        button.className = "frameButton"
        button.style.position = "absolute"
        button.src = fileURL(src)
        button.value=value
        button.draggable = false
        this.frame.appendChild(button)
        return button
    }

    addToolButton(src, value) {
        console.log("adding tool button",value)
        let button = document.createElement("img")
        button.type = "image"
        button.className = "frameButton"
        button.style.position = "absolute"
        button.src = fileURL(src)
        button.value=value
        button.draggable = false
        this.frame.appendChild(button)
        this.toolButtonMap.set(value,button)
        return button
    }

    layout() {
        console.log("layouting minmalPadFromElement")
        let b = this.border
        let b2 = b * 2
        let b8 = b / 8
        let b25 = b / 25
        let b15 = b / 15
        
        let size = "calc(100% - " + (2*b) +"px)"
        let h = "calc(100% - " + (b) +"px)"
        let w = "calc(100% - "+2  +"px)"
        let w2 = "calc(100% - " + (b+2) +"px)"

        Elements.setStyle(this.frame, {
            // borderRadius: b8 + "px",
            // boxShadow: `${b25}px ${b15}px ${b8}px rgba(0, 0, 0, 0.5)`
        })

        Elements.setStyle(this.element, {
            width: w,
            height:  h,
            top:  0+"px",
            left:  0+"px"})

        Elements.setStyle(this.pseudoFrameTop, {
            width: w,
            height: 0.1*b+"px",
            margin: "0px"})
        Elements.setStyle(this.pseudoFrameLeft, {
            width: 0.1*b+"px",
            height: h,
            margin: "0px"})
        Elements.setStyle(this.pseudoFrameRight, {
            width: 0.1*b+"px",
            height: h,
            margin: "0px"})
            
        Elements.setStyle(this.closeButton, {
            right: (b * 0.75) + "px",
            bottom: "0px",
            width: b+"px",
            height: b+"px"})
              
        let buttonCounter=0
        this.toolButtonMap.forEach(function (entry, key) {
            // console.log(entry,key)
            Elements.setStyle(entry, {
                left: (b * (buttonCounter+0.75)) + "px",
                bottom: "0px",
                margin: 0.1*b+"px",
                width: 0.8*b+"px",
                height: 0.8*b+"px"})
            
            buttonCounter++
            }
        )
            
        /*Elements.setStyle(this.addContentButton, {
            left: (b * 0.75) + "px",
            bottom: "0px",
            width: b+"px",
            height: b+"px"})
            
        Elements.setStyle(this.copyButton, {
            left: (b * 1.75) + "px",
            bottom: "0px",
            width: b+"px",
            height: b+"px"})
            
        Elements.setStyle(this.pasteButton, {
            left: (b * 2.75) + "px",
            bottom: "0px",
            width: b+"px",
            height: b+"px"})
            
        Elements.setStyle(this.saveButton, {
            left: (b * 3.75) + "px",
            bottom: "0px",
            width: b+"px",
            height: b+"px"})
            
        Elements.setStyle(this.deleteButton, {
            left: (b * 4.75) + "px",
            bottom: "0px",
            width: b+"px",
            height: b+"px"})*/
    }
}

module.exports = { Pad, minimalPad, DOMPadContainer, PadFromElement, minimalPadFromElement, PadAccordion }