$(function(){

	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;
		var element_bottom_position = (element_top_position + element_height);
	 
		//check to see if this current container is within viewport
		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');


	/* visual */
	
	var swiper1 = new Swiper('.visual', {
		effect: 'fade',
		slidesPerView: 1,
		speed: 1600,
		loop: true,
		navigation: {
			nextEl: '.vnext',
			prevEl: '.vprev',
		},
		pagination: {
			el: '.vpaging',
			type : 'fraction',
			clickable: true,
		},
		autoplay: {
			delay: 5000,
		},
		on: {
			slideChange: function () {
				$(".visual .swiper-slide:eq("+(this.activeIndex)+")").addClass('on').siblings().removeClass("on");
				lengW = $(".visual .ctr .line .bar").width();
				$(".visual .ctr .line .bar").css("left", (lengW * this.realIndex)+"px");				
			}
		},
	});
	leng = $(".visual .swiper-pagination-total").text();
	$(".visual .ctr .line .bar").css("width",(100 / leng)+"%");

	
	/*  */
	$(".gall_platform1 .ctr .line1 .bar").css("width",(100 / 2)+"%");
	$(".gall_platform2 .ctr .line2 .bar").css("width",(100 / 8)+"%");
	$(".gall_platform3 .ctr .line3 .bar").css("width",(100 / 2)+"%");

	var swiper2 = new Swiper('.gall_platform1', {
		effect: 'fade',
		slidesPerView: 1,
		observer: true,
		observeParents: true,
		speed: 800,
		loop: true,
		navigation: {
			nextEl: '.pnext1',
			prevEl: '.pprev1',
		},
		pagination: {
			el: '.ppage1',
			type : 'fraction',
			clickable: true,
		},
		on: {
			slideChange: function () {
				$(".gall_platform1 .swiper-slide:eq("+(this.activeIndex)+")").addClass('on').siblings().removeClass("on");
				let lengW = $(".gall_platform1 .ctr .line1 .bar").width();
				$(".gall_platform1 .ctr .line1 .bar").css("left", (lengW * this.realIndex)+"px");				
			}
		},
	});
	

	leng1 = $(".gall_platform1 .swiper-pagination-total").text();



	var swiper3 = new Swiper('.gall_platform2', {
		effect: 'fade',
		slidesPerView: 1,
		observer: true,
		observeParents: true,
		speed: 800,
		loop: true,
		navigation: {
			nextEl: '.pnext2',
			prevEl: '.pprev2',
		},
		pagination: {
			el: '.ppage2',
			type : 'fraction',
			clickable: true,
		},
		on: {
			slideChange: function () {
				$(".gall_platform2 .swiper-slide:eq("+(this.activeIndex)+")").addClass('on').siblings().removeClass("on");
				let lengW = $(".gall_platform2 .ctr .line2 .bar").width();
				$(".gall_platform2 .ctr .line2 .bar").css("left", (lengW * this.realIndex)+"px");				
			}
		},
	});
	leng2 = $(".gall_platform2 .swiper-pagination-total").text();


	var swiper4 = new Swiper('.gall_platform3', {
		effect: 'fade',
		slidesPerView: 1,
		observer: true,
		observeParents: true,
		speed: 800,
		loop: true,
		navigation: {
			nextEl: '.pnext3',
			prevEl: '.pprev3',
		},
		pagination: {
			el: '.ppage3',
			type : 'fraction',
			clickable: true,
		},
		on: {
			slideChange: function () {
				$(".gall_platform3 .swiper-slide:eq("+(this.activeIndex)+")").addClass('on').siblings().removeClass("on");
				let lengW = $(".gall_platform3 .ctr .line3 .bar").width();
				$(".gall_platform3 .ctr .line3 .bar").css("left", (lengW * this.realIndex)+"px");				
			}
		},
	});
	leng3 = $(".gall_platform3 .swiper-pagination-total").text();
	


	




});