// ZIM is a JavaScript Canvas Framework for coding creativity!
// https://zimjs.com - please visit to start a wonderful coding journey.
// The main site has banner sections of TEN excellent uses of ZIM.

// ZIM provides many conveniences, components and controls 
// to help designers, developers and artists create interactive media 
// https://zimjs.com/about.html - why ZIM, features, applications
// https://zimjs.com/docs.html - expand open any feature for info and examples

// Here are CodePen examples with comments for learning:
// https://codepen.io/zimjs/pens/public - ZIM CodePen
// https://codepen.io/danzen/pens/public - ZIM Founder's CodePen
// https://codepen.io/zimjs/post/welcome-to-zim-on-codepen

// There are also many tutorials, videos and references here:
// https://zimjs.com/learn.html - ZIM Skool, ZIM Kids, ZIM Badges, etc.
// https://zimjs.com/code.html - ZIM Template, tools and more
// https://zimjs.com/slack/ - join us on *** Slack *** for discussion and support

// -----------------

// ZIM is powered by CreateJS so we import CreateJS and ZIM in CodePen settings
// We make a Frame object which makes a stage on an HTML canvas 
// We then add objects to the stage and update the stage to see them 
	
const frame = new Frame("fit", 1024, 768, orange, darker); // see docs for other options
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;

	// CODE HERE 
	
	// Make a path for the create ghoul to animate along 
	// The path is editable and the animation still follows
	// See https://zimjs.com/nio for the ZIM NIO (9) min-site 
	// with examples of animating and dragging along paths
	// also see a space game: https://codepen.io/zimjs/pen/EzpOPP
	// and an SVG path example: https://codepen.io/zimjs/pen/GLLvoP

	const path = new Squiggle({
		thickness:3,
		color:green,
		onTop:false, // so does not come to top (above ghoul) when editing 
		showControls:false, // start with no controls showing
		allowToggle:false, // do not do usual toggle of controls off and on
		editPoints:false, // do not allow user to add or remove points - optional
		// recorded points with keypress below
		// expand open to see the point data
		points:[
			[-180,-305,0,0,93.8,-278,-93.8,278],[21,282.8,0,0,-220.2,20.3,220.2,-20.3],[-50.3,-194.7,0,0,92.7,-114.8,-92.7,114.8],[434.9,303.9,0,0,157.9,-56.3,-157.9,56.3],[224.6,-305,0,0,379.7,-25.9,-379.7,25.9]
		]
	}).center();

	const ball = new Circle(10).rot(-90).addTo().animate({
		// animate along path 
		// zoom from 0-10 times the size from stage top to bottom 
		// decrease the speed the higher up (farther away)
		// see docs for more options https://zimjs.com/docs.html?item=animate
		props:{path:path, zoom:[0,12], speed:[50,100]},
		time:10000,
		loop:true,
		rewind:true
	});
	
	const emitter = new Emitter({
		obj:new Circle(10),
		force:.2,
		gravity:0,
		life:1000,
		num:mobile()?1:4, // reduce particles for mobile
		// ball is scaling so need to scale individual particles to match ball
		random:{scale:function(){return ball.scale*rand(.5,.9)}},
		// emit in direction of ball - optional (want tail to start up which is -90)
		angle:function(){return ball.rotation-90+rand(-20,20)}
	}).loc(ball).ord(-1); // under ball
	
	// could put emitter with its particles in ball but then all particles move with ball
	// as of ZIM 9.5.0 emitter is separate from its particles 
	// so just move emitter and leave particles alone to get proper effect
	Ticker.add(()=>{
		emitter.loc(ball);
	});
	
	new Label({
		size:4,
		font:"impact",
		color:green,
		text:"CREATE!",
		shiftVertical:1
	}).center(ball)

	// This records and shows the path if desired
	// You can also let the user's path be stored
	// with a ZIM TransformManager()
	frame.on("keydown", e=>{
		// zog(e.keyCode) // uncomment this to see keyCode of keys
		if (e.keyCode == 82) { // R
			path.recordPoints(true); // true pops up window with data
		}
	});

	// Optional use of ZIM STYLE
	// Any time we use series,
	// it might have been easier to use arguments
	// when making the object
	STYLE = {
		type:{
			CheckBox:{
				alpha:.8,
				size:30,
				// first made gets edit, second gets hide
				label:series("edit", "hide"), 
				x:series(30, 150),
				y:stageH-60,
			},
			Label:{
				text:series("SMALL", "BIG"),
				x:series(40, 915),
				y:series(40, 690),
				size:series(20, 40),
				color:dark,
				backgroundColor:green
			}
		}
	}

	// we have abstracted the styles to STYLE
	// but we could have added them directly to the components
	// which might have been more clear due to all the series
	new CheckBox().change(e=>{
		path.toggle(e.target.checked);
	});
	new CheckBox().change(e=>{
		path.visible = !e.target.checked;
	});
	new Label();
	new Label();
	
	// FOOTER
	// call remote script to make ZIM Foundation for Creative Coding icon and a greet link
	createIcon(30,stageH-85); 

	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=Ticker
	// https://zimjs.com/docs.html?item=Circle
	// https://zimjs.com/docs.html?item=Squiggle
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=CheckBox
	// https://zimjs.com/docs.html?item=change
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=rot
	// https://zimjs.com/docs.html?item=addTo
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=TransformManager
	// https://zimjs.com/docs.html?item=Emitter
	// https://zimjs.com/docs.html?item=zog
	// https://zimjs.com/docs.html?item=STYLE  
   

}); // end of ready