const frame = new Frame("fit", 1024, 768, "#EEE", "#555");
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
	
	STYLE = {align:"center", valign:"center"};
	// or could apply these styles only to tiles
	// or could have added these directly to the Tile
	// if Tile attributes were in config object format
	
	const arrows = [
		pizzazz.makeIcon("arrow"),
		pizzazz.makeIcon("arrowthin"),
		pizzazz.makeIcon("arrowstick"),
		pizzazz.makeIcon("arrowhollow"),
		pizzazz.makeIcon("arrowline")
	];
	
	const tile = new Tile(arrows, 12, 10, 15, 15).center();
	tile.on("mouseover", e=>{
		e.target.rotation += 90;
		stage.update();
	});
	
	interval(100, ()=>{ // every 100 ms rotate 20 arrows
		loop(20, ()=>{
			tile.items[rand(tile.items.length-1)].rotation -= 90;
		});
		stage.update();
	}, 10); // interval runs 10 times
	
	tile.loop(arrow=>{arrow.expand(0);}); // make hitarea more than just black lines
	
   

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

}); // end of ready