const frame = new Frame("fit", 1024, 768, clear, clear);
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
	
	// THIS IS ZIM CAT! 
	// and time has been changed to SECONDS 
	// this can be set back again using TIME = "ms"; // or "milliseconds"

	// Flare is a ZIM shape that is handy for making... cups!
	const cup = new Flare({
		thickness:240,
		angles:-90,
		lengths:[15,30,500],
		anglesA:[0,-45,8],
		color:black
	}).center().mov(0,50);

	// the top of the cup is going to be called a couple times so store 
	// and padding is how much in from the sides of the cup to start the bubbles 
	const cupTop = cup.y-cup.height;
	const padding = 180;

	// make a bunch of bubbles
	// these will have a blendMode ble() that cuts out what it is in top of 
	// right back to the canvas color which is clear so we see the css gradient
	loop(50, function () {
		let bubble = new Circle(rand(6,12)).ble("destination-out");
		animateBubble(bubble);
	});

	// animate the bubble - which also gets called on the bubble again when it is done 	
	function animateBubble(bubble, again) {
		// the cup registration point is in the middle bottom (a Flare rotated upwards)
		// after the first time (again) we want to position the bubble lower down (bottom 20%) 	
		var x = cup.x-(cup.width-padding)/2+rand(cup.width-padding);
		var y = cup.y-rand(cup.height-(again?cup.height*.8:0));
		
		// this function gets the animation time based on how far bubble has to go 
		function getTime() {
			return (bubble.y-cupTop)*rand(.01,.03);
		}
		
		// here is the animation - that could be done with GreenSock 
		// but ZIM has a great animation engine too! 
		// https://zimjs.com/animation/ 
		// and many other features like https://zimjs.com/nio/ (path animation in ZIM 9)
		bubble
			.loc(x, y)
			.animate({
				props:{y:cupTop}, // animate to the top of cup
				time:getTime, // time accepts ZIM VEE (Pick) value of a function 
				ease:"linear",
				timeCheck:false, // zim has just changed over to seconds and longer times are triggering warnings
				call:()=>{
					// could just loop:true but looks better if new bubbles come in at bottom
					bubble.stopAnimate();  // stop previous wiggle
					animateBubble(bubble, true) // start the bubble again
				}
			})
			// wiggle the bubbles x about the start x by 5-20 pixels in 2-4 seconds
			.wiggle("x", bubble.x, 5, 20, 2, 4);
	}

	// lime
	new Circle(80, yellow.lighten(.2), yellow.darken(.3), 20)
		.loc(cup)
		.mov(cup.width/2, -cup.height)
		.bot(); // put at back

	// sparkles
	new Emitter({
		// Poly(radius, sides, pointSize, color, borderColor, borderWidth...)
		// note: {} and [] are ZIM VEE (Pick) values for dynamic parameters
		obj:new Poly({min:10, max:15}, [5,6,7], 1, black, black, 2),
		horizontal:true,
		height:5,
		angle:{min:-90-20, max:-90+20},
		force:{min:2, max:4},
		animation:{props:{rotation:["-360","360"]}, ease:"linear"},
		shrink:false,
		interval:{min:.1, max:.2}
	}).loc(cup).mov(0,-cup.height);
	
	new Label({text:"Happy Summer Drinks!", variant:true}).alp(.5).sca(.6).pos(30,30);

	// to include a Teleporter in a ZIM app 
	// import https://zimjs.org/teleporter.js
	// and pass in the URL of your CodePen page
	const url = "https://codepen.io/zimjs/pen/rNewpwP";
	const teleporter = new Teleporter(url).sca(.3).pos(30,20,LEFT,BOTTOM);
	// To include a Teleporter on your HTML page see this Pen for an example
	// https://codepen.io/zimjs/pen/WNxQPLp
	
	// DOCS FOR ITEMS USED
	// http://zimjs.com/docs.html?item=frame
	// https://zimjs.com/docs.html?item=Circle
	// https://zimjs.com/docs.html?item=Flare
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=stopAnimate
	// https://zimjs.com/docs.html?item=wiggle
	// https://zimjs.com/docs.html?item=loop
	// https://zimjs.com/docs.html?item=loc
	// https://zimjs.com/docs.html?item=mov
	// https://zimjs.com/docs.html?item=bot
	// https://zimjs.com/docs.html?item=ble
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=Emitter
	// https://zimjs.com/docs.html?item=darken
	// https://zimjs.com/docs.html?item=lighten
	
	// FOOTER
	// call remote script to make ZIM icon - you will not need this
	createIcon(); 
	// createGreet();

}); // end of ready