<div class="<?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif ?>>

	<?php $this->block('headline') ?>
	<?php if ($this->headline): ?>
		<<?= $this->hl ?>><?= $this->headline ?></<?= $this->hl ?>>
	<?php endif ?>
	<?php $this->endblock() ?>

	<?php $this->block('slides') ?>

	<?php $lightboxUrls = array() ?>

	<?php foreach ($this->images as $key => $image): ?>

		<?php
			$loadLazy = isset($this->options['preloadSlides'])
				&& $key > $this->options['preloadSlides']
				&& (!$this->options['loop'] || $key < count($this->images) - $this->options['preloadSlides']);
		?>

		<?php if ($loadLazy): ?>
			<script type="text/html"<?php if ($image->linkTitle || $image->picture['alt']): ?> data-rsts-name="<?= $image->linkTitle ?: $image->picture['alt'] ?>"<?php endif ?><?php if (!empty($image->thumb->src)): ?> data-rsts-thumb="<?= $image->thumb->src ?>"<?php endif ?>>
			<?php ob_start() ?>
		<?php endif ?>

		<?php if ($this->fullsize && !$image->href) {
			$lightboxUrls[] = array(TL_FILES_URL . $image->singleSRC, $image->linkTitle ?: $image->picture['alt']);
		} ?>

		<?php
			$tagName = 'div';
			$attributes = array(
				'data-rsts-type="image"',
			);
			if ($image->href || $this->fullsize) {
				$tagName = 'a';
			}
			if ($image->href || $this->fullsize || $image->linkTitle) {
				$attributes[] = 'title="' . ($image->linkTitle ?: $image->picture['alt']) . '"';
			}
			if ($image->href) {
				$attributes[] = 'href="' . $image->href . '"';
				if ($this->fullsize) {
					$attributes[] = 'target="_blank"';
				}
			}
			elseif ($this->fullsize) {
				$attributes[] = 'href="' . TL_FILES_URL . $image->singleSRC . '"';
				$attributes[] = 'data-lightbox="' . substr(md5('mod_rocksolid_slider_' . $this->id), 0, 6) . '"';
			}
			if (!empty($this->rsts_invertControls)) {
				$attributes[] = 'data-rsts-class="' . (empty($this->options['cssPrefix']) ? 'rsts-' : $this->options['cssPrefix']) . 'invert-controls"';
			}
			if (!empty($image->thumb->src)) {
				$attributes[] = 'data-rsts-thumb="' . $image->thumb->src . '"';
			}
		?>

		<<?= $tagName ?> <?= implode(' ', $attributes) ?>>
			<?php $this->insert('picture_default', $image->picture) ?>
			<?php if ($image->caption): ?>
				<p class="rsts-text"><?= $image->caption ?></p>
			<?php endif ?>
		</<?= $tagName ?>>

		<?php if ($loadLazy): ?>
			<?= str_replace(array('\\', '</'), array('\\\\', '<\\/'), ob_get_clean()) ?>
			</script>
		<?php endif ?>

	<?php endforeach ?>

	<?php foreach ($this->slides as $key => $slide): ?>

		<?php
			$thumbHtml = '';
			if (!empty($slide['thumbTitle']) || !empty($slide['thumbClass']) || !empty($slide['thumbText'])) {
				ob_start();
				$this->insert('rststhumb_default', $slide);
				$thumbHtml = htmlspecialchars(trim(ob_get_clean()));
			}

			$attributes = array();
			$tagName = 'div';
			if (!empty($slide['linkUrl'])) {
				$tagName = 'a';
				$attributes[] = 'href="' . $slide['linkUrl'] . '"';
				if (!empty($slide['linkNewWindow'])) {
					$attributes[] = 'target="_blank"';
				}
			}
			if (!empty($slide['title'])) {
				$attributes[] = 'data-rsts-name="' . $slide['title'] . '"';
			}
			if (!empty($slide['centerContent'])) {
				if ($slide['centerContent'] === 'false') {
					$slide['centerContent'] = '';
				}
				$attributes[] = 'data-rsts-center="' . $slide['centerContent'] . '"';
			}
			if (!empty($slide['slideClass'])) {
				$attributes[] = 'class="' . $slide['slideClass'] . '"';
			}
			if (
				(!empty($slide['invertControls']) && empty($this->rsts_invertControls))
				|| (empty($slide['invertControls']) && !empty($this->rsts_invertControls))
			) {
				$slide['sliderClass'] = (empty($slide['sliderClass']) ? '' : $slide['sliderClass'] . ' ')
					. (empty($this->options['cssPrefix']) ? 'rsts-' : $this->options['cssPrefix'])
					. 'invert-controls';
			}
			if (!empty($slide['sliderClass'])) {
				$attributes[] = 'data-rsts-class="' . $slide['sliderClass'] . '"';
			}
			if (!empty($slide['autoplay'])) {
				$attributes[] = 'data-rsts-autoplay="' . $slide['autoplay'] . '"';
			}
			if (!empty($slide['thumb']->src)) {
				$attributes[] = 'data-rsts-thumb="' . $slide['thumb']->src . '"';
			}
			if ($thumbHtml) {
				$attributes[] = 'data-rsts-thumb-html="' . $thumbHtml . '"';
			}
			$attributes = implode(' ', $attributes);

			$imageAttributes = array();
			if (!empty($slide['scaleMode'])) {
				$imageAttributes[] = 'data-rsts-scale-mode="' . $slide['scaleMode'] . '"';
			}
			if (!empty($slide['imagePosition'])) {
				$imageAttributes[] = 'data-rsts-position="' . $slide['imagePosition'] . '"';
			}
			$imageAttributes = implode(' ', $imageAttributes);

			$backgroundAttributes = array('data-rsts-background');
			if (!empty($slide['backgroundScaleMode'])) {
				$backgroundAttributes[] = 'data-rsts-scale-mode="' . $slide['backgroundScaleMode'] . '"';
			}
			if (!empty($slide['backgroundPosition'])) {
				$backgroundAttributes[] = 'data-rsts-position="' . $slide['backgroundPosition'] . '"';
			}
			$backgroundAttributes = implode(' ', $backgroundAttributes);

			$loadLazy = isset($this->options['preloadSlides'])
				&& $key > $this->options['preloadSlides']
				&& (!$this->options['loop'] || $key < count($this->slides) - $this->options['preloadSlides']);
		?>

		<?php if ($loadLazy): ?>
			<script type="text/html"<?php if (!empty($slide['title'])): ?> data-rsts-name="<?= $slide['title'] ?>"<?php endif ?><?php if (!empty($slide['thumb']->src)): ?> data-rsts-thumb="<?= $slide['thumb']->src ?>"<?php endif ?><?php if ($thumbHtml): ?> data-rsts-thumb-html="<?= $thumbHtml ?>"<?php endif ?>>
			<?php ob_start() ?>
		<?php endif ?>

		<?php if (! empty($slide['videoURL'])): ?>

			<<?= $tagName ?> data-rsts-type="video" data-rsts-video="<?= $slide['videoURL'] ?>" <?= $attributes ?>>
				<?php $this->insert('picture_default', array_merge($slide['image']->picture, ['attributes' => $slide['image']->picture['attributes'] . ' ' . $imageAttributes])) ?>

		<?php elseif (!empty($slide['videos'])): ?>
			<<?= $tagName ?> data-rsts-type="video" <?= $attributes ?>>
				<video<?php if (empty($slide['hideVideoControls'])): ?> controls<?php endif ?><?php if (!empty($slide['image'])): ?> poster="<?= $slide['image']->src ?>"<?php endif ?><?php if (!empty($slide['muteVideos'])): ?> muted<?php endif ?><?php if (!empty($slide['videosPlayInline'])): ?> playsinline webkit-playsinline<?php endif ?>>
					<?php foreach ($slide['videos'] as $video): ?>
						<source src="<?= TL_FILES_URL . $video->path ?>" type="video/<?= $video->extension ?>">
					<?php endforeach ?>
				</video>

		<?php elseif (! empty($slide['image'])): ?>

			<?php if (($this->fullsize || $slide['image']->href) && $tagName !== 'a') {
				$tagName = 'a';
				if ($slide['image']->href) {
					$attributes .= ' href="' . $slide['image']->href . '"';
					if ($slide['image']->linkTitle) {
						$attributes .= ' title="' . $slide['image']->linkTitle . '"';
					}
					if ($this->fullsize) {
						$attributes .= ' target="_blank"';
					}
				}
				else {
					$lightboxUrls[] = array(TL_FILES_URL . $slide['image']->singleSRC, $slide['title']);
					$attributes .= ' href="' . TL_FILES_URL . $slide['image']->singleSRC . '" data-lightbox="' . substr(md5('mod_rocksolid_slider_' . $this->id), 0, 6) . '" title="' . $slide['title'] . '"';
				}
			} ?>

			<<?= $tagName ?> data-rsts-type="image" <?= $attributes ?>>
				<?php $this->insert('picture_default', array_merge($slide['image']->picture, ['attributes' => $slide['image']->picture['attributes'] . ' ' . $imageAttributes])) ?>
				<?php if ($slide['image']->caption): ?>
					<p class="rsts-text"><?= $slide['image']->caption ?></p>
				<?php endif ?>

		<?php else: ?>

			<<?= $tagName ?> <?= $attributes ?>>
				<?php if ($tagName === 'a') {
					// Nested links aren't allowed in HTML
					$slide['text'] = preg_replace('((</?)a(\s+[^>]*>|>))is', '$1span$2', $slide['text']);
				} ?>
				<?= $slide['text'] ?>

		<?php endif ?>

		<?php if (!empty($slide['backgroundVideos'])): ?>
			<video<?php if (!empty($slide['backgroundImage'])): ?> poster="<?= $slide['backgroundImage']->src ?>"<?php endif ?><?php if (!empty($slide['muteVideos'])): ?> muted<?php endif ?> playsinline webkit-playsinline <?= $backgroundAttributes ?>>
				<?php foreach ($slide['backgroundVideos'] as $video): ?>
					<source src="<?= TL_FILES_URL . $video->path ?>" type="video/<?= $video->extension ?>">
				<?php endforeach ?>
			</video>
		<?php elseif (!empty($slide['backgroundImage'])): ?>
			<?php $this->insert('picture_default', array_merge($slide['backgroundImage']->picture, ['attributes' => $slide['backgroundImage']->picture['attributes'] . ' ' . $backgroundAttributes])) ?>
		<?php endif ?>

		</<?= $tagName ?>>

		<?php if ($loadLazy): ?>
			<?= str_replace(array('\\', '</'), array('\\\\', '<\\/'), ob_get_clean()) ?>
			</script>
		<?php endif ?>

	<?php endforeach ?>

	<?php $this->endblock() ?>

