// ==========================================================
// 	商品輪播
// ==========================================================
;(function($) {
	const prodView = $('.productImg')
	
	prodView.owlCarousel({
		loop: false,
		items: 1,
		dots: true,
		dotsData: true,
		nav: true,
		margin: 10,
    onRefreshed: function(e) {
      const pictureHeight = prodView.find('.picbox').height()

      prodView.find('.owl-nav').css({
        top: (pictureHeight / 2),
      });
    }
	})
  setTimeout(function(){
      prodView.trigger('refresh.owl.carousel');
  },500);
})($)



// ==========================================================
// 	collapse 開關
// ==========================================================
;(function($) {
    function log(obj) {
        console.log(obj)
    }

    $('#Main_Content').on('click', '.collapse-list-title', function(e) {
    	const wrapper = $(this).parents('.collapse-list-item')

    	wrapper.toggleClass('theme-open');
    })
})($)





// ==========================================================
// 	slide 跳窗
// ==========================================================
;(function($) {
    function log(obj) {
        // console.log(obj)
    }
    const extraSlide = $('.extra-slide')
    const extraDot = $('.extra-dot')

    function showNowIndex() {
    	const nowIndex = extraSlide.find('.owl-item.active').index()
    	log(nowIndex)
    	extraDot.find('.owl-item').removeClass('theme-shownow').eq(nowIndex).addClass('theme-shownow')
    }

    extraDot.owlCarousel({
    	items: 12,
    	nav: true,
    	dots: false,
    	margin: 16,
    })

    extraSlide.owlCarousel({
    	items: 1,
    	nav: true,
    	dots: false,
    	URLhashListener: true,
    	onTranslated: showNowIndex,
    	onInitialized: showNowIndex,
    	onRefreshed: showNowIndex,
    })
})($)





// ==========================================================
// 	modal 開關
// ==========================================================
;(function($) {
    // $('body').on('click', '.modal-toggle', function(e) {
    // 	const target = $(this).data('target')
    // 	$(target).addClass('theme-active')
    // 	$('body').addClass('overflow-hidden')
    // })
    onModal('.modal-toggle:not(.picbox)')

    $('.modal-wrapper').on('click', function(e) {
    	const classAry = [...e.target.classList]
    	
    	if(classAry.indexOf('modal-closer') !== -1 || e.target === e.currentTarget) {
    		$(this).removeClass('theme-active')
    		$('body').removeClass('overflow-hidden')
    	}

    	$('.extra-slide, .extra-dot').trigger('refresh.owl.carousel')
    })
})($)






// ==========================================================
//  JS 響應
// ==========================================================
;(function($) {
  let deviceType = ''

  $(window).on('resize', function(e) {
    const winWidth = $(window).width()
    $('.modal-wrapper').removeClass('theme-active')
    $('body').removeClass('overflow-hidden')

    if(winWidth > 1024 && deviceType !== 'desktop') {
      deviceType = 'desktop'

      onZoom()
      onModal('.modal-toggle.picbox')
    } else if(winWidth <= 1024 && deviceType !== 'mobile') {
      deviceType = 'mobile'

      offZoom()
      offModal('.modal-toggle.picbox')
    }
  })

  $(window).trigger('resize')
})($)

// 啟動跳窗功能
function onModal(selector) {
  $('body').on('click', selector, function(e) {
    const target = $(this).data('target')
    $(target).addClass('theme-active')
    $('body').addClass('overflow-hidden')
  })
}

// 關閉跳窗功能
function offModal(selector) {
  $('body').off('click', selector)
}

// 啟動放大鏡
function onZoom() {
  let wrapLeft = 0;
  let wrapTop = 0;
  let wrapWidth = 0;
  let wrapHeight = 0;

  let zoomImage = '';
  let imgWidth = 0;
  let imgHeight = 0;

  let previewWidth = 0;
  let previewHeight = 0;

  const previewRatio = 1;

  $('body').on('mouseenter', '.picbox-link', function (e) {
    wrapLeft = $(this).offset().left;
    wrapTop = $(this).offset().top;
    wrapWidth = $(this).outerWidth();
    wrapHeight = $(this).outerHeight();

    if ($(this).find('.zoom-target').length === 0) {
      $(this).append('<div class="zoom-target"></div>');
    }

    if ($('.productView .zoom-box').length === 0) {
      $('.productView').append('<div class="zoom-box"></div>');
    }

    const imgPath = $(this).find('.picbox-img').data('big');
    zoomImage = document.createElement('IMG');
    zoomImage.setAttribute('src', imgPath);
    $('.zoom-box').empty().append(zoomImage);

    previewWidth = wrapWidth * previewRatio;
    previewHeight = wrapHeight * previewRatio;

    $('.zoom-box').css({
      width: previewWidth,
      height: previewHeight });

  });

  $('body').on('mouseleave', '.picbox-link', function (e) {
    $(this).find('.zoom-target').remove();
    $(this).parents('.productView').find('.zoom-box').remove();
  });

  $('body').on('mousemove', '.picbox-link', function (e) {
    const ratioWidth = previewWidth / imgWidth;
    const ratioHeight = previewHeight / imgHeight;

    imgWidth = $('.zoom-box > img').outerWidth();
    imgHeight = $('.zoom-box > img').outerHeight();

    const target = $(this).find('.zoom-target');
    target.css({
      width: ratioWidth * wrapWidth,
      height: ratioHeight * wrapHeight });


    const targetWidth = target.outerWidth();
    const targetHeight = target.outerHeight();

    let offsetTop = 0;
    if (e.clientY - wrapTop < targetHeight / 2) {
      offsetTop = targetHeight / 2;
    } else if (e.clientY - wrapTop > wrapHeight - targetHeight / 2) {
      offsetTop = wrapHeight - targetHeight / 2;
    } else {
      offsetTop = e.clientY - wrapTop;
    }

    let offsetLeft = 0;
    if (e.clientX - wrapLeft < targetWidth / 2) {
      offsetLeft = targetWidth / 2;
    } else if (e.clientX - wrapLeft > wrapWidth - targetWidth / 2) {
      offsetLeft = wrapWidth - targetWidth / 2;
    } else {
      offsetLeft = e.clientX - wrapLeft;
    }

    target.css({
      top: offsetTop,
      left: offsetLeft });

    $(zoomImage).css({
      top: (offsetTop - targetHeight / 2) / ratioWidth * -1,
      left: (offsetLeft - targetWidth / 2) / ratioHeight * -1 });

  });
}

