$(function () {
	var $roots = $('.customdevslider-swiper')
	if (!$roots.length) return

	$roots.each(function () {
		var $root = $(this)

		if ($root.data('inited') === 1) return
		$root.data('inited', 1)

		var $container = $root.find('.customdevslider-swiper__container').first()
		var $paginationEl = $root
			.find('.customdevslider-swiper__pagination')
			.first()
		var $textBox = $root.find('.customdevslider-swiper__text').first()

		if (
			!$container.length ||
			!$paginationEl.length ||
			!$textBox.length ||
			typeof Swiper === 'undefined'
		)
			return

		// -----------------------------
		// TITLES
		// -----------------------------
		var titles = []
		try {
			titles = JSON.parse($root.attr('data-titles') || '[]')
		} catch (e) {
			titles = []
		}

		// -----------------------------
		// SET SLIDE HTML BY INDEX
		// -----------------------------
		function setHtmlByIndex(idx) {
			var $slide = $container.find('.swiper-slide').eq(idx)
			var html =
				$slide
					.find('.customdevslider-swiper__slide-html')
					.first()
					.html() || ''

			$textBox.html(html)
		}

		// -----------------------------
		// CALC MAX TEXT HEIGHT
		// -----------------------------
		function setMaxTextHeight() {
			var maxHeight = 0
			var originalHtml = $textBox.html()

			$container.find('.swiper-slide').each(function () {
				var html = $(this)
					.find('.customdevslider-swiper__slide-html')
					.first()
					.html()

				if (!html) return

				$textBox.html(html)
				$textBox.css('height', 'auto')

				var h = $textBox.outerHeight(true)
				if (h > maxHeight) maxHeight = h
			})

			$textBox.html(originalHtml)
			$textBox.height(maxHeight)
		}

		// -----------------------------
		// INIT SWIPER
		// -----------------------------
		var swiper = new Swiper($container[0], {
			loop: true,
			speed: 600,

			autoplay: {
				delay: 5000,
			},

			effect: 'fade',
			fadeEffect: {
				crossFade: true,
			},

			pagination: {
				el: $paginationEl[0],
				clickable: true,
				renderBullet: function (index, className) {
					var t = (titles[index] || '').toString().trim()
					if (!t) t = 'Slide ' + (index + 1)
					return '<span class="' + className + '">' + t + '</span>'
				},
			},

			on: {
				init: function () {
					setMaxTextHeight()
					setHtmlByIndex(this.realIndex)
				},
				slideChange: function () {
					setHtmlByIndex(this.realIndex)
				},
				resize: function () {
					setMaxTextHeight()
				},
			},
		})

		// fallback
		setHtmlByIndex(0)
	})
})