//m11
function overview() {

	if(!$('#main').hasClass('m11')) return;

	$('#vidBtn').on('click', function(){
		$('.m11 .section01 .img').html('<iframe src="https://player.vimeo.com/video/115630169?'+
			'autoplay=1&title=0&byline=0&portrait=0" width="1351" height="760"'+
			'frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>');
	});

	//awards
	$awardsSlide = $('.awards_slide');
	$awardsSlide.slick({
		infinite: false,
		slidesPerRow: 4,
		swipe: true,
		variableWidth: false,
		rows: 3,
		arrows: true,
		prevArrow: $('.awards_slide_navigation').find('.prev'),
		nextArrow: $('.awards_slide_navigation').find('.next'),
		responsive: [
			{
				breakpoint: 1240,
				settings: {
					rows: 6,
					slidesPerRow: 3,
				}
			},
			{
				breakpoint: 950,
				settings: {
					rows: 6,
					slidesPerRow: 2,
				}
			}
		],
		
	});

	if($('html').hasClass('mobile')) return;

	var $overviewImg = $('.m11 .section01 .img'),
		$overviewTit = $('.m11 .section01 .tit1'),
		$overviewTxt = $('.m11 .section01 .txt1'),

		$serviceList = $('.m11 .section02 .list'),
		$serviceItem = $('.m11 .section02 li > *'),

		$meritItem = $('.m11 .section03 .list'),

		$profileBox = $('.m11 .section04 .inner'),
		$profileItem = $('.m11 .section04 .inner > *'),

		$awardsTit = $('.m11 .section06 .main_title1'),
		$awardsWrap = $('.m11 .section06 .awards_slide_wrap');

	//init
	t.set($overviewImg, {opacity: 0, transform:'translateY(100px)'});
	t.set($overviewTit, {opacity: 0, transform:'translateY(50px)'});
	t.set($overviewTxt, {opacity: 0, transform:'translateY(30px)'});

	t.set($serviceList, {opacity: 0, transform:'translateY(100px)'});
	t.set($serviceItem, {opacity: 0, transform:'translateY(30px)'});

	t.set($meritItem, {opacity: 0, transform:'translateX(30px)'});

	t.set($profileBox, {opacity: 1, transform:'translateY(100px)'});
	t.set($profileItem, {opacity: 0, transform:'translateY(60px)'});
	t.set($awardsTit, {opacity: 0, transform:'translateX(-40px)'});
	t.set($awardsWrap, {opacity: 0, transform:'translateX(40px)'});
	t.set('.m11 .section07 .inner', {opacity: 0, transform:'translateY(100px)'});


	//animate
	$('.m11 .section01').waypoint(function() {
		t.to($overviewImg, 1.6, {opacity: 1, transform:'translateY(0)', ease: Power3.easeOut});
		t.to($overviewTit, 2, {opacity: 1, transform:'translateY(0)', delay:.6, ease: Expo.easeOut});
		t.to($overviewTxt, 2, {opacity: 1, transform:'translateY(0)', delay:.8, ease: Expo.easeOut});
	}, {
		offset: '60%'
	});

	$('.m11 .section02').waypoint(function() {
		t.to($serviceList, 1.2, {opacity: 1, transform:'translateY(0)', ease: Power3.easeOut});
		t.to($serviceItem, 1.6, {opacity: 1, transform:'translateY(0)', delay:.4, ease: Power3.easeOut});
	}, {
		offset: '50%'
	});

	$('.m11 .section03').waypoint(function() {
		t.to($meritItem, 1, {opacity: 1, delay:.2, transform:'translateX(0)'}, .1);
	}, {
		offset: '60%'
	});

	$('.m11 .section04').waypoint(function() {
		t.to($profileBox, 2, {opacity: 1, transform:'translateY(0)', ease: Expo.easeOut});
		t.to($profileItem, 1.6, {opacity: 1, transform:'translateY(0)', delay:.4, ease: Power3.easeOut});
	}, {
		offset: '50%'
	});

	$('.m11 .section06').waypoint(function() {
		t.to($awardsTit, 1, {opacity: 1, transform:'translateX(0)', ease: Power3.easeOut});
		t.to($awardsWrap, 1.4, {opacity: 1, transform:'translateX(0)', delay:.4, ease: Power3.easeOut});
	}, {
		offset: '60%'
	});

	$('.m11 .section07').waypoint(function() {
		t.to('.m11 .section07 .inner', 1, {opacity: 1, transform:'translateY(0)', ease: Power3.easeOut});
	}, {
		offset: '50%'
	});

}


