<?php
	$list_banner_home = read_file(ROOT_SITE.'cache/json/probanner.php');
	$list_banner_home = json_decode($list_banner_home);
?>
<link href="<?=skin?>css/owl.carousel.min.css" rel="stylesheet prefetch">
<link href="<?=skin?>css/owl.theme.default.min.css" rel="stylesheet prefetch">
<script src="<?=skin?>js/owl.carousel.min.js" language="javascript"></script>
<div id="sync1" class="owl-carousel owl-theme owl-loaded owl-drag">
	<? foreach ($list_banner_home as $bn) : ?>
    	<div class="item"><a href="<?=$bn->BannerLink?>" title="<?=$bn->BannerTitle?>"><img src="<?=urlimg?>banner/<?=$bn->BannerImg?>" alt="<?=$bn->BannerTitle?>"></a></div>
	<? endforeach ;?>
</div>
<div id="sync2" class="owl-carousel owl-theme owl-loaded owl-drag">
    <?php foreach ($list_banner_home as $bn) : ?>
        <div class="item"> <?=$bn->BannerTitle?></div>
    <? endforeach ;?>
</div>
<script>
$(document).ready(function() {

	var sync1 = $("#sync1");
	var sync2 = $("#sync2");
	var slidesPerPage = 4; //globaly define number of elements per page
	var syncedSecondary = true;

	sync1.owlCarousel({
		items : 1,
		smartSpeed: 1000,
		nav: true,
		autoplay: true,
		autoplayHoverPause: true,
		dots: false,
		loop: true,
		responsiveRefreshRate : 200,
		navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
	}).on('changed.owl.carousel', syncPosition);

	sync2
	.on('initialized.owl.carousel', function () {
		sync2.find(".owl-item").eq(0).addClass("current");
	})
	.owlCarousel({
		items : slidesPerPage,
		responsive:{
			0:{
				items:2
			},
			480: {
				items:2
			},
			768:{
				items:4
			},
			1000:{
				items:5
			}
		},
		dots: false,
		nav: false,
		smartSpeed: 1000,
		slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
		navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],		
		responsiveRefreshRate : 100
	}).on('changed.owl.carousel', syncPosition2);

	function syncPosition(el) {
		//if you set loop to false, you have to restore this next line
		//var current = el.item.index;

		//if you disable loop you have to comment this block
		var count = el.item.count-1;
		var current = Math.round(el.item.index - (el.item.count/2) - .5);

		if(current < 0) {
			current = count;
		}
		if(current > count) {
			current = 0;
		}

		//end block

		sync2
		.find(".owl-item")
		.removeClass("current")
		.eq(current)
		.addClass("current");
		var onscreen = sync2.find('.owl-item.active').length - 1;
		var start = sync2.find('.owl-item.active').first().index();
		var end = sync2.find('.owl-item.active').last().index();

		if (current > end) {
			sync2.data('owl.carousel').to(current, 100, true);
		}
		if (current < start) {
			sync2.data('owl.carousel').to(current - onscreen, 100, true);
		}
	}

	function syncPosition2(el) {
		if(syncedSecondary) {
			var number = el.item.index;
			sync1.data('owl.carousel').to(number, 100, true);
		}
	}

	sync2.on("click", ".owl-item", function(e){
		e.preventDefault();
		var number = $(this).index();
		sync1.data('owl.carousel').to(number, 300, true);
	});
});
</script>