// used ZIM AssetList https://zimjs.com/assetlist/ to easily make this list:
const assets = ["missions_0.jpg", "missions_1.jpg", "missions_2.jpg", "missions_3.jpg", "missions_4.jpg", "missions_5.jpg", "missions_6.jpg", "missions_7.jpg", "missions_press.jpg", "missions_unscramble.jpg"];
const path = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/2104200/";

const frame = new Frame({color:blue, outerColor:dark, assets:assets, path:path, progress:new Waiter({backgroundColor:dark, corner:0}), retina:false});
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
	
	// this is a promo running on the main ZIM site at https://zimjs.com 
	// or if not there in time... check here https://zimjs.com/marquee.html
	
	new Label("ZIM promo for ********  (top secret)", null, null, white).pos(30,30).alp(.8)

	// when running in Marquee, we do not need to mask it...
	const mask = new Rectangle(350, 110).loc(100,150);
	
	const missions = new Container(350, 110).loc(mask).setMask(mask);
	
	const backing = new Rectangle(missions.width, missions.height).addTo(missions);
	// create array of tiled letters from assets and assign each Bitmap a letter property
	const tiles = [];
	const letters = ["M","I","S","S","I","O","N","S"];
	loop(letters, (letter, i) => {
		var pic = asset("missions_"+i+".jpg"); // note - as of ZIM 10.6.1 we just need asset() not frame.asset()
		pic.letter = letter;
		tiles.push(pic);
	});
	const width = missions.width/8;
	
	// create a random tile
	// The Tile obj parameter accepts a ZIM VEE value - a zim Pick() object or Pick Literal can be passed
	// Pick Literal formats: [1,3,2] - random; {min:10, max:20} - range; series(1,2,3) - order, function(){return result;} - function
	// note, we shuffle the tile bitmaps and add to series so we get only one of each 
	// note, Tile will clone by default - and clone will not clone the custom letter properties 
	// so set clone to false
	const tile = new Tile({
		obj:series(shuffle(tiles)),
		cols:8,
		clone:false // want to keep each letter's custom letter property
	})
		.addTo(missions)
		.drag({
			boundary:new Boundary(0,0,missions.width-width,0),
			localBounds:true // or could start at missions.x and missions.y
		});
	
	// we need to swap letters as we are dragging 
	// this could be potentially hard to do but we came up with a plan!
	let startX = 0;
	tile.on("mousedown", e => {
		startX = e.target.x;
	});
	tile.on("pressmove", e => {
		tile.loop(function (t) {
			var current = e.target;
			// t.paused===false means it is animating
			if (t==current || t.paused===false) return; // continue loop
			// test to see if we are overlapping at least half of the letter next to 
			// the current letter we are dragging - and if so, move the letter over 
			// and set the startX to the letter we just moved - tricky ;-)
			if ((t.x>current.x && t.x<current.x+width/2) || (t.x<current.x && t.x>current.x-width/2)) {
				var temp = t.x;
				t.animate({x:startX},200);
				startX = temp;
			}
		});
	});
	tile.on("pressup", e => {
		e.target.animate({x:startX}, 100);
		// need to find out what letters are from left to right 
		// we find out what object is under a point that we move along in a loop
		// zim loop returns true unless a value is returned from the loop 
		// so if we return false because a letter does not match then the answer will be false 
		// if all letters match then the answer will be true
		let answer = loop(letters, function (letter, i) {
			// CreateJS getObjectUnderPoint is broken with ZIM Retina - so need to divide by stage scale
			var t = tile.getObjectUnderPoint(width*i+width/2, width/2);
			if (t && t.letter != letter) return false;
		});
		if (answer) {
			backing.color = "#333333";
			tile.noDrag();
			tile.removeAllEventListeners();
			bar.animate({x:-400}, 500);
			asset("missions_press.jpg")
				.pos(0,0,LEFT,BOTTOM, missions)
				.animate({
					props:{y:200},
					time:500,
					wait:500,
					from:true
				})
				.tap(function () {
				zgo("https://zimjs.com/missions.html", "_blank");
			});
			stage.update();
		}
	});

	const bar = asset("missions_unscramble.jpg").pos(0,0,LEFT,BOTTOM, missions);

	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=Rectangle
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=Waiter
	// https://zimjs.com/docs.html?item=Tile
	// https://zimjs.com/docs.html?item=tap
	// https://zimjs.com/docs.html?item=drag
	// https://zimjs.com/docs.html?item=noDrag
	// https://zimjs.com/docs.html?item=animate
	// 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=alp
	// https://zimjs.com/docs.html?item=addTo
	// https://zimjs.com/docs.html?item=setMask
	// https://zimjs.com/docs.html?item=Boundary
	// https://zimjs.com/docs.html?item=series
	// https://zimjs.com/docs.html?item=Pick
	// https://zimjs.com/docs.html?item=zog
	// https://zimjs.com/docs.html?item=zgo

	// FOOTER
	// call remote script to make ZIM Foundation for Creative Coding icon
	createIcon(30,30,icon=>{
		frame.on("resize", ()=>{
			icon.pos(30,30,RIGHT,BOTTOM);
		});
	}); 

}); // end of ready