$(function () {

    let vh = window.innerHeight * 0.01
    document.documentElement.style.setProperty('--vh', `${vh}px`)
    window.addEventListener('resize', () => {
    let vh = window.innerHeight * 0.01
    document.documentElement.style.setProperty('--vh', `${vh}px`)
    });

    var $slideshow = $('.main_slider');
    var ImagePauses = [12800, 6000, 6000];

    $('.main_bg_slider').slick({
    fade: true,
    autoplay: true,
    infinite: true,
    autoplaySpeed: ImagePauses[0],
    slidesToShow: 1,
    slidesToScroll: 1,
    pauseOnHover: false,
    pauseOnFocus: false,
    cssEase: 'linear',
    asNavFor: '.main_text_slider',
    prevArrow: $('.indicator').find('.prev'),
    nextArrow: $('.indicator').find('.next'), 
    });

    $('.main_text_slider').slick({
        fade: true,
        autoplay: true,
        infinite: true,
        autoplaySpeed: ImagePauses[0],
        slidesToShow: 1,
        slidesToScroll: 1,
        pauseOnHover: false,
        pauseOnFocus: false,
        cssEase: 'linear',
        dots: true,
        appendDots: $('.indicator .dot'),
        arrows: false,
        asNavFor: '.main_bg_slider',
    });

    $slideshow.on('afterChange', function(event, slick, currentSlide) {
        // Console log, can be removed
        console.log('Current slide: ' + currentSlide + '. Setting speed to: ' + ImagePauses[currentSlide]);
        
        // Update autoplay speed according to slide index
        $slideshow.slick('slickSetOption', 'autoplaySpeed', ImagePauses[currentSlide], true);
    });
    
    // var durationList = $('.item').map(function(index, item) {
    //     return item.getAttribute('data-time');
    // });

    // var slideIndex = 0;
    // var changeSlide = function(timing) {
    // setTimeout(function() {
    //     if (timing !== 0) {
    //     slider.slick('slickNext');
    //     }
    //     if (slideIndex >= durationList.length) slideIndex = 0;
    //     changeSlide(durationList[slideIndex++]);

    // }, timing);
    // }
    // changeSlide(0);    


    if (typeof $.fn.Slick === 'undefined') {

        $('.main_slider').find('.v1').addClass('on');
        $('.indicator').addClass('on');

        $('.main_slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
            $('.indicator').removeClass('on');
            $('.main_slider').find('div[class*="v"]').removeClass('on');
            $('.main_slider').find('.v' + (nextSlide + 1)).addClass('on');
        });
        $('.main_slider').on('afterChange', function (event, slick, currentSlide, nextSlide) {
            $('.indicator').addClass('on');
        });
    }

    $('.status_wrap').find('.status').on('click', function () {
        if ($(this).hasClass('play') == true) {
            $(this).removeClass('play').addClass('stop');
            $('.main_slider').slick('slickPlay');
        } else {
            $(this).removeClass('stop').addClass('play');
            $('.main_slider').slick('slickPause');
        }
    });

    if (typeof $.fn.Slick === 'undefined') {
        $('.main_slider').find('.v01').addClass('on');
        $('.main_slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
            $('.main_slider').find('div[class*="v0"]').removeClass('on');
            $('.main_slider').find('.v0' + (nextSlide + 1)).addClass('on');
        });
        $('.main_slider').on('afterChange', function (event, slick, currentSlide, nextSlide) {
        });
    }

    

});

