(function($){
  	/* 回到購買處 */
  	$('.gobuy').on('click',function(){
  		var tol = $(window).height();
  		console.log(tol);
  		var buy = $('.button-line').offset().top-tol+50 ;
  	    $("html,body").scrollTop(buy);
  	});


    //按下討論按鈕跳到討論標題
    $(".Go_Comment_Title").click(function(e){
        e.preventDefault();
        $('html, body').animate({scrollTop: parseInt($("#Comment").offset().top)-30}, 500);
    });


	/*為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()));
    }

	/*評論預覽商品圖*/
	$(".pic-box").on("click",".pic-over",function(){
		var _this = $(this),
			pic_src = _this.find("img").attr('src');
		_this.parents(".pic-box").find(".click").removeClass("click");
		_this.addClass("click");
		_this.parents(".pic-box").find(".pic-viewer").addClass("click")
		.find('img').attr({src: pic_src});
	});
	$('.pic-box').on('click', '.close', function(event) {
		var _this = $(this).parents(".pic-box");
		_this.find(".pic-viewer").removeClass("click");
		_this.find(".click").removeClass("click");
	});

    $('#preview').css('display','none');

    $("article .recommend_l,article .history_l,article .other_l").owlCarousel({
        nav : true,
        responsive:{
            0:{
                items : 2
            },
            480:{
                items : 3
            },
            768:{
                items : 4
            },
            1024:{
                items : 5
            }
        },
        navText : ['','']
    });

    let productStep = ''
    let columnStep = ''

    $(window).on('resize', function(e) {
    	
    	// ==========================================================
    	// 	商品圖片展示區塊
    	// ==========================================================
		const mainWrap = $(".productView")
		const previewWrap = $('.productImg')

    	if($(this).width() > 1024 && productStep !== 'desktop') {
    		productStep = 'desktop'

    		if(previewWrap.data('owl.carousel')) {
    			previewWrap.data('owl.carousel').destroy()
    		}

	        if($(".moreview .picitem").length > 5){
		        mainWrap.find(".moreview").addClass('with-padding').owlCarousel({
		 			loop:false,
					items: 5,
					nav: true,
					dots: false,
					margin: 7,
				}).on('mouseenter','.owl-item', function(e) {
	                thumbnailChange(this, mainWrap)
				}).on('click','.owl-item', function(e) {
					thumbnailChange(this, mainWrap)
	            })
			}else{
				mainWrap.find(".moreview").on('mouseenter','.picitem', function() {
					thumbnailChange(this, mainWrap)
				}).on('click','.picitem', function() {
					thumbnailChange(this, mainWrap)
				})
			}
    	} else if($(this).width() <= 1024 && productStep !== 'tablet') {
    		productStep = 'tablet'

    		if(mainWrap.find(".moreview").data('owl.carousel')) {
    			mainWrap.find(".moreview").data('owl.carousel').destroy()
    		}

    		previewWrap.owlCarousel({
    			items: 1,
    			margin: 10,
    			nav: true,
    			dots: false,
    		}).on('translated.owl.carousel', function(e) {
    			const itemIndex = $(this).find('.owl-item.active').index()
    			
    			$(this).find('.picbox').removeClass('now')
    			$($(this).find('.picbox')[itemIndex]).addClass('now')
    			//zoomPictureCheck(this)
    		})
    	}

    	
    	
    	
    	
    	// ==========================================================
    	// 	商品放大鏡位置調整
    	// ==========================================================
    	if($(this).width() > 1024) {
    		const offsetValue = $('.productView').width() - $('.open-preview').height() - 10
    		$('.open-preview').css('top', offsetValue)
    	} else {
    		$('.open-preview').removeAttr('style')
    	}



      //===========================================================
      // 放大鏡預覽可換頁 start
      //===========================================================
      $('.previewbox .preview-content').owlCarousel({
        items: 1,
        nav: true,
        dots: false
      })
      //===========================================================
      // 放大鏡預覽可換頁 end
      //===========================================================
    	
    
    	// ==========================================================
    	// 	相關專欄區塊調整
    	// ==========================================================
    	const columnSlide = $('.relate-column')
    	if($(this).width() > 1024 && columnStep !== 'desktop') {
    		columnStep = 'desktop'

    		columnSlide.each(function(i, ele) {
	    		if($(ele).data('owl.carousel')) {
	    			$(ele).data('owl.carousel').destroy()
	    		}

	    		if($(ele).children().length > 4) {
		    		$(ele).owlCarousel({
		    			items: 4,
		    			margin: 15,
		    			slideBy: 'page',
		    			nav: true,
		    			dots: false,
		    		})
	    		}
    		});

    	} else if($(this).width() <= 1024 && $(this).width() > 768 && columnStep !== 'tablet') {
    		columnStep = 'tablet'

    		columnSlide.each(function(i, ele) {
	    		if($(ele).data('owl.carousel')) {
	    			$(ele).data('owl.carousel').destroy()
	    		}

	    		if($(ele).children().length > 3) {
		    		$(ele).owlCarousel({
		    			items: 3,
		    			margin: 10,
		    			slideBy: 'page',
		    			nav: true,
		    			dots: false,
		    		})
	    		}
    		});
    	} else if($(this).width() <= 768 && columnStep !== 'mobile') {
    		columnStep = 'mobile'

    		columnSlide.each(function(i, ele) {
	    		if($(ele).data('owl.carousel')) {
	    			$(ele).data('owl.carousel').destroy()
	    		}
    		});
    	}
    })

    $(window).trigger('resize')

    // 放大圖開關
    $('article').on('click','.open-preview',function(){
      zoomPictureSwitch()
      overflowTop = $(window).scrollTop()
      $('#wrapper').addClass('overflow-hidden').scrollTop(overflowTop - ($('body').innerHeight() - $('body').height()))
    	$('article .previewbox').css('display', 'block') 
    });
    $('article').on('click','.close',function(){
    	$('article .previewbox').removeAttr('style')
        $('#wrapper').removeClass('overflow-hidden').scrollTop(0)
        $(window).scrollTop(overflowTop)
    });
      
      //===========================================================
      // 放大鏡預覽翻頁到目前點選 start
      //===========================================================
      function zoomPictureSwitch(){
        let bodyWidth = document.body.clientWidth
        let activeIndex = 0
        if(bodyWidth > 1024){
          activeIndex = $('.productImg .now').index()
        }else{
          activeIndex = $('.productImg .active').index()
        }
        $('.previewbox .preview-content').trigger('to.owl.carousel',[activeIndex,0,true])
      }
      //===========================================================
      // 放大鏡預覽翻頁到目前點選 end
      //===========================================================

    // 放大圖切換
    function zoomPictureCheck(checkObj) {
      const activeItem = $(checkObj).find('.picbox.now')[0]
      const newAry = []
      $(checkObj).find('.picbox').each(function(index, item) {
        newAry.push(item)
      });
      const activeIndex = newAry.indexOf(activeItem)
      $('.previewbox').find('img').eq(activeIndex).css('display', 'block').siblings('img').removeAttr('style')
    }

    // 縮圖對應大圖展示
	function thumbnailChange(thisItem, mainWrap) {
		const nowIndex = $(thisItem).index();

		mainWrap.find('.picbox').eq(nowIndex).addClass('now').siblings('.picbox').removeClass('now')
		mainWrap.find('.picitem').removeClass('now')
		$(mainWrap.find('.picitem')[nowIndex]).addClass('now')
		//zoomPictureCheck(mainWrap)
	}

    /* 放大鏡效果 */
	function zoonbox(){
		var ImgBox,ImgBox_h,ImgBox_w,viewbox,viewbox_h,viewbox_w,viewbox_b,viewbox_r,preview,preview_img,scale_h,scale_w;
			// preview_str= '<div class="preview">';
		$('.productView').off('mouseenter mousemove mouseleave','.picbox');
		$('.productView').on('mouseenter','.picbox',function(){
			ImgBox=$('.productImg .now').offset();
			var preview_str= '<div class="preview">';
			var zoonbox_now = $(this).parents('.zoonbox'),
			big_pic = zoonbox_now.attr('big-pic');
			var _this = $(this);
				viewbox = _this.find('.viewbox');
		   var image = new Image();
		    image.src = "/upload_files/fonlego-rwd/prodpic/"+big_pic;
		    image.onload = function() {
		    	ImgBox_h = image.height;
		    	ImgBox_w = image.width;
		    	scale_h = _this.height()/ImgBox_h;
		    	scale_w = _this.width()/ImgBox_w;
				viewbox_h = _this.height()*(scale_h);
				viewbox_w = _this.width()*(scale_w);
				viewbox_b = _this.height()-viewbox_h;
				viewbox_r = _this.width()-viewbox_w;

				viewbox.css({
					'opacity':1,
					'height':viewbox_h,
					'width':viewbox_w,
				});
				preview_str += '<img src="/upload_files/fonlego-rwd/prodpic/'+big_pic+'" style="max-width:none;max-height:none;max-width:initial;width:auto;width:'+ImgBox_w+'px;" ></div>';
				zoonbox_now.append(preview_str);
				// console.log(preview_str);
				preview = zoonbox_now.find('.preview');
				preview_img = preview.find('img');
			}
		})
		.on('mousemove','.picbox',function(e){
			if(ImgBox.top){
				var bigpicTop = e.pageY-ImgBox.top,
					bigpicLeft = e.pageX-ImgBox.left;
				if(bigpicTop-(viewbox_h/2) > 0 && bigpicTop-(viewbox_h/2) < viewbox_b ){
					viewbox.css({
						'top':bigpicTop-(viewbox_h/2),
					});
					preview_img.css({
						'top':(-bigpicTop+(viewbox_h/2))/scale_h,
					});
				}else if(bigpicTop-(viewbox_h/2) < 0 ){
					viewbox.css({
						'top':0,
					});
					preview_img.css({
						'top':0,
					});
				}else if(bigpicTop-(viewbox_h/2) > viewbox_b ){
					viewbox.css({
						'top': viewbox_b,
					});
					preview_img.css({
						'top':-viewbox_b/scale_h,
					});
				}
				if( bigpicLeft-(viewbox_w/2) > 0 && bigpicLeft-(viewbox_w/2)< viewbox_r  ){
					viewbox.css({
						'left':bigpicLeft-(viewbox_w/2),
					});
					preview_img.css({
						'left':(-bigpicLeft+(viewbox_w/2))/scale_w,
					});
				}else if( bigpicLeft-(viewbox_w/2) < 0 ){
					viewbox.css({
						'left':0,
					});
					preview_img.css({
						'left':0,
					});
				}else if( bigpicLeft-(viewbox_w/2) > viewbox_r ){
					viewbox.css({
						'left':viewbox_r,
					});
					preview_img.css({
						'left':-viewbox_r/scale_w,
					});
				}
			}

		})
		.on('mouseleave','.picbox',function(){
			$('.productImg .viewbox').css({
				'opacity':0,
			});
			$('.productImg .preview').remove();
			preview_str= '<div class="preview">';
		});
	 }
	 /*影片效果*/

	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);
			};
		}
	}
}(jQuery));





