var container = $('#type-container'),
    _sentenceEndExp = /(\.|\?|!)$/g, //regular expression to sense punctuation that indicates the end of a sentence so that we can adjust timing accordingly
    sentences = "",
    stage = $('stage'),
    fo = stage.find('foreignObject'),
    tl = new TimelineMax({paused: true});

// the animation
function machineGun(text) {
  var words = text.split(" "),
      time = 0,
      word, wordCount, element, duration, isSentenceEnd, i;
  
  wordCount = words.length;
  
  for(i = 0; i < wordCount; i++){
    word = words[i];
    isSentenceEnd = _sentenceEndExp.test(word);
    element = $("<h3>" + word + "</h3>").appendTo(container);
    // element = document.createElementNS("http://www.w3.org/1999/xhtml","h3");
    // element.innerHTML = word;
    // container.appendChild(element);
    duration = Math.max(0.5, word.length * 0.08); //longer words take longer to read, so adjust timing. Minimum of 0.5 seconds.
    if (isSentenceEnd) {
      duration += 0.6; //if it's the last word in a sentence, drag out the timing a bit for a dramatic pause.
    }
    //set opacity and scale to 0 initially. We set z to 0.01 just to kick in 3D rendering in the browser which makes things render a bit more smoothly.
    TweenLite.set(element, {autoAlpha:0, scale:0, z:0.01});
    //the SlowMo ease is like an easeOutIn but it's configurable in terms of strength and how long the slope is linear. See https://www.greensock.com/v12/#slowmo and https://api.greensock.com/js/com/greensock/easing/SlowMo.html
    tl.to(element, duration, {scale:1.2,  ease:SlowMo.ease.config(0.25, 0.9)}, time)
      //notice the 3rd parameter of the SlowMo config is true in the following tween - that causes it to yoyo, meaning opacity (autoAlpha) will go up to 1 during the tween, and then back down to 0 at the end. 
		 	.to(element, duration, {autoAlpha:1, ease:SlowMo.ease.config(0.25, 0.9, true)}, time);
    time += duration - 0.05;
    if (isSentenceEnd) {
      time += 0.6; //at the end of a sentence, add a pause for dramatic effect.
    }
  }
}

// utility stuff
function clearContent() {
  $('#test-blobs').empty();
  var containerContents = document.querySelectorAll('#type-container h3');
  for ( let content of containerContents ) {
    container[0].removeChild(content);
  }
}

document.getElementById("process").onclick = function() {
  clearContent();
  sentences = $('#copy').val();
  machineGun(sentences);
}

document.getElementById("play").onclick = function() {
  tl.seek(0).play();
}

document.getElementById("pause").onclick = function() {
  tl.pause();
}

document.getElementById("process-images").onclick = function() {
  processImages();
}

$(function(){
  console.clear();
  sentences = $('#copy').val();
  machineGun(sentences);
});

// process images
function processImages() {
  $('#test-blobs').empty();
  var FPS = 60;
  TweenMax.ticker.fps(FPS);
  
  var duration  = tl.duration(),
      frames    = Math.ceil(duration / 1 * FPS),
      current   = 0,
      masterSVG = document.getElementById('stage');
  
  function buildSvgImageUrl(svg) {
    var b64 = window.btoa(svg);
    return "data:image/svg+xml;base64," + b64;
  }
  
  processImage();
  
  function processImage() {

    var canvas = document.createElement("canvas");
    canvas.width = 800;
    canvas.height = 300;

    var ctx = canvas.getContext("2d");

    tl.progress(current++ / frames);

    var xml  = new XMLSerializer().serializeToString(masterSVG);
    var img  = new Image();

    img.crossOrigin = "Anonymous";

    img.onload = function() {

      ctx.drawImage(img, 0, 0);

      var url = canvas.toDataURL("image/png");

      var png = new Image();
      png.src = url;
      png.crossOrigin = "Anonymous";
      
      $('#test-blobs').append(png);

      URL.revokeObjectURL(url);
      
      if (current <= frames) {
        processImage();
      }
    };

    // img.src = URL.createObjectURL(blob);
    img.src = buildSvgImageUrl(xml);

    img.onerror = function(error) {
      console.log(error);
      processImage();
    }
  }
}

/* learn more about the GreenSock Animation Platfrom (GSAP) for JS

https://www.greensock.com/gsap-js/

watch a quick video on how TimelineLite allows you to sequence animations like a pro
https://www.greensock.com/sequence-video/

*/

//Check out this enhanced version that intelligently groups words together: https://codepen.io/GreenSock/pen/sxdfe