/*
* sub ui 
* by thk™ 
*/
// var mfullpage;

$(function() {
	var subvisualtype = 'type4'; 
	subvisualtype = ($('.subvisual_type2').length>0)? 'type2' : subvisualtype ;
	subvisualtype = ($('.subvisual_type3').length>0)? 'type3' : subvisualtype ;
	subvisualtype = ($('.subvisual_type4').length>0)? 'type4' : subvisualtype ;

	// UI 부분은 수동으로 수정해야함. 
	// @ type1 : MUEE WEB 2 
	// @ type2 : SWIPER SLIDER 
	// @ type3 : CURVE PATH 

	if(subvisualtype=='type1') { 
		var subVisual = function(target, container) {
			
			if ($('.subvisual_type1').length <= 0) return; 

			gsap.registerPlugin(ScrollTrigger);
			ScrollTrigger.saveStyles(".slider__thumb, .slider__mxw");
			var sliderThumb = document.querySelector('.slider__thumb');
			var sliderMx = document.querySelector('.slider__mxw');

			var tl = gsap.timeline({
				scrollTrigger: {
					trigger: document.querySelector('.subvisual_type1'),
					start: "top top",
					end: "top -30%",
					scrub: true
				}
			});
			tl.to(sliderThumb, {
				width: "100%"
			});
	
			// top margin, height 보고 위치 정해야함 
			ScrollTrigger.matchMedia({	
				// PC
				'(min-width: 1025px)': () => {
					var tl2 = gsap.timeline({
						scrollTrigger: {
							trigger: document.querySelector('.subvisual_type1'),
							start: "top 0",
							end: "top -20%",
							scrub: true
						}
					});
					tl2.to(sliderMx, {
						position: "absolute",
						top: "420px"
					});
				},
				'(max-width: 1200px)': () => {
					var tl2 = gsap.timeline({
						scrollTrigger: {
							trigger: document.querySelector('.subvisual_type1'),
							start: "top 0",
							end: "top -20%",
							scrub: true
						}
					});
					tl2.to(sliderMx, {
						position: "absolute",
						top: "350px"
					});
				},
				'(max-width: 1024px)': () => {
					var tl2 = gsap.timeline({
						scrollTrigger: {
							trigger: document.querySelector('.subvisual_type1'),
							start: "top 0",
							end: "top -20%",
							scrub: true
						}
					});
					tl2.to(sliderMx, {
						position: "absolute",
						top: "250px"
					});
				},
				'(max-width: 480px)': () => {
					var tl2 = gsap.timeline({
						scrollTrigger: {
							trigger: document.querySelector('.subvisual_type1'),
							start: "top 0",
							end: "top -20%",
							scrub: true
						}
					});
					tl2.to(sliderMx, {
						position: "absolute",
						top: "200px"
					});
				},
				// all 
				"all": function() {
				} 
			});
				

		}; 

	} 

	
	if(subvisualtype=='type2') {
		var subVisual = function(target, container) {
			
			if ($('.subvisual_type2').length <= 0) return; 
			
			var loop = false; 
			if ($('.subvisual_type2').length >1) { 
				loop = true; 
			}
			var subject = $('.slider__slogun b');
			var desc = $('.slider__slogun p');

			var subslider = new Swiper(".slider_new .subSwiper", {
				effect: "fade",
				loop: loop,
				autoplay: {
					delay: 5000,
					disableOnInteraction: false,
				},
				navigation: {
					nextEl: ".swiper-button-next",
					prevEl: ".swiper-button-prev",
				},
				pagination: {
					el: ".swiper-pagination",
					clickable: true,
				},
				on: {
					init: function () {

						// visual action 
						gsap.to($('.swiper-slide-active .slider__thumb_bg '),0.35,{scale:1.2,autoAlpha : 0,onComplete :function(){
							gsap.fromTo($('.swiper-slide-active .slider__thumb_bg'), 1, {scale:1.2,autoAlpha:0,ease: Expo.easeOut,delay: 0}, { scale: 1,autoAlpha:1,delay: 0});
						}});

						gsap.to($('.swiper-slide-active .slider__slogun b > span'),0.35,{y:0,autoAlpha : 0,onComplete :function(){
							gsap.fromTo($('.swiper-slide-active .slider__slogun b > span'), 0.7, {y: 20,autoAlpha:0,ease: Power3.easeOut,delay: 0}, { y: 0,autoAlpha:1,delay: 0});
						}});
						gsap.to($('.swiper-slide-active .slider__slogun p > span'),0.35,{y:0,autoAlpha : 0,onComplete :function(){
							gsap.fromTo($('.swiper-slide-active .slider__slogun p > span'), 0.5, {y: 20,autoAlpha:0,ease: Power3.easeOut,delay: 0}, { y: 0,autoAlpha:1,delay: 0.3});
						}}); 
					},
					slideChange : function(){
						// visual action 
						gsap.to($('.swiper-slide-active .slider__thumb_bg '),0.35,{scale:1.2,autoAlpha : 0,onComplete :function(){
							gsap.fromTo($('.swiper-slide-active .slider__thumb_bg'), 1, {scale:1.2,autoAlpha:0,ease: Expo.easeOut,delay: 0}, { scale: 1,autoAlpha:1,delay: 0});
						}});

						gsap.to($('.swiper-slide-active .slider__slogun b > span'),0.35,{y:0,autoAlpha : 0,onComplete :function(){
							gsap.fromTo($('.swiper-slide-active .slider__slogun b > span'), 0.7, {y: 20,autoAlpha:0,ease: Power3.easeOut,delay: 0}, { y: 0,autoAlpha:1,delay: 0});
						}});
						gsap.to($('.swiper-slide-active .slider__slogun p > span'),0.35,{y:0,autoAlpha : 0,onComplete :function(){
							gsap.fromTo($('.swiper-slide-active .slider__slogun p > span'), 0.5, {y: 20,autoAlpha:0,ease: Power3.easeOut,delay: 0}, { y: 0,autoAlpha:1,delay: 0.3});
						}}); 

					}
				}
			});

		}; 
	}


	if(subvisualtype=='type3') {
		var subVisual = function(target, container) {
			
		if ($('.subvisual_type3').length > 0) {

			gsap.registerPlugin( CSSPlugin );

			var $window = $(window);
			var $pageTop = $('.subvisual_type3');
			var front = $('.front', $pageTop);
			var img = $('.img', front);
			var over = $('.over', front);
			var titles = $('.subvisual_type3_title', $pageTop);
			var subject = $('.subvisual_type3_title h2', $pageTop);
			var desc = $('.subvisual_type3_title .desc', $pageTop);
			var bgCurvePath = $('#bgCurvePath');
			var scrollTop = 0;
			var windowHeight = $window.innerHeight();

			var windowHeight = $pageTop.innerHeight(); 

			if(navigator.userAgent.match(/iPhone/)) {
				$('html').addClass('iphone');
			}

			$window.on('scroll', function(){
				onScroll();
			})
			$window.on('resize', function(){
				onResize();
				onScroll();
			})
			
			
			setTimeout(function() {
				$('body').addClass('inMotion');
				//gsap.fromTo(img, 0, {opacity:0.5}, {opacity:1});
				if(img.length>0) gsap.fromTo(img, 0.7, {top:'0',opacity:0}, {top:'0', opacity:1});
				if(titles.length>0) gsap.fromTo(titles, 0.3, {opacity:0}, {opacity:1}, 0.3);
				if(subject.length>0) gsap.fromTo(subject, 0.5, {top:'20', opacity:0}, {top:'0', opacity:1}, 0.7);
				if(desc.length>0) gsap.fromTo(desc, 0.5, {top:'20',opacity:0}, {top:'0',opacity:1}, 1);
			}, 300);
			

			//var curvePath = 'M 0,1   L 0,0   L 1,0   L 1,1   C 0,1   Z'
			var curvePath = 'M 0,0   L 1,0   L 1,1   C .7 1, .3 1, 0,1  Z'
			function onScroll() {
				scrollTop = $window.scrollTop();
				//bgCurvePath.attr('d', curvePath);

				if (scrollTop < 0) return false;

				if ($('html').hasClass('no-cssmask')) {
					titles.css('position', 'absolute');
					bgCurvePath.attr('d', curvePath);
					var per = 1 - scrollTop * 2 / windowHeight;
					per *= 100;
					front.css('height', per + '%');
				} else {
					// 높이가 낮은경우 scrollTop를 조금 낮춰서 조절할 수 있다. 
					scrollTop = scrollTop/10;

					curvePath = calcCurve(scrollTop);
					bgCurvePath.attr('d', curvePath);
					var py = -scrollTop * .8;
					img.css('transform', 'translateY(' + py + 'px)');

					titles.each(function(){
						var height = $(this).innerHeight();
						
						var top = windowHeight * .5;
						if (scrollTop > (windowHeight - height)* .5 ) {
							top += -scrollTop + (windowHeight - height)* .5 ;
						}
						// var top = (windowHeight/3) - scrollTop*4.5; 
						$(this).css('top', (top));
						var has = $(this).hasClass('stop'); 
						if(has) {
							$(this).css('top', '-'+(height)+'px');
						}
					});

					// 아래스크립트때문에.. AOS가 제대로 안됨 -_-;
					//$('.sub-menu').css('transform', 'translateY(' + py + 'px)');
					//$('.sub__navbar').css('transform', 'translateY(' + py + 'px)');
					//$('.sub__content').css('transform', 'translateY(' + py + 'px)');
				}

				var opacity = scrollTop * 4.5 / windowHeight;
				over.css('opacity', opacity);
			}
			
			function onResize() {
				
				// windowHeight = $window.innerHeight();

				if (!$('body').hasClass('no-curve')) {
					$pageTop.css('height', windowHeight +'px');
				} else {
					$pageTop.css('height', windowHeight - 120 +'px');
				}
				
			}

			onResize();
			onScroll();


			function calcCurve(scrollTop) {
				// 기본사선;
				//var path = 'M 0,0   L 1,0   L 1,0.75   C 0 1, 0 1, 0,1  Z'
				//return path;
				var path = 'M 0,0   ';
				path += 'L 1,0   ';
				var per = 1 - scrollTop * 6.6 / windowHeight;
				//console.log(per); 
				//per = 0; 
				path += 'L 1,' + (per) + '   ';
				var per1 = 1 - scrollTop * 2.2 / windowHeight;
				var per2 = 1; 
				// var per = 1; 
				path += 'C .7 ' + per1 + ', .3 ' + per1 + ', 0, ' + (per1)  + '  ';
				path += 'Z';
				return path;								
				
			}
		}

		}; 
	} 


	if(subvisualtype=='type4') {
		var subVisual = function(target, container) { 
			if ($('.subvisual_type4').length > 0) {
				gsap.to($('.swiper-slide .slider__thumb_bg '),0.35,{x:'150%', scale:1,autoAlpha : 0,onComplete :function(){
					gsap.fromTo($('.swiper-slide .slider__thumb_bg'), 0.5, {x:'150%', scale:1,autoAlpha:1,ease: Expo.easeOut,delay: 0}, { x:'0', scale: 1,autoAlpha:1,delay: 0});
				}});

				gsap.to($('.swiper-slide .slider__slogun b > span'),1,{y:0,autoAlpha : 0,onComplete :function(){
					gsap.fromTo($('.swiper-slide .slider__slogun b > span'), 0.7, {y: 20,autoAlpha:0,ease: Power3.easeOut,delay: 0}, { y: 0,autoAlpha:1,delay: 0});
				}});
				gsap.to($('.swiper-slide .slider__slogun p > span'),1,{y:0,autoAlpha : 0,onComplete :function(){
					gsap.fromTo($('.swiper-slide .slider__slogun p > span'), 0.5, {y: 20,autoAlpha:0,ease: Power3.easeOut,delay: 0}, { y: 0,autoAlpha:1,delay: 0.3});
				}}); 


				gsap.fromTo($('.sub_menu_new_wrap'), 0.5, {y: 100,autoAlpha:0,ease: Power3.easeOut,delay: 0}, { y: 0,autoAlpha:1,delay: 1});
				
				// TYPE4에서는 컨텐츠에 나오는 서브메뉴안보이게 처리 
				var cl = $('.sub-menu .sub_menu_cont').clone();
				var tg = $('.sub_menu_new .sub_menu_cont').html(cl.html()); 
				$('.sub-menu').hide(); 
			} 
		}; 
	} 


	subVisual(); 
	subScrollContent(); 
	// subSlider(); 


});



