/** 
 * Probably a little overkill on the options and variables but had to set this up 
 * to run in an Electron app with a bunch of user controls.
**/

console.clear();
var textArea = $("#content"),
    foreignObj = document.getElementById('fo-ff'),
    tl = new TimelineMax();

function followedPhrase() {
  
  var S = {
    content: textArea.val(),
    fontColor: 'white',
    fontSize: 64,
    streamColors: ['#f22e06','#f84e13','#fc984c','#f7dc75'],
    staggerDelay: $('#stagger-delay').val() == "" ? 0.1 : parseFloat($('#stagger-delay').val()),
    inSpeed: $('#in-speed').val() == "" ? 0.75 : parseFloat($('#in-speed').val()),
    inEase: $('#ff-in-ease').val(),
    outSpeed: $('#out-speed').val() == "" ? 0.75 : parseFloat($('#out-speed').val()),
    outEase: $('#ff-out-ease').val(),
    dir: $('select#ff-direction').val(),
    duration: $('#duration').val() == "" ? 4 : parseFloat($('#duration').val()),
    inScale: $('select#ff-in-scale').val(),
    outScale: $('select#ff-out-scale').val()
  }
  
  // will contain elements to be animated as an array in GSAP stagger animations
  var copies = [],
      blurFilters = [],
      offsetFilters = [];
  
  // create the main container which will be a flex container
  // probably not gonna look right in FireFox but my Electron app only uses Chromium. 
  // Might need to add position parameters like top: 0, left: 0 to the .copy-box & .msg-box elements
  var container = document.createElement('div');
  container.className = 'container';
  container.id = 'ff-container';
  foreignObj.appendChild(container);
  
  var stageWd = 900,
      stageHt = 320,
      outX, outY;
  
  // create the main phrase that won't have blur filter applied - will sit on top of its copies
  var msg = document.createElement('div');
  msg.className = "msg-box bungee";
  msg.innerHTML = S.content;
  msg.style.color = S.fontColor;
  msg.style.fontSize = S.fontSize+'px';
  msg.style.zIndex = 10;
  container.append(msg);
  
  var WD = $(msg).width(), 
      HT = $(msg).height(), 
      inX, outX, inY, outY, inD, outD, offIn, offOut, scaleIn, scaleOut;
  
  // determine the scale animation settings in case one was set in either of the scaling select menus
  switch( S.inScale ) {
    case "up":
      scaleIn = {from: 0, to: 1};
    break;
    case "down":
      scaleIn = {from: 20, to: 1};
    break;
    case "none":
      scaleIn = {from: 1, to: 1};
    break;
  }
  switch( S.outScale ) {
    case "up":
      scaleOut = {from: 1, to: 20};
    break;
    case "down":
      scaleOut = {from: 1, to: 0};
    break;
    case "none":
      scaleOut = {from: 1, to: 1};
    break;
  }
  
  // determine the in and out settings based on setting from the Animation direction select menu
  switch(S.dir) {
    case 'tb':
      // these are for the elements themselves
      inX = 0;
      outX = 0;
      inY = ((stageHt/2)+(HT))*-1;
      outY = (stageHt/2)+HT;
      // these are for the blur filter and offset filter stagger animations
      inD = {from: '20,150', to: '0,0'};
      outD = {from: '0,10', to: '10,150'};
      offIn = {dx: {from: '0', to: '0'}, dy: {from: '-150', to: '0'}};
      offOut = {dx: {from: '0', to: '0'}, dy: {from: '0', to: '-150'}};
    break;
    case 'bt':
      inX = 0;
      outX = 0;
      inY = (stageHt/2)+HT;
      outY = ((stageHt/2)+(HT))*-1;
      inD = {from: '20,150', to: '0,0'};
      outD = {from: '0,10', to: '10,150'};
      offIn = {dx: {from: '0', to: '0'}, dy: {from: '150', to: '0'}};
      offOut = {dx: {from: '0', to: '0'}, dy: {from: '0', to: '150'}};
    break;
    case 'lr':
      inX = ((stageWd/2)+(WD))*-1,
      outX = (stageWd/2)+WD;
      inY = 0;
      outY = 0;
      inD = {from: '150,30', to: '0,0'};
      outD = {from: '10,0', to: '150,10'};
      offIn = {dx: {from: '-100', to: '0'}, dy: {from: '0', to: '0'}};
      offOut = {dx: {from: '0', to: '-100'}, dy: {from: '0', to: '0'}};
    break;
    case 'rl':
      inX = (stageWd/2)+WD;
      outX = ((stageWd/2)+(WD))*-1;
      inY = 0;
      outY = 0;
      inD = {from: '150,30', to: '0,0'};
      outD = {from: '10,0', to: '150,10'};
      offIn = {dx: {from: '100', to: '0'}, dy: {from: '0', to: '0'}};
      offOut = {dx: {from: '0', to: '100'}, dy: {from: '0', to: '0'}};
    break;
    case 'appear':
      inX = 0;
      outX = 0;
      inY = 0;
      outY = 0;
      inD = {from: '150,30', to: '0,0'};
      outD = {from: '10,0', to: '150,10'};
      offIn = {dx: {from: '100', to: '0'}, dy: {from: '0', to: '0'}};
      offOut = {dx: {from: '0', to: '100'}, dy: {from: '0', to: '0'}};
    break;
  }
  
  // set the initial position of the main element
  tl.set(msg,{autoAlpha: 0, x: inX, y: inY},0);

  // loop through the number of colors and create copies of the main element and blur filters for each
  for( var i = 0; i < S.streamColors.length; i++ ) {
    var color = S.streamColors[i];
    var copy = document.createElement('div');
    copy.setAttribute('id',`copy-${i}`);
    copy.style.color = color;
    copy.style.fontSize = S.fontSize+'px';
    copy.className = `copy-box bungee motion-blur${i}`;
    copy.innerHTML = S.content;
    container.appendChild(copy);
    tl.set(copy,{autoAlpha: 0, x: inX, y: inY},0);
    copies.push(copy);
    var filterObj = motionFilter(`ffBlur${i}`,foreignObj);
    blurFilters.push(filterObj.blur);
    offsetFilters.push(filterObj.offset);
  } 
  
  // put the main element and the copies together in one array
  var temp = [msg];
  var all = temp.concat(copies);
  
  // create the animations
  tl.staggerFromTo(blurFilters,S.inSpeed,{attr:{stdDeviation: inD.from}},{attr:{stdDeviation: inD.to, ease: S.inEase}}, S.staggerDelay, 0)
    .staggerFromTo(offsetFilters,S.inSpeed,{attr:{dx: offIn.dx.from, dy: offIn.dy.from}},{attr:{dx: offIn.dx.to, dy: offIn.dy.to, ease: S.inEase}},S.staggerDelay,0)
    .staggerFromTo(all,S.inSpeed,{scale: scaleIn.from},{scale: scaleIn.to, ease: S.inEase}, S.staggerDelay, 0)
    .staggerTo(all,S.inSpeed,{autoAlpha: 1, x: 0, y: 0, ease: S.inEase}, S.staggerDelay, 0);
  
  tl.staggerFromTo(all,S.outSpeed,{scale: scaleOut.from},{scale: scaleOut.to, ease: S.outEase}, S.staggerDelay, S.duration)
    .staggerTo(all,S.outSpeed,{autoAlpha: 0, x: outX, y: outY, ease: S.outEase}, S.staggerDelay, S.duration)
    .staggerFromTo(offsetFilters,S.outSpeed,{attr:{dx: offOut.dx.from, dy: offOut.dy.from}},{attr:{dx: offOut.dx.to, dy: offOut.dy.to, ease: S.outEase}}, S.staggerDelay, S.duration)
    .staggerFromTo(blurFilters,S.outSpeed,{attr:{stdDeviation: outD.from}},{attr:{stdDeviation: outD.to, ease: S.outEase}}, S.staggerDelay, S.duration);
}

