let vWidth = (window.innerWidth);
let vHeight = (window.innerHeight);
let gsapRandom = gsap.utils.random;
        let Container = PIXI.Container;
        let loader = PIXI.Loader.shared;
        let resources = PIXI.Loader.shared.resources;
        const Sprite = PIXI.Sprite;

        const app = new PIXI.Application({
            width: "vWidth",
            height: "vHeight",
            resolution: window.devicePixelRatio || 1,
            resizeTo: window,
            transparent: true,
            antialias: true
        });
        let centerX = (app.screen.width / 2)
        let centerY = (app.screen.width / 2)
       
				
        //Add the canvas that Pixi automatically created for you to the HTML document
        container.appendChild(app.view);
        app.view.id = "pixiCanvas";
        // PIXI built in loader to load assets



        //   let mainScene, nestedLogo, stage, cursorInner, cursorOuter;


        app.ticker.stop();

        // Now, we use 'tick' from gsap
        gsap.ticker.add(() => {
            app.ticker.update();
        });


       

            // create stage variable
            stage = app.stage;
            stage.x = vWidth * 0.5;
            stage.y = vHeight * 0.5;
            stage.interactive = true;
            mainScene = new Container();
            mainScene.interactive = true;
            stage.addChild(mainScene);
           

            // create bubble container
            let bubbleContainer = new Container();
            bubbleContainer.interactive = true;

            // add bubble container to the mainScene container
            mainScene.addChild(bubbleContainer);




            // Options for how objects interact
            // How fast the outer cursor moves
            const outerMovementSpeed = 0.15;
            const innerMovementSpeed = 0.19;


            // Calculate the distance between two given points
            function distanceBetweenTwoPoints(p1, p2) {
                const a = p1.x - p2.x;
                const b = p1.y - p2.y;

                return Math.hypot(a, b);
            }

            // The cursors
            // create the outer cursor and set initial properties
            const outerCursor = new PIXI.Sprite.from('https://i.imgur.com/buymB8d.png');
            outerCursor.position.set(0, 0);
            outerCursor.scale.set(.27);
            outerCursor.anchor.set(0);
            outerCursor.acceleration = new PIXI.Point(0);
            outerCursor.mass = 1;

            // create the inner cursor and set initial properties
            const innerCursor = new PIXI.Sprite.from('https://i.imgur.com/891RtvU.png');
            innerCursor.position.set(0, 0);
            innerCursor.scale.set(.27);
            innerCursor.anchor.set(0);
            innerCursor.acceleration = new PIXI.Point(0);
            innerCursor.mass = 1;



            // Listen for animate update
            app.ticker.add((delta) => {
                // Apply deacceleration
                outerCursor.acceleration.set(outerCursor.acceleration.x * 0.99, outerCursor.acceleration.y * 0.99);
                innerCursor.acceleration.set(outerCursor.acceleration.x * 0.99, outerCursor.acceleration.y * 0.99);

                // get the mouse coordinates
                const mouseCoords = app.renderer.plugins.interaction.mouse.global;

                // If the mouse is off screen, then don't update any further
                if (app.screen.width > mouseCoords.x || mouseCoords.x > 0 || app.screen.height > mouseCoords.y || mouseCoords.y > 0) {

                    // Get the cursor's center point
                    const outerCursorCenterPosition = new PIXI.Point(
                        outerCursor.getGlobalPosition().x + (outerCursor.width * 0.5),
                        outerCursor.getGlobalPosition().y + (outerCursor.height * 0.5)
                    );
                    const innerCursorCenterPosition = new PIXI.Point(
                        innerCursor.getGlobalPosition().x + (innerCursor.width * 0.5),
                        innerCursor.getGlobalPosition().y + (innerCursor.height * 0.5)
                    );

                    // Calculate the direction between the mouse pointer and the new cursors
                    const toMouseDirectionOuter = new PIXI.Point(mouseCoords.x - outerCursorCenterPosition.x, mouseCoords.y - outerCursorCenterPosition.y);
                    const toMouseDirectionInner = new PIXI.Point(mouseCoords.x - innerCursorCenterPosition.x, mouseCoords.y - innerCursorCenterPosition.y);

                    // Use the above to figure out the angle that direction has
                    const angleToMouseOuter = Math.atan2(
                        toMouseDirectionOuter.y,
                        toMouseDirectionOuter.x
                    );
                    const angleToMouseInner = Math.atan2(
                        toMouseDirectionInner.y,
                        toMouseDirectionInner.x
                    );


                    // calculate the cursors speed relative to the distance to the pointer
                    const distMouseOuterCursor = distanceBetweenTwoPoints(mouseCoords, outerCursorCenterPosition);
                    const outerSpeed = distMouseOuterCursor * outerMovementSpeed;
                    const distMouseInnerCursor = distanceBetweenTwoPoints(mouseCoords, innerCursorCenterPosition);
                    const innerSpeed = distMouseInnerCursor * innerMovementSpeed;

                    // Calculate the acceleration of the outer cursor
                    outerCursor.acceleration.set(
                        Math.cos(angleToMouseOuter) * outerSpeed,
                        Math.sin(angleToMouseOuter) * outerSpeed,
                    );

                    innerCursor.acceleration.set(
                        Math.cos(angleToMouseInner) * innerSpeed,
                        Math.sin(angleToMouseInner) * innerSpeed,
                    );
                }

                outerCursor.x += outerCursor.acceleration.x * delta;
                outerCursor.y += outerCursor.acceleration.y * delta;
                innerCursor.x += innerCursor.acceleration.x * delta;
                innerCursor.y += innerCursor.acceleration.y * delta;
            });

            mainScene.addChild(outerCursor, innerCursor);

            // total bubbles
            let logoBubblesCount = 30;
            if (window.innerWidth < 1500) {
                logoBubblesCount = 20;
            } else if (window.innerWidth < 1050) {
                logoBubblesCount = 15;
            }
            console.log('logoBubblesCount', logoBubblesCount);

            //An array to store all the bubbles
            let bubbles = [];

            // create bubbles
            for (let i = 0; i < logoBubblesCount; i++) {
                let bubble = new PIXI.Sprite.from('https://i.imgur.com/YDqpi6q.png');
                bubble.interactive = true; // enable mouse and touch events
                bubble.buttonMode = true; // show hand cursor on mouseover

                //Set the bubbles position and scale
                let baseScale = 0.05;
                if (window.innerWidth < 1050) {
                    baseScale = 0.12;
                }
                randomX = gsapRandom(app.screen.width * 0.5, app.screen.width * -0.5);
                randomY = gsapRandom(app.screen.height * 0.5, app.screen.height * -0.5);
                bubble.position.set(randomX, randomY);
                bubble.anchor.set(0.5); // set  bubble anchor to the center
                bubble.scale.set(baseScale); // set the initial scale of the bubble

                bubbleContainer.addChild(bubble); // create the bubble container
                bubbles.push(bubble); //Push the bubble into the bubbles array
                gsap.fromTo(bubble, {
                    pixi: {
                        autoAlpha: 0
                    },
                }, {
                    pixi: {
                        autoAlpha: 1
                    },
                    duration: 1
                });
            

             
                updatePos(bubble);


                // Create main bubble attract function
                let calculateBubblePosition = function (item, index, distItem) {
                    // get mouse position
                    const mouseCoords = app.renderer.plugins.interaction.mouse.global;

                    // set mouse position variables
                    let mouseX = mouseCoords.x;
                    let mouseY = mouseCoords.y;
                    // Get bubble position using pixi builtin position finder
                    let itemX = item[i].getGlobalPosition().x;
                    let itemY = item[i].getGlobalPosition().y;

                    var radius = 70; // set the cursor attract radius
                    const centerPosition = new PIXI.Point(
                        item[i].getGlobalPosition().x + (distItem.width * 0.5),
                        item[i].getGlobalPosition().y + (distItem.height * 0.5)
                    );
                    const calcDistDirection = new PIXI.Point(mouseCoords.x - distItem.x, mouseCoords.y - distItem.y);
                    const distItemAngle = Math.atan2(
                        calcDistDirection.y,
                        calcDistDirection.x
                    );
                    // Get distance between mouse and bubble
                    var dx = mouseX - itemX;
                    var dy = mouseY - itemY;
                    // Get angle between mouse and bubble
                    var angleDist = Math.atan2(dy, dx);
                    var dist = Math.sqrt(dx * dx + dy * dy) || 1;

                    if (dist < radius) {
                        radius = dist;
                        gsap.to(item[i], {
                            pixi: {
                                scale: 0.15 // set the scale of the bubble when within the radius
                            },
                            duration: 0.2,
                            ease: "sine.inOut"
                        });
                    } else {
                        gsap.to(item[i], {
                            pixi: {
                                scale: 0.08 // set the resting scale of the bubble
                            },
                            duration: 0.2, // duration of the hover animation
                            ease: "sine.inOut"
                        });
                    }
                    if (dist <= radius) {
                        gsap.to(distItem, {
                           
                                x: Math.cos(angleDist) * radius,
                                y: Math.sin(angleDist) * radius,
                            duration: 0.5,
                            ease: "sine.inOut",
                          
                        });
                
                    }
                };

                // create a bounding box box for the little maggots
                const bubbleBoundsPadding = 20;
                const bubbleBounds = new PIXI.Rectangle(
                    -bubbleBoundsPadding,
                    -bubbleBoundsPadding,
                    app.screen.width + bubbleBoundsPadding * 2,
                    app.screen.height + bubbleBoundsPadding * 2
                );


                app.ticker.add((bubble) => {
                    // wrap the maggots
                    if (bubble.x < bubbleBounds.x) {
                        bubble.x += bubbleBounds.width;
                    } else if (bubble.x > bubbleBounds.x + bubbleBounds.width) {
                        bubble.x -= bubbleBounds.width;
                    }
                    if (bubble.y < bubbleBounds.y) {
                        bubble.y += bubbleBounds.height;
                    } else if (bubble.y > bubbleBounds.y + bubbleBounds.height) {
                        bubble.y -= bubbleBounds.height;
                    }
                    calculateBubblePosition(bubbles, i, outerCursor);
                });

            }
        
    

    


    // Move the main bubbles
    function updatePos(item) {
        let moveBubbleTl = gsap.timeline({
            yoyo: true, // reverse direction of when animation ends
            repeat: -1, // infinite repeat
            repeatRefresh: true // repeat animation from ending position
        });
        moveBubbleTl.to(item, {
                x: gsapRandom(vWidth * 0.5, vWidth * -0.5),
                y: gsapRandom(vHeight * 0.5, vHeight * -0.5),
            duration: gsap.utils.random(25, 40),
            ease: "linear",
            repeatRefresh: true,
        });
    }

    // Random helper function
    function rand(min, max) {
        if (max == null) {
            max = min;
            min = 0;
        }
        if (min > max) {
            var tmp = min;
            min = max;
            max = tmp;
        }
        return min + (max - min) * Math.random();
    }