// ==========================================================
// 	優惠倒數計時器
// ==========================================================
;(function($) {
	const counter = $('.countdown-timer')
	function strPadLeft(string, length, symbol) {
		let newString = string
		let newSymbol = symbol || '0'
		if(newString.length < length) {
			newString = newSymbol + newString

			return strPadLeft(newString, length, newSymbol)
		} else {
			return newString
		}
	}
	function countDown(endTime) {
		const now = Date.now()
		const leftTime = endTime - now

		let leftSec = Math.floor(leftTime / 1000) % 60
		let leftMin = Math.floor(leftTime / 1000 / 60) % 60
		let leftHour = Math.floor(leftTime / 1000 / 60 / 60) % 24
		let leftDay = Math.floor(leftTime / 1000 / 60 / 60 / 24)

		let timeString = ''
		if(leftTime > 0) {
			if(leftDay > 0) {
				timeString += `${leftDay}日 `
			}
			if(leftHour > 0) {
				leftHour += ''
				leftHour = strPadLeft(leftHour, 2)
				timeString += `${leftHour}:`
			}

			leftMin += ''
			leftMin = strPadLeft(leftMin, 2)
			timeString += `${leftMin}:`

			leftSec += ''
			leftSec = strPadLeft(leftSec, 2)
			timeString += `${leftSec}`

			setTimeout(countDown, 1000, endTime)
		} else {
			timeString = '優惠到期'
		}
		counter.find('.font-timer').text(timeString)
	}

	if(counter.length) {
		const deadline = counter.data('deadline')
		const limitTime = new Date(deadline).getTime()

		setTimeout(countDown, 1000, limitTime)
		countDown(limitTime)
	}
})($)







