var assets = ["logo.png", "bomb.png", "fuse.mp3", "boom.mp3", "warble.mp3"];
var path = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1604712/";

const frame = new Frame("fit", 1024, 768, black, darker, assets, path, new Waiter({corner:0, backgroundColor:pink}));
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
  
    // THIS CODE was from a THREE HOUR build it exam for our Sheridan Interactive Media One-year Post Grad program.
    // Taken after 8 days of lessons - one day a week - class of 28 got an 80% average.
  
    // CODE HERE  

    // 1. Make a new label and assign it to label
    // Make the label white and have the text: "ZIM Fuse!  Light the fuse - then visit ZIM!"
    // set the alpha to .6 and the scale to .8 and position it on the stage at 30, 30
    const label = new Label({color:white, text:"ZIM Fuse!  Light the fuse - then visit ZIM!"})
      .alp(.6)
      .sca(.8)
      .pos(30,30)

    // 2. The points data comes from using a recordPoints(true) method - or see https://zimjs.com/nio/paths.html
    // Make the Squiggle have a thickness of 1 and not be interactive
    // Scale the Sqiggle twice as big and center it on the stage
    const points = [[-50.4,11.8,0,0,-30,0,30,0],[26.8,88.7,0,0,-36.7,3.7,36.7,-3.7],[12.2,-42.6,0,0,41.1,-23.5,-41.1,23.5],[82.7,23.9,0,0,-31.4,49.2,31.4,-49.2],[192.9,-73.4,0,0,-65.6,30.4,65.6,-30.4],[199.2,-19.4,0,0,-146.7,-105.1,146.7,105.1],[249.3,2.8,0,0,-5.7,-136.5,5.7,136.5],[164.7,80.7,0,0,-46.5,22.7,46.5,-22.7],[247.7,125.9,0,0,-39.2,5.5,39.2,-5.5],[181.7,27.7,0,0,57.7,17.8,-57.7,-17.8]];
    const fuse = new Squiggle({thickness:1, interactive:false, points:points}).sca(2).center();

    // 3. Make the bomb using the bomb image, scale it to .3, set its alpha to .5 and centerReg it on the stage
    const bomb = frame.asset("bomb.png")
      .sca(.3)
      .alp(.5)
      .centerReg()
  

    // 4. Create a match to light the fuse
    // this will be in a Container called match - do not set the dimensions of the container
    // add a 6x100 Rectangle with a color of tin to the match container
    // expand() the rectangle so that it is easier to drag
    const match = new Container();
    new Rectangle(6,100,tin).addTo(match).expand(); // make it easier to drag

    // 5. Create the fire with an Emitter()
    // a. The particle should be an orange circle with a radius of 5 and an alpha of .6
    // b. Use the random parameter of the Emitter to randomize the scaleX between 1.3 and 1.5
    // c. and the scaleY between 2.3 and 2.5 - this makes the flame taller than it is wide
    // d. Set the width and height of the Emitter to 20 and 40
    // e. Set the interval to 20, the life to 1000, the gravity to -2
    // f. Set the force to between a min of .2 and a max of .4 (using ZIM VEE)
    // g. Set the angle to between a min of -130 and a max of -50 (using ZIM VEE)
    // h. centerReg the Emitter and add it to the match - then move it up 40 pixels

    const fire = new Emitter({
      obj:new Circle(5, orange).alp(.6),
      random:{
        scaleX:{min:1.3, max:1.5},
        scaleY:{min:2.3, max:2.5}
      },
      width:20,
      height:40,
      interval:20,
      life:1000,
      gravity:-2,
      force:{min:.2, max:.4},
      angle:{min:-90-40, max:-90+40}
    })
    .centerReg(match).mov(0,-40);

    // 6. locate the match at the first point of the fuse - use the pointControls array (property of a Squiggle)
    // then move the match down 200
    // set the alpha of the match to 0 and animate in the alpha over 1 second to fade it in
    // set drag on the match with a drag boundary to a ZIM Boundary()
    // the Boundary() should have the match's current location in the x, 100 in the y
    // and no width (so it can't move in the x) and 500 for the height
    match.loc(fuse.pointControls[0])
      .mov(0,200)
      .alp(0)
      .animate({props:{alpha:1}, wait:1000})
      .drag({boundary:new Boundary(match.x,100,0,500), all:true});


    // 7. Make a zim Pen() and store it in pen
    // the pen will have a size of 4, a color of black and no damping
    // centerReg the pen on the stage
    // animate the pen props along the fuse path and orient false
    // wait 100 ms for the pen to be created
    // animate for a time of 10 seconds with a linear ease
    // EVENTUALLY, we will want set startPaused to true so the pen does not animate right away
    // so add this in and test it - comment it out as needed

    const pen = new Pen({damp:false, size:4, color:black}).centerReg().animate({
      props:{path:fuse, orient:false},      
      wait:100,
      time:10000,
      ease:"linear",
      startPaused:true,
    })

    // 8. Create an emitter for the spark 
    // The emitter will use a shape object {type:shape} for its obj property
    // the shape object will also have a stroke (s) of either blue or white (use ZIM VEE)
    // and a strokeSize (ss) of 3
    // The emitter will have an interval of 50, a num of 10, a life of 200 and a decayTime of 200
    // EVENTUALLY, the emitter will have its startPaused parameter set to true - you can comment this to test, etc.
    // centerReg the emitter (important)
    const spark = new Emitter({
      obj:{type:"shape", s:[blue, white], ss:3},
      interval:50,
      num:10,
      life:200,
      decayTime:200,
      startPaused:true
    })
    .centerReg()

    // 9. animate the emitter along the fuse squiggle with the SAME animate parameters as the Pen
    // and set the startPaused parameter to true - and comment as needed in testing, etc.
    // add a call parameter that calls a function that removes the spart and the fuse from the stage
    // In this function also call the makeExplosion() function to go to the next step
    // This way, the explosion will happen when the spark animation is done!
    .animate({
      props:{path:fuse, orient:false},      
      wait:100,
      time:10000,
      ease:"linear",
      startPaused:true,
      call:function () {
        spark.removeFrom();
        fuse.removeFrom();
        makeExplosion();
      }
    });


    // 10. Add a pressmove event to the match and collect the event object (e)
    // Inside the pressmove function, do a hitTestBounds for the following:
    // check if the first circle control point of the fuse squiggle is hitting the fire
    // use the pointCircles array property of the Squiggle - get the first element of the array
    // If these are hitting then do the following:
    // a. run the pen animation - use pauseAnimate(false)
    // b. run the spark animation
    // c. run the spark emitter - also use pauseEmitter(false)
    // d. animate the alpha of the match to 0 in 500 ms
    // e. animate the alpha of the label to 0 in 4000 ms - slow fade
    // f. assign the playing of the fuse sound to the variable fuseSound (do not use var)
    // adjust the sound with a sound object literal inside the play() method
    // make the sound be at a volume of .3 and a loop of -1 (sorry - that is CreateJS's way)
    // g. you have probably not seen this - but remove the event by using e.remove();
    // this will make it so we do not repeatedly do these things as the match continues to hit the fuse

    match.on("pressmove", function (e) {
      if (fuse.pointCircles[0].hitTestBounds(fire)) {
        pen.pauseAnimate(false);
        spark.pauseAnimate(false);
        spark.pauseEmitter(false);
        match.animate({alpha:0}, 500);
        label.animate({alpha:0}, 4000);
        bomb.animate({props:{alpha:1}, time:2000, wait:8000});
        fuseSound = frame.asset("fuse.mp3").play({volume:.3, loop:-1});
        e.remove();
      }
    });

    function makeExplosion() {

      // 11. Create the explosion Emitter and store it in an explosion variable (use var this time!)
      // set the obj to either a Rectangle 25x25 or a Circle with radius 15 (use ZIM VEE)
      // make the num 10 and a force of 10
      // randomize the following in the random parameter:
      // the rotation between a min of 0 and max of 360
      // the color to be blue or pink randomly
      // the regX to be a min of -50 and max of 50
      // the regY to be a min of -50 and max of 50
      // These make the particles start spread out over the bomb
      // pause the emitter with startPaused true
      var explosion = new Emitter({
        obj:[new Rectangle(25,25), new Circle(15)],
        num:10,
        force:10,
        random:{
          rotation:{min:0, max:360},
          color:[blue, pink],
          regX:{min:-50, max:50},
          regY:{min:-50, max:50},
        },
        startPaused:true
      }).centerReg();

      // 12. On the next line make the emitter spurt() with a time of 500 ms
      // Play the boom sound
      // stop() the fuse sound ** comment this out if not running the other parts
      // animate the bomb to an alpha of 0 in 100 ms ** comment this out if not running the other parts
      explosion.spurt({time:500});
      frame.asset("boom.mp3").play();
      fuseSound.stop();
      bomb.animate({alpha:0}, 100);


      // 13. centerReg the logo asset on the stage
      // set its alpha to 0, its scale to 0
      // set the cur() to see a pointer
      // and expand() it to be clickable between the letters
      frame.asset("logo.png")
        .centerReg() // make it scale from the middle
        .alp(0)
        .sca(0)
        .cur()
        .expand() // make it so we can click between the letters

      // 14. Animate the logo to props of alpha 1 and scale 1
      // wait 800 ms for explosion to almost finish
      // animate for 2300 ms with an elasticOut ease
      // once the animation has waited, call a function (use waitedCall)
      // and in this function play the warble sound at a volume of .8
      // When we click on the logo make it zgo() to https://zimjs.com in a new window
      // YOU ARE DONE!
        .animate({
          props:{alpha:1, scale:1},
          wait:800,
          time:2300,
          ease:"elasticOut",
          waitedCall:function () { // play the sound once we have waited
            frame.asset("warble.mp3").play({volume:.8});
          }
        })
        .tap(function () {zgo("https://zimjs.com", "_blank");});

 
    }
  
    // 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=Rectangle
    // https://zimjs.com/docs.html?item=Squiggle
    // https://zimjs.com/docs.html?item=Label
    // https://zimjs.com/docs.html?item=Waiter
    // https://zimjs.com/docs.html?item=tap
    // https://zimjs.com/docs.html?item=drag
    // https://zimjs.com/docs.html?item=hitTestBounds
    // https://zimjs.com/docs.html?item=animate
    // https://zimjs.com/docs.html?item=pauseAnimate
    // https://zimjs.com/docs.html?item=cur
    // https://zimjs.com/docs.html?item=pos
    // https://zimjs.com/docs.html?item=mov
    // 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=removeFrom
    // https://zimjs.com/docs.html?item=centerReg
    // https://zimjs.com/docs.html?item=center
    // https://zimjs.com/docs.html?item=expand
    // https://zimjs.com/docs.html?item=Emitter
    // https://zimjs.com/docs.html?item=Boundary
    // https://zimjs.com/docs.html?item=zog
    // https://zimjs.com/docs.html?item=zgo
  
    // FOOTER
    // call remote script to make ZIM Foundation for Creative Coding icon
    createIcon(frame); 
    
    stage.update(); // this is needed to show any changes

}); // end of ready