

<div id="{{ tag_id }}" class="so-deal clearfix {{ class_respl }} {% if button_page == 'top' %} {{ 'button-type1' }} {% else %} {{ 'button-type2' }} {% endif %} style2">
	{% if display_feature %}
		<div class="product-feature">
		{% for product in product_features %}
			<div class="item">
				<div class="product-thumb transition">
					<div class="image">
						{% if product.special and display_sale %}
							<span class="label label-sale">{{ objlang.get('text_sale') }}</span>
						{% endif %}
						{% if product.productNew and display_new %}
							<span class="label label-new">{{ objlang.get('text_new') }}</span>
						{% endif %}
						{% if product_image %}
							<a href="{{ product.href }}" target="{{ item_link_target }}">
								{% if product_image_num ==2 %}
									<img data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ product.thumb }}" class="img-thumb1 lazyload" alt="{{ product.name }}">
									<img data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ product.thumb2 }}" class="img-thumb2 lazyload" alt="{{ product.name }}">
								{% else %}
									<img data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ product.thumb }}" alt="{{ product.name }}" class="lazyload">
								{% endif %}
							</a>
						{% endif %}
						
						{% if display_addtocart or display_wishlist or display_compare %}
							<div class="button-group">
								{% if display_addtocart %}
									<button type="button" class="addToCart btn-button" title="{{ objlang.get('button_cart') }}" onclick="cart.add('{{ product.product_id }}');"><i class="fa fa-shopping-basket"></i> <span class="hidden-xs hidden-sm hidden-md">{{ objlang.get('button_cart') }}</span></button>
								{% endif %}
								
								{% if display_wishlist %}
									<button type="button" class="wishlist btn-button" title="{{ objlang.get('button_wishlist') }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
								{% endif %}

								{% if display_compare %}
									<button type="button" class="compare btn-button" title="{{ objlang.get('button_compare') }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-refresh"></i></button>
								{% endif %}
							</div>
						{% endif %}
					</div>

					<div class="caption">
						{% if display_title == 1 %}
							<h4><a href="{{ product.href }}" target="{{ item_link_target }}" title="{{ product.name }}" >{{ product.name_maxlength }}</a></h4>
						{% endif %}
						
						{% if display_description %}
							<p class="desc">{{ product.description_maxlength|raw }}</p>
						{% endif %}
						
						{% if display_rating %}
							<div class="rating">
								{% for j in 1..5 %}
									{% if product.rating < j %}
										<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
									{% else %}
										<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
									{% endif %}
								{% endfor %}
							</div>
						{% endif %}

						{% if product.price and display_price %}
							<p class="price">
								{% if not product.special %}
									{{ product.price }}
								{% else %}
									<span class="price-new">{{ product.special }}</span>
									<span class="price-old">{{ product.price }}</span>
								{% endif %}

								
							</p>
						{% endif %}
						<div class="item-time">
							<div class="item-timer product_time_{{ product.product_id }}"></div>
							<script type="text/javascript">
								//<![CDATA[
								listdeal{{ module }}.push('product_time_{{ product.product_id }}|{{ product.specialPriceToDate }}')
								//]]>
							</script>
						</div>
					</div>
				</div>
			</div>
		{% endfor %}
		</div>
	{% endif %}
	<div class="extraslider-inner products-list " data-effect="{{ effect }}">
		{% for product in list if product_feature_ids not in product.product_id %}
			{% set i = i + 1 %}
			{% if i % nb_rows == 1 or nb_rows == 1 %}
			<div class="item">
				{% endif %}
				<div class="product-thumb transition {% if i % nb_rows == 1 or i == 1 %} first-item {% endif %}">
					<div class="row">
						<div class="inner">
							<div class="item-left col-lg-6 col-md-5 col-sm-5 col-xs-12">
								<div class="image">
									{% if product.special and display_sale %}
										<span class="label-product label-product-sale">
											{# {{ objlang.get('text_sale') }} #}
											{{ product.discount}}
										</span>
									{% endif %}
									{% if product.productNew and display_new %}
										<span class="label-product label-product-new">{{ objlang.get('text_new') }}</span>
									{% endif %}
									{% if product_image %}
										<a href="{{ product.href }}" target="{{ item_link_target }}">
											{% if product_image_num ==2 %}
												<img data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ product.thumb }}" class="img-thumb1 lazyload" alt="{{ product.name }}">
												<img data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ product.thumb2 }}" class="img-thumb2 lazyload" alt="{{ product.name }}">
											{% else %}
												<img data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ product.thumb }}" alt="{{ product.name }}" class="lazyload">
											{% endif %}
										</a>
									{% endif %}
									<div class="button-group so-quickview">
										{% if display_addtocart %}
											<button class="btn-button addToCart" title="{{ objlang.get('button_cart') }}" type="button" onclick="cart.add('{{ product.product_id }}');"><i class="fa fa-shopping-basket"></i> <span>{{ objlang.get('button_cart') }}</span></button>
										{% endif %}

										{% if display_wishlist %}
											<button class="btn-button wishlist" type="button" title="{{ objlang.get('button_wishlist') }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i><span>{{ objlang.get('button_wishlist') }}</span></button>
										{% endif %}

										{% if display_compare %}
											<button class="btn-button compare" type="button" title="{{ objlang.get('button_compare') }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-refresh"></i><span>{{ objlang.get('button_compare') }}</span></button>
										{% endif %}
										<a class="hidden" data-product='{{ product.product_id }}' href="{{ product.href }}" target="{{ item_link_target }}" title="{{ product.nameFull }} " ></a>
									</div>			
								</div>
							</div>
							<div class="item-right col-lg-6 col-md-7 col-sm-7 col-xs-12">
								
								<div class="caption">
									{% if display_title == 1 %}
										<h4><a href="{{ product.href }}" target="{{ item_link_target }}" title="{{ product.name }}">{{ product.name_maxlength }}</a></h4>
									{% endif %}
									
									{% if display_rating %}
										<div class="rating">
											{% for j in 1..5 %}
												{% if product.rating < j %}
													<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
												{% else %}
													<span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
												{% endif %}
											{% endfor %}
										</div>
									{% endif %}
									
									{% if product.price and display_price %}
										<p class="price">
										{% if not product.special %}
											{{ product.price }}
										{% else %}
											<span class="price-new">{{ product.special }}</span>
											<span class="price-old">{{ product.price }}</span>
										{% endif %}
										</p>
									{% endif %}
									{% if display_description %}
										<p class="desc">{{ product.description_maxlength|raw }}</p>
									{% endif %}

									<div class="item-available">
										<div class="row">

											<p class="col-xs-6 a1">{{text_available}} <b>{{product.avail_number}}</b> </p>
											<p class="col-xs-6 a2">{{text_sold}} <b>{{product.sold_number}}</b>  </p>
										</div>
										<div class="available">
											<span class="color_width" data-title="{{product.sold_width}}%" data-toggle='tooltip' style="width: {{product.sold_width}}%"></span>
										</div>
									</div>
									
									
									<div class="item-time-w">
										<div class="time-title">{{ text_time_left }}</div>
										<div class="item-time">
											<div class="item-timer product_time_{{ product.product_id }}"></div>
											<script type="text/javascript">
												//<![CDATA[
												listdeal{{ module }}.push('product_time_{{ product.product_id }}|{{ product.specialPriceToDate }}')
												//]]>
											</script>
										</div>
									</div>
									
								</div>
							</div>
						</div>
					</div>
					

				</div>
				{% if i % nb_rows == 0 or i == count_item %}
			</div>
			{% endif %}
		{% endfor %}
	</div>
