// scaling, width, height, color, outerColor, assets 
const frame = new Frame(FULL, null, null, darker, null, {src:"https://fonts.googleapis.com/css?family=Luckiest+Guy"});
frame.on("ready", ()=>{ // ES6 Arrow Function - similar to function(){}
   
    // often need below - so consider it part of the template
    let stage = frame.stage;
    let stageW = frame.width;
    let stageH = frame.height;
	
	// This is a remake of https://codepen.io/rachsmith/pen/YweZbG 
	// with ZIM at 35% PixiJS code - it is common for ZIM to come in at less code than any other Framework / Library
	// This is code the developer would code 
	// ZIM and CreateJS add 270K - but can be distilled for less - see https://zimjs.com/distill/

    // 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
	
	// Make Label
   	const label = new Label({
		text:"IT DEPENDS",
		font:"Luckiest Guy",
		color:white.toAlpha(.8),
		size:100,
		outlineColor:darker,
		outlineWidth:8
	}).noMouse(); // not necessary but saves rollover processing
	
	// Make stars
	const emitter = new Emitter({
		// here we use ZIM VEE dynamic parameter to let the object pick from options 
		// see https://zimjs.com/tips.html#DYNAMIC
		obj:new Poly({min:8, max:16}, [5,6,7], .5, [red, green, blue, orange, pink, yellow]),
		width:label.width,
		num:4,
		horizontal:true, // will spread the emitter along width rather than be point emitter
		animation:{
			props:{rotation:[-360,360], scaleX:-1},
			time:{min:.5, max:3},
			ease:"linear",
			loop:true
		},
		shrink:false,
		height:0,
		gravity:0,
		force:{min:2, max:4},
		life:2,
		angle:{min:-90+30, max:-90+50}		
	}).center().bot();
	
	// Make glows
	const maxW = 2000;
	const maxH = 1200;
	const glows = new Container(stageW, stageH).addTo().bot();
	loop(200, ()=>{
		let r = rand(5,15);
		let glow = new Circle(r, new RadialColor([white,clear],[0,1], 0,0,0, 0,0,r))
			.alp(.5)
			.loc(rand(maxW), rand(maxH), glows)
			.cache();
		glow.vx = rand(.5, 1);
  		glow.vy = rand(-.5,-1);
	})
	
	// Animate glows
	Ticker.add(()=>{
		glows.loop(glow=>{
			glow.x+=glow.vx;
			glow.y+=glow.vy;
			if (glow.x > maxW+20) glow.loc(rand(-100), rand(maxH));
			if (glow.y < -20) glow.loc(rand(maxW), maxH+rand(50));
		});
	});

	// Make icon in footer
    const icon = createIcon();
	
	// Handle resize event
	// ZIM often works in FIT mode with automatic resize 
	// but can work in FULL mode - also common for mobile
	const w = label.width;
	frame.on("resize", ()=>{
		stageW = frame.width;
		stageH = frame.height;
		if (stageW < w) label.width = stageW; // width is just a shortcut to scale
		else label.sca(1);
		label.center().mov(0,100); // or use label.pos(0,100,CENTER,CENTER)
		emitter.center().mov(0,100);
		icon.pos(50,50,RIGHT,BOTTOM);
	});
	
	  
    // DOCS FOR ITEMS USED
	// https://zimjs.com/docs.html?item=Frame
	// https://zimjs.com/docs.html?item=Container
	// https://zimjs.com/docs.html?item=Circle
	// https://zimjs.com/docs.html?item=Poly
	// https://zimjs.com/docs.html?item=Label
	// https://zimjs.com/docs.html?item=noMouse
	// 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=mov
	// https://zimjs.com/docs.html?item=bot
	// https://zimjs.com/docs.html?item=alp
	// 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=Emitter
	// https://zimjs.com/docs.html?item=rand
	// https://zimjs.com/docs.html?item=RadialColor
	// https://zimjs.com/docs.html?item=toAlpha
	// https://zimjs.com/docs.html?item=Ticker

}); // end of ready