// 關閉放大鏡
function offZoom() {
  $('body').off('mouseenter mouseleave mousemove', '.picbox-link')
}



// ==========================================================
//  客製化 select 樣式
// ==========================================================
;(function($) {
    let psStep = 0
    function log(obj) {
        console.log(obj)
    }
    function psCheck(jqElement, className, step) {
      if(step) {
        jqElement.addClass(className)
      } else {
        jqElement.removeClass(className)
      }
    }
    function reWrite(psTarget) {
      const value = psTarget.val() || psTarget.find('option:selected').text() || psTarget.find('option').eq(0).text();
      psTarget.next('.ps-wrapper').find('.ps-showbox').text(value)
    }

    // 組件客製化 select
    function psStart(psTarget){
      let fakeSelect = ''
      psTarget.find('option').each(function(index, el) {
        const itemText = $(el).text()
        const itemValue = $(el).attr('value') || itemText;

        fakeSelect += `
          <li class="ps-option" data-value="${itemValue}">${itemText}</li>
        `
      });
      psTarget.after(`
        <div class="ps-wrapper">
            <span class="ps-showbox"></span>
            <ul class="ps-optgroup"></ul>
        </div>
        `)
      psTarget.parents(".select-wrapper").find('.ps-optgroup').append(fakeSelect)
    }
    psStart($('.floatBox .pop-select'))


    // select 開關
    $('body').on('click', '.ps-showbox', function(e) {
      psStep = (psStep + 1) % 2
      psCheck($(this).parents('.ps-wrapper'), "in-active", psStep)
    })

    // 點擊 select 外部關閉
    $('body').on('click', function(e) {
      const target = e.target
      const targetClass = [...target.classList]

      if(targetClass.indexOf('ps-showbox') === -1 && targetClass.indexOf('ps-wrapper') === -1) {
        psStep = 0
        psCheck($('.ps-wrapper'), "in-active", psStep)
      }
    })

    // select value 選擇
    $('body').on('click', '.ps-option', function(e) {
      const value = $(this).data('value');

      // 數值回傳至 select
      $(this).parents('.ps-wrapper').prev('.pop-select').val(value)
      reWrite($(this).parents('.select-wrapper').find('.pop-select'))
    })

    reWrite($('.floatBox .pop-select'))
    
    // ==========================================================
    // 	手機版購物視窗 start
    // ==========================================================
    //關彈窗
    $(document).on("click", ".purchaseBox-closer", function(){
      $(".purchaseBox-wrapper").removeClass("in-active")
    })
    $(document).on("click", ".purchaseBox-wrapper", function(e){
      if($(e.target).hasClass("purchaseBox-wrapper")){
        $(".purchaseBox-wrapper").removeClass("in-active")
      }
    })
    //呼叫彈窗
    $(document).on("click", ".purchaseBox-btn", function(){
      $(".purchaseBox-wrapper").addClass("in-active")
      $.ajax({
        url: "/products/ajax/detail/ajax_purchaseBox_mobile.php",
        type:"POST",
        cache:false,
        async:false,
        data:{id:$(this).data("sid")},
        error:function(d){
            alert('網路連線過慢，網頁請重新整理');
        },
        success:function(d){
          $(".purchaseBox-body").html(d);
          psStart($(".purchaseBox-wrapper .pop-select"))
          reWrite($('.purchaseBox-wrapper .pop-select'))
        }
      })
    })
    // ==========================================================
    // 	手機版購物視窗 end
    // ==========================================================
})($)



// ==========================================================
//  owl in panel
// ==========================================================
;(function($) {
  let panelStep = ''

  $(window).on('resize', function(e) {
    const thisWidth = $(this).width()
    if(thisWidth > 1200 && panelStep !== 'desktop') {
      panelStep = 'desktop'

      $('.panel-list').each(function(i, ele) {
        $(ele).owlCarousel({
          dots: false,
          items: 6,
          margin: 30,
          nav: true,
          navText: ['',''],
          slideBy: 'page',
        })
      })
    } else if (thisWidth <= 1200 && panelStep !== 'mobile') {
      panelStep = 'mobile'

      $('.panel-list').each(function(i, ele) {
        if($(ele).data('owl.carousel')) {
          $(ele).data('owl.carousel').destroy()
        }
      })
    }
  })

  $(window).trigger('resize')
})($)





// ==========================================================
//  panel slide
// ==========================================================
;(function($) {
    $('.panel-header').on('click', function(e) {
      $(this).parents('.panel').toggleClass('in-slide');
    });
})($)

// awoo標籤開關
;(function($) {
    $(document).on('click', '.productTag-toggle', function(e) {
      e.preventDefault()

      $(this).parents('.productTag-wrapper').toggleClass('in-active');
    })
})($)