const assets = "star.png";
const path = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2104200/";
const frame = new Frame("fit", 1024, 768, black, black, 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
	let stage = frame.stage;
	let stageW = frame.width;
	let stageH = frame.height;

	// REFERENCES for ZIM at http://zimjs.com
	// see http://zimjs.com/learn.html for video and code tutorials
	// see http://zimjs.com/docs.html for documentation
	// see https://www.youtube.com/watch?v=pUjHFptXspM for INTRO to ZIM
	// see https://www.youtube.com/watch?v=v7OT0YrDWiY for INTRO to CODE

	// CODE HERE

	const stars = new Container(stageW, stageH).addTo();
	loop(6, ()=>{		
		// create the starts from the start.png spritesheet asset that is 5 cols and 6 rows
		new Sprite(asset("star.png"), 5, 6).centerReg(stars).run({loop:true});
	});


	// this is where we draw the noise image
	const shape = new Shape(stageW, stageH).addTo();

	// this will hold a copy of the image as we fade out
	const bmp = new Bitmap().addTo();

	// here is our Noise object
	const noise = new Noise();

	const lines = stars.numChildren+1; // how many lines we will draw
	const height = 300; // how far up or down the end of the line is allowed to be
	const step = .006; // the step we will increase for the second parameter of simplex2D
	let j = 0; // the value for the second parameter of simplex2D
	let count = 0; // ticker count used to keep track of how many lines we have made (so we can clear when too many)

	// animate the noise and patterns made from the noise
	Ticker.add(function() {
		count++;
		j += step; // increase second parameter by just a little to animate the line
		// if we are writing the Shape to a Bitmap we need to put the alpha differences in the Shape itself
		// if we JUST want to see the shape, we can set the alpha of the shape
		// but we are writing it to a Bitmap as well to fade it out...
		// It is no big deal, we just draw with lower alpha right in the Shape
		shape.s("rgba(255,255,255,.15)").ss(2).mt(0, stageH/2);
		loop(lines-1, i=>{ // last line we will draw to middle of stageH
			let x = (i+1)*stageW/lines;
			// ask for the noise at position i that is animated in time by the small amount j
			let y = stageH/2 + noise.simplex2D(i,j)*height;
			shape.lt(x, y);
			// place a star at the y pos
			stars.getChildAt(i).loc(x, y);
		});
		shape.lt(stageW, stageH/2); // last line
		// we have drawn enough pattern, so cache the shape and make the Bitmap hold the cacheCanvas
		// and then uncache the shape and fade the Bitmap out - also clear the Shape
		if (count%200==0) {
			shape.cache(0,0,stageW,stageH);
			bmp.image = shape.cacheCanvas;
			bmp.alpha = 1;
			shape.uncache();
			shape.c();
			bmp.animate({alpha:0}, 2000);
		}
	});	
	
	new Label("Happy Holidays from ZIM!", 24, null, white)
		.pos(30,30)
		.alp(.4)
		.animate({
			from:true,
			wait:2000,
			props:{alpha:0},
			rewind:true,
			rewindWait:3000
		});

	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=Shape
	// https://zimjs.com/docs.html?item=Sprite
	// https://zimjs.com/docs.html?item=Bitmap
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=animate
	// 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=alp
	// https://zimjs.com/docs.html?item=addTo
	// https://zimjs.com/docs.html?item=centerReg
	// https://zimjs.com/docs.html?item=Noise
	// 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
	createIcon(); 
	greet = createGreet().animate({wait:1000, props:{alpha:0}, time:500});
}); // end of ready