</div>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function ($) {  ;
(function (element) {
	var $element = $(element),
			$extraslider = $('.extraslider-inner', $element),
			$featureslider = $('.product-feature', $element),
			_delay = {{ delay }},
			_duration = {{ duration }},
			_effect = '{{ effect }}';

	$extraslider.on('initialized.owl.carousel2', function () {
		var $item_active = $('.extraslider-inner .owl2-item.active', $element);
		if ($item_active.length > 1 && _effect != 'none') {
			_getAnimate($item_active);
		}
		else {
			var $item = $('.extraslider-inner .owl2-item', $element);
			$item.css({'opacity': 1, 'filter': 'alpha(opacity = 100)'});
		}
		{% if button_page == "top" %}
			$('.extraslider-inner .owl2-dots', $element).insertAfter($('.extraslider-inner .owl2-prev', $element));
			$('.extraslider-inner .owl2-controls', $element).insertBefore($extraslider).addClass('extraslider');
		{% else %}
			$('.extraslider-inner .owl2-nav', $element).insertBefore($extraslider);
			$('.extraslider-inner .owl2-controls', $element).insertAfter($extraslider).addClass('extraslider');
		{% endif %}
	});

	$extraslider.owlCarousel2({
		rtl: {{ direction }},
		margin: {{ margin }},
		slideBy: {{ slideBy }},
		autoplay: {{ autoplay }},
		autoplayHoverPause: {{ autoplayHoverPause }},
		autoplayTimeout: {{ autoplayTimeout }},
		autoplaySpeed: {{ autoplaySpeed }},
		startPosition: {{ startPosition }},
		mouseDrag: {{ mouseDrag }},
		touchDrag: {{ touchDrag }},
		autoWidth: false,
		responsive: {
			0: 	{ items: {{ nb_column4 }} } ,
			480: { items: {{ nb_column3 }} },
			768: { items: {{ nb_column2 }} },
			992: { items: {{ nb_column1 }} },
			1200: {items: {{ nb_column0 }} }
		},
		dotClass: 'owl2-dot',
		dotsClass: 'owl2-dots',
		dots: {{ dots }},
		dotsSpeed: {{ dotsSpeed }},
		nav: {{ navs }},
		loop: {{ loop }},
		navSpeed: {{ navSpeed }},
		navText: ['&#171;', '&#187;'],
		navClass: ['owl2-prev', 'owl2-next']
	});

	$extraslider.on('translated.owl.carousel2', function (e) {
		var $item_active = $('.extraslider-inner .owl2-item.active', $element);
		var $item = $('.extraslider-inner .owl2-item', $element);

		_UngetAnimate($item);

		if ($item_active.length > 1 && _effect != 'none') {
			_getAnimate($item_active);
		} else {
			$item.css({'opacity': 1, 'filter': 'alpha(opacity = 100)'});
		}
	});
	/*feature product*/
	$featureslider.on('initialized.owl.carousel2', function () {
		var $item_active = $('.product-feature .owl2-item.active', $element);
		if ($item_active.length > 1 && _effect != 'none') {
			_getAnimate($item_active);
		}
		else {
			var $item = $('.owl2-item', $element);
			$item.css({'opacity': 1, 'filter': 'alpha(opacity = 100)'});
		}
		{% if button_page == "top" %}
			$('.product-feature .owl2-dots', $element).insertAfter($('.product-feature .owl2-prev', $element));
			$('.product-feature .owl2-controls', $element).insertBefore($featureslider).addClass('featureslider');	
		{% else %}
			$('.product-feature .owl2-nav', $element).insertBefore($featureslider);
			$('.product-feature .owl2-controls', $element).insertAfter($featureslider).addClass('featureslider');;
		{% endif %}
	});

	$featureslider.owlCarousel2({
		rtl: {{ direction }},
		margin: {{ margin }},
		slideBy: {{ slideBy }},
		autoplay: {{ autoplay }},
		autoplayHoverPause: {{ autoplayHoverPause }},
		autoplayTimeout: {{ autoplayTimeout }},
		autoplaySpeed: {{ autoplaySpeed }},
		startPosition: {{ startPosition }},
		mouseDrag: {{ mouseDrag }},
		touchDrag: {{ touchDrag }},
		autoWidth: false,
		responsive: {
			0: 	{ items: 1 } ,
			480: { items: 1 },
			768: { items: 1 },
			992: { items: 1 },
			1200: {items: 1}
		},
		dotClass: 'owl2-dot',
			dotsClass: 'owl2-dots',
		dots: {{ dots }},
		dotsSpeed: {{ dotsSpeed }},
		nav: {{ navs }},
		loop: {{ loop }},
		navSpeed: {{ navSpeed }},
		navText: ['&#171;', '&#187;'],
		navClass: ['owl2-prev', 'owl2-next']
	});

	$featureslider.on('translated.owl.carousel2', function (e) {
		var $item_active = $('.product-feature .owl2-item.active', $element);
		var $item = $('.product-feature .owl2-item', $element);

		_UngetAnimate($item);

		if ($item_active.length > 1 && _effect != 'none') {
			_getAnimate($item_active);
		} else {
			$item.css({'opacity': 1, 'filter': 'alpha(opacity = 100)'});
		}
	});
	
	function _getAnimate($el) {
		if (_effect == 'none') return;
		$extraslider.removeClass('extra-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',
				'opacity': 1
			}).animate({
				opacity: 1
			});

			if (i == $el.size() - 1) {
				$extraslider.addClass("extra-animate");
			}
		});
	}

	function _UngetAnimate($el) {
		$el.each(function (i) {
			$(this).css({
				'animation': '',
				'-webkit-animation': '',
				'-moz-animation': '',
				'-o-animation': '',
				'opacity': 1
			});
		});
	}
	data = new Date(2013, 10, 26, 12, 00, 00);
	function CountDown(date, id) {
		dateNow = new Date();
		amount = date.getTime() - dateNow.getTime();
		if (amount < 0 && $('#' + id).length) {
			$('.' + id).html("Now!");
		} else {
			days = 0;
			hours = 0;
			mins = 0;
			secs = 0;
			out = "";
			amount = Math.floor(amount / 1000);
			days = Math.floor(amount / 86400);
			amount = amount % 86400;
			hours = Math.floor(amount / 3600);
			amount = amount % 3600;
			mins = Math.floor(amount / 60);
			amount = amount % 60;
			secs = Math.floor(amount);

			out += "<div class='time-item time-day'>" + "<div class='num-time'>" + days + "</div>" + " <div class='name-time'>" + ((days == 1) ? "{{text_Day}}" : "{{text_Days}}") + "</div>" + "</div> ";
			out += "<div class='time-item time-hour'>" + "<div class='num-time'>" + hours + "</div>" + " <div class='name-time'>" + ((hours == 1) ? "{{text_Hour}}" : "{{text_Hours}}") + "</div>" + "</div> ";
			out += "<div class='time-item time-min' >" + "<div class='num-time'>" + mins + "</div>" + " <div class='name-time'>" + ((mins == 1) ? "{{text_Min}}" : "{{text_Mins}}") + "</div>" + "</div> ";
			out += "<div class='time-item time-sec' >" + "<div class='num-time'>" + secs + "</div>" + " <div class='name-time'>" + ((secs == 1) ? "{{text_Sec}}" : "{{text_Secs}}") + "</div>" + "</div> ";
			out = out.substr(0, out.length - 2);
			

			$('.' + id).html(out);

			setTimeout(function () {
				CountDown(date, id);
			}, 1000);
		}
	}
	if (listdeal{{ module }}.length > 0) {
		for (var i = 0; i < listdeal{{ module }}.length; i++) {
			var arr = listdeal{{ module }}[i].split("|");
			if (arr[1].length) {
				var data = new Date(arr[1]);
				CountDown(data, arr[0]);
			}
		}
	}
	})('#{{ tag_id }}');
});
//]]>
</script>