const scaling = "fit";
const width = 1024;
const height = 768;
const color = darker;
const outerColor = dark;
const assets = ["good.mp3", "b06.mp3", "bounce.mp3", "zap.mp3"];
const path = "https://assets.codepen.io/2104200/";
const waiter =  new Waiter({backgroundColor:purple});

const frame = new Frame(scaling, width, height, color, outerColor, assets, path, waiter);
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
	
	new Label("ZIM Button with wait state, emitter, animate and sounds", 32, null, silver).pos(0,60,CENTER);
	
	// the settings could be brought out into STYLE if we had more similar buttons
	// as far as we know ZIM is the only canvas framework with STYLE
	// see https://zimjs.com/docs.html?item=STYLE	
	const button = new Button({
		width:300,
		height:120,
		corner:10,
		label:"DROP",
		wait:"CONFIRM?", // will change message and wait for a time
		waitTime:2,
		backgroundColor:purple,
		rollBackgroundColor:blue,
		waitBackgroundColor:red,
		rollWaitBackgroundColor:red,
	}).center();
	
	const emitter = new Emitter({
		obj:new Line(button.width, 5, grey),
		angle:-90,
		gravity:0,
		force:4,
		shrink:false,
		interval:.02,
		number:3,
		startPaused:true // start emitter paused and spurt() when desired
	}).center().mov(0,-60);

	button.on("mousedown", ()=>{		
		asset("b06.mp3").play({volume:.7});
		if (button.waiting) { // if waiting then confirm is being pressed
			button.enabled = false; // turn off the button			
			button.clearWait(); // set it back out of wait state
			timeout(.2, ()=>{				
				asset("good.mp3").play();
				timeout(.8,()=>{
					asset("bounce.mp3").play();
				})
				button.backgroundColor = tin;
			});
			button.animate({
				wait:.5,
				props:{y:"300"}, // relative distance with quotes
				time:1.5,
				ease:"bounceOut",
				rewind:true,
				rewindEase:"backOut", // change the rewind properties
				rewindTime:.4,
				rewindWait:1.5,
				events:true, // turn on animation event used below to position emitter
				waitedCall:()=>{
					emitter.spurt(26); // start emitter after waiting - 26 objects
				},
				rewindCall:()=>{
					asset("zap.mp3").play(); // play sound on rewind
				},
				call:()=>{
					button.enabled = true;
					button.backgroundColor = purple; // reset the button when animation done
				}
			});
		} 
	});
	button.on("waited", ()=>{
		asset("zap.mp3").play(); // if waited when by without second mousedown
	});
	button.on("animation", ()=>{
		emitter.y = button.y; // make emitter follow button
	});

	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=Line
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=Button
	// https://zimjs.com/docs.html?item=Waiter
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=pos
	// https://zimjs.com/docs.html?item=mov
	// 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

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

}); // end of ready