const assets = ["bird01.png", "bird02.png", "pelican.png", "pigeon.png", "tucan.png"];
const path = "https://assets.codepen.io/2104200/";
const scaling = FIT; // try FILL
const width = 1024;
const height = 768;
const color = purple;
const outerColor = purple.darken(.5);

const frame = new Frame(scaling, width, height, color, outerColor, assets, path);
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 ;-)

	// images thanks to https://vecteezy.com - chopped up by Nived!
		
	// CODE HERE
	
	const cols = 9;
	const rows = 5;
	const startScale = .35;
	const birds = [];	
	
	// make clones of enough birds to make cols*rows 
	// we will just reuse the same bird images over and over
	loop (cols*rows, ()=>{
		// asset() receives a string name of the asset 
		// but it also accepts ZIM VEE dynamic parameters to pick from. 
		// In this case it picks randomly from the assets array.
		// Clone assets if you want more than one.		
		birds.push(asset(assets).clone());
	});
	
	// we will makeBirds over and over again as the mousemoves
	let tile;
	function makeBirds() {
		
		if (tile) { 
			// get rid of last tile
			// we could just dispose() - but it is more efficient to reuse the birds
			// so remove them from the tile before disposing
			tile.removeAllChildren();
			tile.dispose();
		}
		
		// Make sure the birds are center registration 
		// so when we scale them, they stays in place better in the Tile
		// (otherwise each would scale from its top left corner).
		// We randomly adjust the scale and reg later so this resets it
		loop(birds, bird=>{
			bird.sca(startScale).centerReg();
		});
		
		// randomize the series the tile will pick from ZIM VEE again...
		let birdSeries = series(shuffle(birds));	
		
		// make the tile and DO NOT let it clone
		// this is important - we want to reuse the birds we have
		// if we disposed without removing the birds first 
		// then we would want to leave clone true - which is the default
		tile = new Tile({
			obj:birdSeries,
			cols:cols,
			rows:rows,
			spacingH:rand(-150,-120),
			spacingV:rand(-150,-120),
			clone:false
		}).ble("difference");
		
		// randomize the scale and registration point
		tile.loop(bird=>{
			// true is min range too -.3 to -.7 as well
			// this makes it flip sometimes
			let s = rand(.3,.7,null,true); 
			// we want to keep the y scale positive
			// and just adjust the regY a little so not so vertically aligned
			bird.sca(s, Math.abs(s)).reg(null,bird.regY+rand(-50,50));
		});
		tile.center();
		stage.update();
	}
	makeBirds();
	
	stage.on("stagemousemove", makeBirds);	
	
	// Love ZIM - this was so pleasant to make

	// DOCS FOR ITEMS USED
	// https://zimjs.com/docs.html?item=Frame
	// https://zimjs.com/docs.html?item=loop
	// https://zimjs.com/docs.html?item=ble
	// https://zimjs.com/docs.html?item=reg
	// https://zimjs.com/docs.html?item=sca
	// https://zimjs.com/docs.html?item=centerReg
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=Tile
	// https://zimjs.com/docs.html?item=rand
	// https://zimjs.com/docs.html?item=series
	// https://zimjs.com/docs.html?item=darken
	// https://zimjs.com/docs.html?item=zog

	// FOOTER
	// call remote script to make ZIM icon - you will not need this
	createIcon(); 
	createGreet();

}); // end of ready