// 컨텐츠, 부분컨텐츠관리에서 불필요한 태그삭제 및 링크 걸기. 
var subContent = function(target, container) {
	if($('.thk-template').length>0) { 
		$('.sortbtn, .deletebtn, .addbtn, .img_delete_btn, .photo_upload, .vr_upload, .cke_widget_drag_handler_container, .cke_image_resizer, .btngroup').remove(); 
		$('[data-cke-hidden-sel]').remove(); 
		$(".thk-inner").removeClass('cke_editable cke_editable_inline cke_contents_ltr cke_show_borders'); 

		// rows, cols link 
		$(".thk-template [data-link]").each(function(inx){
			var url = $(this).attr('data-link'); 
			var target = $(this).attr('data-link-target'); 
			var mode = $(this).attr('data');	// 현재 어디누?
			
			function goLink() {
				if(target=='_blank') {
					window.open(url); 
				} else {
					location.href = url; 
				}
			}
			$(this).on('click', function(e){
				if(mode=='rows' || mode=='inner') {
					goLink(); 
				} else {
					if($(this).has(e.target).length===0) {
						e.preventDefault();
						e.stopPropagation(); 
						goLink(); 
						// alert(url); 
					} 
				} 
			}); 
		}).css('cursor','pointer');
	} 
}; 


