"use strict";

CSSPlugin.defaultForce3D = false;

// Button shine animation
var hoverAnim = TweenLite.fromTo(
  "#ctaBtn", 1,
  {backgroundPosition:"-120px 0px"},
  {backgroundPosition:"120px 0px", paused:true}
  );


//================= Main banner animation =================
var tl = new TimelineLite({ paused: true });

tl
.set("#content", {visibility: "visible"})
.from("#logoYellow", 0.5, {autoAlpha:0})


//Start
.from("#introcopy", .5, {autoAlpha:0})
.from("#box", .5, {y:200, ease: Back.easeOut})


.addLabel("endIntro", "+=2")
.to("#introcopy, #box", .5, {autoAlpha:0}, "endIntro")
.from("#intro", 1, {autoAlpha:0}, "endIntro+=.5")

.addLabel("circles", "+=1")
.set("#circles", {clipPath:"none"}, "circles")
.to(".innerCircle", 0.75, {scale:2, transformOrigin: "center center"}, "circles")
.to("#person", 0.75, {autoAlpha:0}, "circles")
.from("#yellowBG", 0.75, {autoAlpha:0}, "circles+=.15")
.to("#yellowOrb", 0.75, {autoAlpha:0}, "circles+=.35")


//End frame
.addLabel("endFrame", "+=.2")
.to("#copy1", 1, {autoAlpha:0}, "endFrame")
.from("#end", 1, {autoAlpha:0}, "endFrame")
.from("#txt-holder, .footer", 0.75, {autoAlpha:0, ease: Power2.easeInOut, onComplete: function() {   
  //allows button rollover animation after the button has fully appeared
  document.getElementById("clickthrough-button").onmouseenter = function(){hoverAnimPlay()};
}}, "-=0.75")
.add(function(){hoverAnimPlay()},"+=0.35");


//======================= Functions =======================

//This starts the banner animation after all images have loaded
window.onload = function(){
tl.play();
//tl.pause("endIntro");
}

//Plays button shine animation unless it's already playing
function hoverAnimPlay(){
  if(!hoverAnim.isActive()){
    hoverAnim.restart();
  }
};

