(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 = ''
	videoBox()
	
	$(window).on('resize', function(e) {
		if($(this).width() >= 768 && previewStep !== 'desktop') {
			previewStep = 'desktop'

			// 輪播
			if($('.preview-side .productImg').data('owl.carousel')) {
				$('.preview-side .productImg').data('owl.carousel').destroy()
			}			

			// 預覽圖 hover 事件
			$(document).on('mouseenter', '.moreview .picitem', function(e) {
				e.preventDefault()
				const hoverTarget = $(this).attr('data-target')
				const funcWrap = $(this).parents('.preview-side')

				funcWrap.find(hoverTarget).addClass('in-hover')
						.siblings('.item-box').removeClass('in-hover')
			}).on('mouseleave', '.moreview', function(e) {
				e.preventDefault()

				const funcWrap = $(this).parents('.preview-side')
				funcWrap.find('.item-box').removeClass('in-hover')
			}).on('click', '.moreview .picitem', function(e) {
				e.preventDefault()
				const hoverTarget = $(this).attr('data-target')
				const funcWrap = $(this).parents('.preview-side')

				$(this).parents('.moreview')
					   .find('.picitem').removeClass('now')
					   .end()
					   .end().addClass('now')

				funcWrap.find(hoverTarget).addClass('now')
						.siblings('.item-box').removeClass('now')
			})

			// 手機版放大圖
			$('.preview-side .productImg').off('click', '.item-box > a')
			$('body').off('click', '.zoomIn-wrapper')
			$('.zoomIn-wrapper').remove()
			$('body').removeClass('overflow-hidden')

		} else if($(this).width() < 768 && previewStep !== 'mobile') {
			previewStep = 'mobile'

			// 輪播
			if($('.preview-side .productImg').children().length > 1) {
				$('.preview-side .productImg').owlCarousel({
					items: 1,
					dots: true,
					nav: false,
					navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
					loop: true,
				})
			}

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

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

			// 手機版放大圖
			$('.preview-side .productImg').on('click', '.item-box > a', function(e) {
				e.preventDefault()
				
				const zoomTarget = $(this).attr('href')
				const zoomInDom = `
					<div class="zoomIn-wrapper">
						<button class="zoomIn-closer" type="button">close</button>
						<div class="zoomIn-content">
							<img src="${zoomTarget}">
						</div>
					</div>`
				$('body').append(zoomInDom).addClass('overflow-hidden')
			})

			$('body').on('click', '.zoomIn-wrapper', function(e) {
				if(e.target === e.currentTarget || $(e.target).hasClass('zoomIn-closer')) {
					e.preventDefault()
					$('.zoomIn-wrapper').fadeOut('400').remove()
					$('body').removeClass('overflow-hidden')
				}
			})
		}
	})

	// moreview 輪播
	const gapRatio = 0.021
    if($('.moreview').find('.picitem').length > 4) {
    	$('.moreview').wrapInner('<div class="swiper-wrapper"></div>')
    				  .append(`
	    				  	<button class="swiper-button-prev" type="button">
	    				  		<i class="icon icon-angle-up" aria-label="prev"></i>
	    				  	</button>
	    				  	<button class="swiper-button-next" type="button">
	    				  		<i class="icon icon-angle-down" aria-label="next"></i>
	    				  	</button>
    				  	`)
    				  .find('.picitem').wrap('<div class="swiper-slide"></div>')
    	const swiper = new Swiper('.moreview', {
    		direction: "vertical",
    		slidesPerView: 4,
    		navigation: {
    			nextEl: '.swiper-button-next',
    			prevEl: '.swiper-button-prev',
    		},
    		breakpoints: {
    			768: {
		    		spaceBetween: $('.preview-side').width() * gapRatio,
    			},
    			1200: {
		    		spaceBetween: $('.preview-side').width() * gapRatio,
    			},
    			1400: {
    				spaceBetween: $('.preview-side').width() * gapRatio,
    			},
    			1600: {
    				spaceBetween: $('.preview-side').width() * gapRatio,
    			},
    		},
    	})
    }
})($)


// ==========================================================
// 	下方商品輪播
// ==========================================================
$(function(){
	const carouselTarget = $('.panel-products')

	if(carouselTarget.length) {
		carouselTarget.each(function(i, ele) {
			if($(ele).children().length > 2) {
				$(ele).owlCarousel({
					dots: false,
					nav: true,
					navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
					responsive: {
						0: {
							items: 2,
							margin: 15,
						},
						576: {
							items: 3,
							margin: 15,
						},
						768: {
							items: 4,
							margin: 20,
						},
						1200: {
							items: 5,
							margin: 20,
						},
					},
				})
			} 
		});
	}
})





// ==========================================================
// 	手機版固定選單出現時間判斷
// ==========================================================
;(function($) {
    $(window).on('scroll', function(e) {
    	e.preventDefault()
    	const fixedOffset = $('.productTitle').offset().top
    	const fixedTarget = $('.fixed-button')

    	if($(window).scrollTop() > fixedOffset) {
    		fixedTarget.removeClass('hide')
    	} else {
    		fixedTarget.addClass('hide')
    	}
    })
})($)





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



// ==========================================================
//  複製連結
// ==========================================================
$(function(){
    $(document).on("click", ".copy-btn", function(e){
    	e.preventDefault()
        navigator.clipboard.writeText($(this).data("link"))
        alert("複製連結成功")
    })
})