<?php
/**
 * @package SJ Grid Slider for K2
 * @version 1.2.1
 * @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::stylesheet('modules/' . $module->module . '/assets/css/css3.css');
	$last_image_config = array(
		'type' => $params->get('imgcfg_type'),
		'width' => $params->get('last_imgcfg_width'),
		'height' => $params->get('last_imgcfg_height'),
		'quality' => 90,
		'function' => ($params->get('imgcfg_function') == 'none') ? null : 'resize',
		'function_mode' => ($params->get('imgcfg_function') == 'none') ? null : substr($params->get('imgcfg_function'), 7),
		'transparency' => $params->get('imgcfg_transparency', 1) ? true : false,
		'background' => $params->get('imgcfg_background'));

	JHtml::script('modules/' . $module->module . '/assets/js/owl.carousel.js');
	ImageHelper::setDefault($params);

	$options = $params->toObject();
	$count_item = (count($list));

	$tag_id = 'sj_gridslider_' . rand() . time();

	$autoPlay = (int)$params->get('autoPlay', 1);

	$slideSpeed = (int)$params->get('slideSpeed', 2000);
	$slideSpeed = ($autoPlay && $slideSpeed <= 0) ? 2000 : $slideSpeed;
	$paginationSpeed = (int)$params->get('paginationSpeed', 800);
	$rewindSpeed = (int)$params->get('rewindSpeed', 1000);
	$scrollPerPage = (int)$params->get('scrollPerPage', 1);
	$scrollPerPage = $scrollPerPage ? 'true' : 'false';
	$pause_hover = (int)$params->get('pause_hover', 1);
	$pause_hover = $pause_hover ? 'true' : 'false';
	$mouseDrag = (int)$params->get('mouseDrag', 1);
	$mouseDrag = $mouseDrag ? 'true' : 'false';
	$touchDrag = (int)$params->get('touchDrag', 1);
	$touchDrag = $touchDrag ? 'true' : 'false';
	$navigation = ($params->get('nav_display', 1) == 1) ? 'true' : 'false';
	$autoPlay = $autoPlay ? 'true' : 'false';
	$effect = $params->get('effect', 'fadeIn');

	$nb_column1 = ($params->get('nb-column1', 6) >= $count_item) ? $count_item : $params->get('nb-column1', 6);
	$nb_column2 = ($params->get('nb-column2', 4) >= $count_item) ? $count_item : $params->get('nb-column2', 4);
	$nb_column3 = ($params->get('nb-column3', 4) >= $count_item) ? $count_item : $params->get('nb-column3', 4);
	switch($params->get('theme')){
		case 1:
			$theme = 'theme1';
		break;
		case 2:
			$theme = 'theme2';
		break;
		case 3:
			$theme = 'theme3';
		break;
	}
	?>

	 <!--[if lt IE 9]>
	 <div id="<?php echo $tag_id;?>" class="<?php echo $params->get('moduleclass_sfx'); ?> sj-gridslider lt-ie9 preload">
	 <![endif]-->

	 <!--[if IE 9]>
	 <div id="<?php echo $tag_id;?>" class="<?php echo $params->get('moduleclass_sfx'); ?> sj-gridslider msie9 preload">
	 <![endif]-->

	<!--[if gt IE 9]><!-->
	<div id="<?php echo $tag_id; ?>" class="<?php echo $params->get('moduleclass_sfx'); ?> sj-gridslider preload"><!--<![endif]-->
		<div class="gridslider-loading"></div>

		<?php if (!empty($options->pretext)) { ?>
			<div class="pre-text"><?php echo $options->pretext; ?></div>
		<?php } ?>

		<!-- Begin gridslider-inner -->
		<div class="gridslider-inner <?php echo $theme; ?>" data-effect="<?php echo $effect; ?>">
			<?php
			$count = 0;
			foreach ($list as $key => $item) {
				
				$count++;
				?>
				<?php

				if ($count % 2 == 1) { ?>
					<!-- Begin item -->
					<?php
					$class = '';
					$class = ($list[$key] != 'empty') ? ' two-item' : ' one-item'; ?>
					<div class="item <?php echo $class; ?>">
				<?php } ?>

				<?php if ($list[$key] != 'empty') { ?>
					<div class="item-wrap">
						<div class="item-wrap-inner">

							<?php if (($params->get('theme') == 2 || $params->get('theme') == 3) && $params->get('itemCommentsCounter') == 1) { ?>
								<div class="item-comment">
									<?php echo $item->numOfComments; ?>
								</div>
							<?php } ?>

							<?php if ($params->get('cat_title_display', 1) == 1) { ?>
								<div class="cat-title">
									<a href="<?php echo $item->cat_link; ?>" title="<?php echo $item->categoryname; ?>">
										<?php echo K2GridSliderHelper::truncate($item->categoryname, $params->get('cat_title_max_characs', 25)); ?>
									</a>
								</div>
							<?php } ?>

							<?php $img = K2GridSliderHelper::getK2Image($item, $params);
							if ($img) {
								?>
								<div class="item-image">
									<a href="<?php echo $item->link; ?>"
									   title="<?php echo $item->title ?>" <?php echo K2GridSliderHelper::parseTarget($params->get('item_link_target')); ?>>
										<?php if ($class == ' two-item') { ?>
											<img src="<?php echo K2GridSliderHelper::imageSrc($img); ?>"
											     alt="<?php echo $item->title ?>" title="<?php echo $item->title ?>"/>
										<?php } else { ?>
											<img
												src="<?php echo K2GridSliderHelper::imageSrc($img, $last_image_config); ?>"
												alt="<?php echo $item->title ?>" title="<?php echo $item->title ?>"/>
										<?php } ?>
									</a>
								</div>
							<?php } ?>

							<?php if ($options->item_title_display == 1 || $options->item_desc_display == 1 || $options->item_readmore_display == 1 || $options->item_tags_display == 1) { ?>
								<div class="item-info">

									<?php if ($params->get('item_created_display', 1) == 1 && $params->get('theme') == 1) { ?>
										<div class="item-date">
                                            <span>
                                                 <?php echo JHTML::_('date', $item->created, "j/m/Y"); ?>
                                            </span>
										</div>
									<?php } ?>

									<?php if ($options->item_title_display == 1) { ?>
										<div class="item-title">
											<a href="<?php echo $item->link; ?>"
											   title="<?php echo $item->title ?>" <?php echo K2GridSliderHelper::parseTarget($params->get('item_link_target')); ?>>
												<?php echo K2GridSliderHelper::truncate($item->title, $params->get('item_title_max_characs', 25)); ?>
											</a>
										</div>
									<?php } ?>

									<?php if ($options->item_desc_display == 1 || !empty($item->displayIntrotext) || $options->item_tags_display == 1 || !empty($item->tags) || $options->item_readmore_display == 1) { ?>
										<!-- Begin item-content -->
										<div class="item-content">

											<?php if (($params->get('theme') == 2 || $params->get('theme') == 3) && ($params->get('itemPostBy', 1) == 1 || $params->get('item_created_display') == 1)) { ?>
												<div class="item-date-createby">
													<?php if ($params->get('item_created_display') == 1) { ?>
														<span class="item-date">
                                                             <?php echo JHTML::_('date', $item->created, "F"); ?>
                                                             <?php echo K2GridSliderHelper::Convertday(JHTML::_('date', $item->created, "d")) . ","; ?>
                                                             <?php echo JHTML::_('date', $item->created, "Y"); ?>
                                                        </span>
													<?php } ?>

													<?php if ($params->get('itemPostBy', 1) == 1 && $params->get('item_created_display') == 1) { ?>
														<span><?php echo ' | ' ?></span>
													<?php } ?>

													<?php if ($params->get('itemPostBy', 1) == 1) { ?>
														<span class="item-createby">
                                                            <?php echo 'By: ' . $item->author; ?>
                                                        </span>
													<?php } ?>
												</div>
											<?php } ?>

											<?php if ($options->item_desc_display == 1 && $item->displayIntrotext != '') { ?>
												<div class="item-description">
													<?php echo $item->displayIntrotext; ?>
												</div>
											<?php } ?>

											<?php if ($options->item_tags_display == 1 && !empty($item->tags)) { ?>
												<div class="item-tags">
													<div class="tags">
														<?php $hd = -1;
														foreach ($item->tags as $tag): $hd++; ?>
															<span
																class="tag-<?php echo $tag->id . ' tag-list' . $hd; ?>">
                                                                    <a class="label label-info"
                                                                       href="<?php echo $tag->link; ?>"
                                                                       title="<?php echo $tag->name; ?>"
                                                                       target="_blank">
	                                                                    <?php echo $tag->name; ?>
                                                                    </a>
                                                            </span>
														<?php endforeach; ?>
													</div>
												</div>
											<?php } ?>

											<?php if ($options->item_readmore_display == 1) { ?>
												<div class="item-readmore">
													<a href="<?php echo $item->link; ?>"
													   title="<?php echo $item->title ?>"
														<?php echo K2GridSliderHelper::parseTarget($params->get('item_link_target')); ?>>
														<?php echo $options->item_readmore_text; ?>
													</a>
												</div>
											<?php } ?>

										</div>
										<!-- End item-content -->
									<?php } ?>
								</div>
							<?php } ?>
						</div>
					</div>
				<?php } ?>

				<?php if (($count % 2 == 0 || $count == $count_item)) { ?>
					</div>
					<!-- End item-->
				<?php } ?>

			<?php } ?>
		</div>

		<?php if (!empty($options->posttext)) { ?>
			<div class="post-text">
				<?php echo $options->posttext; ?>
			</div>
		<?php } ?>

	</div>

	<script type="text/javascript">
		//<![CDATA[
		jQuery(document).ready(function ($) {
			;
			(function (element) {
				var $element = $(element),
					$gridslider = $('.gridslider-inner', $element),
					$grid_loading = $('.gridslider-loading', $element),
					_delay = <?php echo (int)$params->get('delay',300) ?>,
					_duration = <?php echo (int)$params->get('duration',600) ?>,
					_effect = '<?php echo $effect; ?>';
				
				$(window).on('load', function () {
					setTimeout(function () {
						$grid_loading.remove();
						$element.removeClass('preload');
						_runSlider();
					}, 1000);

				});
				var one_item = $('.one-item', $element);
				if(one_item.length){
					for(var i = 0 ; i < one_item.length ; i++){
						if(one_item.eq(i).find('.item-wrap').length){
						}else{
							one_item.eq(i).addClass('item-empty');
							one_item.eq(i).remove();
						}
					}
				}
			function _runSlider() {
				$gridslider.owlCarousel({
					itemsCustom: [
						[0, <?php echo $nb_column3;?>],
						[480, <?php echo $nb_column2;?>],
						[768, <?php echo $nb_column1;?>]
					],
					navigation: <?php echo $navigation; ?>,
					navigationText: ["prev", "next"],
					pagination: false,
					autoHeight: false,
					mouseDrag: <?php echo $mouseDrag; ?>,
					touchDrag: <?php echo $touchDrag; ?>,
					autoPlay:    <?php echo $autoPlay; ?>,
					stopOnHover: <?php echo $pause_hover;?>,
					scrollPerPage: <?php echo $scrollPerPage;?>,
					slideSpeed: <?php echo $slideSpeed;?>,
					paginationSpeed: <?php echo $paginationSpeed;?>,
					rewindSpeed: <?php echo $rewindSpeed; ?>,
					addClassActive : true,

					afterAction : function(){
						<?php if($params->get('theme') == 1) { ?>
							<?php if($params->get('nb-column1') == 3) { ?>
						$('.gridslider-inner .owl-item:nth-child(3)', $element).css('margin-right', '1px');
							<?php } ?>
						<?php } ?>

						<?php if($params->get('theme') == 2 || $params->get('theme') == 3) { ?>
							_AddWidthItem();
						if ($(window).width() >= 768)
						{
							if($.browser.webkit){
								this.browser.support3d = true;
							}
							var _curr = this.owl.currentItem, nb_items = this.owl.owlItems.length, nb_res = <?php echo $nb_column1;?>,
							width_first_item_res = 0,
							width_total_item = 0,
							total_width3d = 0;
							for(var d= 0; d < nb_items ; d++){
								if(d <nb_res){
									width_first_item_res += $('.owl-item', $element).eq(d).width();
								}
								width_total_item += $('.owl-item', $element).eq(d).width();
							}
							total_width3d = width_total_item - width_first_item_res;
							var total_right = 0, total_right1= 0;
							if(nb_items - _curr > nb_res)
							{
									for(var j = nb_items ; j > _curr+nb_res - 1; j-- )
									{
										total_right += $('.owl-item', $element).eq(j).width();
									}
									total_right1 = total_width3d - total_right;
									
									if (this.browser.support3d === true) {
										var _value = _goto3d(-total_right1);
										$('.owl-wrapper', $element).css(_value);
									} else {
										_css2move(-total_right1);
									}
							}
							else if(nb_items - _curr <= nb_res )
							{
								if (this.browser.support3d === true) {
									var _value1 = _goto3d(-total_width3d);
									$('.owl-wrapper', $element).css(_value1);
								} else {
									_css2move(-total_width3d);
								}
							}
						}
						<?php } ?>
					},
					beforeInit: function () {
					},
					afterInit: function () {
						var $item_active = this.$owlItems.filter('.active');
						if ($item_active.length > 1) {
							_getAnimate($item_active);
						} else {
							var $item = this.$owlItems;
							$item.css({'opacity': 1, 'filter': 'alpha(opacity = 100)'});
						}
					},
					beforeUpdate: function() {

					},

					afterUpdate: function (e) {
						console.log('afterUpdate');
						var $item_active = this.$owlItems.filter('.active');
						if ($item_active.length > 1) {
							_getAnimate($item_active);
						} else {
							var $item = this.$owlItems;
							$item.css({'opacity': 1, 'filter': 'alpha(opacity = 100)'});
						}
					},

					beforeMove: function (e) {
						var $item_active = this.$owlItems;
						if ($item_active.length > 1 && $('.owl-page', $element).length > 1 && _effect != 'none') {
							if ($.browser.msie && parseInt($.browser.version, 10) <= 9) return;
							$item_active.css({
								'opacity': 0,
								'filter': 'alpha(opacity = 0)',
								'-webkit-animation': '',
								'-moz-animation': '',
								'-o-animation': '',
								'animation': '',
								'-webkit-animation-delay': '',
								'-moz-animation-delay': '',
								'-o-animation-delay': '',
								'animation-delay': ''
							}).animate({
								'opacity': 1,
								'filter': 'alpha(opacity = 1)'
							}, {
								duration: 1000
							});
						} else {
							$item_active.css('opacity', 1);
						}
					},
					loadContent: function (e) {
					},
					css2slide:function(value, speed){

					},
					afterMove: function (e) {
						var  owl = $gridslider.data('owlCarousel');
						var $item_active = this.$owlItems.filter('.active');
						if ($item_active.length > 1) {
							_getAnimate($item_active);
						} else {
							var $item = this.$owlItems;
							$item.css({'opacity': 1, 'filter': 'alpha(opacity = 100)'});
						}
					}
				});
			}
				function _getAnimate($el) {
					if (_effect == 'none') return;
					if ($.browser.msie && parseInt($.browser.version, 10) <= 9) return;
					$gridslider.removeClass('gridf-animate');
					$el.each(function (i) {
						var $_el = $(this);
						$(this).css({
							'-webkit-animation': _effect + ' ' + _duration + "ms ease both",
							'-moz-animation': _effect + ' ' + _duration + "ms ease both",
							'-o-animation': _effect + ' ' + _duration + "ms ease both",
							'animation': _effect + ' ' + _duration + "ms ease both",
							'-webkit-animation-delay': +i * _delay + 'ms',
							'-moz-animation-delay': +i * _delay + 'ms',
							'-o-animation-delay': +i * _delay + 'ms',
							'animation-delay': +i * _delay + 'ms'
						}).animate({
							opacity: 1,
							filter: 'alpha(opacity = 100)'
						});
						if (i == $el.size() - 1) {
							$gridslider.addClass("grid-animate");
						}
					});
				}


				
				$(window).on('resize', function () {
					$('.gridslider-inner .owl-item', $element).css('margin-right', '');
				});
				
				<?php if($params->get('theme') == 2 || $params->get('theme') == 3) { ?>

				function _AddWidthItem() {
					var $wrapper = $('.owl-wrapper-outer', $element),
					nb_cols1 = <?php echo $nb_column1 + 1;?>,
					width_item = parseInt($wrapper.width()/nb_cols1) ;
					var width_outer = width_item * nb_cols1;

					if(width_outer <= $wrapper.width()){
						$wrapper.width(width_outer);
						$wrapper.css('overflow','hidden');
					}

					var $width_twoitem = $('.two-item', $element).parent().css('width'),
						heightItem = $('.two-item', $element).parent().height();
					if ($(window).width() >= 768 && nb_cols1 != 2) {
						$('.owl-item', $element).width(width_item);
						var widthadd = parseInt(width_item)*2;
						$('.one-item', $element).parent().width(widthadd);
						$('.one-item .item-image img', $element).removeAttr('style');
						var two_item = $('.two-item', $element),
						    nb_tw_item = two_item.length*width_item,
							one_item = $('.one-item', $element).length*widthadd;
						var wrap_item = (nb_tw_item+one_item)*2;
							$('.owl-wrapper', $element).width(wrap_item);
					}else{
						$('.one-item', $element).parent().css("width", $width_twoitem);
						$('.one-item .item-image img', $element).height(heightItem);
					}
				}
				
				
				
				function _css2move(pixels){
					var _speed = <?php echo $slideSpeed/2 + 1;?>;
					$('.owl-wrapper', $element).animate({'left':pixels},_speed);
				}
				
				function _goto3d(pixels) {
				
						return {
							"-webkit-transform": "translate3d(" + pixels + "px, 0px, 0px)",
							"-moz-transform": "translate3d(" + pixels + "px, 0px, 0px)",
							"-o-transform": "translate3d(" + pixels + "px, 0px, 0px)",
							"-ms-transform": "translate3d(" + pixels + "px, 0px, 0px)",
							"transform": "translate3d(" + pixels + "px, 0px,0px)"
						};
				}
				<?php } ?>
			})('#<?php echo $tag_id; ?>');
		});
		//]]>
	</script>

<?php
} else {
	echo JText::_('NO_PRODUCT');
} ?>


