const scaling = "fit"; 
const width = 1024;
const height = 768;
const color = darker;
const outerColor = dark.darken(.5);

const frame = new Frame(scaling, width, height, color, outerColor);
frame.on("ready", function() {
	zog("ready from ZIM Frame");

	const stage = frame.stage;
	const stageW = frame.width;
	const stageH = frame.height;
	
	// put all in holder so we can drag it around and wiggle it
	const holder = new Container(stageW, stageH)
		// ZIM has chaining - one method after another
		.addTo()
		.reg(156, 364, true)
		// ZIM DUO - two ways to do parameters - normal or with configuration object:
		.drag({
			all:true, // so individual parts do not get dragged
			removeTweens:false, // keep wiggle active
			slide:true, // slide when thrown and snap back into bounds
			slideDamp:.1,
			boundary:new Boundary(150,150,500,400) // keep registration in x,y,width,height
		})        
		.wiggle("rotation", -5, 2, 8, .5, 1) // prop, start, min, max, minTime, maxTime
		.pauseAnimate(); // start paused
	
	// do not chain the on() method as it does not return the object
	holder.on("mousedown", () => {
		holder.pauseAnimate(false); // wiggle when dragged
	});
	holder.on("pressup", () => { // note pressup not mouseup
		holder.pauseAnimate(true); 
	});

	// turn off beam for dragging with noMouse()
	const beam = new Line(stageW+100, 30, new GradientColor([pink,purple],[0,1],0,0,400,0)).loc(400, 330, holder).noMouse();

	// ZIM VEE - dynamic parameters 
	// [pick randomly]
	// {min, max}
	// series(order) - not used in this app
	// function(){return} - not used in this app
	new Emitter({
		obj:new Rectangle(50,50,[purple, purple.darken(.1), purple.lighten(.1)], pink).alp(.5),
		angle:{min:-1, max:1},
		force:10,
		animation:{props:{rotation:["360","-360"]}, time:{min:.2, max:.5}, loop:true},
		random:{
			rotation:{min:-40,max:40},
			scale:{min:.7,max:1.2}
		},
		gravity:0,
		shrink:false,
		life:1.5, // default 1 ends before it leaves the stage when blaster is at far left
		fade:false
	}).loc(beam, null, holder).mov(-100).noMouse();


	const barrel = new Rectangle(350,100,pink.darken(.5).toColor(dark,.5),null,null,[0,0,0,10])
		.pos(80,-50,LEFT,CENTER,holder)
		.ske(20);
	const shell = barrel
		.clone()
		.mov(-1,-1)
		.siz(352,102)
		.addTo(holder);
	// make faded transparent gradient to see glow through
	shell.color = new GradientColor([dark,dark.toAlpha(.5)],[.7,1],0,50,350,0),null,null,[0,0,0,10];
	
	// animate the glow of the barrel underneath
	barrel.setColorRange(pink, purple).wiggle("colorRange", .5, .2, .5, .02, .2);
	// make a handle
	new Rectangle(80, 150, dark, null, null, [0,0,60,0])
		.pos(110,80,LEFT,CENTER,holder)
		.ske(20)
		.animate({
			props:{color:green},
			wait:2,
			time:.4,
			loopCount:2,
			rewind:true
		});
	
	// reveal once emitter has some time to emit particles
	new Rectangle(stageW,stageH,frame.color).addTo().animate({
		wait:.5,
		props:{x:stageW},
		time:.5,
		ease:"quadIn"
	});

	// stage.update(); // this is needed to show any changes - not needed when animating
	
	// DOCS FOR ITEMS USED
	// https://zimjs.com/docs.html?item=Frame
	// https://zimjs.com/docs.html?item=Container
	// https://zimjs.com/docs.html?item=Rectangle
	// https://zimjs.com/docs.html?item=Line
	// https://zimjs.com/docs.html?item=drag
	// https://zimjs.com/docs.html?item=noMouse
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=pauseAnimate
	// https://zimjs.com/docs.html?item=wiggle
	// https://zimjs.com/docs.html?item=pos
	// 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=siz
	// https://zimjs.com/docs.html?item=ske
	// https://zimjs.com/docs.html?item=reg
	// https://zimjs.com/docs.html?item=addTo
	// https://zimjs.com/docs.html?item=Emitter
	// https://zimjs.com/docs.html?item=Boundary
	// https://zimjs.com/docs.html?item=GradientColor
	// https://zimjs.com/docs.html?item=series
	// https://zimjs.com/docs.html?item=lighten
	// https://zimjs.com/docs.html?item=darken
	// https://zimjs.com/docs.html?item=toColor
	// https://zimjs.com/docs.html?item=toAlpha
	// https://zimjs.com/docs.html?item=zog

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

}); // end of ready