const frame = new Frame("fit", 1200, 675, light, 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
	const stage = frame.stage;
	const stageW = frame.width;
	const stageH = frame.height;

	// REFERENCES for ZIM at https://zimjs.com
	// see https://zimjs.com/intro.html for an intro example
	// see https://zimjs.com/learn.html for video and code tutorials
	// see https://zimjs.com/docs.html for documentation
	// see https://codepen.io/topic/zim/ for ZIM on CodePen

	// CODE HERE

	// make a container for the rings so we can easily hide and show
	const rings = new Container(stageW, stageH).addTo();

	// Style for Blobs
	STYLE = {
		showControls:false,
		borderColor:series(blue, pink),
		borderWidth:3,
		points:2,
		move:false,
		controlType:"mirror",
		center:rings
	}
	const b1 = new Blob().transformPoints("scale", 2).mov(-350,-30);
	const b2 = new Blob().transformPoints("scale", 2).mov(350,-30);

	// Style for Circles on Blobs
	STYLE = {
		radius:10,
		color:series(blue, pink),
		addTo:rings
	}
	const c1 = new Circle().animate({
		props:{path:b1},
		time:2000,
		ease:"linear",
		loop:true
	});
	const c2 = new Circle().animate({
		props:{path:b2, percent:-100},
		time:5000,
		ease:"linear",
		loop:true
	});

	// Style for Pen
	STYLE = {
		penType:"kitetail",
		draggable:false,
		color:series(pink,blue),
		size:{min:5, max:30},
		delayPick:true,
		damp:false
	}
	const pen = new Pen().loc(halfway())
	pen.paper.noMouse(); // so can click through to blob controls
	pen.immediate(pen.x, pen.y); // otherwise draws there from 0,0
	Ticker.add(() => {pen.loc(halfway());});
	function halfway() {
		// the loc of c1 + half the distance between c1 and c2
		return {x:c1.x+(c2.x-c1.x)/2, y:c1.y+(c2.y-c1.y)/2};
	}


	// BOTTOM CONTROLS
	// this type of thing on other frameworks is often put in datgui
	// zim has the equivilant of datgui as well
	// see the top right of https://codepen.io/zimjs/pen/ydaPer
	// but we prefer seeing our interface - for instance here as well:
	// https://zimjs.com/ornamate.html - quite an old version of ZIM
	// and here is about as advanced as you will get 
	// drawing with generative art: https://codepen.io/danzen/pen/vYEzGNw

	new Rectangle(stageW, 80, moon).pos(0,0,LEFT,BOTTOM);

	// Style for bottom components
	STYLE = {
		corner:5,
		type:{
			Button:{
				backgroundColor:yellow,
				label:"CLEAR",
				borderColor:white,
				borderWidth:3,
				scale:.7,
				shadowColor:-1
			},
			Label:{
				centerReg:{add:false},
				color:grey,
				size:20
			},
			Selector:{
				paddingVertical:10,
				selectedIndex:series(0,1,0)
			},
			Tile:{
				cols:2,
				spacingH:20
			},
			Slider:{
				barLength:100,
				max:5,
				currentValue:1,
				barColor:series(blue, pink),
				borderColor:series(blue, pink),
				borderWidth:3,
				backgroundColor:faint,
				rollBackgroundColor:"rgba(255,255,255,.3)"
			}
		}
	}
	
	// Create components and then add to Tile at bottom

	const clear = new Button().tap(() => {
		pen.clear();
	});

	const show = new Selector(
		new Tile(series(
			new Label("Show"),
			new Label("Hide")
		))
	).change(() => {
		rings.visible = show.currentItem.text=="Show";
		stage.update();
	});

	const type = new Selector(
		new Tile(series(
			new Label("Line"),
			new Label("Kite")
		))
	).change(() => {
		let lookup = {Line:"line", Kite:"kitetail"}
		pen.setPen(lookup[type.currentItem.text]);
	});

	const play = new Selector(
		new Tile(series(
			new Label("Play"),
			new Label("Pause")
		))
	).change(() => {
		pauseAnimate(play.currentItem.text=="Pause");
	});

	const speed1 = new Slider()
	.change(() => {
		c1.rate = speed1.currentValue;
	});
	const speed2 = new Slider()
	.change(() => {
		c2.rate = speed2.currentValue;
	});

	new Tile({
		obj:series(show, speed1, type, clear, play, speed2, new Button().alp(0)),
		cols:7,
		spacingH:45,
		clone:false
	})
		.pos(16, 16, CENTER, BOTTOM);

	new Label("generative art - press and change ovals").pos(20,20).alp(.5);	

	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=Rectangle
	// https://zimjs.com/docs.html?item=Blob
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=Button
	// https://zimjs.com/docs.html?item=Slider
	// https://zimjs.com/docs.html?item=Selector
	// https://zimjs.com/docs.html?item=tap
	// https://zimjs.com/docs.html?item=change
	// https://zimjs.com/docs.html?item=noMouse
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=pauseAnimate
	// https://zimjs.com/docs.html?item=pos
	// https://zimjs.com/docs.html?item=loc
	// https://zimjs.com/docs.html?item=mov
	// https://zimjs.com/docs.html?item=alp
	// https://zimjs.com/docs.html?item=addTo
	// https://zimjs.com/docs.html?item=Tile
	// https://zimjs.com/docs.html?item=transformPoints
	// https://zimjs.com/docs.html?item=zog
	// https://zimjs.com/docs.html?item=STYLE
	// https://zimjs.com/docs.html?item=Ticker

	// FOOTER
	// call remote script to make ZIM icon - you will not need this
	createIcon(null,null,icon=>{icon.mov(0,20)}); 

}); // end of ready