// Javascript

var scrollTop = $(window).scrollTop()
	, visualH = $('#visualArea').innerHeight()
	, headerH = $('.ms-header').innerHeight()
	, winH = $(window).height()

function initMainSwiper() {
	// main visual swiper
	var mainSwiper = new Swiper('#main-swiper',{
		effect: "fade",
		speed: 1000,
		loop: true,
		autoplay: {
			delay: 5000,
			disableOnInteraction: false,
		},
		pagination: {
			el: '.swiper-pagination',
			type: 'bullets',
			clickable: true,
		},
	});
	$('#main-swiper .swiper-pagination').append('<button class="pause"></button>');
	$('#main-swiper .swiper-pagination .pause').on('click',function(){
		if($(this).hasClass('play')){
			$(this).removeClass('play');
			mainSwiper.autoplay.start();
		}else{
			$(this).addClass('play');
			mainSwiper.autoplay.stop();
		}
	});
}

$(document).ready(function(){
	headerFloat();
	// main
	if($('.main-block').length){
		mainLine();
		benefitPrx();
	}
	// sub
	if($('.cont-visual').length){
		contPrx();
	}

	// select style
	$('.select').each(function(){
		var $this = $(this), numberOfOptions = $(this).children('option').length;


		$this.addClass('select-hidden');
		$this.wrap('<div class="select"></div>');
		$this.after('<div class="select-styled"></div>');

		var $styledSelect = $this.next('div.select-styled');
		$styledSelect.text($this.children('option').eq(0).text()).after('<i class="ico ico-arrow"></i>');
		var $select = $styledSelect.parent('.select');

		var $list = $('<ul />', {
			'class': 'select-options'
		}).insertAfter($styledSelect);

		for (var i = 0; i < numberOfOptions; i++) {
			$('<li />', {
				text: $this.children('option').eq(i).text(),
				rel: $this.children('option').eq(i).val()
			}).appendTo($list);
		}

		var $listItems = $list.children('li');
		$select.click(function(e){
			e.stopPropagation();
			$('div.select.active').not(this).each(function(){
				$(this).removeClass('active');
			});
			if($(this).hasClass('active'))
				$(this).removeClass('active');
			else
				$(this).addClass('active');
		});

		$listItems.click(function(e) {
			e.stopPropagation();
			$styledSelect.text($(this).text());
			$this.val($(this).attr('rel'));
			$select.removeClass('active');
		});

		$(document).click(function() {
			$select.removeClass('active');
		});
	});

	// calendar
	$('.btn-calendar').on('click',function(){
		if($(this).hasClass('active')){
			$(this).removeClass('active');
			$('.layer-calendar').removeClass('active');
		}else{
			$(this).addClass('active');
			$('.layer-calendar').addClass('active');
		}
	});

	// tab
	$('.tab-btn a').on('click',function(e){
		var cont = $(this).attr('href');
		e.preventDefault();
		if(!$(this).hasClass('active')){
			$('.tab-btn a, .tab-cont').removeClass('active');
			$(this).addClass('active');
			$(cont).addClass('active');
		}
	});

	// space swiper
	var processSwiper1 = new Swiper('#processSwiper1',{
		speed: 1000,
		slidesPerView: 'auto',
		centeredSlides: true,
        loop: true,
        autoplay: {
          delay: 4500,
          disableOnInteraction: false,
        },
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev'
		}
	});
	var spaceSwiper2 = new Swiper('#spaceSwiper2',{
		speed: 1000,
		slidesPerView: 'auto',
		centeredSlides: true,
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev'
		}
	});
	var spaceSwiper3 = new Swiper('#spaceSwiper3',{
		speed: 1000,
		slidesPerView: 'auto',
		centeredSlides: true,
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev'
		}
	});
	$('.cont-space .cont-tab a').on('click',function(e){
		var slide = $(this).attr('href')
			, index = $(slide).index()
			, wrap = $(this).parents('.swiper-container-4').attr('id')
			, container = $('#' + wrap).parents('.cont-space')
			, swiper = eval(wrap);
		e.preventDefault();
		$('#' + wrap).find('.cont-tab a').removeClass('active');
		$(this).addClass('active');
		swiper.slideTo(index, 1000);
	});
	processSwiper1.on('slideChangeTransitionEnd', function(){
		var wrap = $('#processSwiper1')
			, slide = wrap.find('.swiper-slide-active').attr('id');
		wrap.find('.cont-tab a').removeClass('active');
		wrap.find('.cont-tab a[data-tab="'+ slide +'"]').addClass('active');
	});
	spaceSwiper2.on('slideChangeTransitionEnd', function(){
		var wrap = $('#spaceSwiper2')
			, slide = wrap.find('.swiper-slide-active').attr('id');
		wrap.find('.cont-tab a').removeClass('active');
		wrap.find('.cont-tab a[data-tab="'+ slide +'"]').addClass('active');
	});
	spaceSwiper3.on('slideChangeTransitionEnd', function(){
		var wrap = $('#spaceSwiper3')
			, slide = wrap.find('.swiper-slide-active').attr('id');
		wrap.find('.cont-tab a').removeClass('active');
		wrap.find('.cont-tab a[data-tab="'+ slide +'"]').addClass('active');
	});

	// service count
	if($('.ms-contents').hasClass('service')){
		var count = $('.cont-service li').length;
		for(var i = 0; i < count; i++){
			serviceCount(i + 1);
		}
	}

	// product swiper
	var productSwiper = new Swiper('.swiper-product',{
		speed: 1000,
		navigation: {
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev',
		},
		pagination: {
			el: '.swiper-pagination',
			type: 'bullets',
		},
	});

	// layer open
	$('a[data-btn="layer"]').on('click',function(e){
		e.preventDefault();
		var layer = $(this).attr('href');
		console.log(layer)
		$(layer).addClass('active');
		$('body').addClass('hide');
	});
	$('button[data-btn="close"]').on('click',function(e){
		var wrap = $(this).parent('.layer');
		wrap.removeClass('active');
		$('body').removeClass('hide');
	});
});

