const frame = new Frame(FIT, 1024, 768, dark, "#555");
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
	
	// read in HTML data
	const data = zid("data").childNodes;
	const holidays = [];
	loop(data[5].children, li=>{
		holidays.push(li.innerText)
	});
	
	STYLE = {
		color:yellow,
		backgroundColor:purple,
		padding:20
	}
	new Label(data[1].innerText+" - "+data[3].innerText)
		.scaleTo(stage,100)
		.pos(); // positions left and top edge at 0,0 by default
		// loc() would position registration point at 0,0 
		// and registration point is at text top left not background top left
	
	STYLE = {
		align:LEFT,
		viewNum:8.5
	}
	const list = new List(500,500,holidays).center().mov(-200)
	loop(list.items, item=>{
		item.circle = new Circle(20,light)
			.pos(50,0,RIGHT,CENTER,item)
	});
	
	STYLE = {
		titleBar:"Select Date + Add Emoji", 
		draggable:false, 
		close:false, 
		collapse:false
	}
	// note can customize emoji list and add more 
	// see https://zimjs.com/docs.html?item=EmojiPicker
	const emojis = new EmojiPicker({width:310, height:500, cache:true})
		.center()
		.mov(250)
		.change(()=>{
			let circle = list.selected.circle;
			if (circle.emoji) circle.emoji.dispose();
			circle.emoji = emojis.currentEmoji
				.clone()
				.scaleTo(circle,80,80)
				.center(circle);
		});
	
	const clear = new Button({
		width:230,
		height:80,
		label:"CLEAR",
		wait:"CONFIRM",
		waitTime:1.5,
		backgroundColor:yellow,
		rollBackgroundColor:yellow.darken(.1),
		waitBackgroundColor:red,
		rollWaitBackgroundColor:red.lighten(.1),
		color:dark,
		rollColor:dark,
		corner:10,
		shadowBlur:3
	}).sca(.4).loc(447, 668);
	// don't use tap() for wait state buttons
	// because waiting is changed on mousedown
	clear.on("mousedown", ()=>{
		if (clear.waiting) {
			clear.clearWait();
			loop(list.items, item=>{
				if (item.circle.emoji) item.circle.emoji.dispose();
			});
			stage.update();
		}
	}); //.place()

	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=Circle
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=Button
	// https://zimjs.com/docs.html?item=List
	// https://zimjs.com/docs.html?item=EmojiPicker
	// https://zimjs.com/docs.html?item=tap
	// https://zimjs.com/docs.html?item=change
	// 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=sca
	// https://zimjs.com/docs.html?item=scaleTo
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=place
	// https://zimjs.com/docs.html?item=lighten
	// https://zimjs.com/docs.html?item=darken
	// https://zimjs.com/docs.html?item=zog
	// https://zimjs.com/docs.html?item=zid
	// https://zimjs.com/docs.html?item=STYLE

	// FOOTER
	// call remote script to make ZIM icon - you will not need this
	createIcon(); 
	createGreet(); 

}); // end of ready