const assets = ["twelve.jpg", {font:"Reuben", src:"Reuben.otf"}];
const path = "https://assets.codepen.io/2104200/";

const frame = new Frame("fit", 1024, 768, red.darken(.2), dark, assets, path);
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
	
	// CODE HERE
	
	// The basic code to do this is about 10 lines and took 20 minutes to make 
	// Here we demonstrate the many options that ZIM has to really get what you want
	// Images are from the Internet and on several sites but none telling who made them - sorry!
	
	// We could use Label("Twelve Days of Christmas Count Down!")
	// but Label does not provide letterSpacing 
	// so we are using LabelLetters which breaks a Label up into individual Labels 
	// These can be controlled with basic html tags as well - we do not do that here 
	// but we do randomly rotate the letters a little and animate them
	// Sound would be nice - and is very easy - but we did not bother

	
	const title = new LabelLetters({
		label:new Label({
			text:"Twelve Days of Christmas Count Down!",
			font:"Reuben",
			color:white
		}),
		letterSpacing:4
	}).pos(0,50,CENTER).noMouse();
	loop(title.labels, label=>{
		// the true means include a negative range as well 
		// we could just use rand(-6,6) but then some letters would not be rotated much 
		// so we wanted at least 3 rotation either negative or positive 
		// We built this option into ZIM rand() because we know we want it at times
		label.rot(rand(3,6,null,true)).animate({
			wait:.5,
			props:{rotation:-label.rotation, scale:1.5},
			time:rand(.2,.4),
			rewind:true
		});
	});
	
	// the picture is all one picture 
	// we could have broken this up in Photoshop but we can also chop pictures in ZIM
	const thumbs = chop(asset("twelve.jpg"), 4, 3, false); // false to get array not Tile
	
	// we are going to add a white border of 20 to the picture
	const size = thumbs[0].width + 20;
	
	// build ZIM Flipper objects to allow the cards to flip
	const cards = [];
	loop(thumbs, (thumb,i)=>{
		let front = new Rectangle(size, size, green.darken(.2))
		new Label({text:i+1, font:"Reuben", size:50, color:green.darken(.7)}).center(front);
		let back = new Rectangle(size, size, lighter);
		thumb.center(back);
		cards.push(new Flipper(front, back).noMouse()); // turn off the cards
	});
	
	// Tile the cards - the true is for unique which will use the array 
	// otherwise the array would be a ZIM VEE value and the Tile would pick randomly from the array and clone
	const tile = new Tile(cards, 4, 3, 40, 40, true).pos(-50,30,CENTER,CENTER);
	
	// create an Indicator for the countdown
	// this normally goes horizontally so we will rotate it
	const indicator = new Indicator({
		width:400, 
		height:70, 
		num:5, 
		foregroundColor:dark, 
		backgroundColor:lighter, 
		backdropColor:clear, 
		indicatorType:"square", 
		fill:true, 
		selectedIndex:4
	}).rot(90).pos(70,0,RIGHT,CENTER);
	
	// Make a function to activate a card
	function turnOn(num) {	
		// get the card from the tile and turn on its interactivity
		let card = tile.items[num].mouse();
		// when we start to flip turn off its interactivity otherwise we could flip back
		card.on("flip", ()=>{card.noMouse();});
		// when it is done flipping emit snowflakes and start the countdown
		card.on("flipped", ()=>{
			// wait to let user concentrate on the card 
			// then start countdown
			timeout(.5, ()=>{
				countEmitter.spurt(20);
				indicator.selectedIndex = -1;
				interval(1, obj=>{
					indicator.selectedIndex = obj.count-1; 
					if (obj.count == obj.total) {
						// when the countdown is done activate the next card
						turnOn(card.tileNum+1);					
					}
				}, indicator.num); // make the interval run this number of times
			}); // end timeout
		}); // end flipped function		
	} // end turnOn function
	
	// turn on the first card
	turnOn(0);
	
	// create an emitter for the snowflakes
	// we will emit the results of the makeFlake function (below)
	const countEmitter = new Emitter({
		obj:makeFlake, // new Poly({min:30, max:50}, [5,9],.6,white), // would be stars
		animation:{
			props:{
				regX:{min:100, max:300}, // make it wobble
				rotation:[{min:600, max:1200}, {min:-600, max:-1200}] // min and max, negative or positive rotation
			}, 
			time:7, // match the life of the flake
			loop:true
		},
		startPaused:true, // pause the emitter to start - we spurt() in the countdown above
		force:{min:1, max:6}, // shoot the flakes out at various forces to spread them out
		gravity:2, // make the gravity less for light snow!
		fade:false,
		life:7,
		angle:{min:180, max:300}, // 0 is to the right along the x axis - this shoots to the left
	}).loc(indicator.lights[0]);
	
	function makeFlake() {
		let flake = new Container();
		let w = rand(20,30);
		let h = rand(70,110);
		loop(3,i=>{new Rectangle(w,h,white).centerReg(flake).rot(i*120);});
		return flake.noMouse().sca(.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=Rectangle
	// https://zimjs.com/docs.html?item=Poly
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=LabelLetters
	// https://zimjs.com/docs.html?item=Indicator
	// 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=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=rot
	// 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=Flipper
	// https://zimjs.com/docs.html?item=Emitter
	// https://zimjs.com/docs.html?item=chop
	// 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=darken
	// https://zimjs.com/docs.html?item=zog

	// FOOTER
	// call remote script to make ZIM icon - you will not need this
	createIcon().sca(.7).mov(-60,-90).bot(); 

}); // end of ready