const frame = new Frame("fit", 800, 600, "#EEE", "#555");
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
 
	  // NEW IN ZIM OCT (8) https://zimjs.com - come on in and discuss https://zimjs.com/slack

    // STYLE can be used to set any parameter on a DisplayObject.
    // For instance: Circle, Blob, Button, Pane, Bitmap, Sprite, etc.
    // These are applied at the time the objects are made.
    // They are cascading with each level overriding the previous level:

    // 1. GENERAL: any style can be specified in general
    // 	corner:30 will make all corners default to 30
    // 2. TYPE: styles for object type can be set to override the general styles
    // 	Button:{corner:0} will make all button corners default to 0
    // 3. GROUP: styles for a group can be set to override the type styles
    // 	homePage:{corner:20} will make all objects of that group default to 20
    // 4. OBJECT: styles applied as parameters to the object override all other styles
    // 	new Button({corner:40}) will make this button have a corner of 40

    // TRANSFORM STYLES
    // Transformations can also be applied (all are numbers - visible is a Boolean):
    // x, y, rotation, alpha, scale, scaleX, scaleY, regX, regY, skewX, skewY, visible
    // a bounds style has a value of {x:Number, y:Number, width:Number, height:Number}
    // where x and y are optional

    // RANDOM, RANGES, SERIES, FUNCTIONS
    // Any property value can be a ZIM VEE value to make use of ZIM zik (pick)
    // color:[red, green, blue] will pick a random color for each object for which the style is applied
    // x:series([100,200,300]) will place subsequent objects at these locations
    // width:{min:100, max:500} will make objects with a width within this range
    // See Docs on ZIM zik() and ZIM series() for more information

    // FUNCTION STYLES
    // The following functions have been added:
    // addTo, center, centerReg, transform, drag, gesture, outline, mov, animate, wiggle
    // Values of true will give default functionality for all but mov, animate and wiggle
    // ZIM DUO configuration objects can be set as a value for any of these
    // example: drag:true;  or  drag:{onTop:false}
    // For animate and wiggle, [] can be put around multiple configuration objects
    // to wiggle in the x and y for instance or run multiple animate calls on the object

    // CONVENIENCE STYLES
    // add:true - has been provided to add to the stage (use addTo for other containers)
    // move:{x:value, y:value} or move:x - mirrors the mov Function style (just adding the e)
    // style:false - will turn off all styles for the selector

    // EXCLUSION
    // A value of ignore can be used to exclude any earlier styles and return to the original default.
    // ignore is a ZIM global variable - if zns is true then use zim.ignore or just "ignore".
    // Setting style:false will exclude the object from all styles
    // All DisplayObjects have a style parameter (default true). Set to false to ignore styles.
 
    // GROUPS
    // All DisplayObjects have a group parameter.
    // This parameter accepts a string or a comma delimited string of multiple groups.
    // The group of components can then be targeted in the Group section of STYLE.
    // A group can contain just one component and act like an ID in CSS.

			STYLE = {
				type:{
					Rectangle:{
						centerReg:true, // so rectangle spins around center
						borderColor:black,
						borderWidth:5,	
						width:120,
						height:120,
						color:[blue, green, pink, brown, orange], // will randomly pick
						wiggle:[ // an array for wiggle or for animate lets you do multiple calls
							{
								property:"x",
								baseAmount:stageW/2,
								minAmount:100,
								maxAmount:300,
								minTime:500,
								maxTime:1000
							}, {
								property:"y",
								baseAmount:stageH/2,
								minAmount:100,
								maxAmount:200,
								minTime:500,
								maxTime:1000
							}
						],
						animate:{props:{rotation:360}, time:300, loop:true, ease:"linear"},
					}
				}
		};
   
    loop(10, ()=>{new Rectangle();});
	
		timeout(10000, ()=>{
			stopAnimate();
			// all at once
			// stage.loop((item)=>{
			// 	item.animate({x:stageW/2, y:stageH/2, rotation:0}, 700);
			// })
			animate({
				target:stage, 
				props:{x:stageW/2, y:stageH/2, rotation:0}, 
				time:700, 
				sequence:200,
				sequenceReverse:true				
			});
			stage.getChildAt(stage.numChildren-2).color = white;			
		})
  
		// DOCS FOR ITEMS USED
		// http://zimjs.com/docs.html?item=style
		// http://zimjs.com/docs.html?item=loop
		// http://zimjs.com/docs.html?item=rectangle
		// http://zimjs.com/docs.html?item=animate
		// http://zimjs.com/docs.html?item=wiggle
		// http://zimjs.com/docs.html?item=timeout
		// http://zimjs.com/docs.html?item=frame
	
  
    // FOOTER
    // call remote script to make ZIM Foundation for Creative Coding icon
    const icon = createIcon(frame); 

}); // end of ready