const frame = new Frame("fit", 1024, 768, black, darker, "abstract.jpg", "https://assets.codepen.io/2104200/");
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
	// 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
	
	// These are the three masks  
	// We set the registration point so we can drag them all from one place 
	const one = new Rectangle(stageW,stageH).reg(0,stageH/2).sca(1,2).addTo(); // extra height
	const two = one.clone().reg(stageW,stageH).addTo();
	const tre = one.clone().reg(stageW,0).addTo();
	
	// Here are the pics where we color two of them with an effect
	// We set their mask to the rectangles and make the mask dynamic (true) as we are dragging the masks
	const picOne = asset("abstract.jpg").center().mov(-80,-50).setMask(one,true)
	const picTwo = picOne.clone().addTo().setMask(two,true).effect(new ColorEffect(.2,.2,1));
	const picTre = picOne.clone().addTo().setMask(tre,true).effect(new ColorEffect(1,.2,.2));
	
	// The grip is the white diamond
	// from a usability standpoint in iframes of CodePen 
	// it is easier to drag the grip to the edge if we add a padding
	const padding = 80;
	const grip = new Rectangle(60,60,white)
		.centerReg()
		.rot(45)
		.sha()
		.drag(new Boundary(padding,padding,stageW-padding*2,stageH-padding*2));
	grip.on("pressmove", setMasks);	
	
	// place the masks at the grip
	function setMasks() {
		one.loc(grip);
		two.loc(grip);
		tre.loc(grip);
	}
	setMasks();
	
	// add a border around the outside - borders are half inside and half outside the rectangle
	// so increase the padding by 2
	new Rectangle(stageW,stageH,null,darker, padding*2).addTo();
	

	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=Rectangle
	// https://zimjs.com/docs.html?item=drag
	// https://zimjs.com/docs.html?item=effect
	// https://zimjs.com/docs.html?item=loc
	// https://zimjs.com/docs.html?item=mov
	// https://zimjs.com/docs.html?item=rot
	// 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=centerReg
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=setMask
	// https://zimjs.com/docs.html?item=ColorEffect
	// https://zimjs.com/docs.html?item=Boundary
	// https://zimjs.com/docs.html?item=zog

	// FOOTER
	// call remote script to make ZIM icon - you will not need this
	createIcon().mov(20,20); 
	createGreet(30,10);
	
}); // end of ready