const frame = new Frame("fit", 1024, 768, "#EEE", "#555");
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
	
	const rect = new Rectangle(400, 400, purple)
		.reg(200,400) // put registration point at middle bottom
		.center()
		.animate({
			props:{scaleY:.03}, // animate to small (at 0 emitter shows underneath)
			wait:.5,
			time:4,
			ease:"quadIn",
			call:()=>{
				emitter.pauseEmitter(true); 
				rect.removeFrom();
				new Label("DISAPPEAR!", 40, null, purple).center().mov(0,200).alp(0).animate({
					props:{alpha:1},
					rewind:true,
					rewindWait:2				
				});
			}
		});
	const emitter = new Emitter({
		obj:new Rectangle(5,5,purple),
		gravity:0,
		force:{min:.5,max:1},
		angle:{min:-90-20, max:-90+20}, // 0 is to the right		
		random:{scale:{min:2,max:4}},
		width:rect.width-15, // make a little smaller as particles are centerReg
		height:0, // so when we loc it is right on top of rectangle
		interval:.01,
		num:10,
		horizontal:true, // instead of emitting from a point, emit across the width
		startPaused:true
	}).loc(rect).mov(0,-400+10);
		
	// wait a touch to start the emitter 
	// use a Ticker to constantly locate it at the top of the rectangle
	timeout(.7, ()=>{
		emitter.pauseEmitter(false);
		Ticker.add(()=>{
			emitter.y = rect.y-rect.height+10;
		});
	});

	// stage.update(); // this is needed to show any changes -- not needed with animate

	// DOCS FOR ITEMS USED
	// https://zimjs.com/docs.html?item=Frame
	// https://zimjs.com/docs.html?item=Rectangle
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=animate
	// 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=reg
	// https://zimjs.com/docs.html?item=removeFrom
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=Emitter
	// https://zimjs.com/docs.html?item=timeout
	// https://zimjs.com/docs.html?item=zog
	// 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