$(document).ready(function () {
	//pc 메뉴
	$(".topnav > a").hover(function () {
		$(this).parent().find(".subnav").show();
		$(this).parent().hover(function () {}, function () {
			$(this).parent().find(".subnav").hide();
		});
	});

	//pc 퀵메뉴 열고 닫기
	$('.q_btn').click(function (e) {
		e.preventDefault();
		if ($('#quick_menu').hasClass('hidden')) {
			$('#quick_menu').animate({
				'right': 0
			}, 300, function () {
				$('#quick_menu').removeClass('hidden');
			});
			$(".xi-angle-left-min").attr('class', 'xi-angle-right-min');
		} else {
			$('#quick_menu').animate({
				'right': -($('#quick_menu').outerWidth())
			}, 300, function () {
				$(this).addClass('hidden');
			});
			$(".xi-angle-right-min").attr('class', 'xi-angle-left-min');
		};
	});


	// 상담예약 폼메일 열고 닫기
	$('#form_btn').click(function (e) {
		e.preventDefault();
		$('#form_cont').animate({
			'bottom': 0
		}, 300, function () {
			$('#form_cont').addClass('open');
		});
		$("#form_btn").css('display', 'none');
	});

	$('.form_close').click(function (e) {
		e.preventDefault();
		$('#form_cont').animate({
			'bottom': -400
		}, 300, function () {
			$('#form_cont').removeClass('open');
		});
		$("#form_btn").css('display', 'block');
	});


	// 푸터 top 버튼
	$('#back-top').click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 1000);
		return false;
	});

	// Q&A
	$('.faq .q_box').click(function () {
		$(this).toggleClass('active').next('.a_box').slideToggle();
		$(this).parent("li").toggleClass('active');
		
		if ($(this).hasClass('active')) {
			$(this).find('.xi-angle-down-thin').removeClass().addClass('xi-angle-up-thin');
		} else {
			$(this).find('.xi-angle-up-thin').removeClass().addClass('xi-angle-down-thin');
		}
	});

	// 서브탭메뉴
	var sub_menu = $(".tab_menu li, .m_nav_sub li"),
		tab_menu = $(".tab_nav li"),
		tab_content = $("#tab_box > div"),
		currentUrl = location.href;

	sub_menu.each(function () {
		var targetSrt = $(this).find("a").attr("href");

		if (currentUrl.indexOf(targetSrt) > -1) {
			var targetIdx = $(this).index();

			activateTab(targetIdx);
		}

		if (currentUrl.indexOf("#") == -1) {
			activateTab(0);
		}
	});

	tab_menu.click(function (e) {
		e.preventDefault();
		activateTab($(this).index());
	});

	sub_menu.click(function () {
		activateTab($(this).index());

		$("#site_map").css("display", "none");
		$("#m_menu").removeClass("on");
		$("html, body").css("overflow", "auto");
	});

	function activateTab(idx) {
		tab_menu.find("a").removeClass("active");
		tab_menu.eq(idx).find("a").addClass("active");

		tab_content.hide();
		tab_content.eq(idx).show();
	}
});


function createLoopingText(el) {
	const lerp = (current, target, factor) => current * (1 - factor) + target * factor;

	const state = {
		el,
		lerp: {
			current: 0,
			target: 0
		},
		interpolationFactor: 0.1, // 선형 보간에 사용되는 요인
		speed: 0.2,
		direction: -1
	};

	state.el.style.cssText = 'position: relative; display: inline-flex; white-space: nowrap;';
	state.el.children[1].style.cssText = `position: absolute; left: ${100 * -state.direction}%;`;


	function animate() {
		state.lerp.target += state.speed;
		state.lerp.current = lerp(state.lerp.current, state.lerp.target, state.interpolationFactor);

		if (state.lerp.target > 100) {
			state.lerp.current -= state.lerp.target;
			state.lerp.target = 0;
		}

		const x = state.lerp.current * state.direction;
		state.el.style.transform = `translateX(${x}%)`;
	}

	function render() {
		animate();
		window.requestAnimationFrame(render);
	}

	render();
	return state;
}

document.querySelectorAll('.loop-container').forEach(el => createLoopingText(el));



function setPage(arg) { //navigation hn:1depth, sn:2depth, cn:3depth 瑜� 諛쏆쓬
	page = jQuery.extend({
		hn: "",
		sn: "",
		cn: ""
	}, arg || {});
	if (window.console) {
		console.log("hn : " + page.hn + "\nsn : " + page.sn + "\ncn : " + page.cn);
	}
	if (page.hn != 10) {
		$(".hn" + page.hn + " a").addClass("on"); //1depth �쒖꽦
	}

	if (page.hn >= 11) {
		$(".hn" + page.hn + " a").addClass("on"); //�좏떥 1depth �쒖꽦
	}

	$(".hn" + page.hn + "> .subnav li.sn" + page.sn).addClass("on").end().find("> ul").addClass("on").find("> li.cn" + page.cn + " a").addClass("on"); //2depth �쒖꽦
}