/**
main visual js
*/

jQuery(function($) {

HomeSlider();
// Main visual
function HomeSlider(){

    var $visual = $('.main-visual');
    var $slider = $('.main-visual-container');
    var $state = $visual.find('.swiper-play-state');
    var $progress = $('.swiper-progress');

    if( !$slider.length ){ return; }

    setTimeout(function(){
        $slider.addClass('main-visual-loaded');
    }, 300 );

    if($('html').hasClass('mobile')){
        var simulateTouch = true
    } else {
        var simulateTouch = false
    }

	var HomeSlider = new Swiper($slider, {
        init: false,
		loop: true,
        autoplay: {
            delay: 7500
        },
		speed: 900,
		preventInteractionOnTransition: true,
		followFinger: false,
		preloadImages: false,
        simulateTouch : simulateTouch,
		//simulateTouch: true,
		lazy: {
			loadOnTransitionStart: true
		},
		
		effect: 'fade',
		fadeEffect: {
			crossFade: true
		},
        parallax: true,
        navigation: {
			nextEl: '.main-visual .swiper-button-next',
			prevEl: '.main-visual .swiper-button-prev'
		},
		pagination: {
            el: '.main-visual .swiper-pagination',
            type: 'fraction',
            renderFraction: function (currentClass, totalClass) {
				return '<span class="' + currentClass + '"></span>' +
					   '<span class="swiper-progress__hidden-space"></span>' +
					   '<span class="' + totalClass + '"></span>';
			}
        }
        

	});


	
	
    HomeSlider.on('init', function(){

        progress_motion();

        $('.main-visual-slide').each(function(){

            var $element = $(this).find('.main-visual-title')

            gsap.to($('.main-visual-slide.swiper-slide-active .main-visual-title'),1,{autoAlpha : 0,onComplete :function(){
                gsap.fromTo($('.main-visual-slide.swiper-slide-active .main-visual-title'), 1.5, {autoAlpha:1,ease: Power3.easeOut,delay: 0}, { autoAlpha:1,delay: 0});
            }})

            var childSplit = new SplitText($element, {
              type: "lines",
              linesClass: "split-child"
            });
            var parentSplit = new SplitText($element, {
              type: "lines",
              linesClass: "split-parent"
            });

            gsap.from(childSplit.lines, {
              duration: 1.5,
              yPercent: 100,
              ease: "power4",
              stagger: 0.1,
              delay: 1.5
            });

        });


        gsap.to($('.main-visual-slide.swiper-slide-active .main-visual-txt'),0.3,{y:0,autoAlpha : 0,onComplete :function(){
            gsap.fromTo($('.main-visual-slide.swiper-slide-active .main-visual-txt'), 1.3, {y: 80,autoAlpha:0,ease: Power3.easeOut,delay: 0}, { y: 0,autoAlpha:1,delay: 1.5});
        }})


        gsap.to($('.main-visual .swiper-navigation'),0.3,{y:50,autoAlpha : 0,onComplete :function(){
            gsap.fromTo($('.main-visual .swiper-navigation'), 1.3, {y: 50,autoAlpha:0,ease: Power3.easeOut,delay: 0}, { y: 0,autoAlpha:1,delay: 1.8});
        }})

	});

	HomeSlider.init();

	HomeSlider.on('transitionStart', function(){

        if(!$('html').hasClass('ie')){
            gsap.to($('.main-visual-slide-bg'),0,{scale:1.3,onComplete :function(){
                gsap.fromTo($('.main-visual-slide-bg'), 3.0, {scale: 1.3,ease: Power3.easeOut,delay: 0}, { scale: 1,delay: 0});
            }})
        } // main slide motion

        gsap.set($('.main-visual-title'),{autoAlpha : 0});
        gsap.set($('.main-visual-title .split-child'),{yPercent: 100});

        

        gsap.to($('.main-visual-slide.swiper-slide-active .main-visual-title'),1,{autoAlpha : 0,onComplete :function(){
            gsap.fromTo($('.main-visual-slide.swiper-slide-active .main-visual-title'), 1.5, {autoAlpha:1,ease: Power3.easeOut,delay: 0}, { autoAlpha:1,delay: 0});
        }})

        gsap.to($('.main-visual-slide.swiper-slide-active .split-child'),0.3,{yPercent: 100,onComplete :function(){
            gsap.fromTo($('.main-visual-slide.swiper-slide-active .split-child'), 1.5, {yPercent: 100}, { duration: 1.5, yPercent: 0,ease: "power4",stagger: 0.1, delay: 0.5});
        }})

        gsap.to($('.main-visual-slide.swiper-slide-active .main-visual-txt'),0.3,{y:50,autoAlpha : 0,onComplete :function(){
            gsap.fromTo($('.main-visual-slide.swiper-slide-active .main-visual-txt'), 1.3, {y: 50,autoAlpha:0,ease: Power3.easeOut,delay: 0}, { y: 0,autoAlpha:1,delay: 1});
        }})
       
   
        progress_motion();


	});


    function ten_digit(){

        if( $('.main-visual .swiper-pagination-current').text() < 10 ){
            $('.main-visual .swiper-pagination-current').addClass('include-zero');
        } else {
            $('.main-visual .swiper-pagination-current').removeClass('include-zero');
        }

        if( $('.main-visual .swiper-pagination-total').text() < 10 ){
            $('.main-visual .swiper-pagination-total').addClass('include-zero');
        } else {
            $('.main-visual .swiper-pagination-total').removeClass('include-zero');
        }

    }
    //ten_digit();


    function progress_motion(){
		TweenMax.killTweensOf( $progress );
		TweenMax.set( $progress, { width: "0%" });
		TweenMax.to( $progress, 12, { width: "100%", ease:Power0.easeIn,
			onStart: function(){
				$state.removeClass('progress-max');
			},
			onComplete:function(){
				$state.addClass('progress-max');
				if($state.hasClass('play') && typeof $slider[0] != "undefined"){
					$slider[0].swiper.slideNext();
				}
			}
		});
	}


    // Play, Pause
    $state.on('click', function(){
        if($state.hasClass('play')){
            HomeSlider.autoplay.stop();
            $state.removeClass('play').addClass('pause');
            $state.find('.swiper-state--play').focus();
        } else {
            HomeSlider.autoplay.start();
            $state.removeClass('pause').addClass('play');
            if( $state.hasClass('progress-max') ){ HomeSlider.slideNext(); }
            $state.find('.swiper-state--pause').focus();
        }
    });

    // bg motion
    //$('.main-visual').css('height',$(window).height() );
    var $HomeSlider = $('.main-visual');
        $HomeSlider.imagesLoaded( { background: '.main-visual' }, function() {
            $HomeSlider.addClass('visual-loaded');
        });

}



}); // End