var prod_hover = function(option){
  var sets = {
    productBox     : ".productBox",                                         //被hover的對象的外層父元素 須含有SIDElement
    hoverTarget    : ".productImg",                                         //被hover的對象
    carouselTarget : ".center",                                             //hoverTarget被hover時輪播的容器
    getPicUrl      : "/products/ajax/list/ajax_get_prod_series_pic.php",    //取得輪播圖片的網址
    SID            : "sid",                                                 //取得輪播圖片的屬性
    SIDElement     : ".love",                                               //從哪個元素上取得SID
    HoveredFlag    : "hovered"                                              // data-hovered hover完的要更改為hovered以避免重複觸發
  }
  
  $.extend(sets, option);
	var _this = this;
  
  //==================================================
  // 桌機板
  // 第一次hover商品圖片時post系列圖並建立輪播
  // 行動板
  // touch時替換圖片 start
  //==================================================
  var longTouch = false
  $(sets.productBox).unbind("mouseenter touchstart touchend").on("mouseenter touchstart touchend", sets.hoverTarget, function(e){
    var _this = $(this)
    let touched = false
    let img = _this.find("img")
    if(e.type == "touchstart"){
      touched = true
      //判斷是短觸(連結)還是長觸(hover)
      var timeout = setTimeout(function(){
        longTouch = true
      },50)
      if(img.data("hover-pic")){
        img.prop("src", img.data("hover-pic"))
      }
    }else if(e.type == "touchend"){
      if(img.data("origin-pic")){
        img.prop("src", img.data("origin-pic"))
      }
      if(!longTouch){
        window.location.href = _this.prop("src")
      }
      longTouch = false
    }
    if(_this.data(sets.HoveredFlag) != "hovered"){
      sid = _this.parents(sets.productBox).find(sets.SIDElement).attr(sets.SID);
      //第一次hover
      $.ajax({
        type: "POST",
        cache: false,
        url: sets.getPicUrl,
        data: {
          sid: sid
        },
        dataType: "json"
      }).done(function(response){
          //改變data-hovered狀態避免重複請求
          _this.data(sets.HoveredFlag, "hovered")
        //行動裝置
        if(touched){
          //有hover圖
          if (response.hoverPic){
            img.data("hover-pic",response.hoverPic)
            img.data("origin-pic", img.prop("src"))
            img.prop("src", img.data("hover-pic"))
          }
        }else{
          let Pictures = ""
          //如果有post到東西
          if(response.picUrls){
            // 替換商品圖片成系列圖組
            for( url of response.picUrls){
              Pictures += '<img class="series-pic" src="'+url+'" >'
            }
            //建立輪播
            _this.find(sets.carouselTarget).html(Pictures).owlCarousel({
              responsive:{
                0:{
                  items: 1
                }
              },
              loop: true,
              nav: true,
              dots: false
            })
            
            //將圖片轉移到hover圖
            if(response.hoverPic){
              _this.data("need-hover", "need-hover")
              _this.find(sets.carouselTarget).trigger('to.owl.carousel',[1,500,true])
            }
          }
        }
      }).fail(function(error){
        //console.log(error)
      })
    }else{
      _this.find(".owl-nav").show()
      if(_this.data("need-hover")){
        _this.find(sets.carouselTarget).trigger('to.owl.carousel',[1,500,true])
      }
    }
  })
  //==================================================
  // 桌機板
  // 第一次hover商品圖片時post系列圖並建立輪播
  // 行動板
  // touch時替換圖片 end
  //==================================================
  
  
  
  //===================================================================
  // 滑鼠離開商品圖輪播後隱藏換頁箭頭並將圖片返回主圖 start
  //===================================================================
  $(sets.productBox).on("mouseleave", sets.hoverTarget, function(e){
    var _this = $(this)
    //隱藏換頁箭頭
    _this.find(".owl-nav").hide()
    //將圖片返回主圖
    _this.find(sets.carouselTarget).trigger('to.owl.carousel',[0,500,true])
  })
  //===================================================================
  // 滑鼠離開商品圖輪播後隱藏換頁箭頭並將圖片返回主圖 end
  //===================================================================
  
  
  
  //===========================================
  //中止換頁時點擊事件冒泡觸發連結跳轉 start
  //===========================================
  $(sets.productBox).on("click", ".owl-nav", function(e){
    e.stopPropagation()
    return false
  })
  //===========================================
  //中止換頁時點擊事件冒泡觸發連結跳轉 end
  //===========================================
  
  
  
  //===================================================================
  // 切換2/4列時取消輪播(不然圖會不一樣高) start
  //===================================================================
  $("#viewMode .view-three, #viewMode .view-four").on("click", function(){
    $(sets.carouselTarget).trigger("destroy.owl.carousel")
    //改變data-hovered狀態 不然無法再次觸發輪播
    $(sets.hoverTarget).data(sets.HoveredFlag, "non-hovered")
  })
  //===================================================================
  // 切換2/4列時取消輪播(不然圖會不一樣高) end
  //===================================================================
  
}