const frame = new Frame("full", null, null, grey, grey, "twitter.jpg", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1604712/");
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
	
		// TWEET DOCTOR
		// A simple app to load a screenshot of your tweet
		// change the numbers of the messages, retweets and likes
		// crop and save the new pic!

		// This type of edit picture app has countless possibilities
		// The core construction can be made in FIVE minutes with ZIM
		// SEE: https://www.youtube.com/watch?v=PobeJelbGVc
		// SEE: https://www.youtube.com/watch?v=PfUPbXB6V60
	
		// Note: any time there is a lot of interface, the code gets longer 
		// but have a look... the steps we take are all very similar 
		// ZIM is a coding language without an IDE (aside from Adobe Animate) 
		// so we need to make our components, etc. with code - yay!

		// We will add anything that we want to save out as a picture to a Container
		// So holder will have the pic and the panel with the numbers in it
		// We can use loader to save the holder with the cropped dimension
		// and the pic and numbers will be saved as a new image
		// We would put just the numbers in the holder
		// but then the pic goes behind the panel and the numbers go on top of the panel
		// and this cannot be done as the pic and panel would be in the same container
		// so just put the whole panel in holder
		const holder = new Container(stageW, stageH).addTo();

		// Here we start with a sample screen shot
		// let the user drag the picture
		// but set it so it does not come to the top automatically
		// otherwise it would go over the numbers
		let pic = frame.asset("twitter.jpg")
			.center(holder)
			.drag({onTop:false})
			.alp(0)
			.animate({props:{alpha:1}, wait:1500, time:700});

		// Create an interface panel
		// Use a Container - this means we could drag the whole thing
		// or hide the whole thing later if we wanted too
		// We put an empty event on the background
		// so the dragging of the pic does not happen with mousedown on panel
		const panel = new Container().loc(30,30,holder);
		new Rectangle(200, 600, dark).addTo(panel).sha("rgba(0,0,0,.2)", 7,7,7).on("mousedown", ()=>{});

		// the Tile and Labels we will want to be centered so set a style
		STYLE = {align:"center"}

		new Label({text:"TWEET\nDOCTOR", color:pink})
			.center(panel)
			.pos(null,30);

		const loader = new Loader({
			color:white,
			backgroundColor:grey,
			borderColor:light
		}).sca(.6).center(panel).pos(null,120);

		loader.on("loaded", e => {
			pic.removeFrom();
			pic.noDrag(); // clear drag events to be safe
			// load in new pic and add to bottom of holder
			pic = e.bitmap.center(holder).bot().drag({onTop:false});
			stage.update();
		});

		new Label({
			text:"DRAG NUMS OVER TWEET",
			color:yellow
		}).sca(.3).center(panel).mov(0,-110);

		// create and place three draggable labels tiled in three columns one row
		const nums = new Tile(
			new Label({text:"0", color:"#777777", backgroundColor:white}).centerReg({add:false}), 3, 1, 20
		).sca(.6).center(panel).mov(0, -75).drag({onTop:false}); // keep index order for stepper event

		// create a ColorPicker which will handle background and text color
		// as Twitter may have different colors
		const picker = new ColorPicker({alphaPicker:false});
		// set is when the color is changed in the Picker
		// this will show a preview of the color
		// if x is then selected the color is not used
		// if ok is selected then the color is used
		// so this is a more complicated system - but user friendly
		// Since we are using the same ColorPicker we need to know which we are setting
		// so we store which one in a custom target property
		// when we open the ColorPicker - see the Rectangle events
		picker.on("set", ()=>{
			if (picker.target == "backgroundColor") {
				nums.loop(num=>{zog(num.type); num.backgroundColor = picker.selectedColor;})
				backgroundColor.color = picker.selectedColor; // set the rectangle too
			} else {
				nums.loop(num=>{zog(num.type); num.color = picker.selectedColor;})
				color.color = picker.selectedColor; // set the rectangle too
			}
			stage.update();
		});
		picker.on("change", ()=>{
			picker.hide(); // already set so nothing to do but close picker
			stage.update();
		})
		picker.on("close", ()=>{
			// color is canceled so reset colors to colors before picker
			if (picker.target == "backgroundColor") {
				// loop through numbers and apply color
				nums.loop(num=>{num.background.color = picker.lastColor;})
				backgroundColor.color = picker.lastColor;
			} else {
				nums.loop(num=>{num.color = picker.lastColor;})
				color.color = picker.lastColor;
			}
			picker.hide();
			stage.update();
		});
		const backgroundColor = new Rectangle(30,30,white,light).center(panel).mov(-50,-25).tap(()=>{
			picker.target = "backgroundColor"; // set custom property of which type
			// store the color before picking and set the colorPicker current color
			picker.lastColor = picker.selectedColor = backgroundColor.color;
			picker.show();
			stage.update();
		});
		const color = new Rectangle(30,30,"#666666",light).center(panel).mov(0,-25).tap(()=>{
			picker.target = "color"; // set custom property of which type
			// store the color before picking and set the colorPicker current color
			picker.lastColor = picker.selectedColor = color.color;
			picker.show();
			stage.update();
		});

		// handle scaling of the labels as the screenshot may be at different sizes
		const dial = new Dial({backgroundColor:white, useTicks:false, min:30, max:70})
		.sca(.35)
		.center(panel)
		.mov(50,-25)
		.change(e => {
			// loop through numbers and apply height
			// width will change too unless heightOnly property is used
			nums.loop(num=>{num.height = dial.currentValue;});
			stage.update();
		});
		// start the dial at the right value
		dial.currentValue = nums.getChildAt(0).height;

		new Label({
			text:"ADJUST TWEET STATS",
			color:yellow
		}).sca(.3).center(panel).mov(0,20)

		// create three steppers in a tile of one column and three rows
		const steppers = new Tile(
			new Stepper({stepperType:"number", max:999}).sca(.5), 1, 3, 0, 20
		).sca(.6).center(panel).mov(0,100);
		steppers.loop(stepper=>{
			stepper.on("change", e =>{
				let stepper = e.target;
				// match the label to the index of the stepper being changed
				let label = nums.getChildAt(stepper.tileNum);
				label.text = stepper.currentValue;
				stage.update();
			});
		});

		// Create buttons for cropping and saving
		// we will make a rectangle with a transform for the cropper
		// transform needs the object to be on the stage
		// but we want to initially hide the cropper
		// so make it the first time the crop button is pressed
		// the buttons will have these styles
		// we can target only buttons or even a group of objects
		// but this is faster to type if we don't have to worry about it...
		STYLE = {backgroundColor:pink, rollBackgroundColor:blue, corner:10}
		let cropper = null;
		new Button({label:"CROP", toggle:"HIDE"})
			.sca(.6)
			.center(panel)
			.pos(null,80,null,true)
			.tap(() => {
			// here we make the cropper if it is not already made
			if (!cropper) {
				cropper = new Rectangle(500,500,null,pink,10,0,true,{ignoreScale:true})
					.center()
					.transform({allowToggle:false, rotate:false, showReg:false});
			} else {
				// hide or show the cropper depending on if it is already showing
				if (cropper.parent) {
					cropper.transformControls.hide();
					cropper.removeFrom();
				} else {
					cropper.addTo();
					cropper.transformControls.show();
				}
			}
			stage.update();
		});

		// don't save unless the cropper is showing... so make a warning pane
		var pane = new Pane(350, 100, "Please set crop", null, white);
		new Button({label:"SAVE"})
			.sca(.6)
			.center(panel)
			.pos(null,30,null,true)
			.tap(() => {
			if (!cropper || !cropper.parent) {
				pane.show();
				return;
			}
			// use the loader save() to save the cropped dimensions
			loader.save(holder, "tweet.jpg", cropper.x, cropper.y, cropper.width, cropper.height);
		});
	
		nums.top(); // bring numbers up above everything in the holder
   
    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=Button
		// https://zimjs.com/docs.html?item=Pane
		// https://zimjs.com/docs.html?item=Stepper
		// https://zimjs.com/docs.html?item=Dial
		// https://zimjs.com/docs.html?item=Tile
		// 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=sha
		// 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=top
		// https://zimjs.com/docs.html?item=bot
		// https://zimjs.com/docs.html?item=sca
		// https://zimjs.com/docs.html?item=addTo
		// https://zimjs.com/docs.html?item=removeFrom
		// https://zimjs.com/docs.html?item=centerReg
		// https://zimjs.com/docs.html?item=center
		// https://zimjs.com/docs.html?item=zog
		// https://zimjs.com/docs.html?item=STYLE
  
    // FOOTER
    // call remote script to make ZIM Foundation for Creative Coding icon
		// a little more complicated in full mode as we position it on frame resize
    createIcon(null,null,icon=>{
			frame.on("resize", ()=>{
				icon.pos(30,30,true,true);
				stage.update();
			});
		}); 
}); // end of ready