// window scroll
$(window).on('scroll',function(){
	scrollTop = $(window).scrollTop();

	headerFloat();
	// main
	if($('.main-block').length){
		mainLine();
		benefitPrx();
	}
	// sub
	if($('.cont-visual').length){
		contPrx();
	}
});

// window resize
$(window).resize(function(){
	winH = $(window).height();
});

// header float
function headerFloat(){
	if(scrollTop > visualH - headerH){
		$('.ms-header').addClass('float');
	}else{
		$('.ms-header').removeClass('float');
	}
}

// main block active
function mainLine(){
	$('.main-block .line').each(function(){
		var $this = $(this)
			, $thisT = $this.offset().top;
		if($thisT < scrollTop + winH) $this.addClass('active');
		else $this.removeClass('active');
	});
}

// main benefit parallax
function benefitPrx(){
	var $wrap = $('.main-benefit')
		, $wrapT = $wrap.offset().top
		, $wrapH = $wrap.innerHeight()
	$wrap.find('.prx').each(function(){
		var $this = $(this)
			, $thisT = $(this).offset().top
			, $thisH = $(this).innerHeight();
			if($this.hasClass('txt')){
				if($thisT - winH + $thisH < scrollTop){
					$this.addClass('active');
					if($thisT - $thisH < scrollTop){
						$this.addClass('bot');
					}else{
						$this.removeClass('bot');
					}
				}else{
					$this.removeClass('active');
				}
			}
			if($wrapT - winH < scrollTop && $wrapT + $wrapH > scrollTop){
				if($this.hasClass('ms')) $this.css('transform','translateY('+ ($thisT - $thisH - scrollTop)/4 +'px)');
				if($this.hasClass('vs')) $this.css('transform','translateY('+ ($thisT - $thisH - scrollTop)/6 +'px)');
				if($this.hasClass('op')) $this.css('transform','translateY('+ ($thisT - $thisH - scrollTop)/8 +'px)');
			}
	});
}

// nav menu active
function navAct(data){
	$('.ms-header a[data-menu="'+ data +'"]').addClass('active');
}

// sub visual prallax
function contPrx(){
	var $visualH = $('.cont-visual').innerHeight();
	if(scrollTop < $visualH) $('.cont-visual .bg').css('transform','translateY('+ scrollTop/2 +'px)');
}

// service count
function serviceCount(i){
	setTimeout(function(){
		$('#count').text(i);
	}, 60 * i);
}

// community info
function floatInfo(){
	if(scrollTop + headerH + margin > infoTop){
		info.addClass('float').css('top', fltTop + 'px');
		if(viewH - infoH - fltTop < scrollTop - visualH){
			info.addClass('bot').css('top',viewH - infoH + 'px');
		}else{
			info.removeClass('bot').css('top', fltTop + 'px');
		}
	}else{
		info.removeClass('float').css('top', orgTop + 'px');
	}
}

// visit complete
function visitCom(){
	$('#formVisit').css('display','none');
	$('#comVisit').css('display','block').addClass('complete');
}

if($('#mapStudio').length){
	// add map
	mapboxgl.accessToken = 'pk.eyJ1Ijoic255dnYiLCJhIjoiY2pmbHNzazIzMGdlYTMzcGI2ZXh2d2xhYiJ9.vqInq20wfH8FiAUNj00iNQ';

	var studio = {
		"type": "FeatureCollection",
		"features": [
			{
			"type": "Feature",
			"geometry": {
				"type": "Point",
					"coordinates": [
						127.007678,
						37.568879
					]
				}
			}
		]
	};

	// add position to map
	var map = new mapboxgl.Map({
		container:'mapStudio',
		style:'mapbox://styles/mapbox/light-v9',
		center: [127.010240, 37.568265],
		zoom: 15,
		maxBounds: [
			[125.010240, 35.568265], // Southwest coordinates
			[129.010240, 39.568265]  // Northeast coordinates
		]
	});
	map.scrollZoom.disable();
	map.addControl(new mapboxgl.NavigationControl());

	// add markers to map
	studio.features.forEach(function(marker) {
		var el = document.createElement('div');
		el.className = 'marker icon';
		new mapboxgl.Marker(el)
			.setLngLat(marker.geometry.coordinates)
			.addTo(map);
	});
}