<?php

// no direct access
defined('_JEXEC') or die('Restricted access');
K2HelperUtilities::setDefaultImage($item, 'item', $item->params);
$k2_image_hash = md5("Image".$item->id);
?>

<?php if($item->params->get('itemImage') && !empty($item->image)): ?>
<!-- added K2Multiimage -->
<!-- Item Image -->
<style>
	.itemImageBlock { display: none; }
	.owl-nav { display: block !important; }
	.owl-nav > div { position: absolute; top: 41%; left: 29%; font-size: 34px; line-height: 35px; color: #777; background: #fff; text-align: center; width: 50px; height: 50px; border-radius: 100%; transition: all .5s; border: 6px solid #fff; }
	.owl-nav > div.owl-next { left: 64.5%; }
	.owl-nav > div:hover { background: #777; color: #fff; }
	.owl-nav > div i { line-height: 48px; margin-left: -5px; }
	.owl-nav > div.owl-next i { margin-left: 5px; }
	
	@media (max-width: 995px) {
		.owl-nav > div { left: 30%; }
		.owl-nav > div.owl-next { left: 63.5%; }
	}
	@media (max-width: 675px) {
		.owl-nav > div { font-size: 19px; line-height: 21px; width: 30px; height: 30px; border-width: 4px; left: 31%; }
		.owl-nav > div.owl-next { left: 64.5%; }
	}
</style>
<link  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link  href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet">
<link  href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css" rel="stylesheet">
<link  href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/css/lightbox.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.min.js"></script>
<script>
	jQuery(document).ready(function($) {
		$('.owl-carousel').owlCarousel({
			autoplay: true,
			autoplayTimeout: 5000,
			center: true,
			loop: true,
			margin: 5,
			responsiveClass: true,
			dots: false,
			nav: true,
			navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
			responsive: {
				0: {
					items:1
				},
				600: {
					items:2
				},
				1000: {
					items:3
				}
			}
		});
		$("a[rel^='prettyPhoto']").prettyPhoto();
	});
</script>
<div class="owl-carousel multiimages">
	<?php 		
	$filecount = 1;
	$caption = explode("|", $item->image_caption);
	$credits = explode("|", $item->image_credits);

	while(
	JFile::exists(JPATH_SITE.'/media/k2/items/cache/'.$k2_image_hash."_".$filecount."_XL.jpg") ||
	(JFile::exists(JPATH_SITE.'/media/k2/items/cache/'.$k2_image_hash."_XL.jpg") && $filecount == 1)
	) {
		if($filecount == 1) {
			$path_full = JURI::root() . 'media/k2/items/cache/'.$k2_image_hash."_XL.jpg";
			$path_medium = JURI::root() . 'media/k2/items/cache/'.$k2_image_hash."_XL.jpg";
			$path_thumb = JURI::root() . 'media/k2/items/cache/'.$k2_image_hash."_S.jpg";
		}
		else {
			$path_full = JURI::root() . 'media/k2/items/cache/'.$k2_image_hash."_".$filecount."_XL.jpg";
			$path_medium = JURI::root() . 'media/k2/items/cache/'.$k2_image_hash."_".$filecount."_XL.jpg";
			$path_thumb = JURI::root() . 'media/k2/items/cache/'.$k2_image_hash."_".$filecount."_S.jpg";			
		}
		$path_full = $path_full . "?t=" . time();
		$path_thumb = $path_thumb . "?t=" . time();
	?> 
	<div class='carousel-item'>
		<a href="<?php echo $path_full; ?>" data-lightbox="gallery_<?php echo $item->id; ?>"
			style="
				display: block; 
				background: url('<?php echo $path_medium; ?>') center center no-repeat;
				background-size: cover;
				width: 100%;
				height: 200px;
			"
		></a>  
	</div>
	<?php 
		$filecount++;
	}
	?>
</div>
<!--// added K2Multiimage -->
<?php endif; ?>