/*  Common
------------------------------------------*/ 
var cmm = (function(global, docuemnt, $){
    'use strict';
    //img ¸®½ºÆ® °¢°¢ÀÇ data¼Ó¼º°ª Àû¿ë
    var dataImg = function(selector){
        if(typeof selector !== 'string' || selector.trim().length === 0){ return null;}
        $(selector).each(function(index){
            var img = $(selector).eq(index).attr('data-img');
            $(selector).eq(index).css({backgroundImage: 'url(' +img+ ')'});
        });
    };
    //10 ÀÌÇÏ ¾Õ¿¡ 0ºÙÀ̱â
    var leadingZeros = function(index){
        return index = (index < 10 || index > 0 ) ? (index='0'+index) : index;
    };
    return {
        dataImg : dataImg,
        leadingZeros : leadingZeros,
    };
})(window, window.document, window.jQuery );
(function(global, document, $){
 gotoTop();     // ¼­ºê °øÅë À§·Î°¡±â ¹öÆ°
 subGnbEvent();
 headerTypes();    // Çì´õ ŸÀÔº° js
    selectLang();               // ³ª¶ó ¾ð¾î ¼±Åà selectbox
 mainPageLayoutSysystem(); // ¸ÞÀÎ ·¹À̾ƿôÀÇ header, layout section pager °ü·Ã
 sectionScrollEvents();  // section ºÎºÐonePage Effect ¹× siteMap(GNB) À̺¥Æ®
 mobileSiteMap()    // ¸ð¹ÙÀÏ SiteMap(GNB) À̺¥Æ®
 sliderEvents();    // ½½¶óÀ̵å À̺¥Æ® °ü·Ã
 mainSummaryEffect();  // ¸ÞÀÎ summaryÂÊ ÀÎÅÍ·º¼Ç È¿°ú °ü·Ã
 searchClickEvent();   // ¸ÞÀÎ ÇØ´õ search event
 pageNumberEvent();   // ¼­ºê¸ÞÀÎ ¼½¼Ç ¹øÈ£
 subMainProgessSection(); // ¼­ºê¸ÞÀÎ ONE STOP CARE ¼½¼Ç ºÎºÐ
 fadeInfoBox();    // Sub-main page [À±°û fade info box event]
 hoverInfoBox();    // hover info box
 niceScrollEvent();   // nicescroll À̺¥Æ®
 slidePopup();    // ½½¶óÀ̵å Æ˾÷
    //consultingPopup();          // ÄÁ¼³Æà Æ˾÷
 subTabContent();   // ¼­ºê ÅÜ ÄÁÅÄÃ÷ ºÎºÐ
 subTargetScroll();   // ¼­ºê Ÿ°Ù ½ºÅ©·Ñ À̺¥Æ®
 inputFileSystem();   // ÀÎDzÆÄÀϽýºÅÛ
 datePickerEvent();   // datePicker À̺¥Æ®
 selectEvent();    // select2 À̺¥Æ®
 
 subDepthNavScrollEvent();   //depth scroll

 /*  window height, position
 ------------------------------------------*/ 
    var winW = $(global).outerWidth(true),
  winH = $(global).outerHeight(true),
  pos = $(global).scrollTop();
    
    $(global).on('scroll', function(){
        pos = $(global).scrollTop();
    });
    $(global).resize(function(){
        winW = $(global).outerWidth(true);
  winH = $(global).outerHeight(true);
    }).trigger('resize');
 
 function gotoTop(){
  var $btn = $('.btn-goto-top');
  var fool = false;
  if($btn.length > 0 ){
   $(window).on('scroll', function(){
    if( $(window).scrollTop() < $(window).height()){
     $btn.hide();
    }else if( $(window).scrollTop() > $(window).height()){
     $btn.fadeIn();
    }
   });
  }
  $btn.on('click', function(){
   $('html, body').stop().animate({scrollTop: 0}, 1000, 'easeInOutQuart');
  });
 }
 function subGnbEvent(){
  /* sub-gnb item width ÇÕÇÑ°ªÀÌ window width°ªº¸´Ù Ŭ¶§ justify-content:left ¼³Á¤ */
  var PATHNAME =  window.location.pathname.split("/");
  if( PATHNAME[1] == 'anti-aging'){
   $('body').addClass('body-anti-aging');
  }
 }
 /*  HeaderTypeSelect
 ------------------------------------------*/ 
    function headerTypes(){
        var $wrapper = $('.wrapper'),
            $header = $('.header');
        //header type change
        var headerTypeInMain = function(){
            if ( $wrapper.hasClass('main')){
                if(pos >= winH / 2){
                    $header.addClass('is-basic');
                }else if (pos < winH){
                    $header.removeClass('is-basic');
                }
            }
        };
        //header init
        if($wrapper.hasClass('main')){
            $header.removeClass('is-basic');
        } 
        if($header.find('.sub-gnb').length > 0){
            $header.css({border:0, boxShadow:'0 0px 5px rgba(0,0,0,0.2)' });
        }
        $(global).on('scroll', function(){
            headerTypeInMain();
        });
    } 
 /*  MainPageLayoutSystem
 ------------------------------------------*/ 
    function mainPageLayoutSysystem(){
        var $section = $('.section'),
            $sectionPager = $('.section-pager');
        //section pager
        var sectionPagerEvent = function(){
            $section.each(function(i){
    if( pos >= $section.eq(i).offset().top && pos <= $section.eq(i).offset().top + winH){
     
     if($section.eq(i).hasClass('pager-black')){
      $sectionPager.addClass('pager-color-black');
     }else{
      $sectionPager.removeClass('pager-color-black');
     }
     $sectionPager.find('li').removeClass('active');
     $sectionPager.find('li').eq(i).addClass('active');
    }
     
            });
        };
        //section init resize
        $(global).resize(function(){
            //search area height resize
            if(winW > 768){
                var searchH = $('.main-search-area').outerHeight(true);
                $('.search-section .tag-area').add('.search-section .tag-slider').css({height: searchH});
            }
        }).trigger('resize');
        window.onload = function(){
        $(global).on('scroll', function(){
   //console.log('winPos: ' + $(window).scrollTop())
            sectionPagerEvent();
        });
  }
    } 
    
 /*  nav scroll event of sub depth 
 ------------------------------------------*/ 
 function subDepthNavScrollEvent(){
  var $depthArea = $('.header .sub-gnb');
   
  $depthArea.niceScroll({
            autohidemode: 'hidden',
            horizrailenabled: true,
            touchbehavior: true,
            grabcursorenabled:false,
            //cursorwidth: "2px",
            //cursorcolor: "rgba(0,0,0,0.6)",
   //cursorborder: "0px solid #ddd"
   
        });
 }

 /*  SectionScrollEvents
 ------------------------------------------*/ 
    function sectionScrollEvents(){
        var boolScroll;
        var sectionScrollResizePCEvent = function(){
            if(boolScroll == false){ 
                boolScroll = true; 
                $.scrollify({ section : ".section-scroll" }); 
            } 
        };
        var sectionScrollResizeMobileEvent = function(){
            if(boolScroll == true){ 
                boolScroll = false; 
                $.scrollify.destroy();
            }
        };
        if( winW > 768 ){ 
            boolScroll = false; 
            sectionScrollResizePCEvent();
        }else { 
            boolScroll = true;  
            sectionScrollResizeMobileEvent();
        }       
        //resize
        $(global).resize(function(){
            if( winW > 768 ){ sectionScrollResizePCEvent();}
            else{ sectionScrollResizeMobileEvent();}
        });

        // site map event
        var $btnShowSiteMap = $('.header .sta .btn-gnb');
        var $siteMap = $('.site-map');
        var $closeSiteMap = $siteMap.find('.btn-close');
        
        
        $btnShowSiteMap.on('click', function(){
            if( winW > 768 ){
                boolScroll = true;  
                sectionScrollResizeMobileEvent();
                $siteMap.show();
            }else{
                $siteMap.slideDown(150);
            }
            
            $('html, body').css({overflow:'hidden'});
        })
        $closeSiteMap.on('click', function(){
            if( winW > 768 ){
                boolScroll = false; 
                sectionScrollResizePCEvent();
                $siteMap.hide();
            }else{
                $siteMap.slideUp(200);
            }
            
            $('html, body').css({overflow:'visible'});
        });
    } 
 /*  Mobile site map gnb
 ------------------------------------------*/ 
    function mobileSiteMap(){
        var $gnbList = $('.m-site-map .m-site-map-box .m-site-map-list .m-list-item');
        var $depth2 = $('.m-site-map .m-site-map-box .m-depth-list > ul');
        var $btnDepth2 = $('.m-site-map .m-site-map-box .m-depth-list .m-depth-type2 .m-depth-item');
        // var $depth3 = $('.m-site-map .m-site-map-box .m-depth-list .m-depth-type2 .m-depth-item .m-depth2');
        $gnbList.find('> a').on('click', function(e){
            e.preventDefault();
            $gnbList.removeClass('is-active');
            $(this).parent().addClass('is-active');
            var idx = $(this).parent().index();
            $depth2.removeClass('is-active');
            $(this).parents('.m-site-map-list').siblings('.m-depth-list').find(' > ul').eq(idx).addClass('is-active').show();
        });
        $btnDepth2.find('> a').on('click', function(e){
            e.preventDefault();
            $btnDepth2.removeClass('is-active');
            $(this).parent().addClass('is-active');
        });
    }
 /*  SliderEvents
 ------------------------------------------*/ 
    function sliderEvents(){
        // Main Visual Slide Event
        (function(){
            var $mainSlider = $('.main-slider'),
                $pagerSlider = $('.main-slider-area .slider-controls .pager-area'),
                $progressBar = $('.slider-progress-bar'),
                $barCircles = $progressBar.find('circle'),
                $bar = $progressBar.find('.circle.front');
            var time = 2,
                isPause,
                tick,
                percentTime;
            var circleReset = function(num){ //circle position of css
                //for(var i=0; i<3; i++){ $progressBar.removeClass('current'+i);}
                //$progressBar.addClass('current'+num);
                $pagerSlider.find('.slick-slide.slick-active .slider-progress-bar').fadeIn(300);
            };
            var startProgressbar = function() {
                resetProgressbar();
                percentTime = 0;
                isPause = false;
                tick = setInterval(interval, 10);
            };
            var interval = function() {
                if(isPause === false) {
                    percentTime += 1 / (time+0.1);
                    $bar.css({ strokeDashoffset: percentTime });
                    if(percentTime >= 227){
                        $mainSlider.slick('slickNext');
                        startProgressbar();
                    }
                }
            };
            var resetProgressbar = function() {
                $bar.css({ strokeDashoffset: 0 });
                clearTimeout(tick);
            };
            var circleSizeEvent = function(){
                if(winW > 768){
                    $barCircles.attr('r', 36);
                }else{
                    $barCircles.attr('r', 26);
                }
            };
            circleSizeEvent();
            $(global).resize(function(){
                circleSizeEvent();
            });
            $mainSlider.slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false,
                fade: false,
                asNavFor: '.main-slider-area .slider-controls .pager-area',
                speed: 1100,
            });
            $pagerSlider.slick({
                autoplay: false,
                speed: 1000,
                slidesToShow: 1,
                slidesToScroll: 1,
                asNavFor: '.main-slider',
                dots: false,
                centerMode: false,
                focusOnSelect: true,
                variableWidth: true,
                prevArrow: '.controls-prev',
                nextArrow: '.controls-next',
            })
            .on('beforeChange', function(event, slick, currentSlide, nextSlide){
                $progressBar.fadeOut(300);
            })
            .on('afterChange', function(event, slick, currentSlide, nextSlide){
                circleReset(currentSlide);
                startProgressbar();
            });
            $('.slider-controls').on({
                mouseenter: function() { isPause = true; },
                mouseleave: function() { isPause = false;}
            });
            circleReset(0);
            startProgressbar();
        })();
        // Main model CenterSlide Event
        (function(){
            var $slider = $('.center-slider');
   var captionHeight = $('.center-slide-area .model-slider figure figcaption').outerHeight();
   //console.log(captionHeight);
            var pageNum = $('.model-slider > li').length;
            $('.model-section .pager-num').html( '1/'+ pageNum );
            $slider.slick({
                //infinite: false,
                dots:true,
                centerMode: true,
                slidesToShow: 1,
                lazyLoad: 'ondemand',
            })
            .on('beforeChange', function(event, slick, currentSlide, nextSlide){
               $('.slick-center').find('figcaption').css({ bottom: '-' + captionHeight +'px' });
            })
            .on('afterChange', function(event, slick, currentSlide, nextSlide){
               // console.log(currentSlide);
                var nowPageNum = currentSlide + 1;
                $('.model-section .pager-num').html(nowPageNum + '/'+ pageNum );
                $('.slick-center').find('figcaption').stop().animate({ bottom: 0},'easeOutQuart');
            });
   $('.slick-center').find('figcaption').stop().css({ bottom: 0},'easeOutQuart');
            //ÃʱâÈ­
            //$slider.find('.slick-center').find('figcaption').css({ bottom:  '-' + captionHeight +'px' });
            //$slider.find('.slick-center').find('figcaption').css({ bottom: 0},'easeOutQuart');
        })();
        // Main Tag VerticalSlide Event
        (function(){
            var $slider = $('.vertical-slider'),
                $tagSlide = $('.tag-slider .slick-slide');
            $slider.slick({
                dots: false,
                arrows: false,
                vertical: true,
                speed: 1000,
                autoplay: true,
                autoplaySpeed: 500,
                cssEase: 'ease-in-out',
                centerMode:true,
                slidesToShow: 7,
                slidesToScroll: 1,
                pauseOnFocus: false,
                verticalSwiping: true,
    responsive: [
                    {
                        breakpoint: 1200,
                        settings: {
       slidesToShow: 7,
                        }
                    },
                    {
                        breakpoint: 768,
                        settings: {
       slidesToShow: 5
                        }
                    }
                ]
            }).on("mousewheel", function (event) {
                //event.preventDefault();
                if (event.deltaX > 0 || event.deltaY < 0) {
                    $(this).slick('slickNext');
                } else if (event.deltaX < 0 || event.deltaY > 0) {
                    $(this).slick('slickPrev');
                }
            }).on("afterChange", function(event, slick, currentSlide, nextSlide){
                $tagSlide.removeClass('arrow-actives');
                $tagSlide.eq(currentSlide +10).addClass('arrow-actives');
            });
        })();
        // Main Magazine List Slide Event
        (function(){
            var $slider = $('.list-slider');
        
            $slider.slick({
                infinite: false,
                slidesToShow: 3,
                slidesToScroll: 3,
                dots: true,
                responsive: [
                    {
                        breakpoint: 1200,
                        settings: {
                            infinite: false,
                            slidesToShow: 2,
                            slidesToScroll: 2,
                            dots: true,
                        }
                    },
                    {
                        breakpoint: 768,
                        settings: {
                            infinite: false,
                            slidesToShow: 1,
                            slidesToScroll: 1,
                            dots: true,
                        }
                    }
                ]
            }).on('afterChange', function(event, slick, currentSlide, nextSlide){
                $slider.find('.slick-dots li:first-child').hasClass('slick-active') ? $slider.find('.slick-prev').hide() : $slider.find('.slick-prev').show()
                $slider.find('.slick-dots li:last-child').hasClass('slick-active') ? $slider.find('.slick-next').hide() : $slider.find('.slick-next').show()
            });
            $slider.find('.slick-prev').hide();
        })();  
       // Controller Slider
        (function(){
            
            var $slider = $('.img-fade-slider').add($('.img-fade-slier2')),
                $imgs = $('.img-fade-slider .slider-img'),
                $btn = $('.btn-progress');
    
                var time = 4;
    var speedVal = 400;
    var autoSpeedVal = 3000;
                var isPause,
                    tick,
                    percentTime;
   
   //background img setting
   for(var i=0; i< $imgs.length; i++ ){
    if($imgs.attr('data-src')){
     var datas = $imgs.eq(i).attr('data-src');
     $imgs.eq(i).css({backgroundImage: 'url('+datas+')'});
    }
   }
   //slider init
   $slider.on('init', function(slick){
    //empty text dots is hide
    $(slick.target).find('.slick-dots li').each(function(i, target){
     if($(target).html().trim() == '' ){ $(target).hide(); }
    });
    //progress bar width init
    var barWidth = $(slick.target).find('.slick-dots').outerWidth();
    var progressBar = $(slick.target).siblings('.img-progress-bar');
    var perCentVal = 1 * (100 / $(slick.target).find('.slider-img').length );
    $(progressBar[0]).css({width:barWidth});
    $(progressBar[0]).find('.progress').css({ width: perCentVal + '%' });
    
    $btn.on('click', function(){
     if(!$btn.hasClass('is-pause')){//½½¶óÀÌµå ¸ØÃß±â
      $btn.addClass('is-pause');
      imgfadeSlider.slick('slickPause');
     }else if($btn.hasClass('is-pause')){ //½½¶óÀ̵å Àç»ý
      $btn.removeClass('is-pause');
      imgfadeSlider.slick('slickPlay');
     }
    });
   });
            var imgfadeSlider = $slider.slick({
                dots:true,
    fade: true,
                customPaging : function(slider, i) { 
     //pager nameing
     var prevPagerName =$(slider.$slides[i - 1]).find('.slider-img').attr('data-pager');
     var newPagerName = $(slider.$slides[i]).find('.slider-img').attr('data-pager');
     return (prevPagerName != newPagerName) ? newPagerName : ''
     
    },
    speed: speedVal,
                arrows: false,
                autoplay : true,
    autoplaySpeed : autoSpeedVal
            }).on('beforeChange', function(event, slick, currentSlide, nextSlide){
    //progress bar width event
    var val = ( (nextSlide + 1) / slick.$slides.length ) * 100;
                $(slick.$slider[0]).siblings('.img-progress-bar').find('.progress').stop().animate({width: val +"%"},1000);
    //pager color setting
    var newPagerName = $(slick.$slides[nextSlide]).find('.slider-img').attr('data-pager'); //ÇöÀç °ª
    var slides = Array.prototype.slice.call(slick.$slides);
    var dots = Array.prototype.slice.call( $(slick.$dots[0]).find('li'));
    //dots class init
    for(var i=0; i<dots.length; i++){ $(dots[i]).removeClass('slick-color');}
    //dots class setting
    $(slick.$slides).each(function(i, target){
     if(newPagerName == $(target).find('.slider-img').attr('data-pager')){ $(dots[i]).addClass('slick-color'); }
    });
            });
        })();

  //Sub half-layout Slider
  (function(){
   $slider = $('.half-slider');
   if($slider.length > 0){
    $slider.slick({
     dots: false,
     slidesToShow: 1,
     slidesToScroll: 1,
     fade:true
    });
   }
  })();
  //sub-visual-slide about-us
  (function(){
   $slider = $('.sub-visual-slide');
   if($slider.length > 0){
    $slider.slick({
     dots: true,
     arrows: false,
     slidesToShow: 1,
     slidesToScroll: 1,
     fade:true
    });
   }
  })();
    } 
   
 
 /*  MainSummaryEffect
 ------------------------------------------*/ 
    function mainSummaryEffect(){
        var $itemArea = $('.summary-card-area'),
            $itemHover = $itemArea.find('.hover-box');
            $itemList = $itemArea.find('.summary-pagination .col-item');
            $itemBg = $itemArea.find('.hover-item-list .hover-item'),
            boolHover = false;
        var itemHoverMouseEnter = function(){
            var itemIndex = $(this).parents('.pagination-item').index();
            $itemBg.stop().animate({opacity:'1'},200,'easeOutQuart');
            $itemHover.add('.jk-summary .section-title').addClass('is-white-word');
            $itemArea.find('.col-item').addClass('is-hover');
            mouseEnterEffect.call(this,itemIndex);
        };
        
        var mobileClick = function(){
            $itemList.removeClass('is-active');
            $(this).addClass('is-active');
        }
        var mouseEnterEffect = function(itemIndex){
            var parsent;
            for(var i=0; i<$itemBg.length; i++){
                (i == itemIndex) ? parsent = '95%' : parsent = '1.6666%';
    //2018-12-12console.log('hi')
                $itemBg.eq(i).animate({ width: parsent }, 200, 'easeOutQuart');
            }            
        };
        
        var itemAreaMouseLeave = function(){
            $itemBg.stop().animate({width:'25%'},200);
            setTimeout( mouseLeaveEffect.bind(this) , 200);
   //mouseLeaveEffect.bind(this);
        };
        var mouseLeaveEffect = function(){
            $itemBg.stop().animate({opacity:'0'},200);
            $itemHover.add('.jk-summary .section-title').removeClass('is-white-word');
            $itemArea.find('.col-item').removeClass('is-hover');
        };
        
        var mousePcEffect = function(){
            if(boolHover === false){
                boolHover = true;
                $itemList.off('click');
                $itemHover.on('mouseenter', function(){ itemHoverMouseEnter.call(this) });
                $itemArea.on('mouseleave', itemAreaMouseLeave);
            }
        };
        
        var mouseMobileEffect = function(){
            if(boolHover === true){
                boolHover = false;
                
                $itemHover.off('mouseenter');
                $itemArea.off('mouseleave');
                $itemList.on('click',function(){ mobileClick.call(this) });
            }
        }
        
        var MouseEffect = function(){
            if(winW > 768 ){ mousePcEffect(); }
            else{ mouseMobileEffect(); }
        };
        
        if(winW > 768){ boolHover = false; }
        else{ boolHover = true; }
        $(global).resize(function(){ MouseEffect(); });
    }
  
 /*  click search top box
 ------------------------------------------*/ 
    function searchClickEvent(){
        var $btnOpenSrch = $('.sta .search .btn-search'),
            $srchBox = $('.header .search-box'),
            $btnCloseSrch = $('.header .search-box .btn-close'),
            $overlay = $('.overlay');
        var openSearchBox = function(){
            $srchBox.addClass('is-active').slideDown(200);
            $overlay.show();
            $srchBox.find('input').focus();
        };
        var closeSearchBox = function(){
            $srchBox.removeClass('is-active').slideUp(200);
            $overlay.hide();
            $('.header .sta .btn-gnb').focus();
        };
        $btnOpenSrch.on('click',function(){ openSearchBox(); });
        $btnCloseSrch.add($overlay).on('click', function(){closeSearchBox(); });
        $btnCloseSrch.on('keydown', function(e){
            e = e || event;
            if( e.keyCode  === 9){ closeSearchBox();}
        });
    }
 /*  Section page number
 ------------------------------------------*/ 
    function pageNumberEvent(){
  var events = function(target){
   var $pageNumTag = $(target).find('.section-page-num');
   if( $pageNumTag.length > 0 ){
    $pageNumTag.each(function(i){
     
     var index = null;
     var targetLength = $pageNumTag.length;
     var strPages = null;
     index = global.cmm.leadingZeros(i+1);
     targetLength = global.cmm.leadingZeros( targetLength );
     if($pageNumTag.eq(i).hasClass('color-white')){
      strPages ='<span class="this-num color-white"> ' + index + ' </span><span class="total-num color-white"> / ' + targetLength + '</span>';
     }else{
      strPages ='<span class="this-num"> ' + index + ' </span><span class="total-num"> / ' + targetLength + '</span>';
     }
     
     $pageNumTag.eq(i).html(strPages);
    });
   }
  };
  events('.section');
  events('.sub-section');
    }
 /*  Sub-main page [one stop care]
 ------------------------------------------*/ 
    function subMainProgessSection(){
        var $processArea = $('.jk-process-section');
        var $bg = $processArea.find('.process-img');
        var $pager = $processArea.find('.process-pager');
        var $caption = $processArea.find('.img-caption');
        var $imgArea = $('.jk-process-section .img-caption-area');
        var resize = true;
        function pagerEvent(){
            $pager.find('li a').off('click');
            $pager.find('li a').on('click', function(e){
                e.preventDefault();
                var idx = $(this).parent().index();
                if( resize == true){
                    $pager.find('li a').removeClass('is-active');     
                    $(this).addClass('is-active');
                    $bg.find('li').fadeOut();
                    $bg.find('li').eq(idx).fadeIn();
                    $caption.find('li').hide();
                    $caption.find('li').eq(idx).show();
                }else if (resize == false){
                    $imgArea.show();
                    $imgArea.find('.img-caption li').hide();
                    $imgArea.find('.img-caption li').eq(idx).show();
                }
            });
        }
        $imgArea.find('.btn-close').on('click', function(){ $imgArea.hide(); });
        $(global).resize(function(){
            if( $(global).width() > 768 ){
                resize = true;
                pagerEvent();
            }else{
                resize = false;
                $pager.find('li a').removeClass('is-active');
                pagerEvent();
            }
        }).trigger('resize');
    }
 /*  Sub-main page [À±°û fade info box event]
 ------------------------------------------*/ 
 function fadeInfoBox(){
  var $btnFade = $('.btn-fade-box');
  var $fadeBox = $('.fade-info-box');
  var $fadeImg = $('.fade-box-img');
  var $btnClose = $fadeBox.find('.btn-close');
  
  $btnFade.find('button').on('click', function(){
   $fadeBox.show();
   $btnFade.find('button').removeClass('is-active');
   $(this).addClass('is-active');
   var idx = $(this).parent().index();
   $fadeBox.find('li').removeClass('is-active');
   $fadeBox.find('li').eq(idx).addClass('is-active');
   $fadeImg.find('li').fadeOut();
   $fadeImg.find('li').eq(idx).fadeIn();
  });
  
  $btnClose.on('click', function(){
   $fadeBox.fadeOut();
   $btnFade.find('button').removeClass('is-active');
   $fadeBox.find('li').removeClass('is-active');
   $fadeBox.find('li').fadeOut();
  });
 } 
 /*  Sub page [hover-info-box]
 ------------------------------------------*/ 
 function hoverInfoBox(){
  var $hovers = $('.hover-info-box');
  var $hoverBox = $('.hover-info-box ul');
  var $hoverItem = $('.hover-info-box ul li');
  var bkPoint = false;
  
  var valueSetting = function(){
   var vals = { showBig: null, showSm: null, statics: null};
   if( $(this).parents('.hover-info-box').hasClass('info-4')){
    vals.showBig = 40;
    vals.showSm = 20;
    vals.statics = 25;
   }else if( $(this).parents('.hover-info-box').hasClass('info-3')){
    vals.showBig = 50;
    vals.showSm = 25;
    vals.statics = 33.3333;
   }
   return vals;
  };
  var mouseEnterEvent = function(val){
   $(this).stop().animate({width: val.showBig +'%'}, 200);
   var idx = $(this).index();
   for(var i=0; i<$hoverItem.length; i++){
    if(!(i === idx)){ $hoverItem.eq(i).animate({width: val.showSm +'%'}, 200); }
   }
  };
  var mouseLeaveEvent = function(val){
   $hoverItem.stop().animate({width: val.statics+'%' }, 200);
  };
  var hoverInfoEvent = function(){
   $hoverItem.removeClass('is-active');
   $hoverItem.on('mouseenter', function(){
    var val = valueSetting.call(this);
    mouseEnterEvent.call(this, val);
   });
   $hoverBox.on('mouseleave', function(){
    var val = valueSetting.call(this);
    mouseLeaveEvent.call(this, val);
   });
  };
  var removeHoverInfoEvent = function(){
   $hoverItem.off('mouseenter');
   $hoverBox.off('mouseleave');
   $hoverItem.addClass('is-active').css({width: '100%'});
  };
  if( winW <= 768 ){ //mobile
   bkPoint = true;
   removeHoverInfoEvent();
   //console.log('mobile')
   
  }else if( winW > 768 ){ //pc
   hoverInfoEvent();
   bkPoint = false; 
   //console.log('pc')
  }
  $(window).resize(function(){
   if( winW > 768 ){
    if(bkPoint == false){
     bkPoint = true; 
     hoverInfoEvent();
    }
   }else if(winW <= 768){
    if(bkPoint == true){
     bkPoint = false;
     removeHoverInfoEvent();
    }
   }
  }); 
 }
 /*  Sub page niceScrollEvent
 ------------------------------------------*/ 
 function niceScrollEvent(){
  var $ncScroll =  $('.nice-scroll');
  $ncScroll.niceScroll({
   autohidemode: 'hidden',
   horizrailenabled: true,
   touchbehavior: true,
   grabcursorenabled:false,
  });
 };
 /*  Sub Popup Slider
 ------------------------------------------*/ 
 function slidePopup(){
  var $popupArea = $('.popup-slider-area');
  var $cardList = $('.link-box-list');
  var $qnaList = $('.qna-list');
  //init list html
  var initCraeteList = function(type, $list, data ){
   for(var i = 0; i < data.length; i++){
    for(var j = 0; j < data[i].list.length; j++){
     if(type == 'card-type'){ //link-box-list
      var html = '<li><a href="#">'+
          '<figure><span>'+
           '<img src="'+ data[i].list[j].img +'" alt=""/>'+
           '<figcaption>'+ data[i].list[j].title +'</figcaption>'+
          '</span></figure>'+
         '</a></li>';
     }else if(type == 'qna-type'){ //qna-list
      var html = '<li class="col-item"><a href="#">'+
          '<strong>'+ data[i].list[j].question +'</strong>'+
          '<span>VIEW +</span>'+
         '</a></li>';
     }
     $list.eq(i).find('ul').append(html);
    } 
   }
  };
  //carete Popup html
  var createHtmlPopup = function(type, $list){
   var html = '<div class="popup-slide-inner '+type+'">'+
      '<div class="popup-overlay"></div>'+
      '<div class="popup-slider">'+
       '<button type="button" class="btn-close">X</button>'+
       '<ul class="popup-slider-box"></ul>'+
      '</div>'+
     '</div>';
   for(var i = 0; i < $list.length; i++){ $popupArea.append(html); }
  }
  
  //data apply
  var applyData = function(type, $list, data, popupClass){
   var $popup = $(popupClass);
   for(var i = 0; i < $list.length; i++){
    for(var j = 0; j < $list.eq(i).find('li').length; j++){
     if(type == 'card-type'){
      var html = '<li class="slide-box"> '+
          '<figure>'+
           '<img src="'+ data[i].list[j].img +'" alt=""/>'+
          '</figure>'+
          '<div class="figcaption">'+
           '<strong>'+ data[i].list[j].title +'</strong>'+
           '<p>'+ data[i].list[j].descrip +'</p>'
          '</div>'+
         '</li> ';
     }else if(type == 'qna-type'){
      var html = '<li class="slide-box"> '+
          '<div class="question-area"><strong>'+ data[i].list[j].question +'</strong></div>'+
          '<div class="answer-area"><p>'+ data[i].list[j].answer +'</p></div>'+
         '</li> ';
     }
     $popup.eq(i).find('.popup-slider-box').append(html);
    } 
   }
  };
  var showSlider = function(type, listClass, popupClass){
   var $sliderBox = $('.popup-slide-inner');
   var $slides = $sliderBox.find('.popup-slider-box');
   var createSlideEvent = function(){
    $slides.slick({
     slidesToShow : 1,
     autoplay  : false,
     speed   : 1000,
     arrow   : true,
     dots   : true,
     adaptiveHeight : true,
     infinite  : true,
    });
   };
   $sliderBox.hide();
   
   var sliderBoxShow = function(idx, itemIdx){
    $(popupClass).eq(idx).fadeIn(300);
    createSlideEvent();
    $(popupClass).eq(idx).find('.slick-dots li').eq(itemIdx).find('button').click();
   };
   var sliderBoxHide = function(){
    $(this).parents('.popup-slide-inner').hide();
    if($slides.hasClass('slick-initialized')){
     $slides.slick("unslick");
    }
   }
   
   $(listClass).find('a').on('click', function(e){
    e = e || event;  
    e.preventDefault();
    var idx = $(this).parents(listClass).attr('data-index');
    var itemIdx = $(this).parents('li').index();
    sliderBoxShow(idx, itemIdx);
   });
   
   $sliderBox.find('.popup-overlay').add($sliderBox.find('.btn-close')).on('click', function(){
    sliderBoxHide.call(this);
   });
  };
 
   //cardList type
  if( $cardList.length > 0 ){ 
   initCraeteList('card-type', $cardList, infoData );
   createHtmlPopup('card-type', $cardList);
   applyData('card-type', $cardList, infoData, '.popup-slide-inner.card-type');
   showSlider('card-type', '.link-box-list', '.popup-slide-inner.card-type');
  }
   //qnaList type
  if( $qnaList.length > 0 ){ 
   initCraeteList('qna-type', $qnaList, qnaData ); 
   createHtmlPopup('qna-type', $qnaList);
   applyData('qna-type', $qnaList, qnaData, '.popup-slide-inner.qna-type');
   showSlider('qna-type', '.qna-list', '.popup-slide-inner.qna-type');
  }
 }
 /*  Sub Tab content area
 ------------------------------------------*/ 
 function subTabContent(){
  var $tabList = $('.tab-box-list');
  var $tabBtn = $tabList.find('.btn-tab-area li .btn-tab');
  var $tabCont = $tabList.find('.tab-content-box li');
    
  $tabBtn.on('click', function(){
   var idx = $(this).parent().index(); 
   $tabBtn.parent().removeClass('is-active');
   $(this).parent().addClass('is-active');
   
   $tabCont.removeClass('is-active');
   $tabCont.eq(idx).addClass('is-active');
  });
 }
 /*  Sub Target Scroll Event
 ------------------------------------------*/ 
 function subTargetScroll(){
  var $listBtn = $('.link-box-list-type2 ul li a');
  var $target = $('[data-evt="scroll"]');
  
  $listBtn.on('click', function(e){
   e = e || event;
   e.preventDefault();
   var listBtnIdx = $(this).parents('.link-box-list-type2 ul li').index();
   $target.each(function(i){
    if(listBtnIdx == i){
     var pos = ( $target.eq(i).offset().top ) - $('#header').height();
     $('html, body').animate({ scrollTop : pos },800);
    }
   });
  });
 }
 function tabsEvent( tabs, tabContents ){
  
  var $tabs = $(tabs);
  var $tabContents = $(tabContents);
   
  $tabs.on('click', "[data-tab]" , function(e){
   e.preventDefault();
   var thisIdx = $(this).attr('data-tab');
   $tabs.find('[data-tab]').removeClass('is-active');
   $(this).addClass('is-active');
   $tabContents.find('[data-cont]').hide();
   $tabContents.find('[data-cont]').eq(thisIdx).show();
  });
 }
    /*  ´Ù±¹¾î select¹Ú½º
    ------------------------------------------*/
    function selectLang(){
        var $lang = $('.lang');
        var $langTitle = $lang.find('.lang__title');
        var $langImg = $langTitle.find('.lang__img');
        var $langSelect = $lang.find('.lang__select');
        var $langOption = $langSelect.find('.lang__option');
        $langTitle.on('click', function(){
            if(!$(this).hasClass('is-active')){
                $(this).addClass('is-active');
                $langSelect.slideDown();
            }else{
                $(this).removeClass('is-active');
                $langSelect.slideUp();
            }
        });
        // ´Ù±¹¾î ¹öÆ° Ŭ¸¯½Ã
        $langOption.on('click', function(){
            var thisText = $(this).text();
            var imgSrc = $(this).find('img').attr('src');
            var imgTitle = $(this).find('img').attr('alt');
            $(this).removeClass('is-active');
            $langSelect.slideUp();
            $langTitle.html('<img class="lang__img" src="'+imgSrc+'" alt="'+imgTitle+'">' + thisText);
        });
    }
 /* Basic Input File System
 ------------------------------------------*/ 
    function inputFileSystem(){
        var fileTarget = $('.input-file .upload-hidden'); 
        fileTarget.on('change', function(){ 
            if(window.FileReader){ 
                var filename = $(this)[0].files[0].name; 
            } else { 
                var filename = $(this).val().split('/').pop().split('\\').pop(); 
            }
            $(this).siblings('.upload-name').val(filename); 
        });
    }
 /* Basic Input File System
 ------------------------------------------*/ 
    function datePickerEvent(){
        var $dataPick = $("#datepicker");
        if($dataPick.length > 0){
            $("#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
        }
    }
 /* Select System
 ------------------------------------------*/ 
 function selectEvent(){
  var $select = $('.select-custom');
  $select.select2({
   minimumResultsForSearch: Infinity
  });
 }
})(window, window.document, window.jQuery)

