const frame = new Frame(FIT, 1024, 768, green.darken(.2), green.darken(.7), "food.jpg", "https://assets.codepen.io/2104200/");
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
	
	// *** NOTE: ZIM Cat defaults to time in seconds
	// All previous versions, examples, videos, etc. have time in milliseconds
	// This can be set back with TIME = "milliseconds" but we suggest you give it a try!
	// There will be a warning in the conslole if your animation is not moving ;-)

	// CODE HERE
	
	// create the page that will be magnified
	const page = new Container(stageW, stageH)
		.addTo()
		.animate({
			from:true,
			props:{y:-700, rotation:-25},
			ease:"backOut",
			time:.45,
			wait:.3,
			call:makeCopy // make a copy once it is positioned (or would have to reset rotation on clone - no big deal)
		});
	new Rectangle(stageW, stageH, frame.color).addTo(page);
	new Rectangle(stageW*.85, stageH*.7, darker).loc(60,60,page).sha(black.toAlpha(.3),10,10,10)
	asset("food.jpg").sca(.4).loc(100,100,page);
	STYLE = {color:lighter, labelWidth:500};
	new Label("MMMM - Lovely Pasta!")
		.loc(420,120,page);
	Style.add({size:22, labelWidth:500});
	new Label("Photo by Shania Pinnata\n\nThis quick and delicious pasta dish is the perfect way to use up a summer bounty of basil and tomatoes!\n\nDon't have a green thumb? Never fear! You can knock out this classic pasta dish in no time with a jar of prepared pesto sauce.")
		.loc(420,180,page);	
	pizzazz.makeIcon("magnify", white)
		.loc(440,425,page)
		// .place() // drag item and see location in console F12
		.expand() // make a clickable box around it with default 20 pixel padding
		.alp(.7)
		.hov(.9)
		.tap(toggleMagnify);
	STYLE = {};
	new Label("press to magnify", 20, null, green).loc(470,410,page).tap(toggleMagnify);
	
	
	// make magnifying glass
	// put registration point on handle and snap drag to registration point
	const mag = new Container()
		.reg(0,300) // center of handle - added this after making mag
		.drag({all:true, reg:true, onTop:false, slide:true});	// slide is optional
	const mask = new Circle(194,white).addTo(mag);
	const glass = new Circle(200,dark,light,4).center(mag);
	const handle = new Rectangle(50,200,new GradientColor([grey,light,dark],[0,.5,1],0,0,50,0),dark,3,[0,0,10,10])
		.pos(0,-190,CENTER,BOTTOM,mag,0)
	mag.center().vis(false); 
	
	// duplicate the content, scale it and set its mask to the mask circle in the mag
	let copy;
	function makeCopy() {
		copy = page
			.clone()
			.sca(2.5)
			.setMask(mask,true)
			.vis(false)
			.noMouse(); // if you want the glass to be clickable - but mag jumps up...
		locateCopy();		
	}
	
	// optionally rotate magnifying glass
	const rotationDamp = new ProportionDamp(0,stageW,-30,30); // baseMin, baseMax, targetMin, targetMax
	rotationDamp.immediate(stageW/2);
		
	// add rotation and positioning of copy as mag is moved
	// with damping, use a Ticker not a pressmove 
	// so object still moves to final location when drag stops moving (and mouse is down)
	// we add the Ticker on pressdown (same as mousedown) and remove it on pressup
	// we remove it by the id that is declared outside so available to both event functions
	let ticker;
	mag.on("pressdown", ()=>{
		ticker = Ticker.add(()=>{
			// optionally rotate
			mag.rotation = rotationDamp.convert(frame.mouseX);
			locateCopy();			
		});		
	});
	mag.on("pressup", ()=>{
		Ticker.remove(ticker);
	});
	
	function locateCopy() {
		// figure out where to put the copy
		// find the center of the glass - at 0,0 inside mag 
		// and where this is on the page
		let pagePoint = mag.localToLocal(0,0,page);
		// place the registration point of the copy to this location
		copy.reg(pagePoint.x, pagePoint.y);
		// set the location of copy at the glass center
		// usually this is easier as it is the registration point of the mag
		// but we have moved the registration point to the handle
		let glassCenter = mag.localToGlobal(0,0);
		copy.loc(glassCenter); 
	}
	
	// using vis() because addTo() and removeFrom() were flashing the masked content	
	function toggleMagnify() {
		if (mag.visible) {
			copy.vis(false);
			mag.vis(false);
		} else {			
			locateCopy();
			mag.vis(true);
			copy.vis(true);
		}
		stage.update();
	}	
	
	// btw ZIM has accessibility too see 
	// https://zimjs.com/docs.html?item=Accessibility

	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=Label
	// https://zimjs.com/docs.html?item=tap
	// https://zimjs.com/docs.html?item=drag
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=sha
	// https://zimjs.com/docs.html?item=pos
	// https://zimjs.com/docs.html?item=loc
	// https://zimjs.com/docs.html?item=alp
	// https://zimjs.com/docs.html?item=hov
	// https://zimjs.com/docs.html?item=reg
	// https://zimjs.com/docs.html?item=sca
	// https://zimjs.com/docs.html?item=addTo
	// https://zimjs.com/docs.html?item=removeFrom
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=place
	// https://zimjs.com/docs.html?item=expand
	// https://zimjs.com/docs.html?item=setMask
	// https://zimjs.com/docs.html?item=GradientColor
	// https://zimjs.com/docs.html?item=ProportionDamp
	// https://zimjs.com/docs.html?item=darken
	// https://zimjs.com/docs.html?item=toAlpha
	// 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();	
	createGreet();
	
}); // end of ready