(function () {
  
  const yAmount = "+=1920",
        xAmount = "+=0"

console.clear;
  
const scriptUrls = [
  "https://ext-assets.streamlabs.com/users/140067/gsap2-1-2.js",
  "https://ext-assets.streamlabs.com/users/140067/SplitText-2-1-2.min.js"
];
  
  
function loadMedia (media) {
  return new Promise((resolve, reject) => {

  media.oncanplay = resolve
  media.onerror = reject
})}

function loadScript (url) {
  return new Promise(function (resolve, reject) {
    const script = document.createElement('script')
    script.onload = resolve
    script.onerror = reject

    script.src = url

    document.head.appendChild(script)
  })
}
  
if (!window.jQuery) {
  scriptUrls.push("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js");
}
Promise.all([
  ...scriptUrls.map(src => loadScript(src)),
  // ...mediaElements.map(media => loadMedia(media))
])
.then(() => animate())

function wrapText(wrapSelector){
  var splitText = new SplitText(wrapSelector, {type: 'chars'});
  return splitText.chars;
}
  
function wrapLines(wrapSelector){
  var splitText = new SplitText(wrapSelector, {type: 'lines'});
  return splitText.lines;
}

function checkTextWidth(element, measure, width, padding){
  
    let elementWidth = $(measure).width();

    if(elementWidth > width){
      let transformAmount = (width - padding)/elementWidth;
      $(element).css('transform', 'scale(' + transformAmount + ')');
    }
} 
  
let animate = function() { 
    
  let messageLines = wrapLines("#alert-user-message");
  
  checkTextWidth("#botLeftTextHolder", "#botLeftTextHolder .solid", $("#botLeft").outerWidth(), 20);
  checkTextWidth("#botRightTextHolder", "#botRightTextHolder .solid", $("#botRight").outerWidth(), 20);
  
  // checkTextWidth("#mainTextHolder span", $("#mainTextHolder").innerWidth());
  
  function blinkBox() {
    TweenMax.to("#boxBackground", 0.01, {opacity: 0, yoyo: true, repeatDelay: .1, repeat: 5})
    TweenMax.to("#box .solid", 0.01, {opacity: 0, yoyo: true, repeatDelay: .1, repeat: 5})
    TweenMax.to("#box .outline", 0.01, {opacity: 1, yoyo: true, repeatDelay: .1, repeat: 5})
  }
  
  function blinkTop() {
    TweenMax.set("#top .outline", {opacity: 1});
    TweenMax.set("#top .solid", {opacity: 0});
    TweenMax.to("#top .outline", 0.02, {opacity: 1});
    TweenMax.to("#top .solid", 0.02, {opacity: 1, yoyo: true, repeatDelay: .1, repeat: 2, onComplete: hideTopOut});
    function hideTopOut(){
      TweenMax.set("#top .outline", {opacity: 0});
    }
  }
  
  function blinkBot() {
    TweenMax.set("#botLeft .outline", {opacity: 1});
    TweenMax.set("#botLeft .solid", {opacity: 0});
    TweenMax.to("#botLeft .outline", {opacity: 1});
    TweenMax.to("#botLeft .solid", 0.05, {delay: .5, opacity: 1, yoyo: true, repeatDelay: .1, repeat: 2, onComplete: hideBotOut});
    function hideBotOut(){
      TweenMax.to("#botLeft .outline", 0.05, {opacity: 0});
    }
  }

  tl = new TimelineMax();
  tl.set("#alertHolder", {autoAlpha: 1, delay: .2})
  
    .from("#boxBackground", .5, {y: yAmount, x: xAmount, ease: Power4.easeOut})
    .from("#botRightTextHolder .solid", .2, {opacity: 0}, "-=.3")
    .to("#botRightTextHolder .solid", .1, {delay: .2})
  
    .add( function(){
      blinkBox();
    })
  
    .from("#botRight", .4, {left: "50%", x: "-50%", delay: 1.2, ease: Power2.easeOut})
    
    .from("#line", .4, {scaleX: 0, ease: Power2.easeOut}, "-=.4")
    .add( function(){
      blinkBot();
    })
    .add( function(){
      blinkTop();
    })
    .from("#innerLeft", .4, {x: "110%", ease: Power1.easeOut}, "-=.2")
    .from("#innerTop", .3, {y: "110%", ease: Power1.easeOut}, "-=.2")
    
    .to("#innerTop", 0, {delay: .8})
  
    .staggerFrom(messageLines, 0.4, {
      y: 3,
      autoAlpha:0,
      stagger: {
        ease: Power4.easeNone,
        amount: 0.3
      }
    }, null)
    .add( function(){
      blinkTop();
    })
  
    .to("#innerLeft", 0, {delay: .5})
    .add( function(){
      blinkBot();
    })

  
} // end of animate

}());  // end of function wrapper