const frame = new Frame("fit", 1024, 768, white, dark);
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
	let stage = frame.stage;
	let stageW = frame.width;
	let stageH = frame.height;

	// REFERENCES for ZIM at http://zimjs.com
	// see http://zimjs.com/learn.html for video and code tutorials
	// see http://zimjs.com/docs.html for documentation
	// see https://www.youtube.com/watch?v=pUjHFptXspM for INTRO to ZIM
	// see https://www.youtube.com/watch?v=v7OT0YrDWiY for INTRO to CODE

	// CODE HERE

	// to make blendMode work there needs to be something on the canvas
	const background = new Rectangle(stageW, stageH, frame.color).addTo();

	const title = new Label({
		text:"Baby, you can TUNE my car!",
		backgroundColor:yellow,
		size:40,
		padding:60,
		font:"impact"
	}).centerReg().alp(.9).ske(7).rot(-5).sha("rgba(0,0,0,.2)",5,5,10).mov(0,-50).animate({
		props:{scale:.2, alpha:0},
		from:true,
		time:500,
		ease:"backOut"
	});
	
	const button = new Button({
			label:"LOADING",
			corner:5,
			backgroundColor:blue,
			rollBackgroundColor:purple
		}).centerReg().ske(7).rot(-5).mov(0,30).animate({
			props:{scale:.2, alpha:0},
			from:true,
			time:400,
			wait:500,
			ease:"backOut"
		})
	
	const bar1 = new Rectangle(stageW, 55, yellow).addTo();
	const bar2 = new Rectangle(stageW, 55, yellow).pos(0,-1,false,true);

	// we load assets after title is shown
	// then once assets are ready we show the GO button
	var assets = ["car.jpg", "car.mp3", "car2.mp3", "roar.mp3", "roar2.mp3", "icon.png"];
	var path = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2104200/";
	frame.loadAssets(assets, path, null, null, 1500); // at least 1 second to see logo
	frame.on("complete", init);

	function init() {
		button.text = "GO!";
      stage.update();
		button.tap(e=>{
			e.target.animate({props:{scale:0}, time:300});
			title.animate({props:{scale:0}, wait:200, time:300, call:()=>{

				// the car will rotatate shake and hop up and down
				// this will be done with wiggle 
				// but we want to control how much based on volume
				// that is controled by the Dials
				// So these values go up and down in the Dial events
				let minR = .2; let maxR = 1;
				let minY = 2;  let maxY = 5;

				const car = frame.asset("car.jpg").centerReg().mov(0,70)
					.animate({props:{x:stageW+500}, time:600, from:true})
					.wiggle("rotation",0,()=>minR,()=>maxR,100,300)
					.wiggle("y",stageH/2+70,()=>minY,()=>maxY,100,200);

				const masterVolumes = [.5,.5,.9,.9];
				const masterPans = [-.5,.5,-.9,.9];
				const sounds = [
					frame.asset("car.mp3").play({volume:.5, loop:true, pan:-.5}),
					frame.asset("car2.mp3").play({volume:.5, loop:true, pan:.5}),
					frame.asset("roar.mp3").play({volume:.9, loop:true, pan:-.9}),
					frame.asset("roar2.mp3").play({volume:.9, loop:true, pan:.9})
				]
				STYLE = {
					type:{
						Dial:{
							min:0,
							max:2,
							step:.1
						},
						Slider:{
							min:-1,
							max:1,
							barLength:70,
							barWidth:14,
							inside:true,
							width:12,
							height:12,
							corner:6,
							borderWidth:0,
							shadowBlur:-1
						}
					}
				}
				const dials = new Tile(new Dial(), 4, 1, 70)
					.center()
					.pos(null,100)
					.animate({
						wait:250,
						props:{rotation:-360*10, x:-stageW/2},
						time:600,
						from:true,
						sequence:150,
						sequenceReverse:true
					});
					dials.loop((dial,i)=>{
						dial.currentValue = masterVolumes[i];
						dial.change(e=>{
							sounds[i].volume = masterVolumes[i]*e.target.currentValue;
							let totalVol = totalVolume();
							minR = totalVol*.025;
							maxR = totalVol*.05;
							minY = totalVol*.5;
							maxY = totalVol*2;							
						});
					});

				function totalVolume() {
					let v = 0;
					dials.loop(dial=>{v+=dial.currentValue;});
					return v+.05; // wiggle seems to stop if 0 max is set
				}

				const sliders = new Tile(new Slider(), 4, 1, 100)
					.center()
					.pos(null,222)
					.animate({
						wait:1000,
						props:{alpha:0},
						time:300,
						from:true,
						sequence:70
					});
					sliders.loop((slider,i)=>{
						slider.currentValue = masterPans[i];
						slider.change(e=>{sounds[i].pan = e.target.currentValue;});
					});

				// animated strips
				new Rectangle(300, stageH*2, red).ske(30).centerReg().wiggle("x",stageW*3/4,100,stageW/2,2000,5000).blendMode = "overlay";
				new Rectangle(300, stageH*2, green).ske(30).centerReg().wiggle("x",stageW/2,100,stageW/2,2000,5000).blendMode = "overlay";
				new Rectangle(300, stageH*2, blue).ske(30).centerReg().wiggle("x",stageW/4,100,stageW/2,2000,5000).blendMode = "overlay";

				bar1.top();
				bar2.top();

				// scroll poetry text along bottom 
				let text = "\
Vrooom vroom - Dr. Abstract in the Jag-a-jaga-joo Anotonio Caggiano doodly drew \
purring in purple and blue waving to you with wonders of ZIM and medallion of gold \
the symbol of Nodism through which creativity frameworks flow and zany concepts grow \
at bubbling rates that in the past were not so fast such is the zip zap whizzz \
the wise wiz you'll be when you use ZIM to create Doeos and Digidoeos for free!";

				timeout(8000, ()=>{
					const scroller = new Scroller({
						backing:new Label({
							text:text,
							color:orange,
							size:30
						}).cache().alp(.8).pos(30, 12, null, true),
						speed:0,
						gapFix:-15
					});
					timeout(3000, ()=>{
						scroller.speed = 2;
					});
				});

				// handle top bar items
				new Label({
					text:"Baby, you can tune my car!",
					font:"impact",
					color:white,
					size:25
				}).pos(22,22).alp(.85).animate({
					props:{x:-200},
					from:true,
					time:400,
					ease:"backOut"
				});

				frame.asset("icon.png").sca(.35).ske(-90).reg(0,112).pos(20,8+112*.35,true).alp(.75).hov(.9).tap(() => {
					zgo("https://zimjs.com", "_blank")
				}).animate({
					wait:1700,
					props:{skewX:1},
					time:300,
					ease:"backOut"
				});

			}}); // end animate title out

		}); // end tap

	} // end init

	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=Label
	// https://zimjs.com/docs.html?item=Button
	// https://zimjs.com/docs.html?item=Slider
	// https://zimjs.com/docs.html?item=Dial
	// https://zimjs.com/docs.html?item=Tile
	// https://zimjs.com/docs.html?item=tap
	// https://zimjs.com/docs.html?item=change
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=wiggle
	// https://zimjs.com/docs.html?item=loop
	// https://zimjs.com/docs.html?item=sha
	// https://zimjs.com/docs.html?item=pos
	// https://zimjs.com/docs.html?item=mov
	// https://zimjs.com/docs.html?item=top
	// https://zimjs.com/docs.html?item=alp
	// https://zimjs.com/docs.html?item=hov
	// https://zimjs.com/docs.html?item=rot
	// https://zimjs.com/docs.html?item=ske
	// 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=Scroller
	// https://zimjs.com/docs.html?item=timeout
	// https://zimjs.com/docs.html?item=zog
	// https://zimjs.com/docs.html?item=zgo
	// https://zimjs.com/docs.html?item=STYLE
  

}); // end of ready