const frame = new Frame("fit", 1024, 768, darker, 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;

    // 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
   
	  // ~~~~~~~~~~~~~~~~~
    // create the coils:
    const coil = new Container().center().mov(-150).drag({all:true});

    const top = new Rectangle({width:100, height:40, corner:20}).centerReg(coil);
    // [colors],[ratios], x0,y0, x1,y1 - x and y are for a line the gradient will follow
    top.linearGradient([dark,grey,light,grey,dark],[0,.2,.5,.8,1], 0,0, 0,40);

    const peg = new Rectangle(20,40).center(coil).mov(0,40);
    peg.linearGradient([light,darker],[.5,1], 0,0, 20,0);

    const slat = new Rectangle(60,16,null,grey,2).ske(20); // why not!
    slat.linearGradient([grey,light,dark],[0,.3,.7], 0,0, 60,0);

    const post = new Tile(slat, 1, 55).center(coil).loc(null, peg.y+peg.height).mov(-2);
    const coil2 = coil.clone().loc(coil).mov(400,-100).drag({all:true});
    const top2 = coil2.getChildAt(0); // top of cloned coil
	
		coil.cache();
    coil2.cache();

    // ~~~~~~~~~~~~~
    // create cabinet and Dial

    let energy = 50;
    const cabinet = new Rectangle(200,250,null,tin,5,[80,80,0,0])
        .center().pos(null,-2,null,true).mov(50);
    // colors,ratios, x0,y0,radius0, x1,y1,radius1
    cabinet.radialGradient([grey,dark],[0,.8], 100,150,150, 200,0,0);
    var dial = new Dial({
        min:0, max:150, step:5,
        tickColor:silver, backgroundColor:light,
    })
        .sca(1.2).center().mov(50,240)
        .change(()=>{energy = dial.currentValue});
    dial.currentValue = energy;


    // ~~~~~~~~~~~~~
    // create and animate the electricity!

    var zaps = new Container()
        .sha(blue,0,0,20).addTo().bot().alp(0).animate({alpha:1}, 500);

    loop(2, i=>{
        new Squiggle({color:pink, points:6, controlType:"none", interactive:false}).addTo(zaps);
    });

    Ticker.add(()=>{
        zaps.loop(zap=>{ // loop through children in zaps container
            loop(zap.pointControls, (control, i, total)=>{ // loop squiggle points
                if (i==0) control.loc(top);
                else if (i==total-1) control.loc(top2);
                else {
                    // x and y of top are inside coil so use localToGlobal
                    var point = top.parent.localToGlobal(0,0);
                    var point2 = top2.parent.localToGlobal(0,0);
                    // find the x and y along a line between tops
                    var x = point.x+(point2.x-point.x)*i/(total-1);
                    var y = point.y+(point2.y-point.y)*i/(total-1);
                    // randomize location of point based on energy
                    control.loc(x+rand(-energy/2,energy/2), y+rand(-energy,energy));
                }
            });
            zap.update(); // update the squiggle when manually changing points
        }); // end point loop
    }); // end squiggle loop

  
    // DOCS FOR ITEMS USED
		// https://zimjs.com/docs.html?item=Frame
		// https://zimjs.com/docs.html?item=Container
		// https://zimjs.com/docs.html?item=Rectangle
		// https://zimjs.com/docs.html?item=Squiggle
		// https://zimjs.com/docs.html?item=Dial
		// https://zimjs.com/docs.html?item=Tile
		// https://zimjs.com/docs.html?item=change
		// https://zimjs.com/docs.html?item=drag
		// https://zimjs.com/docs.html?item=animate
		// https://zimjs.com/docs.html?item=loop
		// https://zimjs.com/docs.html?item=sha
		// 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=ske
		// https://zimjs.com/docs.html?item=sca
		// https://zimjs.com/docs.html?item=addTo
		// https://zimjs.com/docs.html?item=centerReg
		// https://zimjs.com/docs.html?item=center
		// https://zimjs.com/docs.html?item=zog
		// https://zimjs.com/docs.html?item=Ticker
  
		// FOOTER
		// make a greeting - come on in and join us on ZIM Slack!
		createGreet(); 

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

}); // end of ready