// use the default "full" mode - not the "fit" mode many of the codepens use
// full mode makes a full window stage without any automatic scaling 
// the objects then must be manually scaled in the Frame's resize event
const frame = new Frame({color: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 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

	// CODE HERE

	// RESPONSIVE / FLEXIVE - like former Adobe Flex or its successor CSS Flexbox
	// Here we make regions in containers 
	// and then layout the regions with the ZIM Layout() class
	// we then resize() the layout object in the resize event 
	// ZIM handles multiple pages with the Pages() class (not shown)
	// and multiple layouts can be added to a LayoutManager() to resize all at once

	// make left, middle and right containers 
	// Adaptive design can be done by providing alternate page for vertical layout, for instance

	const left = new Container(100, 300).addTo();
	const pad = new Pad(60, 1, 4, [1,2,3,4], green).centerReg(left);
	pad.selectedIndex = 2;

	const middle = new Container(500, 500).addTo();
	const title = new Label({
		text:"ZIM - Responsive Canvas: Layout / Flex",
		color:white
	}).alp(.95).scaleTo(middle, 90).pos(0, 40, CENTER, TOP, middle);
	const button = new Button({backgroundColor:dark, rollBackgroundColor:grey, label:"TOGGLE"})
		.center(middle)
		.tap(()=>{
			layout.toggle();
			stage.update();
		});

	const right = new Container(100, 550).addTo();
	var cp = new ColorPicker({
		colors:[purple, pink, blue, green, orange, red],
		cols:6,
		circles:true,
		backgroundColor:clear
	}).centerReg(right).rot(-90) // negative to match up down arrows on component
	cp.selectedIndex = 4;
	cp.on("change", ()=>{
		layout.regions[1].backgroundColor = cp.selectedColor;
		layout.resize();
	});

	// the Layout() class with its regions - all sorts of options, see the docs 
	// may look similar to CSS but... programming used this format well before CSS was around
	const layout = new Layout(stage, [
		{object:left, backgroundColor:darker},
		{object:middle, backgroundColor:orange},
		{object:right, align:"center", minWidth:20, maxHeight:90}
	], 0, null, false, new Shape()); // container, regions, last margin, backing color, vertical, boundary shape

	// here is the frame resize event (same as window.addEventListener("resize", ()=>{}))
	frame.on("resize", resize);
	function resize() {
		stageW = frame.width;
		stageH = frame.height;
		layout.resize();
	}

	// DOCS FOR ITEMS USED
	// http://zimjs.com/docs.html?item=container
	// http://zimjs.com/docs.html?item=pad
	// http://zimjs.com/docs.html?item=label
	// http://zimjs.com/docs.html?item=button
	// http://zimjs.com/docs.html?item=colorpicker
	// http://zimjs.com/docs.html?item=layout
	// http://zimjs.com/docs.html?item=frame


}); // end of ready