/*
 * This is a demonstration of the Web Animations API. 
 * It uses the latest version of web-animations-next.min.js 
 * (v 2.1.2 at the time of writing). Feel free to fork and use this
 * as a starting point for one of your own projects
 */

window.onload = function() {

  var box = document.getElementById("box");
  
  /* 
   * We'll start by moving the box to the middle of the page.
   * First, let's get the coordinates
   */
  var x = ((window.innerWidth/2) - (box.offsetWidth/4));
  var y = ((window.innerHeight/2) - (box.offsetHeight));
    
  /*
   * To animate the box, we'll need to create a KeyframeEffect().
   * This allows us to animate between a set of specific coordinates,
   * or key frames. A KeyframeEffect takes 3 arguments:
   *
   *    element - an object to animate
   *
   *    keyframes - An array of keyframe values to animate between. Keyframes
   *        are objects that contain the properties you want to
   *        animate as keys, and the values you want to animate between
   *        as the values. In this case, we are changing the marginLeft
   *        from 0 to the centered width, and the marginTop from 0 to
   *        the centered height.
   *
   *    AnimationEffectTiming - The AnimationEffectTiming object controls
   *        the way the properties are animated. In this case, we want the
   *        duration to last a total of 1 second (1000ms). We want it to
   *        stay put after it finishes animating, so we'll set the "fill"
   *        property to "forwards"
   */
  var animCenter = new KeyframeEffect(
    box, 
    [
      {marginLeft:0, marginTop:0},
      {marginLeft:x, marginTop:y}
    ], 
    {duration:1000, fill:"forwards"}
  );
  
  /*
   * At this point, we've only defined the animation. Now we have to play it!
   * To do this, we simply reference the document's timeline and tell it 
   * to play our animation
   */
  document.timeline.play(animCenter);
  

}