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

	/*上方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 .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;

	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");
        }
        //若無SID則抓購物車(尚未開放)按鈕的
        if(!sid)
        {
        	sid = $(".addButton").attr("sid");
        }
        
 		$.get('/products/ajax/detail/productView_moblie.php',{sid:sid}, function(data,status){
			//console.log("手機板");
			//console.log(data+"+"+status);
			$('.productView').html(data)
		    $('.productImg2').slick({
		        slidesToShow: 1,
		        slidesToScroll: 1,
		        arrows: true,
		        fade: true,
		        asNavFor: '.previewbox2',
		    });
		    $('.previewbox2').slick({
		        slidesToShow: 5,
		        slidesToScroll: 1,
		        asNavFor: '.productImg2',
		        focusOnSelect: true,
		        arrows: true,
                centerMode:false,
                // dots:true

		    });
		});

    };

	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');
			$.get('/products/ajax/detail/productView_pc.php',{sid:$(".addButton").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();
			});
        }else if(_window.width() <= 768 && change != 768){
            change = 768;
	        $.get('/products/ajax/detail/productView_moblie.php',{sid:$(".addButton").attr("sid")}, function(data,status){
				//console.log("手機板");
				//console.log(data+"+"+status);
				$('.productView').html(data)
				    $('.productImg2').slick({
				        slidesToShow: 1,
				        slidesToScroll: 1,
				        
				        fade: true,
				        asNavFor: '.previewbox2'
				    });
				    $('.previewbox2').slick({
				        slidesToShow: 5,
				        slidesToScroll: 1,
				        asNavFor: '.productImg2',
				        focusOnSelect: true,
				        arrows: false,
				    });
			});
        };
    });

    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,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")){
            var video = $("#Video").get(0);
            var canvas = document.getElementById("video_review"),
                context = canvas.getContext('2d')
            let counter = 0
            context.clearRect(0,0,66,66)
            let videoPreview = setInterval(function(){
                if(!context.getImageData(0,0,66,66).data.some(channel=>channel !== 0)){
                    context.drawImage(video, 0, 0, 66, 66);
                    if(counter > 50){
                        //5秒自動銷毀 避免意外
                        clearInterval(videoPreview)
                    }
                    counter++
                }else{
                    clearInterval(videoPreview)
                }
            },100)
			document.getElementById("Video").oncanplay=function(){
                
			};
		}
	}

	$('.programItem').on('click', function() {
		$(this).addClass('is-click');
		$('.programItem').not(this).removeClass('is-click');
		var sid = $(this).attr("sid");
		var price = $(this).find(".productPrice").attr("price");
		var type = $(this).attr("type");
		var price2 = '售價NT$'+$(this).find(".price2").text();

		$(".Add_Button3").attr("sid",sid);
		$(".pricebox").find(".price").text(price);
		$(".pricebox").find(".font-delete").text(price2);
		$(".Add_Button3").find(".add_to_cart").attr("sid",sid);
		$(".add_to_cart").attr("sid",sid);
		$(".buttonBox").find(".addButton_mobile").attr("sid",sid);

	})
	
	$(document).on("click", ".gobuy .Add_Button3", function(){
		let target = $(this).data("target")
		$("html,body").animate({scrollTop: $("#" + target).position().top},800)
	})


  }(jQuery));