<?php
/**
 * @package SJ Cool Slider for K2
 * @version 1.0.0
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
 * @copyright (c) 2014 YouTech Company. All Rights Reserved.
 * @author YouTech Company http://www.smartaddons.com
 *
 */

defined('_JEXEC') or die;

if (!empty($list)) {
	JHtml::stylesheet('modules/' . $module->module . '/assets/css/style.css');
	JHtml::script('modules/' . $module->module . '/assets/js/jquery.jcarousel.min.js');
	JHtml::script('modules/' . $module->module . '/assets/js/jquery.mousewheel.js');
	JHtml::script('modules/' . $module->module . '/assets/js/jquery.cj-swipe.js');
	ImageHelper::setDefault($params);
	$options = $params->toObject();
	$count_item = count($list);
	$suffix = $module->id;
	$tag_id = 'sjcoolslider_' . $suffix;
	$play = $params->get('play', 1);
	if (!$play) {
		$interval = 0;
	} else {
		$interval = $params->get('interval', 5000);
	}
	?>
	<div id="<?php echo $tag_id;?>" class="sj-coolslider" data-effect="<?php echo $options->effect;?>"
	data-checkcontent="<?php echo $params->get('displayContentK2',1);?>">
		<?php if (!empty($options->pretext)) { ?>
			<div class="pre-text"><?php echo $options->pretext; ?></div>
		<?php } ?>
		<div class="jcarousel" data-swipe="<?php echo $params->get('swipe_enable');?>">
			<ul>
				<?php $active = 1;?>
				<?php foreach($list as $item){ ?>
				<li>
					<div class="item-sj-coolslider">
						<div class="img-item-sj-coolslider">
						<?php if($item->video == '' Or $options->imgcfg_priority_display == 'img'){?>
							<?php $img = K2CoolsliderHelper::getK2Image($item, $params);
								if ($img) {
							?>
								<?php echo '<a href="'.$item->link.'">'.K2CoolsliderHelper::imageTag($img).'</a>'; ?>
							<?php } ?>
						<?php }else{ 
								if ( strlen(strstr($item->video,'youtube')) > 0 ) {
									$exlink = explode('v=',$item->video);
									$id_link = $exlink[1];
									echo '<iframe width="10" height="10" src="//www.youtube.com/embed/'.$id_link.'" allowfullscreen></iframe>';
								}else if(strlen(strstr($item->video,'vimeo')) > 0){
									$exlink = explode('.com/',$item->video);
									$id_link = $exlink[1];
									echo '<iframe src="//player.vimeo.com/video/'.$id_link.'?title=0&amp;byline=0&amp;portrait=0;api=1" width="10" height="10" frameborder="0"  webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
								}else{
									echo '<video width="" height="" controls><source src="'.$id_link.'" type="video/mp4"></video>';
								}
								echo '<div class="check-video" id="video" style="none"></div>';
							}
						?>
						</div>
						<?php if($params->get('displayContentK2',1) == 1){?>
						<div class="content-item-sj-coolslider">
							<?php if($params->get('displayCategori',1) == 1){?>
							<div class="title-k2-category">
								<?php echo '<a href="index.php/component/k2/itemlist/category/'.$item->categoryid.'-'.$item->categoryalias.'">'.$item->categoryname.'</a>';?>
							</div>
							<?php }?>
							<?php if($params->get('displayTitle',1) == 1){?>
							<div class="title-item-k2-category">
								<?php 
									if($params->get('item_title_max_characs',20) == 0 || strlen($item->title)<$params->get('item_title_max_characs',20)){
										echo '<a href="'.$item->link.'">'.$item->title.'</a>';
									}else{
										echo '<a href="'.$item->link.'">'.substr($item->title,0,$params->get('item_title_max_characs',20)).'...</a>';				
									}
								?>
							</div>
							<?php }?>
							<?php if($params->get('displayDate',1) == 1){?>
							<div class="realease-date-item-k2-category">
								<?php echo $item->created;?>
							</div>
							<?php }?>
							<?php if($params->get('displayRating',1) == 1){?>
							<div class="reating-item-k2-category">
								<div class="itemRatingBlock">
									<div class="itemRatingForm">
										<div class="itemRatingList">
											<div class="itemCurrentRating" id="itemCurrentRating<?php echo $item->id; ?>" style="width:<?php echo $item->votingPercentage; ?>%;"></div>
											<div><a href="#" data-id="<?php echo $item->id; ?>" title="<?php echo JText::_('K2_1_STAR_OUT_OF_5'); ?>" class="one-star">1</a></div>
											<div><a href="#" data-id="<?php echo $item->id; ?>" title="<?php echo JText::_('K2_2_STARS_OUT_OF_5'); ?>" class="two-stars">2</a></div>
											<div><a href="#" data-id="<?php echo $item->id; ?>" title="<?php echo JText::_('K2_3_STARS_OUT_OF_5'); ?>" class="three-stars">3</a></div>
											<div><a href="#" data-id="<?php echo $item->id; ?>" title="<?php echo JText::_('K2_4_STARS_OUT_OF_5'); ?>" class="four-stars">4</a></div>
											<div><a href="#" data-id="<?php echo $item->id; ?>" title="<?php echo JText::_('K2_5_STARS_OUT_OF_5'); ?>" class="five-stars">5</a></div>
										</div>
										<div class="clr"></div>
									</div>
									<div class="clr"></div>
								</div>
							</div>
							<?php }?>
							<?php if($params->get('displayText',1) == 1){?>
							<div class="content-item-k2-category">
						
								<?php 
									if($params->get('item_desc_max_characs',50) == 0 || strlen($item->introtext)<$params->get('item_desc_max_characs',50)){
										echo $item->introtext;
									}else{
										echo substr($item->introtext,0,$params->get('item_desc_max_characs',50)).'...';				
									}
								?>
							</div>
							<?php }?>
							<?php if($params->get('displayReadmore',1) == 1){?>
							<div class="readmore-item-k2-category">
								<?php echo '<a href="'.$item->link.'">'.$params->get('btn-readmore','Read more').'</a>';?>
							</div>
							<?php }?>
						</div>
						<?php }?>
					</div>
				</li>
				<?php $active++;}?>
			</ul>
		</div>
		<?php if($params->get('itemCount') > 1){?>
			<div class="div-img-left jcarousel-control-hover" data-tag="<?php echo $tag_id;?>">
				<div class="relative jcarousel">
				<div class="jcarousel-control-prev-btn jcarousel-control-btn-hover relative">&lsaquo;</div>
				<div class="jcarousel-control-prev-img relative jcarousel">
					<ul>
						<?php $active = count($list)-1;?>
						<?php foreach($list as $item){ ?>
							<li>
								<?php if($list[$active]->video == '' Or $options->imgcfg_priority_display == 'img'){?>
									<?php $img = K2CoolsliderHelper::getK2Image($list[$active], $params);
										if ($img) {
									?>
										<?php echo K2CoolsliderHelper::imageTag($img); ?>
									<?php } ?>
								<?php }else{ 
										echo '<div class="jcarousel-icon-video"><img src="modules/mod_'.$module->name.'/assets/images/play_btn.png" alt/></div>';
									}
									if($active == count($list) - 1){
										$active=0;
									}else{
										$active++;
									}
								?>
							</li>
						<?php } ?>
					</ul>
				</div>
				</div>
			</div>
			<p class="jcarousel-control-prev absolute-jcarousel" data-effect="<?php echo $options->effect;?>"></p>
			<p class="jcarousel-control-next absolute-jcarousel" data-effect="<?php echo $options->effect;?>"></p>
            <div class="div-img-right jcarousel-control-hover" data-tag="<?php echo $tag_id;?>">
				<div class="relative jcarousel">
				<div class="jcarousel-control-next-btn jcarousel-control-btn-hover relative">&rsaquo;</div>
				<div class="jcarousel-control-next-img relative jcarousel">
					<ul>
						<?php $active = 1;?>
						<?php foreach($list as $item){ ?>
							<li>
								<?php if($list[$active]->video == '' Or $options->imgcfg_priority_display == 'img'){?>
									<?php $img = K2CoolsliderHelper::getK2Image($list[$active], $params);
										if ($img) {
									?>
										<?php echo K2CoolsliderHelper::imageTag($img); ?>
									<?php } ?>
								<?php }else{ 
										echo '<div class="jcarousel-icon-video"><img src="modules/mod_'.$module->name.'/assets/images/play_btn.png" alt/></div>';
									}
									if($active == count($list) - 1){
										$active=0;
									}else{
										$active++;
									}
								?>
							</li>
						<?php } ?>
					</ul>
				</div>
				</div>
			</div>
		<?php } ?>
		<?php if (!empty($options->posttext)) { ?>
			<div class="post-text"><?php echo $options->posttext; ?></div>
		<?php } ?>
	</div>
<?php
} else {
	echo JText::_('Has no item to show!');
} ?>

