var scaling = "fit"; // this will resize to fit inside the screen dimensions
var width = 1024;
var height = 768;
var color = clear; // blue.lighten(.65);
var outerColor = color;
var assets = {font:"Reuben", src:"https://assets.codepen.io/2104200/Reuben.otf"};
var path = "assets/"

// as of ZIM 5.5.0 you do not need to put zim before ZIM functions and classes
var frame = new Frame(scaling, width, height, color, outerColor, assets, path);
frame.on("ready", function() {
	zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

	var stage = frame.stage;
	var stageW = frame.width;
	var stageH = frame.height;

	// could use ES6 classes, I just prefer ES5
	// also will be using this on kids site without Babel
	// so just leaving it ES5

	var Drone = function(color, borderColor, borderWidth, visorColor, number, words, mix) {
		if (color==null) color = black;
		if (borderColor==null) borderColor = black;
		if (borderWidth==null) borderWidth = 2;
		if (number==null) number = rand(99);
		if (visorColor==null) visorColor = yellow;
		if (words==null) words = [
			"Hello I am D"+number,
			"Will this wind be so mighty ?",
			"My belly is a button !",			
			"Am I droning on ?",
			"Press me all over !",
			"Thanks Gabbi for the CodePen Love !",
			"I levitate !",			
			"Do you like my gravity rings ?",
			"Have you seen a rolling droid ?",
			"1 2 3 Beep Bop Boop",
			"Are you getting my signals ?"
		];
		if (mix) shuffle(words);
		words = series(words);

		this.super_constructor(-100, -100, 200, 200); // registration and origin in middle
		var that = this; // to access object within functions

		// a series will return the next item each time it is called
		var droneColors = series(green, pink, orange, yellow, blue, purple, white, grey, black);

		// we make all the sounds using the ZIM Synth
		var synth = new Synth();


		// There will be three sections to the code
		// the parts, the functions they call when tapped
		// and the methods that are available outside the drone
		// often the functions call the methods too

		// ~~~~~~~~~~~~~~~~~~~~~~~~~
		// DRONE PARTS

		// store the parts on the object so they are available outside as properties
		// but also store in a local variable for ease of use

		var body = this.body = new Circle(100, color, borderColor, borderWidth)
		.center(this) // remember to center on object (would be stage if no argument passed)
		.tap(doBody); // only outer edge of body as visor is also interactive

		var antenna = this.antenna = new Line({
			length: 60,
			thickness: Math.max(2, borderWidth+1), // make fatter if border is fatter
			endHead: "circle",
			color:borderColor?borderColor:black // same as border color if there is one else black
		})
		.expand(2,10) // for better tap - 2 at ends, 10 out along length
		.rot(-90)
		.pos(0, -60, CENTER, TOP, this)
		.tap(doSignal);

		var jet1 = new Circle({
			radius: 35,
			percent: 80,
			color: color,
			borderColor: borderColor,
			borderWidth: borderWidth
		})
		.sca(1, 1.2) // make circle an oval
		.loc(-100, 55, this) // remember, origin is at center
		.bot() // under body
		.tap(doJet)

		var jet2 = new Circle({
			radius: 35,
			percent: 80,
			color: color,
			borderColor: borderColor,
			borderWidth: borderWidth
		})
		.sca(1, 1.2)
		.loc(100, 55, this)
		.bot()
		.tap(doJet);

		var visor = this.visor = new Circle(80, visorColor.darken(.8), visorColor, 2)
		.center(this)
		.tap(doVisor);

		var mouth = new Circle({
			radius:visor.radius-10,
			color:convertColor(visorColor, "rgba", .2),
			borderColor:convertColor(visorColor, "rgba", .5),
			percent:35
		})
		.rot(180)
		.center(that)
		.mov(0,50)
		.tap(doWords);


		// ~~~~~~~~~~~~~~~~~~~~~~~~~
		// EVENT FUNCTIONS

		function doBody() {
			// set the color to the next color in the droneColors series
			that.setColor(droneColors());
		}


		// make the signal if not made
		// otherwise toggle the signal based on signalCheck
		// the signal notes are called by an interval
		// so need to pause and unpause the interval
		var signalTone;
		var signalInterval;
		var signalCheck = false;
		function doSignal() {
			signalCheck = !signalCheck;
			if (signalCheck) {
				if (!signalTone) {
					signalTone = synth.tone({
						volume: .1,
						shape: SINE,
						vibratoAmount: 10,
						vibratoRate: 12,
						vibratoShape: SINE,
					})
					notes = series(
						"C2", "C3", "C2", "C4",
						"C2", "C3", "C2", "C4",
						"C2", "C3", "D2", "C4",
						"C2", "C3", "C2", "C4",
					);
					signalInterval = interval(.8, function() { // ZIM Cat interval is in seconds, not millisecods
						var note = notes(); // get the next note in the notes series
						signalTone.note = note;
						if (note == "C4") that.signal(series(orange, blue, green, pink), 1, 15);
					}, null, true); // true is start interval right away
				} else {
					signalTone.ramp(.1); // use ramp to adjust volume (use volume if animating)
					signalInterval.pause(false);
				}
			} else {
				signalTone.ramp(0);
				signalInterval.pause();
			}
		}


		function doJet(e) {
			var jet = e.currentTarget;
			var inBounds = true; // do not let drone go off stage
			if (jet==jet1) inBounds = that.x < stageW-that.width*1.5;
			else inBounds = that.x > that.width*1.5;
			if (!that.mouseEnabled || !inBounds) return;
			that.noMouse(); // do not let drone be interacted with when busy
			stopAnimate("hover");

			var t = synth.tone({
				note: "C1",
				volume: .6,
				shape: SQUARE,
				wahAmount: 4000,
				wahThroat: 15,
				wahShape: jet==jet1?ZAP:SAW, // different sounds different directions
				wahRate: .7,
				duration: 1.3
			});
			that.startWave(t, .2, -10); // visualizer on visor

			that.animate({
				props: {x: jet==jet1?"100":"-100"},
				wait: .2,
				time: 1.5,
				ease: "backOut"
			})
				.animate({
				wait: .2,
				props: {y: "50"},
				time: .75,
				rewind: true,
				call: function() {
					that.mouse();
					that.hover();
				}
			});
			jet.animate({
				props: {rotation: jet==jet1?30:-30},
				time: .2,
				rewindTime: 1.3,
				rewind: true
			})
		};

		var jet1Emitter = new Emitter({
			obj: new Circle(22, clear, "rgba(0,0,0,.2)"),
			force: 0,
			interval: .05
		}).loc(jet1, null, jet1).bot();

		var jet2Emitter = new Emitter({
			obj: new Circle(22, clear, "rgba(0,0,0,.2)"),
			force: 0,
			interval: .05
		}).loc(jet2, null, jet2).bot();



		function doVisor() {
			that.noMouse();
			stopAnimate("hover");
			var t = synth.tone({
				note: "C2",
				volume: 1,
				shape: SQUARE,
				wahAmount: 3000,
				wahThroat: 5,
				wahShape: ZAP,
				wahRate: .5,
				duration: 2
			});
			that.animate({scale:0}, 2, "backIn");
			that.startWave(t, .09, 0);

			timeout(3, function() {
				that.sca(1)
					.loc(stageW/2, stageH + 200)
					.animate({
					set: {x: stageW/2},
					props: {y: stageH/2},
					time: 3,
					ease: "elasticOut",
					call: function () {
						that.hover();
					}
				});

				var t = new Synth().tone({
					note: "C1",
					shape: SINE,
					volume: .3
				})
				.animate({
					props: {note: "A4"},
					time: 3,
					ease: "elasticOut",
					call: function(tone) {
						tone.stop();
						that.mouse();
					}
				})
				.animate({
					props: {volume: 0},
					wait: 1.5,
					time: 1
				});

				that.startWave(t, .05, -30);
			});
		}

		function doWords() {
			that.sayWords();
		}


		// ~~~~~~~~~~~~~~~~~~~~~~~~~
		// METHODS


		this.signal = function(color, time, scale) {
			if (!that.mouseEnabled) return;
			if (zot(color)) color = red;
			if (zot(time)) time = 1;
			var emitter = new Emitter({
				obj: new Circle({
					radius: 10,
					borderColor: color,
					borderWidth: 3,
					strokeObj: {ignoreScale: true}
				}),
				gravity: 0,
				force: 0,
				interval: .1,
				shrink: false,
				animation: {
					ease: "linear",
					props: {scale: scale},
					time: 1
				},
				startPaused: true
			})
			.spurt(null, time)
			.loc(antenna.endHead, null, this);

			emitter.on("spurtdecayed", function() {
				emitter.dispose();
			});
		}

		// make visualizer on visor
		var soundWave;
		var bars;
		this.startWave = function(tone, range, shift) {
			// SoundWave now has a setInput() method
			// so we could create one SoundWave and use setInput()
			// for each sound to play
			// but we added that after coding this so have just left it
			if (soundWave) { // clear old soundWave if there is one
				soundWave.dispose();
				bars.dispose();
			}
			soundWave = new SoundWave(30, tone, range);
			soundWave.on("ready", function() {
				bars = new Container(visor.width, visor.height)
					.centerReg(visor)
					.mov(shift)
					.setMask(visor)
					.alp(.7)
				var width = bars.width;
				var gap = 1;
				// we can use soundWave.num to tell us how many bars to make
				loop(soundWave.num, function(i, total) {
					// make each bar
					var bar = new Rectangle(width / total - gap, 100, visorColor);
					// move the bar over a little each time and set the registration point to the bottom
					bar.addTo(bars).mov(i * width / total, bars.height / 2).reg(0, 50);
				})
				Ticker.add(function() {
					var data = soundWave.calculate();
					// loop throught the bars and set the height of the bar to the associated soundWave data
					// we multiply by 2 to magnify the data a little
					loop(bars, function(bar, i) {
						bar.heightOnly = data[i];
					});
				});
			});
		}

		this.sayWords = function (sentence) {
			if (sentence==null) sentence = words(); // get next sentence
			that.noMouse();

			var all = sentence.split(" "); // make each sentence into array of words

			var currentNum = 0;
			var totalNum = all.length;
			if (totalNum <= 0) return;
			say(all[0]);

			var labelLetters;
			function say(word) {

				if (labelLetters) labelLetters.removeFrom();

				labelLetters = new LabelLetters({
					label:new Label({
						text:word,
						size:30,
						font:"Reuben",
						color:green,
						align:CENTER
					}),
					letterSpacing:0
				})
					.center(that);

				interval(.2, function () {
					// from https://killedbyapixel.github.io/ZzFX/
					new Synth().play(...[.2,,1280,.03,,.06,3,.17,-75,-37,1,.03,,,,[.1,.2,.3,.4],.01,.44]);
				}, labelLetters.numLetters, true);

				animate({
					target:labelLetters.labels,
					props:{regY:"10"},
					rewind:true,
					time:.15,
					sequence:.2,
					call:function () {
						if (currentNum < totalNum-1) {
							timeout(Math.max(.5, labelLetters.numLetters*.2), function(){say(all[++currentNum]);});
						} else {
							labelLetters.animate({props:{alpha:0}, wait:.5})
							that.animate({
								props:{rotation:"360"},
								time:1.5,
								ease:"backInOut",
								call:function () {
									that.mouse();
									labelLetters.removeFrom();
								}
							});

							var t = new Synth().tone({
								note: "C3",
								shape: SQUARE,
								volume: .05
							})
							.animate({
								props: {note: "A6"},
								time: 1.5,
								ease: "backInOut",
								call: function(tone) {
									tone.stop();
									that.mouse();
								}
							})
							.animate({
								props: {volume: 0},
								wait: 1,
								time: .5
							});
						}
					}
				})
				stage.update();
			} // end say()
		}

		this.setColor = function(c) {
			// from https://killedbyapixel.github.io/ZzFX/
			var t = new Synth().play(...[.2,,69,.23,.09,.94,,1.37,,,347,.08,.08,.2,,,,.53]);
			that.startWave(t, .15, 0);
			jet1.animate({color:c}, .2);
			body.animate({props:{color:c}, time:.2, wait:.3});
			jet2.animate({props:{color:c}, time:.2, wait:.6});
			stage.update();
		}


		this.hover = function(amount, speed, direction) {
			if (zot(amount)) amount = 10;
			if (zot(speed)) speed = 3;
			if (zot(direction)) direction = "both";
			if (direction.toLowerCase() == "both" || direction.toLowerCase() == "horizontal") {
				that.wiggle({
					property:"x",
					baseAmount:that.x,
					minAmount:amount/2,
					maxAmount:amount,
					minTime:speed/2,
					maxTime:speed,
					id:"hover"
				});
			}
			if (direction.toLowerCase() == "both" || direction.toLowerCase() == "vertical") {
				that.wiggle({
					property:"y",
					baseAmount:that.y,
					minAmount:amount/2,
					maxAmount:amount,
					minTime:speed/2,
					maxTime:speed,
					id:"hover"
				});
			}
		}

		// wait for drone to be placed
		timeout(.2, function () {
			that.hover();
		});


	}
	extend(Drone, Container);


	// color, borderColor, borderWidth, visorColor, number, words, mix
	const drone = new Drone(black, black, 2, yellow).center();

	new Label("INTERACTIVE DRONE", 50, "Reuben", dark).pos(0,80,CENTER).animate({
		wait:.7,
		from:true,
		props:{x:-600},
		time:.7,
		ease:"backOut",
		call:function(target) {
			target.animate({
				wait:1,
				ease:"backIn",
				props:{x:stageW+100},
				time:.6
			})
		}
	});
	

	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=Container
	// https://zimjs.com/docs.html?item=Circle
	// https://zimjs.com/docs.html?item=Rectangle
	// https://zimjs.com/docs.html?item=Line
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=LabelLetters
	// https://zimjs.com/docs.html?item=tap
	// https://zimjs.com/docs.html?item=mouse
	// https://zimjs.com/docs.html?item=noMouse
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=stopAnimate
	// https://zimjs.com/docs.html?item=wiggle
	// https://zimjs.com/docs.html?item=loop
	// 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=bot
	// https://zimjs.com/docs.html?item=alp
	// 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=removeFrom
	// https://zimjs.com/docs.html?item=centerReg
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=expand
	// https://zimjs.com/docs.html?item=setMask
	// https://zimjs.com/docs.html?item=Emitter
	// https://zimjs.com/docs.html?item=SoundWave
	// https://zimjs.com/docs.html?item=Synth
	// https://zimjs.com/docs.html?item=shuffle
	// https://zimjs.com/docs.html?item=rand
	// https://zimjs.com/docs.html?item=timeout
	// https://zimjs.com/docs.html?item=interval
	// https://zimjs.com/docs.html?item=series
	// https://zimjs.com/docs.html?item=darken
	// https://zimjs.com/docs.html?item=lighten
	// 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();
	createNFT("https://hic.link/237433", "rgba(255,255,255,.4)").sca(.8).pos(100,100,LEFT,BOTTOM);
	

}); // end of ready