const frame = new Frame("fit", 1024, 768, dark, darker);
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
	
	// a remake of Florin Pop Pen https://codepen.io/FlorinPop17/pen/WNbjQWN
	// with ZIM being 54% the size of code the developer would code
	// not that there is anything wrong with Florin's excellent code
	// just HTML/CSS/JS could be more efficient 
	
	new Label("Press a dot!", 30, null, blue).pos(0,40,CENTER,TOP);
	
	// obj, cols, rows, spacingH, spacingV
	const container = new Tile(new Circle(10, white), 15, 15, 20, 20)
		.center()
		.tap(e=>{
			// each tile element is given col and row index properties
			growCircles(e.target.tileCol, e.target.tileRow);
		});
	function growCircles(i,j) {
		// the items property will give items by index in container if desired but can 
		// can access tile items by row and col with items2D property 
		// or access tile items by col and row with items2DCols property
		// we are getting items next to current item
		// so test to make sure we are not off the edge
		if (container.items2D[j] && container.items2D[j][i]) {
			let circle = container.items2D[j][i];
			if (!circle.animating) {
				circle.animate({
					props:{scale:2},
					time:.3,
					rewind:true
				});
				timeout(.1, () => {
					growCircles(i-1, j);
					growCircles(i+1, j);
					growCircles(i, j-1);
					growCircles(i, j+1);
				});
			}
		}		
	}

    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=tap
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=pos
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=Tile
	// https://zimjs.com/docs.html?item=timeout
	// https://zimjs.com/docs.html?item=zog
  
    // FOOTER
    // call remote script to make ZIM Foundation for Creative Coding icon
    createIcon(); 

}); // end of ready