const frame = new Frame(FIT, 1024, 768, silver, dark, "js.png", "https://assets.codepen.io/2104200/");
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: since ZIM Cat (before ZIM NFT) ZIM 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 Rectangle(600,stageH,light).center();
	const logo = asset("js.png").centerReg().sca(.55).pos(40,30).sha(black.toAlpha(.2),5,5,5);

	// The data for terms and definitions are stored in arrays in a remote js file. 
	// The arrays are named one and two.
	// Make labels out of the list of terms and definitions. 
	// Replace the strings in arrays with label objects.
	STYLE = {padding:11, size:16, backgroundColor:purple, color:white, centerReg:true};
	loop(one, (a, i)=>{
		one[i] = new Label({text:a, align:CENTER, labelWidth:120});
		two[i] = new Label({text:two[i], labelWidth:300});
		one[i].match = two[i];  // remember the match for later
	});
	STYLE = {};

	// make a tile with one column and two rows from array of labels 
	// the true value means use the array to make unique objects 
	// otherwise ZIM would pick randomly from the array (ZIM VEE)
	const oneTile = new Tile(one, 1, one.length, 0, 6, true)
	const twoTile = new Tile(two, 1, two.length, 0, 6, true);

	// make a Scrambler from each tile
	const scrambler1 = new Scrambler(oneTile).pos(280, 0, LEFT, CENTER);
	const scrambler2 = new Scrambler(twoTile).pos(280, 0, RIGHT, CENTER);

	// when we press up on a scrambler, test to see if the answers match
	scrambler1.on("pressup", test);
	scrambler2.on("pressup", test);

	// preparing for the test - we will animate the color of the label background 
	// to either a good or bad color
	goodObj = {props:{color:green}, rewind:true, time:.1, rewindWait:.5, call:done};
	badObj = {props:{color:red}, rewind:true, time:.1, rewindWait:.5, call:done};
	function good(a,b) {
		a.background.animate(copy(goodObj)); // each animate adds things to its animation object
		b.background.animate(copy(goodObj)); // so copy the object to set a unuique object
	}
	function bad(a,b) {
		a.background.animate(copy(badObj));
		b.background.animate(copy(badObj));
	}
	function done(target) {
		target.color = purple; // just to make sure a test does not conflict
	}

	// we might have moved the left or right tile 
	// so do a slightly different test for each one 
	// a Scrambler usually works on its own and has a complete event 
	// but here we are matching two scramblers so we are on our own for a solution... 
	// we will move the selected item over on top of its neighbor 
	// and do a hit test to find if these values are matching based on the arrays    

	function test(e) {
		// when we drop, the item may not be animated to its final resting point yet 
		// so we will delay a little before doing the test
		timeout(.2, () => {
			let a = e.target;
			if (e.currentTarget==scrambler1) testLeft(a);
			else testRight(a);
		});        
	}    

	// move the left item (a) over to the right 
	// and see which of the right hand tile items it is hitting 
	// so loop through all those items and each time get the item (b)
	// and test if a is hitting the reg of b
	function testLeft(a) {
		a.x += 300; // move the object to overlap the object at right
		let wrong = 0; // will return wrong number - used in test
		loop(twoTile, b=>{
			if (b.hitTestReg(a)) { 
				// once we find the two items hitting 
				// then see if they match - the match was stored earlier
				if (a.match == b) good(a,b);
				else {wrong = 1; bad(a,b);}
			}
		});
		a.x -= 300; // move the object back
		return wrong;
	}
	function testRight(a) {
		// same as above but just reversed in direction and arrays
		a.x -= 300;
		loop(oneTile, b=>{
			if (a.hitTestReg(b)) { 
				if (b.match == a) good(a,b);
				else bad(a,b);
			}
		});
		a.x += 300;
	}

	new Button({
		label:"MIX",
		backgroundColor:orange,
		rollBackgroundColor:green,
		corner:0
	}).sca(.6).pos(45,45,LEFT,BOTTOM).tap(() => {
		scrambler1.scramble(1,0,2);
		scrambler2.scramble(1,1,2);            
	});

	const emitter = new Emitter({
		obj:logo,
		interval:.1,
		life:2,
		force:{min:2, max:9},
		angle:{min:-30, max:45},
		animation:{props:{rotation:[{min:1*360, max:4*360, negative:true}]}, time:2, ease:"quadOut"},
		startPaused:true
	}).loc(logo)

	new Button({
		label:"TEST",
		backgroundColor:blue,
		rollBackgroundColor:green,
		corner:0
	}).sca(.6).pos(45,45,RIGHT,BOTTOM).tap(() => {
		let wrong = 0;
		oneTile.loop(obj => {
			wrong += testLeft(obj, 1);
		});
		if (wrong == 0) timeout(.5, () => {
			emitter.spurt(15);
		});
	});

	STYLE = {size:34, lineHeight:44};
	new Pane(stageW+50, 150, "JS DEFINITIONS - drag either side to match\nWould suggest starting at top or bottom", yellow).show();


	// 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=Pane
	// https://zimjs.com/docs.html?item=Scrambler
	// https://zimjs.com/docs.html?item=tap
	// https://zimjs.com/docs.html?item=hitTestReg
	// https://zimjs.com/docs.html?item=animate
	// 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=loc
	// https://zimjs.com/docs.html?item=sca
	// https://zimjs.com/docs.html?item=centerReg
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=Tile
	// https://zimjs.com/docs.html?item=Emitter
	// https://zimjs.com/docs.html?item=timeout
	// https://zimjs.com/docs.html?item=toAlpha
	// https://zimjs.com/docs.html?item=zog
	// https://zimjs.com/docs.html?item=STYLE

	stage.update();

}); // end of ready