const frame = new Frame("fit", 1024, 768, white, darker);
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

	// CODE HERE

	// this helps us with dragging the selection
	// if we used the stage and stagemousedown then the selection would draw when dragging tools, etc.
	// so we use a backing which we will have to change to the canvas color when that changes
	const backing = new Rectangle(stageW, stageH, frame.color).addTo();

	// make some quick content and change it to a Bitmap in the content container
	// we will also let the user change this to an uploaded picture later
	const content = new Container(stageW, stageH).addTo();
	const grey = new Rectangle(stageW, stageH, light).addTo(content);
	const circle = new Circle(300, purple).center(content);
	content.childrenToBitmap(); // replaces content of container with bitmap version keeping container


	// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	// SELECTION

	const select = new Shape(stageW, stageH).addTo().ble("difference");
	let selectX = 0;
	let selectY = 0;
	let sel = null; // will be the position and size of selection
	backing.on("mousedown", ()=>{
		selectX = frame.mouseX;
		selectY = frame.mouseY;
		select.c(); // clear the selection shape
		sel = null;
		stage.update();
	});
	backing.on("pressmove", ()=>{
		sel = [selectX, selectY, frame.mouseX-selectX, frame.mouseY-selectY];
		// ZIM/CreateJS tiny API for drawing
		// clear, stroke, stroleStyle, strokeDash, drawRect
		select.c().s(red).ss(2).sd([10,10],5).dr(...sel); // ES6 Spread Operator
		stage.update();
	});


	// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	// TOOLS

	const m = 10; // margin for panel boundary
	const tools = new Panel({
		width:90,
		height:180,
		titleBar:"TOOLS",
		backgroundColor:dark,
		draggable:true,
		boundary:new Boundary(m,m,stageW-90-m*2,stageH-180-m*2)
	}).pos(50,50);

	STYLE = {
		type:{
			Tabs:{
				backgroundColor:series(pink, blue, green, red, orange),
				// the series above would make the first set of tabs be color pink
				// and the second set of tabs be color blue, etc.
				// so we delay the pick so that the series works on the individual tab buttons
				delayPick:true,
				rollBackgroundColor:white,
				selectedBackgroundColor:black,
				rollColor:black,
				vertical:true,
				spacing:5,
				corner:5,
				base:"none", // otherwise corner operates like tab corners (just on two)
				align:LEFT
			}
		}
	}

	const tabs = new Tabs({tabs:["Copy", "Cut", "Paste"]})
	.scaleTo(tools,90) // 90% width of panel
	.pos(0,5,CENTER,BOTTOM,tools)
	.tap(()=>{
		if (sel) {
			if (tabs.text=="Copy" || tabs.text=="Cut") {
				// copy picture
				let snap = content.cache(...sel).cacheCanvas;
				copy = new Bitmap(snap);
				content.uncache();
				// below will remove previously transformable objects
				// this is optional - undo/redo could be worked in here as well
				content.childrenToBitmap();
			}
			if (tabs.text=="Cut") {
				// a little tricky... destination out will visually remove all content back to the canvas
				// including the backing rectangle we made - it is still there, just visually gone
				new Rectangle(sel[2], sel[3], white).loc(sel[0], sel[1], content).ble("destination-out");
				content.childrenToBitmap();
				stage.update();
			}
		}
		if (tabs.text == "Paste" && copy) {
			// might paste more than once so use a clone of the copy
			copy.clone().center(content).transform({borderColor:pink});
			select.c(); // clear the select shape
			// could set copy to null but it is handy to paste multiple copies
			sel = null;
			stage.update();
		}
		timeout(500, ()=>{
			tabs.selectedIndex = -1;
		});
	});
	tabs.selectedIndex = -1;


	// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	// FILES

	const files = new Panel({
		width:90,
		height:140,
		titleBar:"FILES",
		backgroundColor:dark,
		draggable:true,
		boundary:new Boundary(m,m,stageW-90-m*2,stageH-140-m*2)
	}).pos(50,50,LEFT,BOTTOM);

	const tabs2 = new Tabs({tabs:["Load", "Save"]})
	.scaleTo(tools,90) // 90% width of panel
	.pos(0,5,CENTER,BOTTOM,files)
	.tap(()=>{
		if (tabs2.text == "Save") {
			// comment out backing adds to see transparent cuts in saved png
			backing.addTo(content, 0);
			loader.save(content);
			backing.addTo(stage, 0);
		}
		timeout(500, ()=>{
			tabs2.selectedIndex = -1;
		});
	});
	tabs2.selectedIndex = -1;
	const loadButton = tabs2.buttons[0];

	const loader = new Loader({
		width:80,
		height:50,
		label:"",
		backgroundColor:clear,
		borderColor:clear
	}).loc(loadButton, null, loadButton);
	const loadColor = loadButton.backgroundColor;
	loader.on("loaded", function(e) {
		content.removeAllChildren();
		e.bitmap.center(content).drag();
		e.bitmap.on("pressup", e=>{
			e.target.noDrag();
		}, null, true); // run only once
		stage.update();
	});


	// The three issues below are introduced because we are integrating an HTML tag
	// unfortunately, for loading images... we are stuck with an HTML tag
	// This is a good example as to why we need canvas components
	// and not try to just overlay HTML components

	// 1. the Loader html tag is overlayed and taking the canvas mouse events - sigh...
	// so drop out to raw JS to set events to handle button color changes
	loader.tag.addEventListener("mouseover", () => {
		loadButton.backgroundColor = STYLE.type.Tabs.rollBackgroundColor;
		loadButton.color = STYLE.type.Tabs.rollColor;
		stage.update();
	});
	loader.tag.addEventListener("mouseout", () => {
		loadButton.backgroundColor = loadColor;
		loadButton.color = white;
		stage.update();
	});
	// 2. clicking HTML tag means transform will not turn off
	// and image will get replaced without turning off old transform
	loader.tag.addEventListener("mousedown", () => {
		content.loop((obj) => {
			if (obj.transformControls) obj.transformControls.hide();
		});
		stage.update();
	});
	// 3. the HTML loader tag needs to be repositioned if the panel is dragged
	files.on("pressmove", () => {
		loader.resize();
	});


	// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	// COLOR PICKER
	// this changes the color of the "canvas" in behind
	// you can see it when you cut something

	const canvas = new Panel({
		width:110,
		height:80,
		titleBar:"CANVAS",
		backgroundColor:purple,
		draggable:true,
		boundary:new Boundary(m,m,stageW-110-m*2,stageH-80-m*2)
	}).pos(50,50,RIGHT);

	const picker = new ColorPicker({
		colors:[white, light, black],
		circles:true,
		spacing:4,
		cols:3,
		width:110,
		backgroundColor:clear
	}).pos(0,5,CENTER,BOTTOM,canvas).change(() => {
		backing.color = frame.color = picker.selectedColor;
		stage.update();
	})
	picker.selectedIndex = 0;	

	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=Shape
	// https://zimjs.com/docs.html?item=Bitmap
	// https://zimjs.com/docs.html?item=Circle
	// https://zimjs.com/docs.html?item=Rectangle
	// https://zimjs.com/docs.html?item=Panel
	// https://zimjs.com/docs.html?item=Tabs
	// https://zimjs.com/docs.html?item=ColorPicker
	// https://zimjs.com/docs.html?item=Loader
	// https://zimjs.com/docs.html?item=tap
	// https://zimjs.com/docs.html?item=change
	// https://zimjs.com/docs.html?item=drag
	// https://zimjs.com/docs.html?item=noDrag
	// https://zimjs.com/docs.html?item=transform
	// 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=ble
	// https://zimjs.com/docs.html?item=scaleTo
	// https://zimjs.com/docs.html?item=addTo
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=timeout
	// https://zimjs.com/docs.html?item=Boundary
	// https://zimjs.com/docs.html?item=zog
	// https://zimjs.com/docs.html?item=STYLE

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

}); // end of ready