jQuery(function($) {






    /* **************************************** *
     * Other Functions INIT
     * **************************************** */
    main_visual();
    main_project();
    main_di();



    
    
    /* **************************************** *
     * ON LOAD
     * **************************************** */
    $(window).on('load',function() {
    
    
        // fix jquery 3 on load issue on IE11
        if(!$('html').hasClass('ie11')){ 
            init_onload();       
        }
    
    
    });
    
    
    if($('html').hasClass('ie11')){
        setTimeout(function(){
            init_onload();
        },1000);
    }
    
    
    function init_onload(){
    
    
    }
    
    
    
    
    /* **************************************** *
     * ON RESIZE
     * **************************************** */
    // INITIALIZE RESIZE
    function init_resize(){
    
    
        // setTimeout to fix IOS animation on rotate issue
        setTimeout(function(){
    
    
        },400);
    
    
    full_height();
    
    
    }
    
    
    // Init resize on reisize
    $(window).on('resize',init_resize);
    
    
    
    
    
    
    
    
    
    
    
    
    /* **************************************** *
     * Other Functions
     * **************************************** */



    // Main visual
    function main_visual(){
    
    
        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 main_visual = new Swiper($slider, {
            init: false,
            loop: true,
            loopAdditionalSlides : 1,
            autoplay: {
                delay: 6000
            },
            speed: 1000,
            preventInteractionOnTransition: true,
            followFinger: false,
            preloadImages: false,
            simulateTouch : simulateTouch,
            lazy: {
            loadOnTransitionStart: false
            },
            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>';
            }
            }
    
    
    });
    
    
    
    
        main_visual.on('init', function(){
    
    
            progress_motion();
    
    
            $('.main-visual__slide').each(function(){
    
    
                var $element = $(this).find('.main-visual__slide-content-title')
    
    
                gsap.to($('.main-visual__slide.swiper-slide-active .main-visual__slide-content-title'),0.3,{autoAlpha : 0,onComplete :function(){
                    gsap.fromTo($('.main-visual__slide.swiper-slide-active .main-visual__slide-content-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__slide-content-desc'),0.3,{y:0,autoAlpha : 0,onComplete :function(){
                gsap.fromTo($('.main-visual__slide.swiper-slide-active .main-visual__slide-content-desc'), 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});
            }})
    
    
    });
    
    
    main_visual.init();
    
    
    main_visual.on('transitionStart', function(){
    
    
            if(!$('html').hasClass('ie')){
                gsap.to($('.main-visual__slide-bg'),0,{scale:1.5,onComplete :function(){
                    gsap.fromTo($('.main-visual__slide-bg'), 0.5, {scale: 1.5,ease: Power3.easeOut,delay: 0}, { scale: 1,delay: 0});
                }})
            }
    
    
            gsap.set($('.main-visual__slide-content-title'),{autoAlpha : 0});
            gsap.set($('.main-visual__slide-content-title .split-child'),{yPercent: 100});
    
    
            //$('.main-visual__slide').each(function(){
    
    
                //var $element = $(this).find('.main-visual__slide-content-title')
    
    
                gsap.to($('.main-visual__slide.swiper-slide-active .main-visual__slide-content-title'),0.3,{autoAlpha : 0,onComplete :function(){
                    gsap.fromTo($('.main-visual__slide.swiper-slide-active .main-visual__slide-content-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__slide-content-desc'),0.3,{y:50,autoAlpha : 0,onComplete :function(){
                gsap.fromTo($('.main-visual__slide.swiper-slide-active .main-visual__slide-content-desc'), 1.3, {y: 50,autoAlpha:0,ease: Power3.easeOut,delay: 0}, { y: 0,autoAlpha:1,delay: 1});
            }})
    
    
            ten_digit();
            progress_motion();
    
    
            if($('.main-visual__slide--05').hasClass('swiper-slide-active')) {
                $('.main-visual__container').addClass('main-visual__slide--05')
            } else {
                $('.main-visual__container').removeClass('main-visual__slide--05')
            }
    
    
    });
    
    
    
    
        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, 6, { 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')){
                main_visual.autoplay.stop();
                $state.removeClass('play').addClass('pause');
                $state.find('.swiper-state--play').focus();
            } else {
                main_visual.autoplay.start();
                $state.removeClass('pause').addClass('play');
                if( $state.hasClass('progress-max') ){ main_visual.slideNext(); }
                $state.find('.swiper-state--pause').focus();
            }
        });
    
    
        // bg motion
        $('.main-visual').css('height',$(window).height() );
    
    
        if ( $main_visual != "undefined" && $('body').hasClass('home') ) {
            var $main_visual = $('.main-visual');
            $main_visual.imagesLoaded( { background: '.main-visual' }, function() {
            $main_visual.addClass('visual-loaded');
            });
        }
    
    
    }



    
    // Main Project
    function main_project(){
    
        var $slider = $('.main-project__container');
    
    
        if( !$slider.length ){ return; }
    
    
        
        if(!WR.is_screen(540)) {
    
    
            var main_project = new Swiper($slider, {
                init: false,
                loop: true,
                slidesPerView: 'auto',
                //spaceBetween: 40,
                //slidesPerGroup : 2,
                autoplay: {
                    delay: 4000,
                    disableOnInteraction: false,
                },
                speed: 1000,
                preventInteractionOnTransition: true,
                followFinger: false,
                preloadImages: false,
                lazy: {
                    loadOnTransitionStart: true
                },
                effect: 'fade',
                fadeEffect: {
                    crossFade: true
                },
                navigation: {
                    nextEl: '.main-project .swiper-button-next',
                    prevEl: '.main-project .swiper-button-prev'
                },
                pagination: {
                    el: '.main-project .swiper-pagination',
                    type: 'fraction',
                    renderFraction: function (currentClass, totalClass) {
                        return '<span class="' + currentClass + '"></span>' +
                               '<span class="swiper-progress__hidden-space"></span>' +
                               '<span class="' + totalClass + '"></span>';
                    }
                },
            });
    
    
        } else {
            //mobile ´ëÀÀ
            $('.main-project__slide').each(function(){
                var $this = $(this)
                var $slide = $this.find('.main-project__slide-content:not(:first-child)').clone().wrapAll('<div/>').parent().html();
                var html    = '<div class="main-project__slide swiper-slide">' + $slide + '</div>';
    
    
                if ($this.find('.main-project__slide-content').length > 1 ){
                    $this.find('.main-project__slide-content:not(:first-child)').remove();
                    $this.after( html )
                }
            })
    
    
            var main_project = new Swiper($slider, {
                init: false,
                loop: false,
                slidesPerView: 'auto',
                speed: 400,
                preventInteractionOnTransition: true,
                followFinger: true,
                preloadImages: false,
                lazy: {
                    loadOnTransitionStart: true
                },
                //longSwipesRatio : 0.1,
                //resistance : true,
                resistanceRatio : 0,
                effect: 'slide',
                pagination: {
                    el: '.main-project .swiper-pagination',
                    type: 'fraction',
                    renderFraction: function (currentClass, totalClass) {
                        return '<span class="' + currentClass + '"></span>' +
                               '<span class="swiper-progress__hidden-space"></span>' +
                               '<span class="' + totalClass + '"></span>';
                    }
                },
            });
    
    
        }
    
    
    main_project.init();
    
    
        main_project.on('slideChange', function () {
          ten_digit()
        });
    
    
        function ten_digit(){
    
    
            if( $('.main-project .swiper-pagination-current').text() < 10 ){
                $('.main-project .swiper-pagination-current').addClass('include-zero');
            } else {
                $('.main-project .swiper-pagination-current').removeClass('include-zero');
            }
    
    
            if( $('.main-project .swiper-pagination-total').text() < 10 ){
                $('.main-project .swiper-pagination-total').addClass('include-zero');
            } else {
                $('.main-project .swiper-pagination-total').removeClass('include-zero');
            }
    
    
        }
        ten_digit();
    
    
    }
    
    
    
    
    
    
    // Main About DI
    function main_di(){
    
    
        var $slider = $('.main-di__container');
        if( !$slider.length ){ return; }
    
    
        if(!WR.is_screen(540)) {
    
    
            var main_di = new Swiper($slider, {
                init: false,
                loop: true,
                slidesPerView: 'auto',
                //spaceBetween: 40,
                speed: 1000,
                autoplay: {
                    delay: 4000,
                    disableOnInteraction: false,
                },
                preventInteractionOnTransition: true,
                followFinger: false,
                preloadImages: false,
                effect: 'fade',
                fadeEffect: {
                    crossFade: true
                },
                navigation: {
                    nextEl: '.main-di .swiper-button-next',
                    prevEl: '.main-di .swiper-button-prev'
                },
                pagination: {
                    el: '.main-di .swiper-pagination',
                    type: 'fraction',
                    renderFraction: function (currentClass, totalClass) {
                        return '<span class="' + currentClass + '"></span>' +
                               '<span class="swiper-progress__hidden-space"></span>' +
                               '<span class="' + totalClass + '"></span>';
                    }
                },
            });
    
    
        } else {
    
    
            //mobile ´ëÀÀ
            $('.main-di__slide').each(function(){
                var $this = $(this)
                var $slide = $this.find('.main-di__slide-content:not(:first-child)').clone().wrapAll('<div/>').parent().html();
                var html    = '<div class="main-di__slide swiper-slide">' + $slide + '</div>';            
    
    
                if ($this.find('.main-di__slide-content').length > 1 ){
                    $this.find('.main-di__slide-content:not(:first-child)').remove();
                    $this.after( html )
                }
            })
    
    
            var main_di = new Swiper($slider, {
                init: false,
                loop: false,
                slidesPerView: 'auto',
                speed: 400,
                preventInteractionOnTransition: true,
                followFinger: true,
                preloadImages: false,
                //longSwipesRatio : 0.1,
                //resistance : true,
                resistanceRatio : 0,
                effect: 'slide',
                pagination: {
                    el: '.main-di .swiper-pagination',
                    type: 'fraction',
                    renderFraction: function (currentClass, totalClass) {
                        return '<span class="' + currentClass + '"></span>' +
                               '<span class="swiper-progress__hidden-space"></span>' +
                               '<span class="' + totalClass + '"></span>';
                    }
                },
            });
    
    
        }
    
    
    main_di.init();
    
    
        main_di.on('slideChange', function () {
          ten_digit()
        });
    
    
        function ten_digit(){
    
    
            if( $('.main-di .swiper-pagination-current').text() < 10 ){
                $('.main-di .swiper-pagination-current').addClass('include-zero');
            } else {
                $('.main-di .swiper-pagination-current').removeClass('include-zero');
            }
    
    
            if( $('.main-di .swiper-pagination-total').text() < 10 ){
                $('.main-di .swiper-pagination-total').addClass('include-zero');
            } else {
                $('.main-di .swiper-pagination-total').removeClass('include-zero');
            }
    
    
        }
        ten_digit();
    
    
    }
    
    
    }); // End jQuery
    
    
    // Promotional Video Layer Popup
    $(function() {
    $(".main_youtube_style .wr-btn").click(function() {
    var wHeight = $(window).height();
    
    
    if(!$("#videolayer").is(':visible')) {
    $("#mask").css('display','block');
    $("#videolayer").html('');
    $("#videolayer").html('<iframe id="youtube-player" width="100%" height="550" src="https://www.youtube.com/embed/Z_lCccSFOyw?mute=1&autoplay=1" frameborder="0" allowfullscreen></iframe>');
    $("#videolayer iframe").load(function() {
    $("#videolayer").css({top:(wHeight / 5) + 'px', display:'block'});
    });
    }
    });
    
    
    $("#mask").click(function(e) {
    if($("#videolayer").is(':visible')) {
    $(this).css('display','none');
    $("#videolayer").css('display','none');
    }
    var video = $("#youtube-player").attr("src");
    $("#youtube-player").attr("src",""); 
    //$("#youtube-player").attr("src",video);
    $("#videolayer").html('<iframe id="youtube-player" width="100%" height="550" src="https://www.youtube.com/embed/Z_lCccSFOyw" frameborder="0" allowfullscreen></iframe>');
    });
    });