$(document).ready(function(){
	m11();

	if($(this).scrollTop() > 10){
		$("body").addClass("scroll");	
	}else {
		$("body").removeClass("scroll");	
	}
	$(window).scroll(function(){
		if($(this).scrollTop() > 10){
			$("body").addClass("scroll");	
		}else {
			$("body").removeClass("scroll");	
		}
	});

	$(".sub_scroll").click(function(){
		var visualHgt = $(".sub_visual").height();
		$("html,body").stop().animate({scrollTop:visualHgt},300);
	});



	var m21Swiper = new Swiper('.m21_gall', {
		slidesPerView: 1,
		navigation: {
			nextEl: ".m21_next",
			prevEl: ".m21_prev",
		},
	});


	/* scroll */
	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+200;
		var element_bottom_position = (element_top_position + element_height);
		//console.log(element_top_position);

		//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');


});

function m11(){
	if(!$("#main").is(".m11")) return;
	
	var $thumbItems = $(".introduce_thumb .swiper-slide");
	
	var intorduceThumb = new Swiper(".introduce_thumb", {
		direction:"vertical",
        slidesPerView: "auto",
		watchSlidesVisibility: true,
		watchSlidesProgress: true,
		allowTouchMove: false,
		on: {
			init: function(){
				$(".introduce_thumb .swiper-slide:eq(0)").addClass("on");
			},
		},
		breakpoints:{
			1000: {
				direction:"horizontal",
			},	
		},
    });

	var intorduceSlide = new Swiper(".introduce_slide", {
        spaceBetween: 14,
        thumbs: {
            swiper: intorduceThumb,
        },
        navigation: {
            nextEl: ".introduce_next",
            prevEl: ".introduce_prev",
        },
		effect:"fade",
		allowTouchMove: false,
		on: {
			init: function(){
			},
			transitionStart: function(){
				var Idx = this.activeIndex
				$thumbItems.removeClass("on");
				$(".introduce_thumb .swiper-slide:eq("+Idx+")").addClass("on");
			},
		},
	});

	$thumbItems.click(function(){
		$thumbItems.removeClass("on");
		$(this).addClass("on");
	});
}