const frame = new Frame("fit", 800, 600, "#EEE", "#555");
frame.on("ready", ()=>{ 
	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

	// CODE HERE

	// make button that we will clone for each page - or user can swipe page
	const goBut = new Button({
		label:"GO", 
		backing:new Triangle(200,200,200,pink).rot(90).reg(null,110),
		rollBacking:new Triangle(200,200,200,blue).rot(90).reg(null,110),
	});

	// Create Pages - just use Containers to hold them
	// for full mode pages, you can use ZIM Layout for responsive design		
	// These can be as complex as you need - with components, windows, interactive works, etc.
	// See the ZIM Badges Art example - http://zimjs.com/badges/art.html

	const page1 = new Container(stageW, stageH);
	page1.name = "PAGE 1"; // optional name to keep track of page later
	new Rectangle(stageW, stageH, green).addTo(page1);
	page1.but = goBut.clone().center(page1);

	const page2 = new Container(stageW, stageH);
	page2.name = "PAGE 2";
	new Rectangle(stageW, stageH, orange).addTo(page2);
	page2.but = goBut.clone().center(page2);

	const page3 = new Container(stageW, stageH);
	page3.name = "PAGE 3";
	new Rectangle(stageW, stageH, yellow).addTo(page3);
	page3.but = goBut.clone().center(page3);

	// make ZIM Pages object 
	const pages = new Pages([
		// imagine pages to the left, right, up and down
		// swipe:["to page on left", "to page on right", etc.]
		// can also dispatch custom event on a direction - here, a "help" event
		{page:page1, swipe:[page3,page2,"help","help"]},
		{page:page2, swipe:[page1,page3,"help","help"]},
		{page:page3, swipe:[page2,page1,"help","help"]}
	],"slide", 500).addTo(); // half second slide when swiped

	// optional - can capture events from swipe array
	const pane = new Pane(600, 200, "HELP");
	pages.on("help", e=>{
		// e.target.page or pages.page is the current page
		pane.text = "HELP FOR " + e.target.page.name;
		pane.label.center();
		pane.show();
	});

	// can put events on each button or control from ZIM Hotspots
	// use the pages.go() method to transition to the desired page
	// often, this can be coded in a loop - although we have hardcoded it here
	// can also specify x,y,width,height of rectangle like an image map in HTML
	const hotSpots = new HotSpots([
		{page:page1, rect:page1.but, call:()=>{pages.go(page2, "right");}},
		{page:page2, rect:page2.but, call:()=>{pages.go(page3, "right");}},
		{page:page3, rect:page3.but, call:()=>{pages.go(page1, "right");}}
	]);

	new Label("ZIM - Pages with Swiping and HotSpots").pos(30,30).alp(.5);


	stage.update(); // this is needed to show any changes

	// DOCS FOR ITEMS USED
	// http://zimjs.com/docs.html?item=pages
	// http://zimjs.com/docs.html?item=hotspots
	// http://zimjs.com/docs.html?item=container
	// http://zimjs.com/docs.html?item=pane
	// http://zimjs.com/docs.html?item=label    
	// http://zimjs.com/docs.html?item=pos
	// http://zimjs.com/docs.html?item=alp
	// http://zimjs.com/docs.html?item=frame

	// FOOTER
	// call remote script to make ZIM icon - you will not need this
	createIcon(); 

}); // end of ready