$(function(){

    $('.user-orderBox').on('click','.delete',function(){
        var del = $(this).parents('.orderProduct'),
        n = $(this).parents('.orderProduct').attr('class').substring(22,24),
        bg = '<p>'+String.fromCharCode(parseInt(n)+65)+_jsLang.組+'</p><p>'+_jsLang.商品尚未選購+'</p>',
        classStr = 'pic-bg num_'+n;
        del.find('.title').remove();
        del.find('img').animate({opacity:0},300,function(){
          del.html(bg).removeAttr('class style').addClass(classStr)
        });
    });

  var owl = $('.combosOuter .combosBox');
  owl.owlCarousel({
    dots: false,
     responsive:{
        0:{
          items : 2
        },
        660:{
          items : 3
        },
        960:{
          items : 4
        },
        1023:{
          items : 5
        }
      },
    nav:true,
  });

});


// ==========================================================
// 	商品輪播
// ==========================================================
;(function($) {
	const prodView = $('.productView .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() {
      const target = $('.pop-select')
      const value = target.val() || $('.pop-select option:selected').text() || $('.pop-select option').eq(0).text();
      let wrapper = target.next(".ps-wrapper")
      target.next('.ps-wrapper').find('.ps-showbox').text(value)
      let stock = target.data("in-stock")
      if(stock == "1" && wrapper.find(".ps-alert").length <= 0){
        target.next('.ps-wrapper').append(`<span class="font-red ps-alert">${_jsLang.庫存僅剩1件}</span>`)
      }else if(stock != "1"){
        wrapper.find(".ps-alert").remove()
      }
    }

    // 組件客製化 select
    let fakeSelect = ''
    $('.pop-select 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>
      `
    });
    $('.pop-select').after(`
      <div class="ps-wrapper">
          <span class="ps-showbox"></span>
          <ul class="ps-optgroup"></ul>
      </div>
      `)
    $('.ps-optgroup').append(fakeSelect)


    // select 開關
    $('body').on('click', '.ps-showbox, .ps-alert', 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 && targetClass.indexOf('ps-alert') === -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()
    })

    reWrite()
})($)



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