<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function ($) {
(function($) {
	var check = 0;
    $(function() {
        var jcarousel = $('.jcarousel');
        jcarousel
            .on('jcarousel:reload jcarousel:create', function () {
                var carousel = $(this),
				checkContent = '<?php echo $params->get('displayContentK2',1);?>';
				tag_id = carousel.parent().attr('id');
				checkContent = $('#'+tag_id).attr('data-checkcontent');
                width = carousel.innerWidth();	
				height = parseInt(carousel.find('.img-item-sj-coolslider img').css('height'));	
                carousel.jcarousel('items').css('width', Math.ceil(width) + 'px'); 
				if(checkContent == 1){
				if(width > 478){
				$('#<?php echo $tag_id;?> .jcarousel-control-prev').mouseover(function(){
					$('#<?php echo $tag_id;?> .jcarousel-control-prev').css('border','1px solid red');
					$('#<?php echo $tag_id;?> .div-img-left .jcarousel-control-prev-btn').css('background','red');
					$('#<?php echo $tag_id;?> .div-img-left .jcarousel-control-prev-btn').css('color','#fff');
				});
				
				$('#<?php echo $tag_id;?> .jcarousel-control-next').mouseover(function(){
					$('#<?php echo $tag_id;?> .jcarousel-control-next').css('border','1px solid red');
					$('#<?php echo $tag_id;?> .div-img-right .jcarousel-control-next-btn').css('background','red');
					$('#<?php echo $tag_id;?> .div-img-right .jcarousel-control-next-btn').css('color','#fff');
				});
				
				$('#<?php echo $tag_id;?> .jcarousel-control-prev').mouseout(function(){
					$('#<?php echo $tag_id;?> .jcarousel-control-prev').css('border','1px solid #fff');
					$('#<?php echo $tag_id;?> .div-img-left .jcarousel-control-prev-btn').css('background','#fff');
					$('#<?php echo $tag_id;?> .div-img-left .jcarousel-control-prev-btn').css('color','#000');
				});
				
				$('#<?php echo $tag_id;?> .jcarousel-control-next').mouseout(function(){
					$('#<?php echo $tag_id;?> .jcarousel-control-next').css('border','1px solid #fff');
					$('#<?php echo $tag_id;?> .div-img-right .jcarousel-control-next-btn').css('background','#fff');
					$('#<?php echo $tag_id;?> .div-img-right .jcarousel-control-next-btn').css('color','#000');
				});
					var width_img = parseInt((width*67)/100);
					var width_content = width - width_img - 60;
					carousel.jcarousel('items').find('.img-item-sj-coolslider').css('width',width_img-3);
					carousel.jcarousel('items').find('.content-item-sj-coolslider').css('width',width_content);
					carousel.jcarousel('items').find('.content-item-sj-coolslider').css('position','absolute');
					$('#'+tag_id+' .jcarousel-control-next').css('left',width_img-74);
					$('#'+tag_id+' .div-img-right').css('left',width_img-74);
					carousel.jcarousel('items').find('iframe,video').attr('width',width_img-3);
					carousel.jcarousel('items').find('iframe,video').attr('height',height);
					$('#'+tag_id).find('.jcarousel-control-next-img,.jcarousel-control-prev-img').css('display','block');
				}else{
					$('#<?php echo $tag_id;?> .div-img-left').css('border','none');
					$('#<?php echo $tag_id;?> .div-img-right').css('border','none');
					$('#<?php echo $tag_id;?> .jcarousel-control-prev').css('border','none');
					$('#<?php echo $tag_id;?> .jcarousel-control-next').css('border','none');
					$('#<?php echo $tag_id;?> .jcarousel-control-prev').mouseover(function(){
						$('#<?php echo $tag_id;?> .jcarousel-control-prev').css('border','none');
						$('#<?php echo $tag_id;?> .div-img-left .jcarousel-control-prev-btn').css('background','red');
						$('#<?php echo $tag_id;?> .div-img-left .jcarousel-control-prev-btn').css('color','#fff');
					});
					
					$('#<?php echo $tag_id;?> .jcarousel-control-next').mouseover(function(){
						$('#<?php echo $tag_id;?> .jcarousel-control-next').css('border','none');
						$('#<?php echo $tag_id;?> .div-img-right .jcarousel-control-next-btn').css('background','red');
						$('#<?php echo $tag_id;?> .div-img-right .jcarousel-control-next-btn').css('color','#fff');
					});
					
					$('#<?php echo $tag_id;?> .jcarousel-control-prev').mouseout(function(){
						$('#<?php echo $tag_id;?> .jcarousel-control-prev').css('border','none');
						$('#<?php echo $tag_id;?> .div-img-left .jcarousel-control-prev-btn').css('background','#fff');
						$('#<?php echo $tag_id;?> .div-img-left .jcarousel-control-prev-btn').css('color','#000');
					});
					
					$('#<?php echo $tag_id;?> .jcarousel-control-next').mouseout(function(){
						$('#<?php echo $tag_id;?> .jcarousel-control-next').css('border','none');
						$('#<?php echo $tag_id;?> .div-img-right .jcarousel-control-next-btn').css('background','#fff');
						$('#<?php echo $tag_id;?> .div-img-right .jcarousel-control-next-btn').css('color','#000');
					});
					
					carousel.jcarousel('items').find('.img-item-sj-coolslider').css('width',width);
					carousel.jcarousel('items').find('.content-item-sj-coolslider').css('width',width-60);
					carousel.jcarousel('items').find('.content-item-sj-coolslider').css('position','relative');
					$('#'+tag_id+' .jcarousel-control-next').css('left',width-74);
					$('#'+tag_id+' .div-img-right').css('left',width-74);
					carousel.jcarousel('items').find('iframe,video').attr('width',width);
					carousel.jcarousel('items').find('iframe,video').attr('height',height);
					$('#'+tag_id).find('.jcarousel-control-prev,.div-img-right').css('border','none');
					$('#'+tag_id).find('.jcarousel-control-next-img,.jcarousel-control-prev-img').css('display','none');
				}
				}else{
					carousel.jcarousel('items').find('.img-item-sj-coolslider').css('width',width);
					carousel.jcarousel('items').find('iframe,video').attr('width',width);
					carousel.jcarousel('items').find('iframe,video').attr('height',height);
					$('#'+tag_id+' .jcarousel-control-next').css('left',width-74);
					$('#'+tag_id+' .div-img-right').css('left',width-74);
				}	
            })
            .jcarousel({
                wrap: 'circular'
            });
			
			$('.jcarousel-control-prev')
            .jcarouselControl({
                target: '-=1',
            });

			$('.jcarousel-control-next')
            .jcarouselControl({
                target: '+=1',
            });	
			
		var stopHover = 0;
		$('.jcarousel').jcarousel({
			animation: {
				duration: 400,
				easing:   'linear',
				complete: function() {
				}
			}
		});
		
		$('#<?php echo $tag_id;?> .jcarousel').eq(0).on('jcarousel:visibleout', 'li', function(event, carousel) {
			if($('#<?php echo $tag_id;?>').attr('data-effect') == 'fade'){
			$('#<?php echo $tag_id;?> .jcarousel').eq(0).find('ul li').animate({opacity:"1"},500);
			}
		});
		
		$('#<?php echo $tag_id;?> .jcarousel').eq(0).on('jcarousel:visiblein', 'li', function(event, carousel) {		
			if($('#<?php echo $tag_id;?>').attr('data-effect') == 'fade'){
				$('#<?php echo $tag_id;?> .jcarousel').eq(0).find('ul li').animate({opacity:"0"});
			}
		});
		
		$('#<?php echo $tag_id;?> .jcarousel').find('ul li').animate({opacity:"1"},1);
		
		var checkPlay = '<?php echo $params->get('play',1);?>';
		if(checkPlay == 1){

		$('#<?php echo $tag_id;?> .jcarousel').jcarouselAutoscroll({
			interval: <?php echo $params->get('interval',5000);?>
		});
		
		stopHover = '<?php echo $params->get('pause_hover',1);?>';
		}
			if(stopHover != 0){
				$('#<?php echo $tag_id;?> .jcarousel').hover(function() {
				$('#<?php echo $tag_id;?> .jcarousel').jcarouselAutoscroll('stop');
				}, function() {
				$('#<?php echo $tag_id;?> .jcarousel').jcarouselAutoscroll('start');
				});
			}
    });
	$('#<?php echo $tag_id; ?>').each(function(){
		var $this = $(this);
		<?php 
				if($params->get('swipe_enable') == 1) {	?>
					$this.touchSwipeLeft(function(){
						$this.find('.jcarousel').jcarousel('scroll', '-=1');
						}
					);
					$this.touchSwipeRight(function(){
						$this.find('.jcarousel').jcarousel('scroll', '+=1');
						}
					);
		<?php } ?>	
	});
	
	
})(jQuery);
	
});
//]]>
</script>