followedPhrase();

// creates a filter element with an feGaussianBlur and feOffSet filter for each word
function motionFilter(id,fo) {
  var filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
  filter.setAttribute('id',id);
  filter.setAttribute('filterUnits','userSpaceOnUse');
  var blur = document.createElementNS("http://www.w3.org/2000/svg", "feGaussianBlur");
  blur.setAttribute('in','SourceGraphic');
  blur.setAttribute('stdDeviation','0,0');
  var offset = document.createElementNS("http://www.w3.org/2000/svg", "feOffset");
  offset.setAttribute('dx','0');
  offset.setAttribute('dy','0');
  filter.appendChild(blur);
  filter.appendChild(offset);
  fo.appendChild(filter);
  // return the blur and offset filter objects to be added to the arrays used in the stagger animations
  return {blur: blur, offset: offset};
}


// control button listeners
$('#play').on("click", function(){
  tl.seek(0).play();
  $('#pause').text("PAUSE");
});

$('#reset').on("click", function(){
  tl.seek(0).pause();
});

$('#process').on("click", function(){
  tl.seek(0).clear();
  foreignObj.innerHTML = "";
  followedPhrase();
});

$('#pause').on("click", function(){
  if(tl.paused()) {
    tl.play();
    $(this).text("PAUSE");
  } else {
    tl.pause();
    $(this).text("UNPAUSE");
  }
});