(function($){
  	/* 回到購買處 */
  	$('.gobuy').on('click',function(){
  		var tol = $(window).height();
  		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
			}
		},
    slideTransition : 'linear',
		nav : true,

	});
    $('#preview').css('display','none');
  let carouselWrapper = [".detail-recommend-carousel", ".detail-other-carousel", ".detail-history-carousel"]
  for(index in carouselWrapper){
    let wrapper = $(carouselWrapper[index]),
        itemsNum = wrapper.find(".common-carousel-item").length
    wrapper.owlCarousel({
      responsive:{
        0: {
          items : 2,
          stagePadding: 30
        },
        768: {
          items : 3,
          stagePadding: 40
        },
        1024: {
          items : 4,
          stagePadding: 50
        },
        1440: {
          items : 6,
          stagePadding: 60
        },
        1680: {
          items : 7,
          stagePadding: 60
        }
      },
      nav: true,
      dots: false,
      navText : ['',''],
      margin: 15,
      slideTransition : 'linear',
    });
  }

  var _window = $(window);
  var change = 0;
  var moreview = false;

  function productMain(){
    if(_window.width() > 961 && change != 960 ){
      change = 960;
      moreview = true;
      $('.productImg').trigger("destroy.owl.carousel")
      videoBox();
      smallPicBox();
    }else if(_window.width() <= 960 && change!= 768){
      change = 768;
      $('.productImg').owlCarousel({
            loop : false,
            items : 1,
            nav : false,
            slideTransition : 'linear',
        }).on("changed.owl.carousel", function(){
            $(".productImg").find("#Video").trigger("pause")
            $(".video-icon").removeClass("video-playing")
        })
    };
  }
  productMain()
  _window.on('resize',function(){
    productMain()
  })


    //關閉跳窗
    $(".inner").on('click','.close,.add_to_cart',function(){
        $(".selectPopupBox").removeClass('is-show');
    });

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

    
    
    
    // ==========================================================
    //  折價券
    // ==========================================================

    $('.product-coupon .coupon-list').owlCarousel({
        loop : true,
        margin: 25,
        navText : ['',''],
        responsive:{
            0:{
                items : 1,
                nav : false,
                dots: true,
            },
            769:{
                items : 2,
                nav : false,
                dots: true,
            },
            1201:{
                items : 3,
                nav : true,
                dots: false,
            }
        },
        slideTransition : 'linear',
    });
  
  //搭配商品輪播
  $(".product-mix-carousel").owlCarousel({
    responsive: {
      0: {
        items: 2,
        stagePadding: 30
      },
      370: {
        items: 2,
        stagePadding: 50
      },
      576: {
        items: 4,
        stagePadding: 50
      },
      768: {
        items: 5,
        stagePadding: 70
      },
      961: {
        items: 2,
        stagePadding: 0
      },
      1025: {
        items: 2,
        stagePadding: 30
      },
      1501: {
        items: 2,
        stagePadding: 70
      }
    },
    nav: true,
    dots: false,
    navText : ['',''],
    margin: 10,
    slideTransition : 'linear',
  })
  
  $(document).on("click", ".product-info-label", function(){
    if(!$(this).hasClass("in-active")){
      $(".product-info-label").removeClass("in-active")
      $(this).addClass("in-active")
    }
  })
  $(document).on("click", ".rating-bottom-label", function(){
    if(!$(this).hasClass("in-active")){
      $(".rating-bottom-label").removeClass("in-active")
      $(this).addClass("in-active")
    }
  })
  //尺寸表彈窗關閉
  $(document).on("click", ".product-popup-closer", function(){
    let target = $(this).data("close")
    $("#" + target).prop("checked",false)
  })
  $(document).on("click", ".desktop-popup", function(e){
    if($(e.target).hasClass("desktop-popup") && document.body.clientWidth > 960){
      let target = $(this).data("close")
      $("#" + target).prop("checked",false)
    }
  })
  //viewmore按鈕
  $(document).on("click", ".product-info-viewmorebtn", function(){
    $(this).parents(".mobile-viewmore").addClass("viewmore-open")
  })
  //影片播放按鈕
  $(document).on("click", ".video-bar", function(){
    let video = $("#Video")
    let icon = $(this).find(".video-icon")
    if(video.prop("paused")){
      $("#video_control").click()
      if(document.body.clientWidth <= 960){
        let index = $("#Video").parents(".owl-item").index()
        $(".productImg").trigger("to.owl.carousel",[index,0,true])
      }
      video.trigger("play")
      icon.addClass("video-playing")
    }else{
      video.trigger("pause")
      icon.removeClass("video-playing")
    }
    
  })
  
  //黏住右方商品資料
  let scroll = $(window).scrollTop()
  $(window).on("scroll", function () {
    let windowHeight = $(window).height(),
        container = $(".productTitle")
        stickyItem = $(".productTitle-inner")
        topRange = container[0].getBoundingClientRect().top
        infoHeight = stickyItem.height(),
        maxOffset = 120,
        minOffset = -infoHeight + windowHeight,
        finalOffset = 120,
        nowScroll = $(window).scrollTop(),
        nowTop = parseInt($(".productTitle-inner").css("top").replace("px","")),
        scrollRange = scroll - nowScroll //負數向下 正數向上
    
    //高度超出螢幕才有必要
    if (minOffset < maxOffset){
      if(!(topRange > maxOffset)){
        //不在頂端 滾動螢幕時同時滾動黏性區塊(以調整top的方式模擬滾動)
        finalOffset = nowTop + scrollRange
      }else{
        //在頂端 還沒需要sticky
        finalOffset = maxOffset
      }
      
      //讓最終的top介於頂端和尾端
      if(finalOffset < minOffset){
        finalOffset = minOffset
      }else if(finalOffset > maxOffset){
        finalOffset = maxOffset
      }
      $(".productTitle-inner").css("top", finalOffset+"px")
      scroll = nowScroll
    }
  })
  $(document).on("specChangeSlider", function(){
    smallPicBox()
  })
  
  
  //尺寸表彈窗依header高度縮放
  var scrollTemp = 0 //用來判斷上下捲動
  $("#product-4").on("change", function(){
    //開啟彈窗時先判斷header在不在
    let wrapper = $(".product-popup-wrapper"),
        header = $(".header-01"),
        closeBtn = $(".product-popup-wrapper .product-popup-closer")
        headerHeight = header.height()
    if($(window).width() >= 961){
      if($(".header-01").css("transform") == "none"){
        wrapper.css({
          "top": "calc(10vh + " + headerHeight + "px)",
          "height": "calc(80vh - " + headerHeight + "px)"
        })
        closeBtn.css({
          "top": "calc(10vh + " + headerHeight + "px)"
        })
      }
    }else{
      wrapper.css({
        "top": "initial",
        "height": "auto"
      })
    }
  })
  
  hideViewmore()
  //不足高度時隱藏看更多按鈕
  $(".product-info-wrapper .slideControl").on("change", function(){
    hideViewmore()
  })
  
  function hideViewmore(){
    if($(window).width() < 960){
      let wrapper = $(".product-popup-wrapper"),
          infobox = $(".product-info-wrapper .slideControl:checked + .product-info-wordbox"),
          viewmore = infobox.find(".product-info-viewmore")
      wrapper.css({
        "top": "",
        "height": ""
      })
      console.log(infobox.outerHeight())
      if(infobox.outerHeight() < 400){
        viewmore.addClass("hide")
      }else{
        viewmore.removeClass("hide")
      }
    }
  }
  
  $(window).on('load scroll', function(event) {
      let scrollTop = $(window).scrollTop(),
          wrapper = $(".product-popup-wrapper"),
          header = $(".header-01"),
          closeBtn = $(".product-popup-wrapper .product-popup-closer")
          headerHeight = header.height()
      if($(window).width() >= 961){
        if(scrollTop > scrollTemp && scrollTop > headerHeight && !$(".navBox").hasClass("open-nav")){
          wrapper.css({
            "top": "",//取消樣式
            "height": ""
          })
          closeBtn.css({
            "top": "",//取消樣式
          })
          scrollTemp = scrollTop
        }else if(scrollTop < scrollTemp){
          wrapper.css({
            "top": "calc(10vh + " + headerHeight + "px)",
            "height": "calc(80vh - " + headerHeight + "px)"
          })
          closeBtn.css({
            "top": "calc(10vh + " + headerHeight + "px)"
          })
          
          scrollTemp = scrollTop
        }
      }
  });
  

  //===========================
  // 手機/平版規格浮動按鈕
  //===========================
  //展開購買彈窗
  $(document).on("click", ".selectPopupBox-mobile-btn", function(){
    let wrapper = $(this).parents(".selectPopupBox-mobile")
    if($(window).width() < 961){
      //點擊黑色遮罩關閉
      wrapper.on("click",function(e){
        if($(e.target).hasClass("selectPopupBox-mobile")){
          $("body").css({"overflow":"auto"})
          wrapper.removeClass("open")
          wrapper.off("click")
        }
      })
      //讓背景不要滑動
      $("body").css({"overflow":"hidden"})
      wrapper.addClass("open")
    }
  })
  $(document).on("click", ".selectPopupBox-mobile .close, .selectPopupBox-mobile .add_to_cart", function(){
    let wrapper = $(this).parents(".selectPopupBox-mobile")
    $("body").css({"overflow":"auto"})
    wrapper.removeClass("open")
    wrapper.off("click")
  })
}(jQuery));



