const frame = new Frame("fit", 1024, 768, darker, blue.darken(.7));
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 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 colors = [pink,green,orange,yellow,red,blue,grey,pink,green,blue];

	class Ring extends Container {
		constructor() {
			super(500,500);            
			const num = rand(4,8);
			let data = [];
			// want to rotate about middle (center reg) 
			// but on outside, we are adjusting registration of whole object 
			// so we need to make another container inside that we can spin
			const rotator = this.rotator = new Container(this.width, this.height).centerReg(this);
			loop(num, (i, t) => {
				let r = 200-i*(200/(t+1)); // make larger circles first
				// Circle will use a ZIM VEE value (Pick) to randomly choose from colors array
				let c = new Circle(r, colors).center(rotator);
				data.push(c.color);
			});
			this.info = new LabelOnArc(data.join(","), 20, null, lighter, 210).center(rotator)
			rotator.cache().animate({props:{rotation:360}, time:60000, ease:"linear", loop:true});
		}
	}

	// we remake the art on stage mousedown when art is done
	// so make art in a function
	makeArt(); 
	function makeArt() {

		// this is the container that holds the art and our follow object
		const art = new Container(stageW, stageH).addTo().noMouse();

		new Ring().centerReg(art).alp(0).animate({alpha:1}, 500);

		// make an invisble object that will animate to the rings
		// and then follow this object using frame.follow
		const guide = new Circle(50, white).alp(0).center(art);
		frame.follow(guide);

		// create rings
		interval(1500, obj => {
			let r = new Ring()
			.centerReg(art)
			.reg(0,1400) // change registration and rotate (easy placement around circle)
			.rot(360/12*obj.count)
			.alp(0)
			.animate({alpha:1,});						
			// cannot animate guide to loc of ring as they are all in center 
			// so animate to location of rotator inside ring 
			// ring is rotated so use localToLocal to translate position 
			let p = r.localToLocal(r.rotator.x, r.rotator.y, art);
			guide.animate({x:p.x, y:p.y}); // frame will make art follow guide!
			if (obj.count == obj.total) {
				frame.follow(null); // stop following
				art.reg(stageW/2, stageH/2, true);
				art.animate({x:stageW/2, y:stageH/2, scale:.2}, 800);
				guide.removeFrom(); // so loop below only loops through rings!
				art.loop(ring => {
					ring.info.removeFrom();
					ring.rotator.uncache();
				});
				stage.on("stagemousedown", () => {
					art.animate({
						props:{rotation:360*3, alpha:0},
						time:2500,
						ease:"backIn",
						call:()=>{
							art.dispose();
							makeArt();
							stage.update();
						}
					});
				}, null, true); // only keep event for one dispatch
			}
		}, 12); // set interval to 12 times

	}

	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=Circle
	// https://zimjs.com/docs.html?item=LabelOnArc
	// https://zimjs.com/docs.html?item=noMouse
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=loop
	// https://zimjs.com/docs.html?item=alp
	// https://zimjs.com/docs.html?item=rot
	// https://zimjs.com/docs.html?item=reg
	// https://zimjs.com/docs.html?item=addTo
	// https://zimjs.com/docs.html?item=removeFrom
	// https://zimjs.com/docs.html?item=centerReg
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=rand
	// https://zimjs.com/docs.html?item=interval
	// https://zimjs.com/docs.html?item=darken
	// https://zimjs.com/docs.html?item=zog

	// FOOTER
	// call remote script to make ZIM Foundation for Creative Coding icon
	createIcon(); 

}); // end of ready