const frame = new Frame("fit", 1024, 768, black, black);
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;
	
		// cheers to the SousBas poster in Hamilton where I saw the pattern!

    // 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
   
		// the class makes one Ghoul - we will tile them afterwards
		class Ghoul extends Container {
			constructor(r=100, h=600, c=blue, e=orange) { // BLUE AND ORANGE
				// r is radius, h is height, c is color, e is eye color
				super(r*2, h); // super constructor must be called when extending (CreateJS requirement)
				let w = this.leg = r*2/(4+3); // 4 legs and 3 spaces
				new Circle(r, c).pos(0,0,CENTER,TOP,this); // SMOOTH
				// Tile arguments separated by spaces to help see them
				new Tile(new Circle(20,e), 2, 1, 20).pos(0,r*.3,CENTER,TOP,this);
				new Rectangle(r*2,h-r*2,c).center(this);
				// edges of canvas shapes sometimes blead against black - so overlapping a little looks better
				new Tile(new Rectangle(w,h-r*2+1,black,null,null,[w/2,w/2,0,0]), 3, 1, w).pos(0,r,CENTER,TOP,this);
				new Tile(new Rectangle(w,h-r*2+r, c), 2, 1, w).pos(0,r,CENTER,TOP,this);
				// SHARP
				let point = new Tile({obj:new Triangle(w/2+2,r+2,-1,black).sca(-1,1), cols:2, mirrorH:true})
				.pos(-w,-1,CENTER,BOTTOM,this);
				point.clone().pos(w,-1,CENTER,BOTTOM,this);						
			}
		}

		const ghoul = new Ghoul(100,700);
		const animation = {
			props:{scaleY:.6}, // BIG AND SMALL
			time:series(800, 5000), // FAST AND SLOW
			ease:"quintInOut",
			rewind:true,
			loop:true
		}
		new Tile(ghoul.clone(), 3, 1, ghoul.width-ghoul.leg*2)
			.center()
			.animate(animation);
		new Tile(ghoul.clone(), 2, 1, ghoul.width-ghoul.leg*2)
			.rot(180)
			.center()
			.animate(animation);

		// not needed if animating 
		// 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=Circle
		// https://zimjs.com/docs.html?item=Rectangle
		// https://zimjs.com/docs.html?item=Triangle
		// https://zimjs.com/docs.html?item=Tile
		// https://zimjs.com/docs.html?item=animate
		// https://zimjs.com/docs.html?item=pos
		// https://zimjs.com/docs.html?item=rot
		// https://zimjs.com/docs.html?item=sca
		// 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(); 
		createGreet().animate({
			props:{alpha:0},
			wait:800,
			time:500
		});

}); // end of ready