// as of ZIM 5.5.0 you do not need to put zim before ZIM functions and classes
const frame = new Frame("fit", 800, 600, lighter, dark);
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;
	
	// I have a feeling I might regret this!  
	// But it is always great to learn and challenge yourself!  
	// Thanks Carl for the challenge
	// I like your messages to on the post 
	// http://www.snorkl.tv/challenge/

	// 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

    // 10.9.1 BETA - introducing seconds
    // ZIM powered has been milliseconds based - inherited from CreateJS
    zim.TIME = "seconds";
	
	STYLE = {centerReg:true};	
		
	const tile = new Tile(new Rectangle(50,50,light,lighter,3), 8, 7)
		.center()
		.animate({
			from:true,
			props:{alpha:0},
			time:2
		})
        .tap(()=>{ // restarting
            loop([tile,g,r,b], o=>{o.replayTween()});
        });

	const g = new Rectangle(tile.width,10,green)
		.reg(0)
		.pos(0,-12,LEFT,BOTTOM,tile)
		.animate({
			props:{scaleX:0},
			from:true,
			ease:"linear",
			time:6
		});

	const r = new Rectangle(50,50,red,lighter,3)
		.loc(tile.getChildAt(3*8), null, tile)
		.animate([
			{props:{x:"150"}, wait:2, ease:"bounceOut", call:rotate}, // default ease is quadInOut
			{props:{y:"-150"}, wait:1, time:2, ease:"quadOut"}
		]);
	
	const b = new Rectangle(50,50,blue,lighter,3)
		.loc(tile.getChildAt(4*8-1), null, tile)
		.animate([
			{props:{x:"-150"}, wait:2, ease:"bounceOut", call:rotate},
			{props:{y:"150"}, wait:1, time:2, ease:"quadOut"}
		])
		
	function rotate(target) {
		target.animate({
			props:{rotation:"360"},
			wait:2,
			ease:"backOut"
		});
	}
	
	STYLE = {}
	
	stage.update(); // this is needed to show any changes
	
	// const s = new Squiggle().pos(0,40,CENTER)
    // const c = new Circle(20).addTo().animate({
    //     props:{path:s},
    //     rewind:true,
    //     loop:true,
    //     drag:true,
    //     startPaused:false,
    //     time:3
    // });
	

    // TWEEN CONSIDERATIONS

    // With ZIM, we chain animate() to objects
    // although can use CreateJS Tween() to chain to tween
    // like with GreenSock - or use GreenSock, etc.
    // 95% of our tweens are just on the object
    // pauseAnimate() and stopAnimate() are methods or global functions
    // and can be used to pause or stop animations 
	// or animations with shared ids
    // but storing completed tweens to replay them would be bad
    // we animate particles, etc.
    // so... run a replayTween() on the object

    // ZIM has series animations with an array of animation objects
    // These will run one after another so avoids calculating waits
    // We can run animations on different objects in a series
    // but nested series are not supported at this time
    // Where an object animates and then two or more objects animate
    // we are unable to run both those objects in a series
    // This leaves us back at running the subsequent objects
    // in the first object's callback function
    // or setting waits on the subsequent objects
	
	// So, well aware of these drawbacks 
	// but having used a chained Tween for a number of years, 
	// I find that chaining to the object is a lot easier most of the time 
	// I would definitely not want to go back. 
	// Agreed, in cases of a series of animations and calls, it can't be beat. 
	// But in making Interactive Media as opposed to more authorative works,
	// The animations usually happen on interaction
	// and seldomly require a complex series - or one beyond the ZIM series system.
	// Flattening the Tween chaining 
	// and moving the options into parameters 
	// makes sense in ZIM with the ZIM DUO technique 
	// of traditional parameters or configuration objects 
	
	// new Circle().center().animate({scale:2}, .7); 
	// // or 
	// new Circle().center().animate({
	// 	props:{scale:2},
	// 	time:.7,
	// 	rewind:true
	// }); // or on one line if desired

	// DOCS FOR ITEMS USED
    // https://zimjs.com/docs.html?item=Frame
    // https://zimjs.com/docs.html?item=Rectangle
    // https://zimjs.com/docs.html?item=tap
    // https://zimjs.com/docs.html?item=animate
    // https://zimjs.com/docs.html?item=stopAnimate
    // https://zimjs.com/docs.html?item=pauseAnimate
    // 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=center
    // https://zimjs.com/docs.html?item=Tile
    // https://zimjs.com/docs.html?item=zog
	
	

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

	
	
}); // end of ready