const frame = new Frame({
	scaling:"fit", 
	width:800, height:600, 
	color:"#111", outerColor:"#555", 
	assets:{font:"fungus", src:"Fungus.otf"}, 
	path:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/1604712/", 
	allowDefault:true // CodePen only for some reason - to get keyboard commands 
});
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
	
		// BLOBATAR - just a quick concept - multiuser and more one day!
		// In this case, we introduce the app with LabelOnPath 
		// We will use a Blob for the path
		// but we also want to use that Blob for real later
		// There is no way to remove the text after it is added 
		// so we have decided to create a Blob 
		// then clone it when we go to put text on it. 
		// This allows us to dispose of the text one  
		// when we no longer need it and then use the other blob

    // recorded with commented-out button below
    const points = [[-63.5,-132.1,0,0,-33.9,36.7,36.3,-39.3],[63.9,-134.6,0,0,-40.1,-29.8,58.1,43.2],[114.3,107.2,0,0,44.9,-62.2,-44.3,61.4],[-132.7,97.8,0,0,24.5,64.7,-31.9,-84.5]]

    const blob = new Blob({
				onTop:false,
				handleSize:16,
				stickColor:purple,
				move:false,
				points:points
    })
			// .center(); // this was used initially to get points
	
	  // this lets you record the shape of the Blob you make 
    // so you can pass the points into the Blob to start
    // new Button().tap(()=>{
    //        blob.recordPoints(true);
    // }).pos(30,30,true);

    const text = new LabelOnPath({
        label:new Label("MAKE YOUR OWN BLOBATAR   ", 50, "fungus", blue),
				// add Label to a clone of the Blob so we can easily dispose
				// this is why we did not add the blob above so we do not have two Blobs
				// as anytime you stack the same shape you can get jaged edges
        path:blob.clone().hideControls().center(), 
        interactive:false,
        allowToggle:false
    }).addTo();

    text.letters.animate({
        wait:300,
        props:{scale:2.2},
        time:250,
        rewind:true,
        sequence:50,
        sequenceCall:()=>{
            // when the sequence is done animate out letters
            text.letters.animate({
                wait:1000,
                props:{alpha:0},
                time:500,
                call:()=>{
        						blob.center().bot(); // this adds the original blob
                    text.dispose(); // dispose the text blob when done	
                }
            });								
        }
    });
	
		// we will animate some objects in after the intro 
		// so prepare a container with a single animation...
		const secondary = new Container(stageW, stageH)
			.addTo()
			.animate({props:{alpha:0}, wait:4000, from:true});
	
		const eye = new Circle(30, purple)
			.pos(30,30,true,null,secondary)
			.transform({showReg:false, visible:false});
		eye.startX = eye.x;
		eye.startY = eye.y;
		const eyeBall = new Circle(15, blue)
			.loc(eye, null, secondary)
			.transform({showReg:false, visible:false});
	
		const instructions = new Pane({
			width:stageW,
			height:100,
			close:true,
			closeColor:blue,
			backgroundColor:pink,
			corner:0,
			label:new Label({
				text:"Drag controls to change shape. DoubleClick to change control types. Add points by clicking on Blob. Remove points by SHIFT clicking on point. CTRL click will multiple select controls. Can drag or use arrows. CTRL Z to undo.",
				color:white,
				labelWidth:stageW*.88,
				labelHeight:100*.8,
			})
		});	
	
		// you can also save the blob and transforms with the ZIM TransformManager
		// ran into a little trouble with it on CodePen - not sure if it was a localStorage issue... 
		// I had thought we got that working before 
		// might be a timing thing - I did not spend long with it
	
		new Button({
			label:"HELP",
			width:150,
			corner:[30,0,0,0],
			backgroundColor:blue,
			rollBackgroundColor:pink			
		})
				.sca(.6)
				.alp(.7)
				.pos(30,30,false,true,secondary)
				.tap(()=>{
					instructions.show();
				});
	
			const reset = new Button({
				label:"RESET",
				width:150,
				corner:[0,30,0,0],
				backgroundColor:blue,
				rollBackgroundColor:pink,
				wait:"YES?",
				rollWaitBackgroundColor:red,
				waitTime:2000
			})
					.sca(.6)
					.alp(.7)
					.pos(125,30,false,true,secondary)
			// do not use wait with tap - only on mousedown
			reset.on("mousedown", ()=>{
				if (reset.waiting) { // then waiting to confirm
					blob.points = points;
					eye.sca(1).rot(0).loc(eye.startX, eye.startY);	
					eye.transformControls.resize();
					eyeBall.sca(1).rot(0).loc(eye).top();
					eyeBall.transformControls.resize();
				}
			});
	
	
		new Label("BLOBATAR", 50, "fungus", blue).alp(.7).center(secondary).pos(30,40);
			

    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=Circle
		// https://zimjs.com/docs.html?item=Blob
		// https://zimjs.com/docs.html?item=Label
		// https://zimjs.com/docs.html?item=LabelOnPath
		// https://zimjs.com/docs.html?item=Button
		// https://zimjs.com/docs.html?item=Pane
		// https://zimjs.com/docs.html?item=tap
		// https://zimjs.com/docs.html?item=transform
		// https://zimjs.com/docs.html?item=animate
		// https://zimjs.com/docs.html?item=pos
		// https://zimjs.com/docs.html?item=top
		// https://zimjs.com/docs.html?item=bot
		// https://zimjs.com/docs.html?item=alp
		// https://zimjs.com/docs.html?item=rot
		// https://zimjs.com/docs.html?item=sca
		// https://zimjs.com/docs.html?item=addTo
		// https://zimjs.com/docs.html?item=center
		// https://zimjs.com/docs.html?item=zog

    // FOOTER
    // call remote script to make ZIM Foundation for Creative Coding icon
    createIcon(frame); 

}); // end of ready