const frame = new Frame("fit", 800, 600, "#555", "#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
	
	// THE ONE STATEMENT WOULD LOOK LIKE THIS:
	// new Pen({
	// 	damp:.8, 
	// 	draggable:false,
	//		color:series("#FCEEB5", "#EE786E")
	// })
	// 	.center()
	// 	.animate({
	// 		props:{path:new Squiggle().sca(2).center({add:false})}, 
	// 		time:2000, 
	// 		ease:"linear"
	// 	}).animate({
	// 		props:{size:50}, 
	// 		rewind:true,
	// 		time:1000
	// 	});
	
	// a series returns a function - so colors will be a function
	// every time the function is run, it gets the next thing in the series 
	// and wraps to the first thing again forever!
	var colors = series("#FCEEB5", "#EE786E", "#A2CCB6");

	const path = new Squiggle()
		.sca(2)
		.center({add:false})
		.mov(0,40);

	var pen = new Pen({damp:.8, draggable:false}).center();
	
	new Label({
		text:"ONE\nSTATEMENT", 
		font:"courier", 
		lineHeight:40, 
		align:"center"
	}).center().mov(0,-130).alp(.7);
	
	const again = new Button({
		label:"AGAIN",
		width:180,
		height:180,
		corner:90,
		color:dark,
		rollColor:light,
		backgroundColor:white,
		rollBackgroundColor:dark,
		shadowColor:-1
	}).sca(.5).center().alp(0).mov(0, 140).tap(()=>{
		make();
	});
	
	function make() {
		again.alp(0);
		pen.clear();	
		pen.loc(path.pointControls[0]); // move pen to beginning of path
		pen.immediate(pen.x, pen.y); // go there without drawing to there
		colors(); // cycle colors
		frame.color = colors();
		pen.color = series(colors(), colors());
		pen.animate({ // animate position
			props:{path:path},
			ease:"linear",
			time:2000
		})
		.animate({ // animate size
			props:{size:50},
			rewind:true,
			time:1000,
			call:()=>{
				again.animate({ // animate in the button
					props:{alpha:.8}, 
					time:500,
					wait:500
				});
			}
		});
	}
	make();


	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=Squiggle
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=Button
	// https://zimjs.com/docs.html?item=tap
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=mov
	// https://zimjs.com/docs.html?item=alp
	// https://zimjs.com/docs.html?item=sca
	// https://zimjs.com/docs.html?item=center
	// 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(frame); 

}); // end of ready