(function($){
	$('#preview').css('display','none')

	/* 回到購買處 */
	$('.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()))
	}

	/*評論預覽商品圖*/
	$(".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")
	})

	/*上方banner廣告圖*/
	$(".top_productbox").owlCarousel({
		loop : false,
		responsive:{
			0:{
				items : 2
			},
			320:{
				items : 3
			},
			480:{
				items : 6
			},
			660:{
				items : 8
			},
			768:{
				items : 9
			},
			1023:{
				items : 10
			}
		},
		nav : true,

	})

	$("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
			}
		}
	})

	var _window = $(window)
	var change = 0
	var change_1023 = 0
	var moreview = false
	var imgviewbox = $('.imgviewbox')

	if(_window.width() > 769 && change != 960 ) {
		change = 960
		moreview = true

		smallPicBox()
		zoonbox()
		videoBox()
	} else if(_window.width() <= 768 && change!= 768) {
		change = 768
		var sid = $(".add_to_cart").attr("sid");
		if(!sid){
			sid = $(".informButton").attr("sid");
		}
		  
		$.get('/products/ajax/detail/productView_moblie.php',{sid:sid}, function(data,status) {
			$('.productView').html(data)
			$('.productImg').owlCarousel({
				 loop : false,
				items : 1,
				nav : true,
			})
			$('.productImg').on('changed.owl.carousel',function(e){
				var num  = e.item.index
				if(document.getElementById("Video")){
					if($(".productView").find(".owl-item").eq(num).find("#Video").attr("style")){
						$("#big_picture").hide()
						document.getElementById("Video").play()
					}else{

						$("#big_picture").show()
						document.getElementById("Video").pause()
					}
				}
			})
		})
		// imgviewbox.css('display','block')
		$('.item-1').on('click','img', function(event) {
			var html ='<img src="'+$(this).attr('src')+'">' 
			imgviewbox.append(html).css('display','block')
		})
		imgviewbox.on('click','.close', function(event) {
			imgviewbox.css('display','none').find('img').remove()
		})
	}

	if(_window.width() <= 1023 && change_1023 != 1023) {
		change_1023 = 1023
	} else if(_window.width() > 1023 && change_1023 != 1200) {
		change_1023 = 1200
	}

	$('article').on('click','.open-preview',function() {
		var nowitem = $('.productImg .active').prevAll('.owl-item').length
		$('article .previewbox').css('display','block').find('img').eq(nowitem).css('display','block')
	})

	$('article').on('click','.close',function() {
		$('article .previewbox').removeAttr('style').find('img').removeAttr('style')
	})

	if(_window.width() <= 768) {
		_window.on('scroll', function() {
			if($(window).scrollTop() >= $('.productTitle .wordbox').first().offset().top) {
				$('.fixButton').show()
			} else {
				$('.fixButton').hide()
			}
		})
		$('#Main_Content').on('click', '.fixButton', function() {
			$('.popupBox').addClass('is-show')
			$('.popup').removeClass('hide-768').addClass('show-768')
		})
		$('#Main_Content').on('click', '.closePopup', function() {
			$('.popupBox').removeClass('is-show')
			$('.popup').removeClass('show-768').addClass('hide-768')
		})
	}
	_window.trigger('scroll')
	_window.on('resize',function() {
		if(_window.width() <= 1023 && change_1023 != 1023) {
			change_1023 = 1023
		} else if(_window.width() > 1023 && change_1023 != 1200) {
			change_1023 = 1200
		}
		if( _window.width() > 768 && change != 960) {
			 change = 960
			$('.productView .moreview').removeAttr('style')
			$.get('/products/ajax/detail/productView_pc.php',{sid:$(".add_to_cart").attr("sid")}, function(data,status){
				//console.log("pc板")
				//console.log(data+"+"+status)
				$('.productView').html(data)
				// $(".moreview")
				// .trigger('destroy.owl.carousel')
				// .owlCarousel({
					//   loop : false,
					//   items :5,
					//   nav : true
				//  })
				//   moreview = true
				smallPicBox()
				zoonbox()
				videoBox()
			})
			$('.item-1').off('click','img')
			imgviewbox.off('click','.close')
		}else if(_window.width() <= 768 && change != 768){
			change = 768
			var sid = $(".add_to_cart").attr("sid");
			if(!sid){
				sid = $(".informButton").attr("sid");
			}

			$.get('/products/ajax/detail/productView_moblie.php',{sid:sid}, function(data,status){
				//console.log("手機板")
				//console.log(data+"+"+status)
				$('.productView').html(data)
				$('.productImg').owlCarousel({
					loop : false,
					items : 1,
					nav : true,
				})
				$('.productImg').on('changed.owl.carousel',function(e){
					var num  = e.item.index

					if(document.getElementById("Video")){
						if($(".productView").find(".owl-item").eq(num).find("#Video").attr("style")){
							$("#big_picture").hide()
							document.getElementById("Video").play()
						}else{
							$("#big_picture").show()
							document.getElementById("Video").pause()
						}
					}
				})
			})
			// imgviewbox.css('display','block')
			$('.item-1').on('click','img', function(event) {
				var html ='<img src="'+$(this).attr('src')+'">' 
				imgviewbox.append(html).css('display','block')
			})
			imgviewbox.on('click','.close', function(event) {
				imgviewbox.css('display','none').find('img').remove()
			})
		}
	})

	function smallPicBox() {
		 /* 小圖hover效果及切換功能 */
		$(".productView .moreview")
		.owlCarousel({
			loop:false,
			items : 5,
			nav : true,
		})
		.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')
		})
	}

	/* 放大鏡效果 */
	function zoonbox(){
		var ImgBox,ImgBox_h,ImgBox_w,viewbox,viewbox_h,viewbox_w,mouseY,mouseX,preview,preview_img,scale_h,scale_w;
		preview_str = '<div class="preview">';
		ImgBox = $('.productImg .now').offset();


	$('.productView').off('mouseenter mousemove mouseleave','.picbox');

	$('.productView').on('mouseenter','.picbox',function(){

		var preview_str = '<div class="preview">';

		var zoonbox_now = $(this).parents('.zoonbox'),
		big_pic = zoonbox_now.attr('big-pic');

		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);
		preview = zoonbox_now.find('.preview');
		preview.css({
			height: '100%',
			width: '100%'
		});

		var _this = $(this),
			previewBox = $('.productView .preview');
			viewbox = _this.find('.viewbox');
			// console.log(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; 

	    	// 若原始圖片高度 < 放大框高度，縮小比例為1
	    	scale_h = (previewBox.height() / ImgBox_h < 1) ? previewBox.height() / ImgBox_h : 1;
	    	// 若原始圖片寬度 < 放大框寬度，縮小比例為1
	    	scale_w = (previewBox.width() / ImgBox_w < 1) ? previewBox.width() / ImgBox_w : 1 ;

	    	// 取得觀看範圍的高：圖框高 * 放大高 / 原始高
			viewbox_h = _this.height() * (scale_h);
			// 取得觀看範圍寬：圖框寬 * 放大寬 / 原始寬
			viewbox_w = _this.width() * (scale_w);

			// 滑鼠可移動 Y 軸範圍
			mouseY = _this.height() - viewbox_h;
			// 滑鼠可移動 X 軸範圍
			mouseX = _this.width() - viewbox_w;

			viewbox.css({
				'opacity': 1,
				'height': viewbox_h,
				'width': viewbox_w,
			});
			// zoonbox_now.html(preview_str);
			// console.log(preview_str);
			// console.log(preview)
			preview_img = preview.find('img');


			_this.parents('.owl-stage-outer').css('overflow', 'visible');
		}
	})
	.on('mousemove','.picbox',function(e){
		previewBox = $('.productView .preview');
		// 取得圖框距離網頁上方的值
		const canvusTop = $(this).offset().top;
		// 取得圖框距離網頁左方的值
		const canvusLeft = $(this).offset().left;

		// 取得滑鼠目前位置距離網頁上方的值
		const mouseTop = e.pageY;
		// 取得滑鼠目前位置距離網頁左方的值
		const mouseLeft = e.pageX;

		if ((mouseLeft - canvusLeft) < viewbox_w / 2) {
			preview_img.css({
				left: 0
			})
			viewbox.css({
				left: 0
			})
		} else if((mouseLeft - canvusLeft) > ($(this).width() - viewbox_w / 2)){
			preview_img.css({
				left: (ImgBox_w - previewBox.width()) * -1
			})
			viewbox.css({
				left: mouseX
			})
		} else {
			preview_img.css({
				left: (mouseLeft - canvusLeft - viewbox_w / 2) * ImgBox_w / $(this).width() * -1
			});
			viewbox.css({
				left: mouseLeft - canvusLeft - viewbox_w / 2
			})
		}


		if ((mouseTop - canvusTop) < viewbox_h / 2) {
			preview_img.css({
				top: 0
			})
			viewbox.css({
				top: 0
			})
		} else if((mouseTop - canvusTop) > ($(this).height() - viewbox_h / 2)){
			preview_img.css({
				top: (ImgBox_h - previewBox.height()) * -1
			})
			viewbox.css({
				top: mouseY
			})
		} else {
			preview_img.css({
				top: (mouseTop - canvusTop - viewbox_h / 2) * ImgBox_w / $(this).height() * -1
			});
			viewbox.css({
				top: mouseTop - canvusTop - viewbox_h / 2
			})
		}
	})
	.on('mouseleave','.picbox',function(){
		$('.productImg .viewbox').css({
			'opacity':0,
		});
		$('.productImg .preview').remove();
		preview_str= '<div class="preview">';

		$('.owl-stage-outer').removeAttr('style');
	});
	}
	
	/*影片效果*/
	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))