(function($){
    /* 回到購買處 */
    $('.gobuy').on('click',function(){
      var tol = $(window).height();
      console.log(tol);
      var buy = $('.button-line').offset().top-tol+50 ;
        $("html,body").scrollTop(buy);
    });
  /*為JQ添加naturalWidth()和naturalHeight()方法，抓取圖片原始尺寸*/
    var
    props = ['Width', 'Height'],
    prop;


    while (prop = props.pop()) {
    (function (natural, prop) {
      $.fn[natural] = (natural in new Image()) ?
      function () {
      return this[0][natural];
      } :
      function () {
      var
      node = this[0],
      img,
      value;

      if (node.tagName.toLowerCase() === 'img') {
        img = new Image();
        img.src = node.src,
        value = img[prop];
      }
      return value;
      };
    }('natural' + prop, prop.toLowerCase()));
    }
}(jQuery));






// ==========================================================
// 	商品展示區塊輪播、商品圖預覽功能、手機版放大功能、購物跳窗
// ==========================================================
;(function($) {
  let previewStep = ''
  $(window).on('resize', function(e) {
    let wrapper = $('.productImg'),
        breakpoint = 768
    if($(this).width() >= breakpoint && previewStep !== 'desktop') {
      previewStep = 'desktop'

      // 輪播
      if(wrapper.data('owl.carousel')) {
        wrapper.data('owl.carousel').destroy()
      }

      if($('.moreview').children('.picitem').length > 1) {
        $('.moreview').owlCarousel({
          responsive: {
            0: {
              items: 3,
            },
            1200: {
              items: 4
            }
          },
          loop:false,
          nav : true,
          dots: false,
          navText: ['', ''],
        })
      }

      // 預覽圖 hover 事件
      $('.moreview').on('mouseenter', '.picitem', function(e) {
        e.preventDefault()
        let targetIndex = null

        if($(this).parent().hasClass('moreview')) {
          targetIndex = $(this).index()
        } else {
          targetIndex = $(this).parent('.owl-item').index()
        }
        
        wrapper.find('.item-box').eq(targetIndex).addClass('in-hover')
                .siblings('.item-box').removeClass('in-hover')
      }).on('mouseleave', function(e) {
        e.preventDefault()

        wrapper.find('.item-box').removeClass('in-hover')
      })

      // 預覽圖 click 事件
      $('.moreview').on('click', '.picitem', function(e) {
        e.preventDefault()
        let targetIndex = null

        if($(this).parent().hasClass('moreview')) {
          targetIndex = $(this).index()
        } else {
          targetIndex = $(this).parent('.owl-item').index()
        }
        $(this).parents('.moreview').find('.picitem').removeClass('now')
               .end().end().addClass('now')
        wrapper.find('.item-box').eq(targetIndex).addClass('now')
               .siblings('.item-box').removeClass('now')
      })

      //購買跳窗
      $(".selectPopupBox").removeClass('is-show');
    } else if($(this).width() < breakpoint && previewStep !== 'mobile') {
      previewStep = 'mobile'

      // 輪播
      if(wrapper.children().length > 1) {
        wrapper.owlCarousel({
          items: 1,
          dots: true,
          nav: false,
          navText: ['', ''],
          loop: true,
          autoplay: 5000,
        })
      }

      if($('.moreview').data('owl.carousel')) {
        $('.moreview').data('owl.carousel').destroy()
      }

      // 預覽圖 hover 事件
      $('.moreview').off('mouseenter', '.picitem')
              .off('mouseleave')

      // 預覽圖 click 事件
      $('.moreview').off('click', '.picitem')

    }
  })
})($)




// ==========================================================
// 	瀏覽紀錄等區塊輪播(手機版)
// ==========================================================
;(function($, jQuery, window, document) {
  let owlStep = ''
  $(window).on('resize', function(e) {
    e.preventDefault()
    let breakpoint = 576
    if($(this).width() >= breakpoint && owlStep !== 'desktop') {
      owlStep = 'desktop'
      $('.carousel-wrapper .carousel-content').each(function(i, ele) {
        $(ele).owlCarousel({
          nav: true,
          dots: false,
          navText: ['', ''],
          margin: 15,
          responsive: {
            0: {
              items: 2
            },
            576: {
              items: 4
            },
            768: {
              items: 5
            },
          },
        })
      })
    } else if($(this).width() < breakpoint && owlStep !== 'mobile') {
      owlStep = 'mobile'
      $('.carousel-wrapper .carousel-content').each(function(i, ele) {
        if($(ele).data('owl.carousel')){
          $(ele).data('owl.carousel').destroy()
        }
      })
    }
  })
    // $()
})($, jQuery, window, document)


// ==========================================================
// 	trigger function
// ==========================================================
;(function($, jQuery, window, document) {
    $(window).trigger('resize')
})($, jQuery, window, document)





function smallPicBox(){
  /* 小圖hover效果及切換功能 */
  if($(".moreview .picitem ").length > 1){
    $(".productView .moreview").owlCarousel({
      responsive: {
        0: {
          items: 3,
        },
        1200: {
          items: 4
        }
      },
      loop:false,
      nav : true,
      dots: false,
      navText: ['', ''],
    }).on('mouseleave','.owl-stage-outer', function() {
      $(".productView .zoonbox").removeAttr('style');
    })
    .on('click','.owl-item', function() {
      var now = $(this).index();
      $(".productView .owl-item").not(this).find('.picitem').removeClass('now');
      $(this).find('.picitem').addClass('now');
      $(".productView .zoonbox").removeClass('now').eq(now).addClass('now');
      })
    .on('mouseenter','.owl-item', function() {
      var now = $(this).index();
      //var nowbox = $('.productImg .now').index();
      //console.log(nowbox );
      $(".productView .zoonbox").css('display','none').eq(now).css('display','block');
        //$('.productImg .now').css('display','none');
    })
    .on('mouseleave','.owl-item', function() {
      var now = $(this).index();
      $(".productView .zoonbox").eq(now).css('display','none');
    });
  }else{
    $(".productView .moreview")
    .on('mouseleave', function() {
      $(".productView .zoonbox").removeAttr('style');
    })
    .on('click','.picitem', function() {
      var now = $(this).index();
      $(".productView .picitem").removeClass('now');
      $(this).addClass('now');
      $(".productView .zoonbox").removeClass('now').eq(now).addClass('now');
      })
    .on('mouseenter','.picitem', function() {
      var now = $(this).index();
      //var nowbox = $('.productImg .now').index();
      //console.log(nowbox );
      $(".productView .zoonbox").css('display','none').eq(now).css('display','block');
        //$('.productImg .now').css('display','none');
    })
    .on('mouseleave','.picitem', function() {
      var now = $(this).index();
      $(".productView .zoonbox").eq(now).css('display','none');
    });
  }

}

 /*影片效果*/
function videoBox(){
  //影片控制
  $(".moreview").on('click','.video_control',function(){
    var video = document.getElementById("Video");
    if(video.paused){
      $(this).addClass('fa-pause').removeClass('fa-play');
      video.play();
    }else{
      $(this).addClass('fa-play').removeClass('fa-pause');
      video.pause();
    }
  });

  //影片預覽圖
  if(document.getElementById("Video")){
    document.getElementById("Video").oncanplay=function(){
      var video = $("#Video").get(0);
      var canvas = document.getElementById("video_review");
        canvas.getContext('2d').drawImage(video, 0, 0, 66, 92);
    };
  }
}