'use strict';
console.clear();
var toggle = 0;
function _classCallCheck(t, e) {
  if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
}

// create main timeline
var masterTl = new TimelineMax({paused:true, onComplete:onComplete});

// create a function returning first timeline
function firstTl() {
  var tl = new TimelineMax()
  	
  return tl;
}

// create a function returning second timeline
function secondTl() {
  var tl = new TimelineMax()
  	.fromTo("#bg-color", 1, {height: 0, autoAlpha: 0}, {height: 135, autoAlpha: 1}, "+=0.0")
  return tl;
}


// make this all happen on page load
function init(){
// add sub timeline to main timeline
masterTl
.add(firstTl(), "+=0.0")
.add(secondTl(), "+=5")
.play();
}

// Test play reverse

// This function will return one element
var select = document.querySelector.bind(document);

// This function will return a node-list of elements
// It's not used in this example, but I included it in case
// you were wondering how to select more than one element
var selectAll = document.querySelectorAll.bind(document);

// Select our elements
var banner = select("#banner");
var bgcolor = select("#bg-color");

// Create a paused timeline with our tweens
var tl = new TimelineLite({ paused: true })
  .to(bgcolor, 0.2, { width: 300, height: 250, autoAlpha: 1 });

TweenLite.set(banner, {visibility:"visible"})

TweenLite.from(bgcolor, .7, {
	autoAlpha: 0,
});



function onComplete() {
  if(document.querySelector("#banner:hover")) { tl.play();}
  banner.addEventListener("mouseenter", function() {tl.play();} );    
  banner.addEventListener("mouseleave", function() {tl.reverse();} );
}


window.onload = init;