var $slider = false;

$(window).load(function(){

	$('#layout-slideshow').slick({
		centerMode: true,
		centerPadding: '0',
		infinite: true,
		autoplay: true,
		focusOnSelect: true,
		touchThreshold: 15,
		autoplaySpeed: 2000,
		speed: 1500,
		slidesToShow: 4,
		prevArrow: '<div class="slick-prev"></div>',
		nextArrow: '<div class="slick-next"></div>',
		slidesToScroll: 1,
	}).on('beforeChange', function(){
		$slides = $('#layout-slideshow').find('.slick-active').removeClass('last');
	}).on('afterChange',function(){
		var $slides = $('#layout-slideshow').find('.slick-active');
		$slides.removeClass('first');
		$slides.first().addClass('first');
		$slides.last().addClass('last');
	}).on('init reInit', function(){
		var $slides = $('#layout-slideshow').find('.slick-active');
		$slides.removeClass('first last');
		$slides.first().addClass('first');
		$slides.last().addClass('last');
		$('#layout-slideshow').removeClass('hidden');
	});
	$(window).resize( resizeSlideshow2 ).resize();

});

function resizeSlideshow2(){
	var windowWidth = $(window).width();
	
	if (windowWidth < 480) {
		// XS
		slides = 1;
	} else if (windowWidth < 640) {
		// S
		slides = 1;
	} else if (windowWidth < 725) {
		// M
		slides = 1;
	} else if (windowWidth < 1400) {
		// L
		slides = 3;
	} else {
		// X
		slides = 3;
	}

	if ($('#layout-slideshow').slick('slickGetOption', 'slidesToShow') != slides){
		$('#layout-slideshow').slick('slickSetOption', 'slidesToShow', slides, true);
	}
}

function resizeSlideshow(){
	var windowWidth = $(window).width();
	
	if (windowWidth < 480) {
		// XS
		slides = 1;
	} else if (windowWidth < 640) {
		// S
		slides = 1;
	} else if (windowWidth < 980) {
		// M
		slides = 2;
	} else if (windowWidth < 1400) {
		// L
		slides = 3;
	} else {
		// X
		slides = 4;
	}

	var options = {
		wrapperClass: 'slideshow-wrapper',
		auto: false,
		pager: false,
		controls: true,
		minSlides: slides,
		maxSlides: slides,
		moveSlides: 1,
		slideWidth: $('#layout-slideshow').width()/slides,
		onSliderLoad: function(){
			var $slides = $('#layout-slideshow .slide');
			$slides.removeClass('active inactive');
			var $activeSlides = $slides.not('.bx-clone').slice(0, slides);
			$activeSlides.addClass('active');
			var $inactiveSlides = $slides.not('.active');
			$inactiveSlides.addClass('inactive');
		},
		onSlideBefore: function($slideElement, oldIndex, newIndex) {
			var j = 0, currentlyActive = false;
			$(this).find('.slide').each(function(){
				var $this = $(this);
				$this.removeClass('active');
				if ($this.is($slideElement)) {
					currentlyActive = true;
				}
				if (currentlyActive) {
					$this.addClass('active');
					j++;
				} else {
					//$this.addClass('inactive');
				}
				if (j == slides) {
					currentlyActive = false;
				}
			});
		},
		onSlideAfter: function($slideElement, oldIndex, newIndex) {
			var j = 0, currentlyActive = false;
			$(this).find('.slide').each(function(){
				var $this = $(this);
				$this.removeClass('inactive');
				if ($this.is($slideElement)) {
					currentlyActive = true;
				}
				if (currentlyActive) {
					//$this.addClass('active');
					j++;
				} else {
					$this.addClass('inactive');
				}
				if (j == slides) {
					currentlyActive = false;
				}
			});
		}
	};
	
	if ($slider) {
		$slider.reloadSlider(options);
	} else {
		$slider = $('#layout-slideshow').bxSlider(options);
	}
	
}