(function($){
  	// // 處理zoombox觸發時背景外漏問題
  	// $('.zoonbox').on('mouseenter', 'img[role="presentation"]', function(e) {
  	// 	// console.log()
  	// 	if($(this).complete){
  	// 		$(this).siblings('.picbox').css({
			// 	opacity: 0
	  // 		});
  	// 	}else{
			// $(this).siblings('.picbox').css({
			// 	opacity: 1
	  // 		});
  	// 	}

  	// }).on('mousemove', 'img[role="presentation"]', function(e) {
  	// 	console.log($(this).css('[opacity, top, left]'))
  	// }).on('mouseleave', 'img[role="presentation"]', function(e) {
  	// 	$(this).siblings('.picbox').removeAttr('style')
  	// });
  	
  	/* 回到購買處 */
  	$('.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;
    $(document).on('click','.click-pic',function(){
    	// prodpop-new popBox
    	var ID = $(this).data('id');
        $.ajax({
            type:'POST',
            url:'/hk/shopcart/ajax/ajax_prodnew.php',
            data:{'ID':ID},
            success: function(data){
                // console.log('data');
            $('.prodpop-new').html(data);
            $('.prodpop-new').css('display','block');
            //滿額加購跳出視窗
            if($('.prodpop-new .prodpop-itempic').length >4){
                // console.log('owl');
                $('.prodpop-new .prodpop-other').addClass('owl-carousel').owlCarousel({
                    loop:true,
                    margin:10,
                    items:4,
                    navText : ['',''],
                });
            }
        }});
        $('.prodpop-new').on('click','.prodpop-other img',function(){
            var line = $(this).attr('src');
            console.log(line);
            $(".prodpop-new .prodpop-pic img").attr('src',line);
        })
    });

    
    $(document).on('click','.prodpop-new .close',function(){
    	$('.prodpop-new').css('display','none');
    });
    if($('.content_1 .click-block').length >3){
    	$('.content_1 .click-block').css('width',"98%");
    	$('.oproduct-tagcontent .content_1').addClass('owl-carousel').owlCarousel({
	      responsive:{
	        0:{
	          items : 1
	        },
	        481:{
	          items : 2
	        },
	        960:{
	          items : 3
	        }
	      },
	        nav : true,
	        navText : ['',''],
	    });
    }
     if($('.content_2 .click-block').length >3){
    	$('.content_2 .click-block').css('width',"98%");
    	$('.oproduct-tagcontent .content_2').addClass('owl-carousel').owlCarousel({
	      responsive:{
	        0:{
	          items : 1
	        },
	        481:{
	          items : 2
	        },
	        960:{
	          items : 3
	        }
	      },
	        nav : true,
	        navText : ['',''],
	    });
    }
     if($('.content_3 .click-block').length >3){
    	$('.content_3 .click-block').css('width',"98%");
    	$('.oproduct-tagcontent .content_3').addClass('owl-carousel').owlCarousel({
	      responsive:{
	        0:{
	          items : 1
	        },
	        481:{
	          items : 2
	        },
	        960:{
	          items : 3
	        }
	      },
	        nav : true,
	        navText : ['',''],
	    });
    }
    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").addClass('owl-carousel').owlCarousel({
		loop : false,
		responsive:{
			0:{
				items : 2
			},
			320:{
				items : 3
			},
			480:{
				items : 6
			},
			660:{
				items : 8
			},
			768:{
				items : 9
			},
			1023:{
				items : 10
			}
		},
		nav : true,
		navText : ['',''],

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

	$("article .recommend_l,article .history_l,article .other_l").addClass('owl-carousel').owlCarousel({
		nav : true,
		responsive:{
			0:{
				items : 2
			},
			480:{
				items : 3
			},
			768:{
				items : 4
			},
			1024:{
				items : 5
			}
		},
		navText : ['',''],
	});
	const productImg = $('.productView > .productImg');
	function bigPicCheck() {
		const zoomBoxCheck = $('.owl-item.active > .zoonbox').hasClass('zoom-box');
		const windowSizeCheck = $(window).width() <= 768;

		if (zoomBoxCheck && windowSizeCheck){
			$('#big_picture').removeClass('hidden');
			$('#big_picture').show();
			$('#big_picture + .previewBox').show();
		} else {
			$('#big_picture').addClass('hidden');
			$('#big_picture').hide();
			$('#big_picture + .previewBox').hide();
		}
	}
	if ($(".productImg .picbox ").length > 1){
		let target = productImg.addClass('owl-carousel').owlCarousel({
	        loop : true,
	        items : 1,
	        nav : true,
	        navText : ['','']
	    });
	    target.on('translated.owl.carousel', function(e) {
	    	bigPicCheck();
	    });
	}

	$('.zoonbox').eq(0).addClass('now').parent('.owl-item').addClass('active');
	bigPicCheck();

    var moreview_owl = $('.moreview');
	if($(".moreview .picitem ").length > 5){
        moreview_owl.addClass('owl-carousel').owlCarousel({
 			loop:false,
			items : 5,
			nav : true,
      navText : ['',''],
		});
	}else{
		$(".moreview .picitem ").css('width','20%');
	}
    let moreviewStep = 0
	productImg.on('changed.owl.carousel', function(event) {
	    const cloneOffset = Math.ceil(event.item.count / 2)
	    const itemIndex = (event.item.index + event.item.count - cloneOffset) % event.item.count
	    const moreviewPage = Math.floor(itemIndex / 5)

	    if(moreviewPage !== moreviewStep) {
	    	moreviewStep = moreviewPage
	    	moreview_owl.trigger('to.owl.carousel', moreviewPage * 5);
	    }


	    $('.moreview .picitem').removeClass('now').eq(itemIndex).addClass('now');
	});

    productImg.on('translate.owl.carousel', function(e){
        $('.productView .productImg .owl-item').find('video').each(function(){
            $(this).get(0).pause();
        })
        $('.moreview .video_control').addClass('fa-play').removeClass('fa-pause');
    })
    productImg.on('translated.owl.carousel', function(e){
        if($('.productView .productImg .owl-item.active').find('video').length > 0){
            var video = $('.productView .productImg .owl-item.active').find('video').get(0);
            video.play();
            moreview_Video(video)
        }
    })

    $(document).on("click", ".moreview .picitem", function(){
      let _this = $(this),
          pointer = _this.data("pointer")
      
      $('.moreview .picitem').removeClass('now')
      _this.addClass('now');
      $(".productView .productImg").trigger('to.owl.carousel', pointer.replace("prodpic_",""))
    })

	$('.followbox').on('mouseenter','.follow-item' , function(event) {
		var sth = $(this).find('img').attr('src').replace('.jpg','o.jpg');
		$(this).find('img').attr('src',sth)
	});
	$('.followbox').on('mouseleave','.follow-item' , function(event) {
		var sth = $(this).find('img').attr('src').replace('o.jpg','.jpg');
		$(this).find('img').attr('src',sth)
	});

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


    // _window.on('resize', function(){
    // 	const $windowWidth = _window.width();

    // 	switch ($windowWidth) {
    // 		case ($windowWidth =< 768 && change !== 768):
    // 			change = 768
    // 			$('.productImg').addClass('mobile').removeClass('pc');


    // 			break;

    // 		case ($windowWidth < 768 && change !== 960):
    // 			change = 960
    // 			$('.productImg').removeClass('mobile').addClass('pc');

    // 			break;
    // 	}
    // })


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

		$('.productView').on('mouseenter', '.zoom-box', function(e) {
			let big_pic = $(this).attr('big-pic');
			$(this).zoom({
				url: "" + big_pic,
				magnify: 1
			});
		});
    }else if(_window.width() <= 768 && change!= 768){
        change = 768;

		$('.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:not(".cloned")').length;

    	$('article .previewbox').css('display','block').find('img').eq(nowitem).css('display','block');
    });
    $('article').find('.previewbox').on('click','.close',function(){


    	$('article .previewbox, .productView').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) {
	    	$('.productImg').removeClass('mobile').addClass('pc');
	    } else {
	    	$('.productImg').removeClass('pc').addClass('mobile');
	    }


        if( _window.width() > 768 && change != 960){
 			 change = 960;

    		$('.productView').on('mouseenter', '.zoonbox', function(e) {
				let big_pic = $(this).attr('big-pic');
				$(this).zoom({
					url: big_pic,
					magnify: 1
				});
			});
			$('.item-1').off('click','img');
			imgviewbox.off('click','.close');
        }else if(_window.width() <= 768 && change != 768){
            change = 768;

			$('.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();
			});
        };
    });

    _window.trigger('resize');

     	/* 放大鏡效果 */
	 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="'+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: '50%',
				width: '50%'
			});
		// console.log(zoonbox_now);

			var _this = $(this),
				previewBox = $('.productView .preview');
				viewbox = _this.find('.viewbox');
				// console.log(viewbox)
		   var image = new Image();
		    image.src = 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(){
		//影片預覽圖
		if(document.getElementById("Video")){
			document.getElementById("Video").oncanplay=function(){
				var video = $("#Video").get(0);
				var canvus = document.getElementById("video_review");
					canvus.getContext('2d').drawImage(video, 0, 0, 66, 92);
			};
		}
	}

    //影片控制
    function moreview_Video(e){
        if(e.paused){
            $('.moreview .video_control').addClass('fa-play').removeClass('fa-pause');
        }else{
            $('.moreview .video_control').addClass('fa-pause').removeClass('fa-play');
        }
    }

  }(jQuery));