/*  Popup Alert prototype func
------------------------------------------*/ 
function PopupAlert(text, callback){
    this.popup = null;
    this.overlay = null;
    this._text = null;
    this._callback = null;
    this.init(text, callback);
}
PopupAlert.error = function(){
    throw Error('new PopupAlert( string, [ function ]) ::Plz check the Type of arguments');
}
PopupAlert.prototype = {
    init : function(text, callback){
        /* check the type */
        if(typeof text !== 'string') this.error();
        if(callback) if(typeof callback !== 'function'){ this.error(); }
        this.popup = $('#popup-alert-area');
        this.overlay = this.popup.find('.popup-alert-overlay');
        this._text = text;
        this._callback = callback;
        this.showAlert(this.createEl(this._text));
        this.event();
    },
    createEl : function(text){
        return '<div class="popup-alert">' + 
                    '<div class="popup-content">' +
                        '<div>'+text+'</div>' +
                    '</div>' +
                    '<div class="btn-area">' +
      '<button type="button" class="btn-close btns">Ãë¼Ò</button>' +
                        '<button type="button" class="btn-confirm btns">È®ÀÎ</button>' +
                    '</div>' +
                '</div>';            
    },
    showAlert : function(data){
        this.popup.append(data);
    },
    //È®ÀιöÆ° Ŭ¸¯
    clickConfirm : function(objThis){
        $(this).parents('.popup-alert').hide(0,function(){
            $(this).remove();
            if( objThis.popup.find('.popup-alert').length == 0 ){ objThis.overlay.hide(); }
            if( objThis._callback ){ objThis._callback(); }
        });
    },
    //overlay Ãë¼Ò¹öÆ° Ŭ¸¯½Ã
    closePopup : function(objThis){
        objThis.popup.find('.popup-alert').hide(0, function(){
            objThis.popup.find('.popup-alert').remove();
            objThis.overlay.hide();
        });
    },
    //À̺¥Æ®
    event : function(){
        var objThis = this;
        if (objThis.popup.find('.popup-alert').length > 0){ objThis.overlay.show(); }
        this.overlay.on('click', function(){ objThis.closePopup.call(this, objThis); });
        this.popup.find('.btn-close').on('click', function(){ objThis.closePopup.call(this, objThis); });
  this.popup.find('.btn-confirm').on('click', function(){ objThis.clickConfirm.call(this, objThis); });
    }
}
/**
 *  popupLogin.open()    : loginPopup ¶ç¿ì±â
 *  popupLogin.close()   : loginPopup Á¢±â
 */
var popupLogin = (function(){
 var $popupLogin  = $('.popup-login-area');
 var $overlay  = $popupLogin.find('.popup-login-overlay');
 var $btnClose  =  $popupLogin.find('.popup-login .btn-close-popup-login');
 var openPopup = function(){ $popupLogin.fadeIn(200); $('html, body').css({overflowY: 'hidden'})  };
 var closePopup = function(){ $popupLogin.fadeOut(200); $('html, body').css({overflowY: 'visible'}) };
 
 $overlay.add($btnClose).on('click', function(){closePopup();});
 return {
  open : openPopup,
  close : closePopup
 }
})();

(function(){
 //input valuedate only number
 $(document).ready(function(){
  $('input:text[numberOnly]').on('keyup', function() {
   $(this).val($(this).val().replace(/[^0-9]/g,""));
  });
 });
})();