console.clear();
var tl = new TimelineMax(),
    resetBtn = $('button#reset'),
    playBtn = $('button#play'),
    pauseBtn = $('button#pause'),
    rewindBtn = $('button#rewind'),
    main = document.getElementById('main'),
    content = $('#container textarea').val(),
    direction = $('#direction option:selected').val(),
    tl = new TimelineMax(),
    repeats,
    speed,
    space,
    fontSize,
    topPad,
    bottomPad,
    stageWD = 720,
    stageHT = 300,
    pNews = [];

function newsTicker() {
  main.innerHTML = ""; // reset the container
  setVals(); // snag the settings from the form elements
  // create the main ticker container
  var ticker = document.createElement('div');
  ticker.setAttribute('id','ticker');
  // create the scroller container
  var scroller = document.createElement('div');
  scroller.setAttribute('id','scroller');
  
  var pNewsSettings, scrollerSettings;
  ticker.setAttribute('style',`font-size: ${fontSize}px; font-family: alphaEcho; color: white; overflow: visible; position: absolute;`);
  scroller.setAttribute('style','position: relative;');
  // a few styling diffs for horizontal vs vertical crawlers
  if( direction == "rl" || direction == "lr" ) {
    ticker.style.bottom = 0;
    ticker.style.whiteSpace = "nowrap";
    ticker.style.background = "blue";
    ticker.style.height = `${fontSize}px`;
    ticker.style.padding = `${topPad}px 0 ${bottomPad}px`;
    scroller.style.whiteSpace = 'nowrap';
    scroller.style.height = `${fontSize}px`;
    pNewsSettings = `position: relative; display: inline-block; white-space: nowrap;`;
  } else {
    ticker.style.width = `${stageWD}px`;
    ticker.style.height = `${stageHT}px`;
    ticker.style.background = 'transparent';
    ticker.style.padding = `${topPad}px 0 ${bottomPad}px;`;
    pNewsSettings = `position: relative; display: block; white-space: pre; text-align: center;`;
  }
  // set the starting position and the margin between repeats depending on which direction the scroller will animate
  switch( direction ) {
    case "rl":
      ticker.style.left = 0;
      pNewsMargin = `0 ${space}px 0 0`;
      scrollerSettings = {fromX: stageWD, multiplier: -1 }
    break;
    case "lr":
      ticker.style.right = 0;
      pNewsMargin = `0 0 0 ${space}px`;
      scrollerSettings = {fromX: stageWD*-1, multiplier: 1 }
    break;
    case "tb":
      pNewsMargin = `${space}px 0 0 0`;
      scrollerSettings = {fromY: stageHT*-1, multiplier: 1 }
    break;
    case "bt":
      pNewsMargin = `0 0 ${space}px 0`;
      scrollerSettings = {fromY: stageHT, multiplier: -1 }
    break;
  }
  
  // create a span to contain the text for each repeat
  for( var i = 0; i < repeats; i++ ) {
    pNews[i] = document.createElement('span');
    pNews[i].setAttribute('id',`scroller${i}`);
    pNews[i].setAttribute('style', pNewsSettings);
    pNews[i].style.margin = pNewsMargin;
    pNews[i].innerHTML = content;
    scroller.appendChild(pNews[i]);
  }
  // append all the created elements
  ticker.appendChild(scroller);
  main.appendChild(ticker);
  // get the height and width of the scroller container
  var sWidth = $(scroller).width();
  var sHeight = $(scroller).height();
  // create the animation depending on animation direction
  if( direction == "lr" || direction == "rl" ) {
    tl.fromTo(scroller, speed*repeats, {x: scrollerSettings.fromX}, {rotation: 0.01, force3D: true, x: (sWidth+stageWD)*scrollerSettings.multiplier, ease:Linear.easeNone});
  } else {
    tl.fromTo(scroller, speed*repeats, {y: scrollerSettings.fromY}, {rotation: 0.01, force3D: true, y: (sHeight+stageHT)*scrollerSettings.multiplier, ease:Linear.easeNone});
  }
  // hide the container after the animation
  tl.to(ticker,0.1,{autoAlpha: 0});
}

function setVals() {
  content = $('#container textarea').val();
  direction = $('#direction option:selected').val();
  repeats = parseInt($('#repeats').val());
  speed = parseFloat($('#speed').val());
  space = parseInt($('#space').val());
  fontSize = parseInt($('#font-size').val());
  topPad = parseInt($('#top-pad').val());
  bottomPad = parseInt($('#bottom-pad').val());
}

newsTicker();

pauseBtn.on("click", function(){
  tl.pause();
});

rewindBtn.on("click", function(){
  tl.pause().seek(0);
});

playBtn.on("click", function(){
  if( tl.duration() > 0 ) {
    tl.play();
  } else {
    tl.seek(0);
  }
});

resetBtn.on("click", function(){
  tl.pause().clear();
  resetChars();
  newsTicker();
});

function resetChars() {
  main.innerHTML = "";
}