const frame = new Frame("fit", 1024, 768, "#111", "#333");
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
   
	 // press on blob in background to see controls
    const b = new Blob({
        color:dark,
        borderColor:grey,
        showControls:false,
        controlLength:300,
        stickColor:grey,
        onTop:false
    }).sca(3).center()

	 // animate control points of blob
    loop(b.pointControls, point=>{
        point.animate({
            props:{rotation:360},
            time:5000,
            loop:true,
            loopCount:4,
            ease:"linear"
        });
    })

	 // any manual changes of blob points need updating
    var ticker = Ticker.add(()=>{
        b.update();
    });
	
	 // will animate all objects along the path the same way 
	 // so store the animation object in a var and copy it each time
    const animationObject = {props:{path:b}, time:20000, ease:"linear"};
	
	 // animate a little ring indicator
    const c = new Circle(40,null,green,5)
	 	.addTo()
	 	.animate(copy(animationObject));
    
	 // all pens will be almost the same so store a pen object and merge it with differences 
	 // DisplayObjects in ZIM have STYLE but Pen is a Control
	 // WE will be adding Styles to controls in the future 
	 // HISTORICAL NOTE:
	 // The ZIM DUO technique of parameters or configuration objects  
	 // was so integrated that CSS Style-like arrangement was created in ONE day for ZIM 
	 // http://zimjs.com/style.html
	 // This type of abstraction below was what we did before STYLE 
	 const penObject = {damp:false, penType:"line", draggable:false};
    new Pen(merge(penObject,{size:50, color:blue}))
		 	.addTo()
		 	.animate(copy(animationObject));
    new Pen(merge(penObject,{size:30, color:pink}))
		 	.addTo()
		 	.animate(copy(animationObject));
	
	 // for one of the Pen animations, we will call a finishing function 
	 // to hide the blob and the little circle
	 // so add this property to the animationObject
	 animationObject.call = function () {
		 b.animate({alpha:0}, 1000);
		 c.animate({alpha:0}, 1000);
		 Ticker.remove(ticker);
	 }
    new Pen(merge(penObject,{size:10, color:green}))
		 	.addTo()
		 	.animate(copy(animationObject));
  
	// DOCS FOR ITEMS USED
	// https://zimjs.com/docs.html?item=Frame
	// https://zimjs.com/docs.html?item=Circle
	// https://zimjs.com/docs.html?item=Blob
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=loop
	// 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
	// https://zimjs.com/docs.html?item=Ticker
  
    // FOOTER
    // call remote script to make ZIM Foundation for Creative Coding icon
    createIcon(frame); 

}); // end of ready