$("*").each(function (index, element) {
  // 此元素被點選後執行
  $(this).click(function (e) {
    // 取得被點選元素的屬性：data-gt-target
    var target = $(this).attr("data-gt-target");
    var duration = $(this).attr("data-gt-duration");
    var offset = $(this).attr("data-gt-offset");

    // JS 語法：判斷式
    // if (條件) {程式區塊}
    // 當條件成立，會執行程式區塊

    // 如果 目標有資料 才會執行 { } 內的程式
    // 避免出現 undefine (未定義 - 不存在的資料)
    if (target) {
      //console.log("目標：" + target);
      //console.log("時間：" + duration);
      //console.log("位移：" + offset);

      // 上方位置 = 目標區塊.位移().上方位置
      var top = $(target).offset().top;
      //console.log("要前往元素的上方位置：" + top);

      // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
      // parseInt() 將文字轉為數字

      $("html").stop().animate({
        scrollTop: top - offset
      }, parseInt(duration));
    }
  });
});

// 避免動畫與使用者滾輪衝突
// html 在滾動滾輪時 停止 html 所有效果
$("html").on("mousewheel", function () {
  $("html").stop();
});

var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);

var scene1 = document.getElementById('scene1');
var parallaxInstance = new Parallax(scene1);

var scene2 = document.getElementById('scene2');
var parallaxInstance = new Parallax(scene2);

$(window).bind('scroll',function(e){
  parallaxScroll();
 });

 function parallaxScroll(){
	var scrolled = $(window).scrollTop();
	$('.object178').css('top',(200-(scrolled*.2))+'px');
  $('.object188').css('top',(150-(scrolled*.1))+'px');
	$('.object177').css('top',(600-(scrolled*.25))+'px');
	$('.object182').css('top',(400-(scrolled*.2))+'px');
  $('.object241').css('top',(600-(scrolled*.1))+'px');
  $('.object242').css('top',(700-(scrolled*.1))+'px');
}

// 文字動畫
const sec = document.querySelectorAll('.sec');
console.log(sec.length);
const title = document.querySelectorAll('.title');
const cover = document.querySelectorAll('.cover');
const test_content = document.querySelectorAll('.test_content');

function checkSlide() {
    console.log('pass');
    sec.forEach((block, i) => {
        // half way through the image
        //const test = document.querySelector('.test');
        const slideInAt = window.scrollY + window.innerHeight;
        console.log(slideInAt);
        //console.log(test.offsetTop);
        // bottom of the image
        const isHalfShown = slideInAt > block.offsetTop;
        if (isHalfShown) {
            console.log('active');
            title[i].style.bottom = '0em';
            //document.querySelector('.title').style.bottom = '0em';
            test_content[i].classList.add('fadein');
            cover[i].classList.add('slidein');
            //test.firstElementChild.classList.add('fadein');

            //test_content[i].fadeIn(1500);

            // $('.test_content').fadeIn(1500);
        }
    })
};
window.addEventListener('scroll', checkSlide);
window.addEventListener('scroll', sec03PlantImg);
window.addEventListener('scroll', sec03BottomImg);



function sec03PlantImg() {
  const slideInAt = window.scrollY + window.innerHeight;
  const toTop = document.querySelector('.sec03-big').offsetTop + document.querySelector('.sec03_plant').offsetTop;
  const isHalfShown = slideInAt > toTop ;
  console.log(toTop);
  if (isHalfShown) {
    document.querySelector('.sec03_plant .p_cover').classList.add('slidein');
  }
};

function sec03BottomImg() {
  const slideInAt = window.scrollY + window.innerHeight;
  const toTop = document.querySelector('.sec03-big').offsetTop + document.querySelector('.sec_bottom').offsetTop + 300;
  const isHalfShown = slideInAt > toTop ;
  console.log(toTop);
  if (isHalfShown) {
    document.querySelector('.sec_bottom .b_cover').classList.add('slidein');
  }
};