var _ua = (function(u){
  return {
    Tablet:(u.indexOf("windows") != -1 && u.indexOf("touch") != -1)
      || u.indexOf("ipad") != -1
      || (u.indexOf("android") != -1 && u.indexOf("mobile") == -1)
      || (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1)
      || u.indexOf("kindle") != -1
      || u.indexOf("silk") != -1
      || u.indexOf("playbook") != -1,
    Mobile:(u.indexOf("windows") != -1 && u.indexOf("phone") != -1)
      || u.indexOf("iphone") != -1
      || u.indexOf("ipod") != -1
      || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1)
      || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1)
      || u.indexOf("blackberry") != -1
  }
})(window.navigator.userAgent.toLowerCase());


if (_ua.Mobile) {

} else {
  var controller = new ScrollMagic.Controller({
    indicators: true,
  });
}


$(function() {
  var s = $(".hbox");
  var t = $("h3");
  var t2 = $(".year");
  var t3 = $(".txt p");
  if (_ua.Mobile) {

  } else {
    TweenMax.set(s, {
      opacity: 0,
      top: 30
    })
    TweenMax.set(t, {
      opacity: 0,
      right: -30
    })
    TweenMax.set(t2, {
      opacity: 0,
      top: 0
    })
    TweenMax.set(t3, {
      opacity: 0,
      right: -30
    })

  }
  var story = new TimelineMax()
    .add([
      TweenMax.to($(".hbox.s01"), 0.5, {
        opacity: 1,
        top: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s01 h3"), 0.5, {
        opacity: 1,
        right: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s01 .year"), 0.5, {
        opacity: 1,
        top: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s01 .txt p"), 0.5, {
        opacity: 1,
        right: 0,
        delay: 0.2,
      }),


    ]);
  var story02 = new TimelineMax()
    .add([
      TweenMax.to($(".hbox.s02"), 0.5, {
        opacity: 1,
        top: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s02 h3"), 0.5, {
        opacity: 1,
        right: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s02 .year"), 0.5, {
        opacity: 1,
        top: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s02 .txt p"), 0.5, {
        opacity: 1,
        right: 0,
        delay: 0.2,
      }),


    ]);
  var story03 = new TimelineMax()
    .add([
      TweenMax.to($(".hbox.s03"), 0.5, {
        opacity: 1,
        top: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s03 h3"), 0.5, {
        opacity: 1,
        right: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s03 .year"), 0.5, {
        opacity: 1,
        top: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s03 .txt p"), 0.5, {
        opacity: 1,
        right: 0,
        delay: 0.2,
      }),

    ]);
  var story04 = new TimelineMax()
    .add([
      TweenMax.to($(".hbox.s04"), 0.5, {
        opacity: 1,
        top: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s04 h3"), 0.5, {
        opacity: 1,
        right: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s04 .year"), 0.5, {
        opacity: 1,
        top: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s04 .txt p"), 0.5, {
        opacity: 1,
        right: 0,
        delay: 0.2,
      }),
    ]);
  var story05 = new TimelineMax()
    .add([
      TweenMax.to($(".hbox.s05"), 0.5, {
        opacity: 1,
        top: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s05 h3"), 0.5, {
        opacity: 1,
        right: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s05 .year"), 0.5, {
        opacity: 1,
        top: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s05 .txt p"), 0.5, {
        opacity: 1,
        right: 0,
        delay: 0.2,
      }),
    ]);
  var story06 = new TimelineMax()
    .add([
      TweenMax.to($(".hbox.s06"), 0.5, {
        opacity: 1,
        top: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s06 h3"), 0.5, {
        opacity: 1,
        right: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s06 .year"), 0.5, {
        opacity: 1,
        top: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s06 .txt p"), 0.5, {
        opacity: 1,
        right: 0,
        delay: 0.2,
      }),
    ]);
  var story07 = new TimelineMax()
    .add([
      TweenMax.to($(".hbox.s07"), 0.5, {
        opacity: 1,
        top: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s07 h3"), 0.5, {
        opacity: 1,
        right: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s07 .year"), 0.5, {
        opacity: 1,
        top: 0,
        delay: 0.2,
      }),
      TweenMax.to($(".s07 .txt p"), 0.5, {
        opacity: 1,
        right: 0,
        delay: 0.2,
      }),
    ]);

    var story07 = new TimelineMax()
      .add([
        TweenMax.to($(".hbox.s07"), 0.5, {
          opacity: 1,
          top: 0,
          delay: 0.2,
        }),
        TweenMax.to($(".s08 h3"), 0.5, {
          opacity: 1,
          right: 0,
          delay: 0.2,
        }),
        TweenMax.to($(".s08 .year"), 0.5, {
          opacity: 1,
          top: 0,
          delay: 0.2,
        }),
        TweenMax.to($(".s08 .txt p"), 0.5, {
          opacity: 1,
          right: 0,
          delay: 0.2,
        }),
      ]);


      var story08 = new TimelineMax()
        .add([
          TweenMax.to($(".hbox.s08"), 0.5, {
            opacity: 1,
            top: 0,
            delay: 0.2,
          }),
          TweenMax.to($(".s08 h3"), 0.5, {
            opacity: 1,
            right: 0,
            delay: 0.2,
          }),
          TweenMax.to($(".s08 .year"), 0.5, {
            opacity: 1,
            top: 0,
            delay: 0.2,
          }),
          TweenMax.to($(".s08 .txt p"), 0.5, {
            opacity: 1,
            right: 0,
            delay: 0.2,
          }),
        ]);


  // build scene
  var scene = new ScrollMagic.Scene({
    triggerElement: ".s01",
    offset: 100,
    reverse: true
  }).setTween(story).addTo(controller);
  var scene = new ScrollMagic.Scene({
    triggerElement: ".s02",
    offset: -100,
    reverse: true
  }).setTween(story02).addTo(controller);
  var scene = new ScrollMagic.Scene({
    triggerElement: ".s03",
    offset: -100,
    reverse: true
  }).setTween(story03).addTo(controller);
  var scene = new ScrollMagic.Scene({
    triggerElement: ".s04",
    offset: -200,
    reverse: true
  }).setTween(story04).addTo(controller);

  var scene = new ScrollMagic.Scene({
    triggerElement: ".s05",
    offset: -200,
    reverse: true
  }).setTween(story05).addTo(controller);

  var scene = new ScrollMagic.Scene({
    triggerElement: ".s06",
    offset: 100,
    reverse: true
  }).setTween(story06).addTo(controller);

  var scene = new ScrollMagic.Scene({
    triggerElement: ".s07",
    offset: -100,
    reverse: true
  }).setTween(story07).addTo(controller);

  var scene = new ScrollMagic.Scene({
    triggerElement: ".s08",
    offset: -100,
    reverse: true
  }).setTween(story08).addTo(controller);


  if (_ua.Mobile){
    setInterval(function(){
       $('.start').fadeOut(2000,function(){$(this).fadeIn(2000)});
  },3000);
  }else{

  }
    $(window).scroll(function () {
       var ScrTop = $(window).scrollTop();
       var line = $(".line_history");
       console.log(ScrTop);
       line.css("height",ScrTop +"px");
    });


});