</div>

<script>
<?php $this->block('script') ?>
(function() {

var sliderElement = [].slice.call(document.getElementsByClassName('mod_rocksolid_slider'), -1 )[0];

if (window.jQuery && jQuery.fn.rstSlider) {
	init();
}
else {
	document.addEventListener('DOMContentLoaded', init);
}

function init() {

	var $ = jQuery;
	var slider = $(sliderElement);

	<?php $this->block('script_bgvideo') ?>
	slider.find('video[data-rsts-background], [data-rsts-type=video] video').each(function() {
		// Disable mejs for videos
		this.player = true;
	});
	<?php $this->endblock() ?>

	slider.rstSlider(<?= json_encode($this->options); ?>);

	<?php $this->block('script_lightbox') ?>
	// Fix missing lightbox links
	$(function() {

		if (!$.fn.colorbox) {
			return;
		}

		var lightboxConfig = {
			<?php $this->block('script_lightbox_config') ?>
			loop: false,
			rel: function() {
				return $(this).attr('data-lightbox');
			},
			maxWidth: '95%',
			maxHeight: '95%'
			<?php $this->endblock() ?>
		};

		<?php if (count($lightboxUrls)): ?>
			var lightboxUrls = <?= json_encode($lightboxUrls) ?>;
			var lightboxId = <?= json_encode(substr(md5('mod_rocksolid_slider_' . $this->id), 0, 6)) ?>;
			var dummyLinksWrap = $('<div>').css('display', 'none');
			var dummyLinks = $([]);
			dummyLinksWrap.insertAfter(slider);
			$.each(lightboxUrls, function(index, url) {
				$('<a>').attr('href', url[0]).attr('title', url[1]).attr('data-lightbox', lightboxId).appendTo(dummyLinksWrap);
			});
			dummyLinks = dummyLinksWrap.find('a');
			dummyLinks.colorbox(lightboxConfig);
		<?php endif ?>

		var update = function(links) {
			<?php if (count($lightboxUrls)): ?>
				dummyLinks.appendTo(dummyLinksWrap);
				links.each(function() {
					var href = $(this).attr('href');
					dummyLinks.each(function() {
						if (href === $(this).attr('href')) {
							$(this).detach();
						}
					});
				});
			<?php endif ?>
			links.colorbox(lightboxConfig);
		};

		slider.on('rsts-slidestart rsts-slidestop', function(event) {
			update(slider.find('a[data-lightbox]'));
		});

		update(slider.find('a[data-lightbox]'));

	});
	<?php $this->endblock() ?>

}

})();
<?php $this->endblock() ?>
</script>