// ==========================================================
// 	書籍細節區塊  閱讀更多
// ==========================================================
;(function($) {
    $(window).on('resize', function(e) {
	    $('.detail-content > .web-editor').each(function(i, item) {
	    	if($(item).height() > $(item).parent('.detail-content').height()) {
	    		$(item).parents('.detail-box').addClass('theme-more')
	    	}
	    });
    })

    $('.more-button > span').on('click', function(e) {
    	$(this).parents('.detail-box').toggleClass('in-active');
    })

    $(window).trigger('resize')
})($)





// ==========================================================
// 	書籍細節區塊 錨點定位
// ==========================================================
;(function($) {
    $('.detail-tags').on('click', '.hash-tag', function(e) {
    	const target = $(this).data('hash')

    	if(target) {
    		const offsetTop = $(target).offset().top
    		$('#wrapper').animate({
    			scrollTop: offsetTop - $('#Main_Content').offset().top
    		}, 750)
    	}
    })
})($)






// ==========================================================
// 	其他人也買了、瀏覽紀錄
// ==========================================================
;(function($) {
	let otherStep = ''
	const owlTarget = $('.other-content .slideBox')

	$(window).on('resize', function(e) {
		if($(this).width() > 1024 && otherStep !== 'desktop') {
			otherStep = 'desktop'

			owlTarget.each(function(i, ele) {
				if($(ele).data('owl.carousel')) {
					$(ele).data('owl.carousel').destroy()
				}

				if($(ele).children().length > 4) {
		    		$(ele).owlCarousel({
		    			items: 4,
		    			margin: 35,
		    			slideBy: 'page',
		    			nav: true,
		    			dots: false,
		    		})
				}
			});

		} else if($(this).width() <= 1024 && $(this).width() > 768 && otherStep !== 'tablet') {
			otherStep = 'tablet'

			owlTarget.each(function(i, ele) {
				if($(ele).data('owl.carousel')) {
					$(ele).data('owl.carousel').destroy()
				}

				if($(ele).children().length > 3) {
		    		$(ele).owlCarousel({
		    			items: 3,
		    			margin: 15,
		    			slideBy: 'page',
		    			nav: true,
		    			dots: false,
		    		})
				}
			});
		} else if($(this).width() <= 768 && otherStep !== 'mobile') {
			otherStep = 'mobile'

			owlTarget.each(function(i, ele) {
				if($(ele).data('owl.carousel')) {
					$(ele).data('owl.carousel').destroy()
				}
			});
		}  		
	})

	$('.other-tags').on('click', '.item > button', function(e) {
		const hashTarget = $(this).data('hash')

		$(this).parents('.item').addClass('in-active').siblings('.item').removeClass('in-active')
		$(hashTarget).addClass('in-active').siblings('.content-item').removeClass('in-active')
	})

	$(window).trigger('resize')
	$('.other-tags .item:first-child > button').trigger('click')

  
})($)