$(document).ready(function () {
	$('.filterbox').ontouchmove = function(event){
		event.preventDefault();
	}
	var _window = $(window);
	var _body = $('body');
	var change_1023 = 0;
	var productSlidebox = $(".productSlidebox");

	//rosetta
	$("#Main_Content").on('click','.rosetta_mark', function() {
		const Pos_No = $(this).attr("rosetta-id");
		const queryID = $(this).attr("rosetta-query-id") || '';
		const param = {
			type: 'click',
			target: Pos_No,
		};

		if(queryID)
		{
			param.provider = 'rosetta';
			param.source = queryID;
		}

		if(Pos_No && typeof rosetta == 'function')
		{
			rosetta('event',param);

	        console.log('rosetta.event.click');
	        console.log(param);
		}
	});
	
	var clickbutton=0;
	$('.filter-button,.filterbox .close').on('click',function(){
		clickbutton++;
		if(clickbutton==1){
			$('.filterbox').addClass('open');
		}
		if(clickbutton==2){
			$('.filterbox').removeClass('open');
			clickbutton=0;
		}
	});
  
  //====================================
  // intro start
  //====================================
  function introBox(e){
    if(!$(e.target).hasClass("product-intro-box") && !$(e.target).hasClass("product-intro-btn")){
      $(".productBox").removeClass("open-intro")
      $(".footer-main").css({"z-index":""})
      $(document).off("click", introBox)
    }
  }
  $(document).on("click", ".product-intro-btn", function(){
    let _this = $(this),
        box = _this.parents(".productBox")
    
    if(!box.hasClass("open-intro")){
      $(".productBox").removeClass("open-intro")
      box.addClass("open-intro")
      $(".footer-main").css({"z-index":"-1"})
      $(document).on("click", introBox)
    }else{
      box.removeClass("open-intro")
      $(".footer-main").css({"z-index":""})
      $(document).off("click", introBox)
    }
  })
  
  $(document).on("mouseenter", ".product-intro-btn", function(){
    $(".productBox").removeClass("open-intro")
    $(document).off("click", introBox)
    $(this).parents(".productBox").addClass("hover-intro")
  })
  $(document).on("mouseout", ".product-intro-btn", function(){
    $(this).parents(".productBox").removeClass("hover-intro")
  })
  //====================================
  // intro end
  //====================================
});





// ==========================================================
//  商品列表樣式切換
// ==========================================================
;(function($, jQuery, window, document) {
	const themeTarget = $('article > .content, .inner > .content')
	let wrapperStep = ''

	$(window).on('resize', function(e) {
		e.preventDefault()
		if($(this).width() >= 768 && wrapperStep !== 'desktop') {
			wrapperStep = 'desktop'
		} else if($(this).width() < 768 && wrapperStep !== 'mobile') {
			wrapperStep = 'mobile'
		}
	}).trigger('resize')

	$('#viewMode').on('click', '.btn-theme', function(e) {
		$(this).addClass('now').siblings('.btn-theme').removeClass('now')
		themeTarget.removeAttr('class').addClass('content').addClass($(this).data('theme'))
		setTimeout(function(){
			window.dispatchEvent(new Event('resize'))
		}, 100)
	})
})($, jQuery, window, document)





var _window = $(window);
var change = 0;
var change_1023 = 0;
var moreview = false;
var imgviewbox = $('.imgviewbox');

if(_window.width() > 769 && change != 960 ){
			change = 960;
			moreview = true;
	videoBox();
}else if(_window.width() <= 768 && change!= 768){
	change = 768;

	$('.item-1').on('click','img', function(event) {
		var html ='<img src="'+$(this).attr('src')+'">' ;
		imgviewbox.append(html).css('display','block');
	});
	imgviewbox.on('click','.close', function(event) {
		imgviewbox.css('display','none').find('img').remove();
	});
};

/*影片效果*/
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")){
		document.getElementById("Video").oncanplay=function(){
			var video = $("#Video").get(0);
			var canvas = document.getElementById("video_review");
				canvas.getContext('2d').drawImage(video, 0, 0, 66, 92);
		};
	}
}



// ==========================================================
//   KOL 分類小圖示
// ==========================================================
$(function() {
	const swiper = new Swiper('.swiper-container', {
		slidesPerView: 'auto',
		slidesPerColumn: 1,
		loop: true,
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
		breakpoints: {
			0: {
				direction: 'horizontal',
				spaceBetween: 15,
			},
			660: {
				direction: 'horizontal',
				spaceBetween: 25,
			},
			1025: {
				direction: 'horizontal',
				spaceBetween: 30,
			},
			1420: {
				direction: 'vertical',
				spaceBetween: 10,
			},
		}
	});  
})

// ==========================================================
//   手機tag展開
// ==========================================================
$(function() {
  $(document).on("click", ".tag-btn", function(e){
    let wrapper = $(this).parents(".tag-wrapper")
    wrapper.toggleClass("open")
  })
})


// ==========================================================
//   商品description開合
// ==========================================================
$(function() {
  $(document).on("click", ".products-top-title.theme-fold", function(e){
    $(this).toggleClass("in-open")
  })
})