//m21
function portfolio() {
	if(!$('#main').hasClass('m21')) return;

	function cateLine() {
		var menuPosition  = $('.portfolio_cate2 li.on').position().left;
		var menuWidth = $('.portfolio_cate2 li.on').width()/2;
		$('.cate_active_line').css({'left':menuPosition+menuWidth-31.5});
	}
	setTimeout(function() {cateLine()}, 200);
	$(window).on('resize', _.debounce(function() {cateLine()}, 100));


	$('.portfolio_cate2 li').on('click', function(){
		$(this).addClass('on').siblings().removeClass('on');
		menuPosition = $(this).position().left;
		menuWidth = $(this).width()/2;
		$('.cate_active_line').animate({'left':menuPosition+menuWidth-31.5}, 500, 'easeInOutQuad');
	});

}

//m41
function projectRequest(){
	if(!$('#main').hasClass('m41')) return;

	var fileTarget = $('.filebox .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);
	});

	(function selectBox() {
		function selectContent(select){
			$(select).find('.select_title').on('click', function(){
				$(this).parent().toggleClass('on');
				$(this).parent().find('.list').stop().slideToggle(300);
			});
			$(select).find('li').on('click', function(){
				var hidden = $(this).data('option'),
					titleName = $(this).text();

				$(this).parent().parent().find('.select_hidden').val(hidden);
				$(this).parent().parent().find('.select_title').text(titleName);

				//셀렉트박스 자동 닫기
				$(this).parent().parent().removeClass('on');
				$(this).parent().hide();
			});
		}
		selectContent('.select_layout');
	}());

}

//기본js
function initSub(){
	$('#wrap').removeClass('first');
	mobileScrollStatus();

	if($('html').hasClass('mobile')) return;


	(function motionClass(){
		var $animation_elements = $('.ani');
		var $window = $(window);

		function check_if_in_view() {
			var window_height = $window.height();
			var window_top_position = $window.scrollTop();
			var window_bottom_position = (window_top_position + window_height);

			$.each($animation_elements, function() {
				var $element = $(this);
				var element_height = $element.outerHeight();
				var element_top_position = $element.offset().top+50;
				var element_bottom_position = (element_top_position + element_height);
				//console.log(element_top_position);

				if ((element_bottom_position >= window_top_position) &&
				(element_top_position <= window_bottom_position)) {
					$element.addClass('in-view');
				} else {
					//$element.removeClass('in-view');
				}
			});
		}
		$window.on('scroll resize', check_if_in_view);
		$window.trigger('scroll');
	}());


	$('html').niceScroll({
		cursorcolor: "#000",
		cursorwidth: 6,
		scrollspeed: 40,
		cursorborderradius: 0,
		mousescrollstep: 40,
		cursoropacitymin: 0,
		cursoropacitymax: 1,
		background: "none",
		cursorborder: "none",
		autohidemode: false,
		boxzoom: false,
		smoothscroll: true,
		zindex:10,
	});

}

//모바일 스크롤
function mobileScrollStatus() {
	if(!$('html').hasClass('mobile')) return;

	$(window).on('scroll', function() {
		var Scroll = $(window).scrollTop();
		if (50 < Scroll) {
			$('header').addClass('scroll');
		} else {
			$('header').removeClass('scroll');
		}
	});
}

$(function(){
	initSub();

	overview();
	portfolio();
	projectRequest();

});