/*
* sub ui 
* by thk™ 
*/

$(function() {
	var subvisualtype = 'type1'; 
	subvisualtype = ($('.subvisual_type2').length>0)? 'type2' : subvisualtype ;
	subvisualtype = ($('.subvisual_type3').length>0)? 'type3' : 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 (scrollTop < 5) gsap.fromTo(img, 0.7, {scale:1.2,opacity:0}, {scale:1,opacity:1});
					if(img.length>0) gsap.fromTo(img, 0.7, {scale:1.2,opacity:0}, {scale:1,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() {
					$window = $(window);
					windowHeight = $window.innerHeight(); 

					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/2;
						//console.log('resize'); 
						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 * .45;
							if (scrollTop > (windowHeight - height)* .45 ) {
								top += -scrollTop + (windowHeight - height)* .45 ;
							}
							$(this).css('top', top);
						});
						
						/*
						titles.each(function(){
							var height = $(this).innerHeight();
							
							var top = windowHeight * .4;
							if (scrollTop > (windowHeight - height)* .4 ) {
								top += -scrollTop + (windowHeight - height)* .4 ;
							}
							// 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();
					var $window = $(window);
					var 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;								
					
				}
			}

		}; 
	} 

	subVisual(); 




});



// 컨텐츠, 부분컨텐츠관리에서 불필요한 태그삭제 및 링크 걸기. 
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^=http]").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') {
					goLink(); 
				} else {
					if($(this).has(e.target).length===0) {
						e.preventDefault();
						e.stopPropagation(); 
						goLink(); 
						// alert(url); 
					} 
				} 
			}); 
		}).css('cursor','pointer');
	} 
};