// 서브컨텐츠 스크롤 : FIXED 
var breakpoint = window.matchMedia( '(min-width:767px)' );
var subScrollContent = function() { 
	var controller = new ScrollMagic.Controller();
	
	var $w = $(window).width(); 
	if ($('.thk-content-fixed').length <= 0) return; 
	if ( breakpoint.matches ) {
		var p = $('.thk-content-fixed-inner').parent().outerHeight();
		
		new ScrollMagic.Scene({
			triggerElement: ".thk-content-fixed",
			offset:-80,
			triggerHook: 0, 
			duration: p - 240
		})
		.setPin(".thk-content-fixed")
		.setTween(".thk-content-fixed-inner", {
			'bottom':'0',
			'top':'auto'
		}) 
		// .addIndicators()
		.addTo(controller);   
	} 


	$(window).resize(function(){
		breakpoint = window.matchMedia( '(min-width:767px)' );
		
		var parent = $('.thk-content-fixed').parent('.scrollmagic-pin-spacer');
		if(parent.length<=0) return; 
		if( !breakpoint.matches ) {
			if(controller) controller.enabled(false);
			parent.css({'padding-top':'0rem', 'padding-bottom':'0rem', 'min-height':'revert'});
		} else {
			controller.enabled(true);
		}
		
	});

}; 


var subSlider = function() {
	var $wid = $(window).width(); 
	var touches = true; 
	if($wid<=1024) { 
		touches = true; 
	} 

	//if($('.pixi-pagger').length==0) return; 
	var sub_swiper = new Swiper('#sub_slider .swiper-container', {
		loop: true,
		spaceBetween:30,
		slidesPerView: 'auto',
		//autoHeight:true, 
		//centeredSlides: true,
		autoplay: {
			delay: 3000,
			disableOnInteraction:false,
			pauseOnMouseEnter:true,
		},
		allowTouchMove:touches,
		slideToClickedSlide:true,
		speed:600, 
		breakpoints:{
			320:{ slidesPerView: 1 },
			480:{ slidesPerView: 1 },
			640:{ slidesPerView: 2 },
			1024:{ slidesPerView: 3 },
			1280:{ slidesPerView: 3 },
			1540:{ slidesPerView: 3 },
			1920:{ slidesPerView: 3 }
		}, 
		navigation: {
			nextEl: '.sw-button-next',
			prevEl: '.sw-button-prev',
		},
		on: {
			slideChangeTransitionStart:function(index){
				
			}, 
			slideChangeTransitionEnd :function(){
				//this.loopFix(); 

			},
		}
	});
};