let slider
let slider2
let slider3
var flag1 = false
var flag2 = false
var tempSlider
var posShadow
var posHero
$(document).ready(function() {
	slider = tns({
		container: '.slider-logos',
		swipeAngle: true,
		preventScrollOnTouch: 'auto',
		center: true,
		items: 4,
		loop: true,
		autoplay: true,
		autoplayHoverPause: true,
		autoplayButtonOutput: false,
		controls: false,
		nav: false,
		speed: 1500,
		autoplayTimeout: 1500,
		preventActionWhenRunning: true,
		mouseDrag: true,
		responsive: {
			'350': {
				fixedWidth: 60,
				gutter: 40
			},
			'668': {
				fixedWidth: 100,
				gutter: 100
			},
			'769': {
				fixedWidth: 120,
				gutter: 120
			},
			'1100': {
				gutter: 170,
				disable: true
			}
		}
	})

	$('.slider-logos').on('dragstart', stopAutoplay)
	$('.slider-logos').on('touchstart', stopAutoplay)
	$('.slider-logos').on('dragend', startAutoplay)
	$('.slider-logos').on('touchend', startAutoplay)

	function stopAutoplay() {
		slider.pause()
	}

	function startAutoplay() {
		slider.play()
	}

	if ($(window).width() < 1024) {
		slider2 = tns({
			container: '.slider-featured',
			slideBy: 'page',
			mouseDrag: true,
			swipeAngle: false,
			speed: 400,
			autoWidth: true,
			nav: false,
			controls: true,
			preventScrollOnTouch: 'auto',
			loop: true,
			items: 1,
			center: true,
			startIndex: 0,
			gutter: 30,
			autoplay: true,
			autoplayTimeout: 2000,
			autoplayButtonOutput: false
		})
		flag1 = true
		tempSlider = slider2
	} else {
		slider3 = tns({
			container: '.slider-featured',
			slideBy: 1,
			axis: 'vertical',
			mouseDrag: false,
			swipeAngle: false,
			speed: 400,
			nav: false,
			controls: true,
			loop: true,
			items: 3.3,
			gutter: 54,
			autoplay: true,
			autoplayTimeout: 2000,
			autoplayButtonOutput: false,
			autoplayDirection: 'backward'
		})
		flag2 = true
		tempSlider = slider3
	}

	$('.featured-contests .content').on('mouseleave', function() {
		tempSlider.play()
	})

	posShadow = $('.hero .shadow').offset()
	posHero = $('.hero').offset()
	topShadow = posShadow.top - posHero.top
	$('.hero .hero-shadow').css({ left: posShadow.left, top: topShadow })
})

var rtime
var timeout = false
var delta = 300
$(window).on('resize', function() {
	posShadow = $('.hero .shadow').offset()
	posHero = $('.hero').offset()
	topShadow = posShadow.top - posHero.top
	$('.hero .hero-shadow').css({ left: posShadow.left, top: topShadow })

	rtime = new Date()
	if (timeout === false) {
		timeout = true
		setTimeout(resizeend, delta)
	}
})

function resizeend() {
	if (new Date() - rtime < delta) {
		setTimeout(resizeend, delta)
	} else {
		timeout = false

		posShadow = $('.hero .shadow').offset()
		posHero = $('.hero').offset()
		topShadow = posShadow.top - posHero.top
		$('.hero .hero-shadow').css({ left: posShadow.left, top: topShadow })

		if ($(window).width() < 1024) {
			if (flag2 == true) {
				slider3.destroy()
				flag2 = false
				slider2 = tns({
					container: '.slider-featured',
					slideBy: 'page',
					mouseDrag: true,
					swipeAngle: false,
					speed: 400,
					autoWidth: true,
					nav: false,
					controls: true,
					preventScrollOnTouch: 'auto',
					loop: true,
					items: 1,
					center: true,
					startIndex: 0,
					gutter: 30,
					autoplay: true,
					autoplayTimeout: 2000,
					autoplayButtonOutput: false
				})
				flag1 = true
				tempSlider = slider2
			}
		} else {
			if (flag1 == true) {
				slider2.destroy()
				flag1 = false
				slider3 = tns({
					container: '.slider-featured',
					slideBy: 1,
					axis: 'vertical',
					mouseDrag: false,
					swipeAngle: false,
					speed: 400,
					nav: false,
					controls: true,
					loop: true,
					items: 3.3,
					gutter: 54,
					autoplay: true,
					autoplayTimeout: 2000,
					autoplayButtonOutput: false,
					autoplayDirection: 'backward'
				})
				flag2 = true
				tempSlider = slider3
			}
		}
	}
}

$(window).on('load', function() {
	$('body').addClass('page-loaded')
})
