const frame = new Frame("outside", 1280, 720, black);
frame.on("ready", ()=>{ // ES6 Arrow Function - similar to function(){}
	zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

	// often need below - so consider it part of the template
	const stage = frame.stage;
	const stageW = frame.width;
	const stageH = frame.height;

	// REFERENCES for ZIM at https://zimjs.com
	// see https://zimjs.com/intro.html for an intro example
	// see https://zimjs.com/learn.html for video and code tutorials
	// see https://zimjs.com/docs.html for documentation
	// see https://codepen.io/topic/zim/ for ZIM on CodePen

	// CODE HERE
	// comparison to the cool Splat example 
	// https://codepen.io/snorkltv/pen/MWYMJBY
	// the GSAP code is at the bottom with some comments
	// thanks Carl and GSAP for the original post
	// not exactly the same but the systems are a little different

	// could store circles in Array but on canvas usually we use a Container
    const circles = new Container(stageW, stageH).addTo();
    loop(400, () => {
        // ZIM VEE (Pick) values give us dynamic parameters in many places in ZIM
        // passing in {min:val, max:val} gives range between
        // in this case in a loop we could just use rand(10)
        // passing in array randomly picks from array
        // in this case in a loop we could just use shuffle([etc.])[0]
        // but ZIM VEE is handy for when not in a loop
        // such as passing a time into an interval, objects into Tile or Emitter, etc.
        // can also use a series(pink,green,blue,yellow,purple) to pick colors in order
        // can also use a function that returns a value 
        new Circle({max:10}, [pink,green,blue,yellow,purple], dark).center(circles);
    })

    circles.animate({
        props:{
            y:{min:0, max:stageH}, // ZIM VEE (Pick) values that get reset each loop
            x:{min:0, max:stageW},
            scale:3
        },
        time:{min:500, max:700},
        sequence:0, // operate on each child of Container - 0 for at same time
        rewind:true,
        loop:true,
        loopPick:true, // pick from ZIM VEE (Pick) values each loop
        ease:"quartOut", // try "quartInOut"
        rewindCall:t=>t.pauseAnimate(),
        loopCall:t=>t.pauseAnimate()
    });
    interval([800,900], ()=>pauseAnimate(false), null, null, true); // sync the animates and pause on blur

	// I think the clumping with quartOut is because the pause activates before reaching its original position
	// whereas the quartInOut seems to make it back to its starting position... strange - but I like it better

	// GSAP and Carl
	// for (let i = 0; i < 400; i++){
	// 	let circle = new Circle(Math.random() * 10, "#FFCC32").center()
	// 	circles.push(circle)
	// }
	// gsap.ticker.add(function(){
	// 	stage.update()
	// })
	// gsap.to(circles, {
	//    scale:3,
	//    duration:function(){return Math.random()-0.5},
	//    x:"random(0, 1280)",
	//    y:"random(0, 720)",
	//    repeat:-1,
	//    yoyo:true,
	//    repeatRefresh:true,
	//    ease:"power4"
	// })	

	stage.update(); // this is needed to show any changes

	// DOCS FOR ITEMS USED
	// https://zimjs.com/docs.html?item=Frame
	// https://zimjs.com/docs.html?item=Container
	// https://zimjs.com/docs.html?item=Circle
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=loop
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=shuffle
	// https://zimjs.com/docs.html?item=rand
	// https://zimjs.com/docs.html?item=series
	// https://zimjs.com/docs.html?item=zog


}); // end of ready