// ZIM Frame has different scaling modes to fit the window 
// most ZIM examples on CodePen use "fit" mode
// try changing to "fit" to see what happens 
// outside will fit the stage so it is outside the window 
// and usually centered 
// we wanted the top of the stage to be at the top of the window 
// so we use valign:TOP on the Frame
// There is also "full" mode and "tag" mode but "outside" is easier in this case

const frame = new Frame({
	scaling:"outside",
	width:1024,
	height:768,
	color:blue.lighten(.5),
	valign:TOP 
});
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

	// *** NOTE: ZIM Cat defaults to time in seconds
	// All previous versions, examples, videos, etc. have time in milliseconds
	// This can be set back with TIME = "milliseconds" but we suggest you give it a try!
	// There will be a warning in the conslole if your animation is not moving ;-)

	// CODE HERE

	// make a Balloon class 
	class Balloon extends Container {
		constructor (color=red, stripe=white, basket=brown) {

			// use the system where we can pass in dynamic parameters (ZIM VEE values) 
			// The Pick() formats handle:
			//    1. a random selection: ["blue", "green", "yellow"] - array format
			//    2. a random range: {min:10, max:30} - range object format
			//    3. a series: series(10,20,30) - series format also Pick.series()
			//    4. a function result: function(){return new Date().minutes} - function format
			//    5. a normal value: 7 or "hello" - single-value format
			//    6. a noPick object: {noPick:["real", "array"]} - escape format
			//    7. a combination: [{min:10, max:20}, 30, 40] - combination format (recursive)

			color = Pick.choose(color); // or zik(color) - this was the original ZIM based name
			stripe = Pick.choose(stripe);
			basket = Pick.choose(basket);

			// call the Container which Balloon extends 
			// Circular things usually have the origin in the middle 
			// so half the bounds are to the left and top 
			// then we have the width and height being twice the radius
			// these bounds will not take into account the basket
			// we will adjust that after adding the basket
			const radius = 500;
			super(-radius,-radius,radius*2,radius*2);			

			// make the baloon
			const circle = new Circle(radius, color).addTo(this);			
			new Rectangle(radius*2, radius*rand(.2,.4), stripe).center(this).setMask(circle);
			new Circle({radius:radius, color:black, percent:50}).alp(.2).rot(-90).addTo(this);			
			new Circle(radius, new RadialColor([black.toAlpha(.2), clear],[0,.7], 50,0,radius, 0,0,0)).addTo(this);
			// the fade shapes will be used to fade out more distant balloons - see fade() method
			this.circleFade = new Circle(radius, frame.color).addTo(this).alp(0);
			
			// make the rope
			// a Flare gives us perspective boxes
			const rope = new Flare({
				color:clear, 
				borderColor:silver,
				borderWidth:2,
				thickness:radius*.7, // the base size
				lengths:radius*.45, // the length of the flare
				angles:90, // the direction of the flare (down)
				anglesA:-20 // the angle to set the sides - anglesB will match anglesA if not provided
			}).pos(0,-radius*.35,CENTER,BOTTOM,this,0); // below and behind the balloon
			const rope2 = new Flare({
				color:clear, 
				borderColor:silver,
				borderWidth:2,
				thickness:radius*.4,
				lengths:radius*.45,
				angles:90,
				anglesA:-10
			}).pos(0,-radius*.35,CENTER,BOTTOM,this,0);

			// make the basket - the word basket is already used by the basket color
			const flare = new Flare({
				color:new GradientColor([basket.darken(.4), basket],[0,1],0,0,radius*.4,27), 
				borderColor:basket.darken(.5),
				borderWidth:4,
				thickness:radius*.4,
				lengths:[radius*.2,radius*.2/10],
				angles:90,
				anglesA:[-5,-30]
			}).loc(rope.x, rope.y+rope.height-5,this,0).ord(2); // move above ropes
			pizzazz.makePattern("pixels").scaleTo(flare,100,100,"biggest").center(flare).setMask(flare).alp(.3);
			this.basketFade = flare.clone().addTo(this,flare.level+1).alp(0);
			this.basketFade.color = this.basketFade.borderColor = this.basketFade.spine = frame.color;

			// make the head(s)
			new Circle(20, brown.darken(rand(.5,.9))).pos(rand(-5,5),-25,CENTER,TOP,flare,0)
			if (rand()>.5) new Circle(18, brown.darken(rand(.5,.9))).pos(rand(30,60,null,true),-20,CENTER,TOP,flare,0)

			// wiggle the baloon in rotation and up and down
			// do not use y for wiggling up and down as that is being animated
			// so instead use the registration point
			this.wiggle("rotation",0,2,5,2,2.5);
			this.wiggle("regY",0,10,60,2,4);

			// adjust for basket
			this.setBounds()
		}   
		fade(amount=.5) {
			this.circleFade.alpha = this.basketFade.alpha = amount;
			return this; // make chainable
		}     
	}
	
	const ours = new Balloon() 
		.cache()
		.sca(.5)
		.loc(stageW/2, 0)
		.noMouse();
	
	// all the other balloons
	const balloons = new Container(stageW, stageH)
		.addTo()
		.bot()
		.noMouse(); // important for efficiency

	const colors = [red,green,blue,pink,yellow,orange,purple,grey,light]
	// noticed that each time a balloon was made the animation jittered a little...
	// so make balloons ahead of time and just loop 10 or 20 or whatever
	loop(10, ()=>{
		// passing in colors will let Balloon "pick" from the colors
		// because of the ZIM Pick.choose() being used 
		// passing in a series would pick in order, etc.
		let balloon = new Balloon(colors, colors, colors).sca(rand(.1,.4));
		balloon.fade(.55-balloon.scale).cache();
		balloon.loc(stageW*rand(), -balloon.height, balloons, 0)
	});
	balloons.sortChildren((a,b)=>{
		return a.scale>b.scale?1:-1;
	});   
	
	TIMECHECK = false; // a time check was added to ZIM for anything over 10s when it was converted from ms to s
	interval({min:.5, max:5}, obj=>{
		let balloon = balloons.getChildAt(obj.count);
		balloon.animate({
			props:{y:1000},
			ease:"linear",
			time:3/balloon.scale,
			loop:true,
			loopCall:target=>{
				target.loc(rand(stageW));
			}
		});	         
	}, 10, true); // start right away
	
	// FOOTER
	// call remote script to make ZIM icon - you will not need this
	const icon = createIcon(); 
	
	frame.on("resize", ()=>{		
		// for the "outside" scale mode we may only see a small part of the height of the stage 
		// although we have aligned it at the top 
		// we want to make sure we see the basket 
		// so use the frame.visibleBottom which tells the position 
		// of the bottom of the visible part of the stage
		// ours.height-ours.width/2 will be the distance 
		// from the registration to the bottom of the basket
		// this will keep the basket in view when in Details view for instance
		ours.y = Math.min(0, frame.visibleBottom-(ours.height-ours.width/2))
		icon.loc(frame.visibleRight-icon.width-20, frame.visibleBottom-icon.height-20)
	});

	// 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=Rectangle
	// https://zimjs.com/docs.html?item=Flare
	// https://zimjs.com/docs.html?item=noMouse
	// 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=pos
	// https://zimjs.com/docs.html?item=loc
	// https://zimjs.com/docs.html?item=bot
	// https://zimjs.com/docs.html?item=ord
	// https://zimjs.com/docs.html?item=alp
	// https://zimjs.com/docs.html?item=rot
	// https://zimjs.com/docs.html?item=sca
	// https://zimjs.com/docs.html?item=scaleTo
	// https://zimjs.com/docs.html?item=addTo
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=setMask
	// https://zimjs.com/docs.html?item=interval
	// https://zimjs.com/docs.html?item=GradientColor
	// https://zimjs.com/docs.html?item=RadialColor
	// https://zimjs.com/docs.html?item=series
	// https://zimjs.com/docs.html?item=Pick
	// https://zimjs.com/docs.html?item=lighten
	// https://zimjs.com/docs.html?item=darken
	// https://zimjs.com/docs.html?item=toAlpha
	// https://zimjs.com/docs.html?item=zog
	// https://zimjs.com/docs.html?item=zik


}); // end of ready