jQuery(function($){
	/* *********************** 메인 비주얼 ************************ */
	// 임의의 영역을 만들어 스크롤바 크기 측정
	function getScrollBarWidth(){
		if($(document).height() > $(window).height()){
			$('body').append('<div id="fakescrollbar" style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"></div>');
			fakeScrollBar = $('#fakescrollbar');
			fakeScrollBar.append('<div style="height:100px;">&nbsp;</div>');
			var w1 = fakeScrollBar.find('div').innerWidth();
			fakeScrollBar.css('overflow-y', 'scroll');
			var w2 = $('#fakescrollbar').find('div').html('html is required to init new width.').innerWidth();
			fakeScrollBar.remove();
			return (w1-w2);
		}
		return 0;
	}

	// 메인 비주얼 높이값 설정
	$("#mainVisual.full-height").each(function  () {
		scrollWidth = getScrollBarWidth();
		var win_width = $(window).outerWidth() + getScrollBarWidth();
		var visual_height = $(window).height()	- $("#productQuickMenuCon").height();
		
		
		if ( win_width > 800 ) {
			$("#mainVisual").height(visual_height);
		}else {
			$("#mainVisual").css("height","auto");
		}
		$(window).resize(function  () {
			var win_width = $(window).outerWidth() + getScrollBarWidth();

			var visual_height = $(window).height()	- $("#productQuickMenuCon").height();

			if ( win_width > 800 ) {
				$("#mainVisual").height(visual_height);
			}else {
				$("#mainVisual").css("height","auto");
			}
		});
	});



	var $mainVisual = $(".main-visual-con");

	// 메인 비주얼 zoom-out 효과
	$mainVisual.on('init', function(event, slick) {
		$(".main-visual-item").eq(0).addClass("active-item");
	});
	$mainVisual.on('afterChange', function(event, slick, currentSlide){
        $(".main-visual-item").removeClass("active-item");
		$(this).find(".main-visual-item").eq(currentSlide).addClass("active-item")
    });

	// 메인 비주얼 슬라이드
	$('.main-visual-con').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: false,
		fade: true,
		dots:true,
		autoplay: true,
		speed:1000,
		infinite:true,
		autoplaySpeed: 4000,
		easing: 'easeInOutQuint',
		pauseOnHover:false
	});
	
 
});









// -------------------------------------------------------버튼 효과
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();
        });
    });
}




// -------------------------------------------------------value 효과
function value(){
    $(".value_section .con_box li").on("mouseenter", function(){
        $(".value_section .con_box li").removeClass('active');
        $(this).addClass('active');
    });
    $(".value_section .con_box li").each(function(index, item){
        var bg_num = index + 1;

        $(item).on("mouseenter", function(){
            $(".value_img .bg_box").removeClass("active");
            $(".value_img .bg_box_0" + bg_num).addClass("active");
            $(".value_section .tab_box .tabMenu li").removeClass("active");
            $(".value_section .tab_box .tabMenu .tab_menu_0" + bg_num).addClass("active");
        });
    });

    $(".value_section .tab_box .tabMenu li").click(function(){
        var activeTab = $(this).attr("data-tabNumb");
        $(".value_section .tab_box .tabMenu li").removeClass("active");
        $(this).addClass("active");

        $(".value_section .con_box li").removeClass("active");
        $("#"+activeTab).addClass("active");
        $(".value_img .bg_box").removeClass("active");
        $("#"+activeTab+"_bg").addClass("active");
    });
}



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


function mo_effect(){
setTimeout(function() { 
$(".value_section .con_box li:first-of-type").addClass("mo_active");
$(".value_section .value_img .bg_box:first-of-type").addClass("mo_active");
}, 200);
}
$(document).ready(function(){
mo_effect();
});