var bxSlide
function smallPicBox(){
	/* 小圖hover效果及切換功能 */
	if($(".moreview .picitem ").length > 0){
    let maxItem = 5
    if(document.body.clientWidth < 1200){
        maxItem = 5
    }else if(document.body.clientWidth < 1501){
      maxItem = 5
    }
    if(bxSlide){
      bxSlide.destroySlider()
    }
    //0.1564 = 5 * 0.782 5張圖 0.782為寬高比
    let leftPicWidth = Math.round(($(window).height() - $(".header-01").height() - $("#breadcrumb").outerHeight(true) - 160) * 0.1564)
    bxSlide = $(".productView .moreview").bxSlider({
        mode: 'vertical',
        minSlides: maxItem,
        maxSlides: maxItem,
        slideWidth: leftPicWidth,
        infiniteLoop: false,
        hideControlOnEnd: true,
        slideMargin: 10,
        preventDefaultSwipeY: true,
        speed: 100,
        pager: false,
    })
    bxSlide.reloadSlider();
    if(bxSlide.getSlideCount() > maxItem){
      $(".bx-wrapper").addClass("with-control")
    }
    $(".productView .moreview")
    .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();
      $(".productImg").find("#Video").trigger("pause")
      $(".video-icon").removeClass("video-playing")
      $(".productView .picitem").removeClass('now');
      $(this).addClass('now');
      $(".productView .zoonbox").removeClass('now').eq(now).addClass('now');
    })
    /*.on('mouseleave','.picitem', function() {
      $(".productView .picitem").removeClass('now').eq(0).addClass('now');
      $(".productView .zoonbox").removeClass('now').eq(0).addClass('now');
    });*/
	}else{
		$(".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();
			//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','.picitem', function() {
			var now = $(this).index();
			$(".productView .zoonbox").eq(now).css('display','none');
		});
	}

}