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

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

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

	$("article .recommend_l, article .other_l,.outfit_l").owlCarousel({
		nav : true,
		responsive:{
			0:{
				items : 2
			},
			480:{
				items : 3
			},
			768:{
				items : 4
			},
			1024:{
				items : 5
			}
		}
	})

	// 這個獨立出來
	$("article .history_l").owlCarousel({
		nav : true,
		responsive: {
			0: {
				items : 2
			},
			480: {
				items : 3
			},
			768: {
				items : 3
			},
			1024: {
				items :3
			}
		}
	})

	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 = $(".addButton").attr("sid")
		}
		if(!sid)
		{
			sid = $(".Get_SID").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')
	})
	_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');

			var sid = $(".add_to_cart").attr("sid")
			if(!sid)
			{
				sid = $(".addButton").attr("sid")
			}
			if(!sid)
			{
				sid = $(".Get_SID").attr("sid");
			}
			$.get('/products/ajax/detail/productView_pc.php',{sid: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 = $(".addButton").attr("sid")
			}
			if(!sid)
			{
				sid = $(".Get_SID").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效果及切換功能 */
		if($(".moreview .picitem").length > 5){
			console.log($(".moreview .picitem").length)
			$(".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()
				$(".productView .zoonbox").css('display','none').eq(now).css('display','block')
			}).on('mouseleave','.owl-item', function() {
				var now = $(this).index()
				$(".productView .zoonbox").eq(now).css('display','none')
			})
		} else {
			console.log($(".moreview .picitem").length)
			$(".productView .moreview").on('mouseleave', function() {
				$(".productView .zoonbox").removeAttr('style')
			}).on('click','.picitem', function() {
				var now = $(this).index()
				$(".productView .picitem").removeClass('now')
				$(this).addClass('now')
				$(".productView .zoonbox").removeClass('now').eq(now).addClass('now')
			}).on('mouseenter','.picitem', function() {
				var now = $(this).index()
				$(".productView .zoonbox").css('display','none').eq(now).css('display','block')
			}).on('mouseleave','.picitem', 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,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:nonemax-height:nonemax-width:initialwidth:autowidth:'+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))