// ZIM is a JavaScript Canvas Framework for coding creativity!
// https://zimjs.com - please visit to start a wonderful coding journey.
// The main site has banner sections of TEN excellent uses of ZIM.

// ZIM provides many conveniences, components and controls 
// to help designers, developers and artists create interactive media 
// https://zimjs.com/about.html - why ZIM, features, applications
// https://zimjs.com/docs.html - expand open any feature for info and examples

// Here are CodePen examples with comments for learning:
// https://codepen.io/zimjs/pens/public - ZIM CodePen
// https://codepen.io/danzen/pens/public - ZIM Founder's CodePen
// https://codepen.io/zimjs/post/welcome-to-zim-on-codepen

// There are also many tutorials, videos and references here:
// https://zimjs.com/learn.html - ZIM Skool, ZIM Kids, ZIM Badges, etc.
// https://zimjs.com/code.html - ZIM Template, tools and more
// https://zimjs.com/slack/ - come join us on Slack for discussion and support

// -----------------

// ZIM is powered by CreateJS so we import CreateJS and ZIM in CodePen settings
// We make a Frame object which makes a stage on an HTML canvas 
// We then add objects to the stage and update the stage to see them 
	
const frame = new Frame("fit", 1024, 768, blue, darker); // see docs for other options
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;

	// CODE HERE 

	// Create a page border of ringed colors
	// we add to a ZIM Container so we can animate these later with a sequence 
	const rings = new Container(stageW, stageH).addTo(); // adds to stage by default

	// A ZIM series will return each item in order every time it is used
	// so when colors gets called it will give orange then blue repeatedly
	// We use this when making the rings in the loop below
	// orange and blue are ZIM colors - or use any HTML colors in "quotes"
	const colors = series(orange, blue); 
	
	// Use a ZIM loop which is like an easy for(){} loop
	// ZIM loop also loops through arrays, object and containers
	// Here we loop 12 times and each loop calls an arrow function
	// which is given the loop number i (the iterator)
	loop(12, i=>{
		// start with a 640 pixel radius and get smaller each loop
		// this way smaller circles sit on top and we can see them
		new Circle(640-i*20, colors).center(rings); 
	});

	// Often we animate from the current value TO the value specified in animate() 
	// Here we animate FROM a scale of 0 to the current scale of 1
	rings.animate({
		from:true, // end the animation at the current values for properties (eg. scale:1)
		props:{scale:0},  // animate from scale of 0
		time:700, // time in milliseconds for each animation
		sequence:100, // wait this long before animating the next object in container
	});

	// We could add a call:()=>{} in animate() to start app after we animate
	// but want app to start a little before the animation is done
	// so use a ZIM timeout(time, callback)
	// This is like JS setTimeout but parameters are reversed
	// ZIM interval(time, callback) is similar
	// Both these functions have more features than the JS versions

	timeout(1500, ()=>{
		// the ZIM particle emitter
		// we can also have startPaused:true and store in const emitter
		// and then use emitter.spurt() any time you want
		new Emitter({
			obj:new Circle(80, dark),
			num:5, // makes five at a time rather than one at a time
			gravity:0 // default is 10 to fall down like fireworks
		}).center();

		// ZIM has two ways to handle parameters (ZIM DUO)
		// 1. normal where the order matches the docs
		// text, size, font, color, etc.
		// Here we use the default size:
		// new Label("CREATE", null, "impact", blue)
		// 2. or a single configuration object
		// where the properties match the parameter names
		// then order does not matter and we do not need nulls:
		new Label({text:"CREATE!", font:"impact", color:blue})
			.sca(1.5) // chaining fun!
			.centerReg() // so scale and rotation happens around center
			.animate({
				props:{color:orange, scale:3}, // properties to animate
				time:1700, // time in ms
				rewind:true,
				rewindWait:2000, // wait before rewinding
				loop:true,
				loopWait:2000, // wait before looping
				ease:"backInOut"
			})
			.wiggle("rotation", 0, 2, 5, 1000, 1500);
			// property, startValue, min, max, minTime, maxTime
		
	}); // end of timeout

	// ZIM animate() will update stage but without animation would need below:
	// stage.update(); // this is needed to show any changes
	
	timeout(2500, ()=>{
		// FOOTER
		// call remote script to make ZIM Foundation for Creative Coding icon and a greet link
		createIcon(); 
		createGreet();
	});
	

	// 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=Label
	// 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=sca
	// https://zimjs.com/docs.html?item=addTo
	// https://zimjs.com/docs.html?item=centerReg
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=Emitter
	// https://zimjs.com/docs.html?item=timeout
	// https://zimjs.com/docs.html?item=interval
	// https://zimjs.com/docs.html?item=series
	// https://zimjs.com/docs.html?item=zog


}); // end of ready