@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
html,body{
	padding: 0;
	margin: 0;
	font-family: "Roboto", sans-serif;
	color: #FFF;
}


#name{
	text-align: center;
}

#alertHolder{
	opacity: 0; /* set to 0 */
}

#name{
	/*font-size: 52px;*/
	position: absolute;
	top: 381px;
	left: 50%;
	transform: translateX(-50%);
}




$( document ).ready(function() {

function loaded(){
  var canvas = document.getElementById('name');
  var context = canvas.getContext('2d');

  var xPosition = (canvas.width/2);
  var yPosition = (canvas.height/2);

  var imageObjShadow = new Image();
  var imageObjWithShadow = new Image();

  function drawText(){
    context.font = "26px Roboto";
    context.fillStyle = "{bottomColor}";
    context.textAlign = "center";
    context.textBaseline = "middle";

    /* DELETE THIS BLOCK TO REMOVE DROP SHADOW */
    context.shadowColor = 'rgba(0,0,0,.5)';
		context.shadowBlur = 8;
    /* DELETE THIS BLOCK TO REMOVE DROP SHADOW */

    context.fillText("{bottomText}", xPosition, yPosition);
  }




  function getShadowsImg(){
    context.save();
    context.font = "bold 52px Titillium Web";
    context.textAlign = "center";
    context.textBaseline = "middle";
    context.globalCompositeOperation = "destination-over";
    context.clearRect(0,0,canvas.width,canvas.height);
    context.fillStyle = "#a3004a";
    context.fillText("{bottomText}", xPosition-2, yPosition);
    context.fillStyle = "#09c4de";
    context.fillText("{bottomText}", xPosition+2, yPosition);
    context.restore();

    imageDataShadows = canvas.toDataURL("image/png", 1.0);
  }

  getShadowsImg();
  context.clearRect(0,0,canvas.width,canvas.height);
  drawText();

}

function run() {
  var video = document.getElementById('vid');
  video.addEventListener('loadeddata', function() {
    animate();
  }, false);
  video.load();
}

if (!window.scriptLoaded) {
  jQuery.getScript("https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js")
    .done(function() {
      window.scriptLoaded = true;
      loaded();
      run();
    });
} else {
    run();
    loaded();
}

var animate = function() {
    var tl = new TimelineMax();
  tl.timeScale(1);

  tl.to( "#alertHolder", 0, {onComplete: playVid, opacity: 1, delay: 0});
  tl.from( "#infoHolder", .2, {delay: 1.8, opacity: 0});
  tl.from( "#infoHolder", .2, {delay: 7.2, opacity: 0});

    function playVid() {
      var vid = document.getElementById("vid");
      vid.volume = {vidVolume} * .01;
      vid.play();
    }
}

});