const frame = new Frame("fit", 1024, 768, darker, dark);
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 nums = [26,22,18,13,9,7,5];
	let colors = [blue, green, pink, orange, red, purple, yellow];

	function makeSolution() {			
		shuffle(colors); // shuffled colors are pick order
		let all = []
		loop(colors, (color,i)=>{
			loop(nums[i], ()=>{
				all.push(color);
			});			
		});
		return shuffle(all);
	}
	let solution = makeSolution();

	let guessNum = 0;
	const tile = new Tile(new Circle(20, series(solution)).alp(0), 10, 10, 20, 20)
		.center()
		.animate({
			props:{alpha:1},
			time:200,
			sequence:20
		})
		.tap(e=>{
			if (e.target.color == colors[guessNum]) { // right answer
				let count = 0;
				tile.loop(circle=>{
					if (circle.color == colors[guessNum]) {
						circle.animate({
							props:{alpha:0}, 
							time:300,
							wait:count*20
						});		
						count++;
					}
				}); // end tile loop
				guessNum++;
				if (guessNum == colors.length) {
					timeout(1000, ()=>{
						pane.show();
						emitter.spurt(100);
					});
				}
			} else { // wrong answer
				reset()
			}
		});

	const pane = new Pane({
		label:"Winners code with ZIM!",
		width:stageW+100,
		height:100,
		backgroundColor:purple,
		color:white
	});
	pane.on("close", reset);
	const emitter = new Emitter({
		obj:new Circle(30, colors),
		num:3,
		gravity:0,
		force:8,
		startPaused:true
	}).center();

	function reset() {
		guessNum = 0;
		solution = makeSolution();
		tile.loop((circle,i)=>{
			circle.animate({
				props:{alpha:1, color:solution[i]}, 
				time:300,
				wait:i*20
			});
		});
	}

	new Label({
		text:"DOTGON",
		font:"impact",
		size:40,
		color:white
	}).pos(30,30).animate({
		from:true,
		props:{x:-200},
		ease:"backOut",
		time:500,
		wait:1700		
	})


	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=Circle
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=Pane
	// https://zimjs.com/docs.html?item=Tile
	// https://zimjs.com/docs.html?item=tap
	// 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=alp
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=Emitter
	// https://zimjs.com/docs.html?item=shuffle
	// https://zimjs.com/docs.html?item=timeout
	// https://zimjs.com/docs.html?item=series
	// https://zimjs.com/docs.html?item=zog

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

}); // end of ready