(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()

	// 預覽圖 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')
		if($(window).width() < 768){
			let item = $(hoverTarget).closest(".owl-item")
			if(item.length){
				funcWrap.find(".productImg").trigger('to.owl.carousel',[item.index(),0,true])
			}
		}
	})
	$(window).on('resize', function(e) {
		if($(this).width() >= 992 && previewStep !== 'desktop') {
			previewStep = 'desktop'

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


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

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

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

			// 手機版放大圖
			$('.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
	let moreview = $('.moreview')
	function moreviewCarousel(){
		if(moreview.data('owl.carousel')){
			moreview.data('owl.carousel').destroy()
		}
		if(moreview.find('.picitem').length > 3) {
			moreview.owlCarousel({
				nav: true,
				dots: false,
				margin: 12,
				navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
				responsive: {
					0: {
						items: 3,
					},
					1200: {
						items: 4,
					},
				},
			})
		}
	}
	moreviewCarousel()
	moreview.on("moreviewUpdate", function(){
		moreviewCarousel()
	})
})($)


// ==========================================================
// 	下方商品輪播
// ==========================================================
$(function(){
	//桌機右方商品展示
	function checkDesktopSide(){
		if($(window).width() >= 1200){
			$($(".js-desktop-side").get()).each(function(){
				let _this = $(this)
				_this.removeClass("theme-bottom")
				$(".detail-feed-side").append(_this.detach())
			})
		}else {
			$($(".js-desktop-side").get()).each(function(){
				let _this = $(this)
				let target = _this.data("target")
				_this.addClass("theme-bottom")
				$(".panel-carousel-wrapper[data-position='"+target+"']").append(_this.detach())
			})
		}
	}
	checkDesktopSide()
	$(window).on("resize", function(){
		checkDesktopSide()
	})

	$(document).on("click", ".panel-products-title", function(){
		let wrapper = $(this).parents(".detail-panel-carousel")
		wrapper.toggleClass("in-collapse")
	})

})



// ==========================================================
// 	手機版固定選單出現時間判斷
// ==========================================================
;(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')
		}
	})
})($)

// ==========================================================
// 	簡介viewall展開縮合
// ==========================================================
;(function($) {
	let defaultHeight = 300

	function checkHeight(wrapper){
		let box = wrapper.find(".detail-collapse-box")
		let btnbox = wrapper.find(".detail-viewall-box ")
		let btn = wrapper.find(".viewall-btn")
		//先縮起來判斷
		if(wrapper.hasClass("in-open")){
			wrapper.removeClass("in-open")
			btnbox.addClass("hide")
			btn.text("VIEW ALL")
		}

		if(box[0].scrollHeight > defaultHeight){
			btnbox.removeClass("hide")
		}else{
			btnbox.addClass("hide")
		}
	}

	$(".detail-wrap:not(.no-collapse)").each(function(){
		let _this = $(this)
		let btn = _this.find(".viewall-btn")

		//checkHeight(_this)

		btn.on("click", function(){
			if(_this.hasClass("in-open")){
				_this.removeClass("in-open")
				btn.text("VIEW ALL")
			}else{
				_this.addClass("in-open")
				btn.text("COLLAPSE")
			}
		})
	})

	$(window).on("resize", function(){
		$(".detail-wrap:not(.no-collapse)").each(function(){
			let _this = $(this)
			checkHeight(_this)
		})
	})
})($)

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