$(function(){
	custom_cursor();
	$(document).ready(function(){
		if($("body").addClass("on")){
		}
	});

	var gallerySlide = new Swiper('.best_product', {
		slidesPerView: 'auto',
		//effect: "fade",
		autoplay: false,
		speed: 1000,
		pagination: {
            el: ".swiper-pagination",
            type: "progressbar",
        },
		//parallax: true,
		//allowTouchMove:false,
		//simulateTouch:false,
		//grabCursor: false,
		//touchStartPreventDefault:false,
	});
	
});

    function custom_cursor(){

        var $cursor = null;
        var $inner = null;
        var $circle = null;
        var $txt = null;

        $('body').mousemove(function(e) {
            TweenMax.to($('#custom_cursor, #custom_cursor_text'), 1.3, {
                x: e.clientX,
                y: e.clientY,
                ease: Power3.easeOut
            });
        });

	// global cursor
	$(document).on({
		mouseenter: function(){
			$cursor = $('#custom_cursor, #custom_cursor_text');
			$inner = $cursor.find('.custom_cursor_inner');
			$circle = $cursor.find('.custom_hover_circle');
			$txt = $cursor.find('.custom_hover_text');

			var $this = $(this);
			var words = ( $this.data('hover') != undefined ) ? $this.data('hover') : '';

			if( $this.hasClass('drag') ){ $cursor.addClass('drag'); }

			if( $this.hasClass('custom_simple_cursor') ){
				words = '';

				var size = ( $this.data('size') != undefined ) ? $this.data('size') : '48';

				TweenMax.to($inner, .1, {width: size,height: size,ease: Power0.easeNone});
			}

			$txt.find('> span').text( words );

			TweenMax.killTweensOf($circle, $txt);
			TweenMax.to($circle, .3, {width: '100%',height: '100%',autoAlpha: 1,ease: Power0.easeNone});
			TweenMax.to($txt, .3, {width: '100%',height: '100%',autoAlpha: 1,ease: Power0.easeNone});
		},
		mouseleave: function(){
			$cursor = $('#custom_cursor, #custom_cursor_text');
			$inner = $cursor.find('.custom_cursor_inner');
			$circle = $cursor.find('.custom_hover_circle');
			$txt = $cursor.find('.custom_hover_text');

			var $this = $(this);

			if( $this.hasClass('drag') ){ $cursor.removeClass('drag'); }

			if( $this.hasClass('custom_simple_cursor') ){
				TweenMax.to($inner, .2, {width: '100%',height: '100%',ease: Power0.easeNone});
			}

			TweenMax.killTweensOf($circle, $txt);
			TweenMax.to($circle, .2, {width: '0%',height: '0%',autoAlpha: 0,ease: Power0.easeNone});
			TweenMax.to($txt, .2, {width: '0%',height: '0%',autoAlpha: 0,ease: Power0.easeNone});
		}
	}, '.custom_hover');

}

function btn_effect() {
    $('.btn_box').each(function () {
        var $circlesTopLeft = $(this).find('.circle.top-left');
        var $circlesBottomRight = $(this).find('.circle.bottom-right');

        var tl = new TimelineLite();
        var tl2 = new TimelineLite();
        var btTl = new TimelineLite({ paused: true });

        tl.to($circlesTopLeft, 1.2, { x: -25, y: -25, scaleY: 2, ease: SlowMo.ease.config(0.1, 0.7, false) });
        tl.to($circlesTopLeft.eq(0), 0.1, { scale: 0.2, x: '+=6', y: '-=2' });
        tl.to($circlesTopLeft.eq(1), 0.1, { scaleX: 1, scaleY: 0.8, x: '-=10', y: '-=7' }, '-=0.1');
        tl.to($circlesTopLeft.eq(2), 0.1, { scale: 0.2, x: '-=15', y: '+=6' }, '-=0.1');
        tl.to($circlesTopLeft.eq(0), 1, { scale: 0, x: '-=5', y: '-=15', opacity: 0 });
        tl.to($circlesTopLeft.eq(1), 1, { scaleX: 0.4, scaleY: 0.4, x: '-=10', y: '-=10', opacity: 0 }, '-=1');
        tl.to($circlesTopLeft.eq(2), 1, { scale: 0, x: '-=15', y: '+=5', opacity: 0 }, '-=1');

        var tlBt1 = new TimelineLite();
        var tlBt2 = new TimelineLite();

        tlBt1.set($circlesTopLeft, { x: 0, y: 0, rotation: -45 });
        tlBt1.add(tl);
        tl2.set($circlesBottomRight, { x: 0, y: 0 });
        tl2.to($circlesBottomRight, 1.1, { x: 30, y: 30, ease: SlowMo.ease.config(0.1, 0.7, false) });
        tl2.to($circlesBottomRight.eq(0), 0.1, { scale: 0.2, x: '-=6', y: '+=3' });
        tl2.to($circlesBottomRight.eq(1), 0.1, { scale: 0.8, x: '+=7', y: '+=3' }, '-=0.1');
        tl2.to($circlesBottomRight.eq(2), 0.1, { scale: 0.2, x: '+=15', y: '-=6' }, '-=0.2');
        tl2.to($circlesBottomRight.eq(0), 1, { scale: 0, x: '+=5', y: '+=15', opacity: 0 });
        tl2.to($circlesBottomRight.eq(1), 1, { scale: 0.4, x: '+=7', y: '+=7', opacity: 0 }, '-=1');
        tl2.to($circlesBottomRight.eq(2), 1, { scale: 0, x: '+=15', y: '-=5', opacity: 0 }, '-=1');

        tlBt2.set($circlesBottomRight, { x: 0, y: 0, rotation: 45 });
        tlBt2.add(tl2);
        btTl.add(tlBt1);
        btTl.to($(this).parent().find('.button.effect-button'), 0.8, { scaleY: 1.1 }, 0.1);
        btTl.add(tlBt2, 0.2);
        btTl.to($(this).parent().find('.button.effect-button'), 1.8, { scale: 1, ease: Elastic.easeOut.config(1.2, 0.4) }, 1.2);

        btTl.timeScale(2.6);

        $(this).on('mouseenter', function () {
            btTl.restart();
        });
    });
}

$(document).ready(function () {
    btn_effect();
});