$(function(){


	let ww = window.innerWidth;
	let swiper0 = new Swiper('.main', {
		autoHeight: true,
		direction: 'vertical',
		slidesPerView: 'auto',
		mousewheel: true,	
		spaceBetween: 0,
		speed: 1400,
		parallax: true,
		loop: false,
		preventInteractionOnTransition: true,
		pagination: {
			el: '.main_paging',
			clickable: true,
		},
		on: {
			slideChange: function () {
				console.log(this.realIndex);
				
				if(this.realIndex == "0"){
					$(".btn_top").removeClass("on");
				}else{
					$(".btn_top").addClass("on");
				}

				if(this.realIndex == "3" || this.realIndex == "5"){
					$("#header").addClass("bl");
					$(".main .main_paging.swiper-pagination-bullets").addClass("bl");
				}else{
					$("#header").removeClass("bl");
					$(".main .main_paging.swiper-pagination-bullets").removeClass("bl");
				}

				$(".swiper-slide:eq("+(this.realIndex + 1)+")").addClass('on').siblings().removeClass("on")
			}
		},
	});

	responsiveSwiper();

	function responsiveSwiper() {
		if (ww >= 1400) {
			swiper0.destroy();
			swiper0 = new Swiper('.main', {
				autoHeight: true,
				direction: 'vertical',
				slidesPerView: 'auto',
				mousewheel: true,	
				spaceBetween: 0,
				speed: 1400,
				parallax: true,
				loop: false,
				pagination: {
					el: '.main_paging',
					clickable: true,
				},
				on: {
					slideChange: function () {
						console.log(this.realIndex);
						
						if(this.realIndex == "0"){
							$(".btn_top").removeClass("on");
						}else{
							$(".btn_top").addClass("on");
						}

						if(this.realIndex == "3" || this.realIndex == "5" ){
							$("#header").addClass("bl");
							$(".main .main_paging.swiper-pagination-bullets").addClass("bl");
						}else{
							$("#header").removeClass("bl");
							$(".main .main_paging.swiper-pagination-bullets").removeClass("bl");
						}

						$(".swiper-slide:eq("+(this.realIndex + 1)+")").addClass('on').siblings().removeClass("on")
					}
				},
			});
			$("body").removeClass("mobile");
		}else{
			swiper0.destroy();
			$("body").addClass("mobile");
		}
	}

	window.addEventListener('resize', function() {
	ww = window.innerWidth;
		responsiveSwiper();
	});

	$(".btn_top").click(function(){
		swiper0.slideTo(0,400,false);
	})



	/* header */
	$("#header").mouseleave(function(){
		$("#header").removeClass("on");
		$("nav>ul>li").find("ul").stop().slideUp();
		$("nav>ul>li").removeClass("on");
	})





	/* visual */
	var swiper1 = new Swiper('.visual', {
		effect: 'fade',
		speed: 1400,
		loop: true,
        autoplay: {    
          delay: 5000, 
          disableOnInteraction: false,
        },
		navigation: {
			nextEl: '.vnext',
			prevEl: '.vprev',
		},
		pagination: {
			el: '.vpaging',
			clickable: true,
		},
		on: {
			slideChange: function () {
				$(".swiper-slide:eq("+(this.realIndex + 1)+")").addClass('on').siblings().removeClass("on")
			}
		},
	});


	/* best product */
	var swiper2 = new Swiper('.bp', {
		slidesPerView: 'auto',
		speed: 1400,
		spaceBetween:50,
		loop: true,
		navigation: {
			nextEl: '.bp_next',
			prevEl: '.bp_prev',
		},
		pagination: {
			el: '.bp_paging',
			clickable: true,
		},
		on: {
			slideChange: function () {
				$(".swiper-slide:eq("+(this.realIndex + 1)+")").addClass('on').siblings().removeClass("on")
			}
		},
		breakpoints: {
			812: {
			  spaceBetween: 20
			},
			1000: {
			  spaceBetween: 50
			}
		}
	});


	/* best product */
	var swiper2 = new Swiper('.news', {
		slidesPerView: 'auto',
		speed: 1400,
		spaceBetween:32,
		loop: false,
		scrollbar : {
			el : '.swiper-scrollbar',
			draggable: true,
		},
		breakpoints: {
			812: {
			  spaceBetween: 10
			},
			1000: {
			  spaceBetween: 32
			}
		}
	});


});