var banner = document.getElementById('banner');
var tl1  = new TimelineMax({repeat:1, repeatDelay:2.5});
var tl2  = new TimelineMax({repeat:1, repeatDelay:2.5});
var clicktag = document.getElementById('clicktag');
var ctaAnimation = false;
// ---- Animation Timelines ------ 
tl1.set("#banner", { visibility: "visible" }) 
     .add(function(){ctaAnimation = false;})   

/*frame one*/
.add("frame1")
.to(".bottom-up", .4, {y:-30, rotation:0.02, ease:Sine.easeOut}, "frame1")
.to(".bottom", .4, {y:-45, rotation:0.02, ease:Sine.easeInOut}, "frame1")
.from(".logo", .4, {alpha:0, rotation:0.02, ease:Sine.easeOut}, "frame1+=.4")
.from(".web", .4, {alpha:0, rotation:0.02, ease:Sine.easeOut}, "frame1+=.4")
.staggerFrom(".txt1a, .txt1b,.txt1c", .4, {alpha:0, y:10, rotation:0.02, ease:Sine.easeOut}, .2, "frame1+=.4")


.add("frame2", "frame1+=3")
.staggerTo(".txt1a, .txt1b,.txt1c", .4, {alpha:0, y:-10, rotation:0.02, ease:Sine.easeOut}, .1, "frame2")
.staggerFrom(".txt2a, .txt2b,.txt2c", .4, {alpha:0, y:10, rotation:0.02, ease:Sine.easeOut}, .2, "frame2+=.4")


/*frame three*/
.add("frame3", "frame2+=3")  
.staggerTo(".txt2a, .txt2b,.txt2c", .4, {alpha:0, y:-10, rotation:0.02, ease:Sine.easeOut}, .1, "frame3")
.to(".bottom-up", .3, {y:-360, rotation:0.02, ease:Sine.easeInOut}, "frame3")  
.staggerFrom(".txt3a, .txt3b, .txt3c, .txt3d, .txt3e", .4, {alpha:0, y:10, rotation:0.02, ease:Sine.easeOut}, .2, "frame3+=.5")
.from(".txt4", .4, {alpha:0,y:10, rotation:0.02, ease:Sine.easeOut}, "frame3+=1")
.from(".cta", .4, {alpha:0, rotation:0.02, ease:Sine.easeOut, onComplete:hoverInOut},"frame3+=1.2")
.from('#replay', 0.2, {x:-50}, "frame3+=1")
.to('#replay', 0.4, {alpha:1, rotation: -360})
;


 tl2.from(".bg", 10, {y:5, scale:1.5, rotation:0.02, ease:Sine.easeOut});

//after window load...
window.onload = function(){
    tl1.play();
        tl2.play();
}

function hoverInOut(){
  ctaAnimation = true;

}

clicktag.addEventListener("mouseover", function(){
  if(ctaAnimation)
  
   TweenMax.to('.cta', .2, {scale: 1.1, rotation: 0.02, ease:Sine.easeInOut}, 'over');
	TweenMax.to('.cta', .2, {scale: 1, rotation: 0.02, ease:Sine.easeInOut, delay:0.2});

})

replay.addEventListener("click", function(){
  tl1.restart();
      tl2.restart();
})
var currentDuration = tl1.totalDuration();
console.log(currentDuration);