$(function(){


	var Mainswiper = undefined;
	function initSwiper() {
		var screenWidth = $(window).width();
		if(screenWidth > 1400 && Mainswiper == undefined) {            
			Mainswiper = new Swiper('.main', {
				direction: 'vertical',
				shortSwipes: false,		
				parallax: true,        
				slidesPerView: "auto",
				speed:800,
				mousewheel: true,
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
			});	
			Mainswiper.on('slideChange', function() {
				var prev_slide = this.previousIndex;
				var new_slide = this.realIndex;
				var active_slide = this.activeIndex;

				// Dark or not?
				if($('.main>div>.swiper-slide:eq('+new_slide+')').hasClass('visual_slide_wh')){
					$('body').addClass('current_wh_slide');
				}else{
					$('body').removeClass('current_wh_slide');
				}
				if($('.main>div>.swiper-slide:eq('+new_slide+')').hasClass('side_wh')){
					$('body').addClass('side_wh');
				}else{
					$('body').removeClass('side_wh');
				}
			});



		} else if (screenWidth < 1400 && Mainswiper != undefined) {
			Mainswiper.destroy();
			Mainswiper = undefined;
   
		}        
	}

	//Swiper plugin initialization
	initSwiper();

	//Swiper plugin initialization on window resize
	$(window).on('resize', function(){
		initSwiper();        
	}).resize();



/* main visual */
	$(".visual").addClass("active");
	var visualSwiper = new Swiper('.visual', {
		direction: 'horizontal',
		effect:'fade',
		speed: 1500,
		loop: true,			
		autoplay: {
			delay: 6000,
			disableOnInteraction: true,
		},
		pagination: {
			el: '.visual-pagination',
			clickable: true,
		},
		navigation: {
			nextEl: '.vnext',
			prevEl: '.vprev',
		},
	});

	
	owl1 = $('.owl-item1');
	owl1.owlCarousel({
		autoWidth:true,
		loop: true,	
		onInitialized  : counter, //When the plugin has initialized.
		onTranslated : counter,			
		responsiveClass: true,
		responsive: {
			0: {
				items: 1,	
				margin:40,
			},
			1400: {
				items: 2,
				margin:120,
			},
			1760: {
				items: 3,
				margin:120,
			},
			1900: {
				items: 3,
				margin:177,
			}
		}
	})
	$('.item1_next').click(function(){
		owl1.trigger('next.owl.carousel');
	})
	$('.item1_prev').click(function(){
		owl1.trigger('prev.owl.carousel');
	})

	function counter(event) {
		var element   = event.target;         // DOM element, in this example .owl-carousel
		var items     = event.item.count;     // Number of items
		var visibleItems = $('.item1 .owl-item.active').length - 1;
		var item      = event.item.index + 1 - visibleItems;     // Position of the current item

		// it loop is true then reset counter from 1
		if(item > items) {
			item = item - items
		}
		$('.section2 .page1').html(item+" / "+items)
	}




	owl2 = $('.owl-item2');
	owl2.owlCarousel({
		//loop: true,	
		autoWidth:true,
		dots:false,
		responsiveClass: true,
		responsive: {
			0: {
				items: 3,	
				margin:10,
			},
			1400: {
				items: 3,
				margin:30,
			},
		}
	})
	$('.item2_next').click(function(){
		owl2.trigger('next.owl.carousel');
	})
	$('.item2_prev').click(function(){
		owl2.trigger('prev.owl.carousel');
	})



	owl3 = $('.noticelist');
	owl3.owlCarousel({
		loop: true,	
		autoWidth:true,
		responsiveClass: true,
		responsive: {
			0: {
				items: 2,		
				margin:10,
			},
			769: {
				items: 2,
				margin:21,
			},
			1400: {
				items: 2,
				margin:21,
			}
		}
	})
	$('.notice_next').click(function(){
		owl3.trigger('next.owl.carousel');
	})
	$('.notice_prev').click(function(){
		owl3.trigger('prev.owl.carousel');
	})



})