const scaling = "full"; // this will resize to fit inside the screen dimensions
const color = orange;
const outerColor = orange;

// as of ZIM 5.5.0 you do not need to put zim before ZIM functions and classes
const frame = new Frame(scaling, null, null, color, outerColor);
frame.on("ready", ()=>{
    zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

    const stage = frame.stage;
    const stageW = frame.width;
    const stageH = frame.height;

    const levels = 6;
    const points = 8;
    const thickness = 8;
    const color = black;

    // create web
    const rings = new Container(stageW, stageH).addTo();
    loop(levels, (i)=>{
        new Blob({            
            points:points,
            borderColor:color,
            borderWidth:thickness,
            radius:50+i*100, // make each one bigger
            color:"rgba(0,0,0,"+(.03+(levels-i)/30)+")", // add some shading           
            controlType:"none",
            allowToggle:false,
            showControls:false
        }).center(rings);
    });

    // make a shape for radial lines connecting web
    const web = new Shape().addTo();
    const g = web.graphics; // object within which to draw
    function connectWeb() {
        g.c(); // clear last drawing, loop through points and draw to each ring
        loop(points, (i)=>{ // for each point
            let c = rings.getChildAt(0).pointObjects[i][1]; // control circle
            let p = c.localToGlobal(c.x, c.y); // points are in blob coordinates, shape is in global coordinates
            g.mt(p.x, p.y).s(color).ss(thickness);
            loop(rings.numChildren, (j)=>{ // draw to each ring
                let c = rings.getChildAt(j).pointObjects[i][1];
                let p = c.localToGlobal(c.x, c.y);
                g.lt(p.x, p.y);
            })
        });
    }

    // make spiders animate on each ring and wiggle web
    rings.loop((ring)=>{
        let body = new Circle(20, black).addTo().animate({
            props:{path:ring},
            time:5000,
            ease:"linear",
            loop:true,
            startPaused:true,
            dynamic:true
        });
        body.percentComplete = rand(100); // set percent complete then wiggle - otherwise percentComplete of wiggle
        body.wiggle("percentSpeed", 0, 20, 50, 5000, 15000); // change speed and direction of spider
        let legs = new Container().center(body);
        loop(4, (n)=>{
            new Rectangle(120,2,black).centerReg(body).alp(.2).rot((n+3)*20)
        });

        // wiggle web
        loop(points, (i)=>{
            ring.pointObjects[i][0].wiggle("x", ring.pointObjects[i][0].x, 10, 20, 500, 1800); // 10-20 pixels in 500-1800 ms
            ring.pointObjects[i][0].wiggle("y", ring.pointObjects[i][0].y, 5, 10, 500, 1800);
        });
    })

    Ticker.add(()=>{
        rings.loop((ring)=>{ring.update();}); // update blobs
        connectWeb(); // draw lines between blobs
    });
  
  
    // DOCS FOR ITEMS USED
    // https://zimjs.com/docs.html?item=Frame
    // https://zimjs.com/docs.html?item=Container
    // https://zimjs.com/docs.html?item=Shape
    // https://zimjs.com/docs.html?item=Circle
    // https://zimjs.com/docs.html?item=Rectangle
    // https://zimjs.com/docs.html?item=Blob
    // https://zimjs.com/docs.html?item=animate
    // https://zimjs.com/docs.html?item=wiggle
    // https://zimjs.com/docs.html?item=loop
    // https://zimjs.com/docs.html?item=alp
    // https://zimjs.com/docs.html?item=rot
    // https://zimjs.com/docs.html?item=addTo
    // https://zimjs.com/docs.html?item=centerReg
    // https://zimjs.com/docs.html?item=center
    // https://zimjs.com/docs.html?item=rand
    // https://zimjs.com/docs.html?item=loop
    // https://zimjs.com/docs.html?item=zog
    // https://zimjs.com/docs.html?item=Ticker
  
    // FOOTER
    // call remote script to make ZIM Foundation for Creative Coding icon
    var icon;
    createIcon(frame, null, null, (button)=>{icon = button; icon.sca(.7).pos(10,60,true,true);});   
    frame.on("resize", ()=>{
        rings.center();
        if (icon) icon.sca(.7).pos(10,60,true,true);
    });

}); // end of ready