(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() >= 992 && 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() < 992 && previewStep !== 'mobile') {
			previewStep = 'mobile'

			// 輪播
            /*
			if($('.preview-side .productImg').children().length > 1) {
				$('.preview-side .productImg').addClass('with-dots').owlCarousel({
					items: 1,
					dots: false,
					nav: true,
					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"><i class="icon icon-cross"></i></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).closest('.zoomIn-closer').length > 0) {
					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: {
				992: {
					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(){
            $(this).owlCarousel({
                loop:false,
                items: 1,
                dots: false,
                nav: true,
                navText: ['<i class="icon icon-angle-left"></i>', '<i class="icon icon-angle-right"></i>'],
                responsive: {
                    0: {
                        items: 2,
                        margin: 12
                    },
                    675: {
                        items: 3,
                        margin: 12
                    },
                    1200: {
                        items: 4,
                        margin: 15
                    },
                    1600: {
                        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("複製連結成功")
    })
})


// ==========================================================
// 手機版規格挑選彈窗
// ==========================================================
$(function(){
	const pickbox = $('.detail-pickbox-fixed')
	$(document).on('click', '.detail-pickbox-fixed', function(e){
		if(e.target === e.currentTarget || $(e.target).closest('.pickbox-closer').length > 0){
			pickbox.removeClass('in-active')
			$('body').removeClass('overflow-hidden')
		}
	})
	$(document).on('click', '.pickbox-toggle', function(e){
		pickbox.toggleClass('in-active')
		$('body').toggleClass('overflow-hidden')
	})
	//當原本的購買按鈕消失在螢幕上方時才顯示
	let detailThrottle = throttleScroll(function(){
		let originBtns = $('.detail-side .popup-buttonbox')

		if((originBtns[0].getBoundingClientRect().top - $('.header-wrapper').height()) < 0){
			$('.detail-pickbox-fixed').removeClass('hide')
		}else{
			$('.detail-pickbox-fixed').addClass('hide')
		}
	},250)

	function checkDetailThrottle(){
		if($(window).width() < 992){
			detailThrottle.init()
		}else{
			detailThrottle.destroy()
		}
	}

	checkDetailThrottle()
	$(window).on('resize', checkDetailThrottle)

})

// ==========================
// 價格試算
// ==========================
;(function($){
	//同時更改下方浮動/上方計算內的值
	$(document).on("input", ".custom-input", function(){
		let _this = $(this),
			name = _this.prop("name"),
			val = _this.val()
		$("input[name="+name+"]").each(function(){
			let input = $(this)
			if(input.val() != val){
				input.val(val)
			}
		})
	})
	$(document).on("change", ".custom-radio", function(){
		let _this = $(this),
			name = _this.prop("name"),
			val = _this.val()
		$("input[name="+name+"]").each(function(){
			let input = $(this)
			if(input.val() == val){
				input.prop("checked", true)
			}
		})
	})


	//計算按鈕
	$(document).on("click", ".custom-calc-btn", function(){
		let form = $(this).parents(".popup-custom"),
			Serial_No = form.find("input[name=Serial_No]").val(),
			SheetLength = form.find("input[name=SheetLength]").val(),
			SheetWidth = form.find("input[name=SheetWidth]").val(),
			SheetCotton = form.find("input[name=SheetCotton]:checked").val(),
			SheetHeight = form.find("input[name=SheetHeight]").val(),
			CoverWidth = form.find("input[name=CoverWidth]").val(),
			CoverLength = form.find("input[name=CoverLength]").val(),
			CoverCotton = form.find("input[name=CoverCotton]:checked").val()
		$.ajax({
			url:Project_Country+'products/ajax/detail/product_custom.php',
			type:"POST",
			cache:false,
			async:false,
			dataType: 'json',
			data:{
				Serial_No: Serial_No,
				SheetLength: SheetLength,
				SheetWidth: SheetWidth,
				SheetHeight: SheetHeight,
				SheetCotton: SheetCotton,
				CoverWidth: CoverWidth,
				CoverLength: CoverLength,
				CoverCotton: CoverCotton,
			},
			error:function(d){
				alert('網路連線過慢，網頁請重新整理');
			},
			success:function(d){
				if(!d.msg.Result_Boolean){
					$(".custom-price").text("")
					if(d.msg.Result_Message){
						alert(d.msg.Result_Message)
					}
					return false
				}

				let checkType = ['5','6'] //日式床包
				if(!checkType.includes(d.msg.Custom_Type)){
					if(d.price){
						$(".font-big").text(d.price)
						//$(".custom-price").text(_jsLang.加價 + d.price)
					}
				}

				if(d.fun){
					Function(d.fun)()
				}else if(!d.msg.Result_Message && checkType.includes(d.msg.Custom_Type)){
					//$(".custom-price").text(_jsLang.加價 + d.price)
					$(".font-big").text(d.price)
				}
			}
		});
	});
})($)