const frame = new Frame({color:black, rollover:false});
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


	// A comparison to Flutter at https://codepen.io/jamescardona11/pen/gOPvVzx 
	// which is a wonder of manipulation of Flutter components, etc.
	// ZIM is 26% the size of the Flutter code - I suspect P5js would be too.
	// And the code is many times more readable.

	// CODE HERE

	const colors = [red,blue,pink,green,orange,purple,brown,grey];
	const mercury = 47.4;
	const orbitVelocities = [
		mercury / 47.4, //mercury
		mercury / 35.0, //venus
		mercury / 29.8, //Earth
		mercury / 24.1, //Mars
		mercury / 13.1, //Jupiter
		mercury / 9.7, //Saturn
		mercury / 6.8, //Uranus
		mercury / 5.4, //Neptune
	];
	//reference for values like velocity and orbit distance from:
	//https://space-facts.com/planet-orbits/
	

	// sun and planets
	const planets = new Container(500, 500);
	const sun = new Circle(15, yellow).center(planets);	
	const spacing = planets.width/2/colors.length;
	const speed = 2;
	loop(colors, (color, i) => {
		let dist = 10+(i+1)*spacing;
		new Circle(dist, clear, white, 1.5).center(planets);
		new Circle(9, color)
			.reg(0,-dist)
			.loc(sun, null, planets)
			.animate({
				props:{rotation:360},
				ease:"linear",
				loop:true,
				time:speed*orbitVelocities[i],
				timeCheck:false
			});
		});

	// starfield
	const stars = new Container(2000, 1000);
	loop(200, ()=> {
		// radius (picks one), sides, pointiness, color)
		new Poly([2,3,4,5], [5,6,7], {min:.5, max:.9}, white)
			.loc(rand(stars.width), rand(stars.height), stars);
	});
	stars.cache();

	const icon = createIcon(); // footer

	frame.on("resize", ()=>{
		planets.center();
		stars.center();
		icon.pos(30,30,RIGHT,BOTTOM);
	}); 

	// 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=Poly
	// 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=reg
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=rand
	// https://zimjs.com/docs.html?item=zog 
   

}); // end of ready