{**
  * TERM OF USE "Paginated Featured Products" is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License
  *
  * @author    Orange35 <info@orange35.com>
  * @copyright 2007-2015 Orange35
  *  @license   http://creativecommons.org/licenses/by-nc-sa/3.0/
  *}

{if $o35ahs_slides}

	<script type="text/javascript">
		var timer;
	</script>
<ul class="homeslider-orange35">
	{foreach from=$o35ahs_slides key=key item=slide}
	<li>
		<div style="position: relative; width: {$o35ahs_homeslider.width}px; height: {$o35ahs_homeslider.height}px;">
			<div
					id="slide-{$key}"
					style="
					position: absolute;
					background-image:url('{$base_slider_url}views/img/slides/{$slide.image|escape:'htmlall':'UTF-8'}');
					background-repeat:no-repeat;
					background-position:center;
					width: {$o35ahs_homeslider.width}px;
					height: {$o35ahs_homeslider.height}px;"

					{if $slide.title}title="{$slide.title|htmlspecialchars}"{/if}
			>

				{* image is used for bxslider titles *}
				<img
				src="{$base_slider_url}views/img/slides/{$slide.image|escape:'htmlall':'UTF-8'}"
				width="0"
				height="0"
				{if $slide.title}title="{$slide.title|htmlspecialchars}"{/if}
				/>

			{if $slide.url}
			<script type="text/javascript">
				{literal}
				(function (){
				var jDiv = $('#slide-{/literal}{$key}{literal}');
				jDiv.css('cursor', 'pointer');
				jDiv.click(function(){
						{/literal}
						window.location.href="{$slide.url|htmlspecialchars}";
						{literal}
						return false;
					});
				})();
				{/literal}

			</script>

			{/if}
			</div>

		{if !empty($slide.spots)}

			{foreach from=$slide.spots item=spot}
				<div
						id="spot-{$spot.id}"
						class="hot-spot"
						style="
								position: absolute;
								top: {$spot.top}px;
								width: {$spot.width}px;
								left: {$spot.left}px;
								height: {$spot.height}px;
								border: none;
								border-radius: {$spot.border_radius}px;
								cursor: pointer;
								z-index: 9999;
								"
						href="#"
						rel="div#spot-content-{$spot.id}"
						{if !$spot.button_title && $spot.url}onclick="{if '_blank' == $spot.target}window.open('{$spot.url|htmlspecialchars}');{else}javascript:window.location.href='{$spot.url|htmlspecialchars}';{/if} return false;" {/if}
						>
				</div>
					{if ($spot.button_title && $spot.url) || $spot.description}
						<div id="spot-content-{$spot.id}" class="spot-content" style="display: none;">
							<div>
								{$spot.description}{if $spot.description && $spot.button_title}<br />{/if}
								{if $spot.button_title && $spot.url}
								<div style="width:100%; text-align: center;">
								<a href="{$spot.url|htmlspecialchars}"
								   class="button bt_link bt_{$o35ahs_homeslider.spots_style}"
								   target="{$spot.target}"     >
									{$spot.button_title|htmlspecialchars}
								</a>
								</div>
								{/if}
							</div>
						</div>

						<script type="text/javascript">
							{literal}
							$('div#spot-{/literal}{$spot.id}{literal}').qtip({
								content: {
									text: $('#spot-content-{/literal}{$spot.id}{literal}'),
									button: 'ontouchstart' in window || 'onmsgesturechange' in window
								},
								hide: {
//                                    distance: 55,
									fixed: true,
									effect: function () {
										$(this).fadeOut();
									},
									delay: 300

								},
								show: {
									effect: function () {
										$(this).fadeTo(500, 1);
									}

								},
								position: {
									target: 'mouse', // Position at the mouse...
									adjust: { mouse: true, x: 10, y: 10} // ... follow or not it!
								},
								style: {
									classes: 'qtip-{/literal}{$o35ahs_homeslider.spots_style}{literal} qtip-shadow',
									tip: {
										corner: true
									}
								},
								events: {
									show: function(event, api){
										{/literal}{if $spot.shade}{literal}
										$('#spot-' + {/literal}{$spot.id}{literal}).addClass('hot-spot-active');
										{/literal}{/if}{literal}
									},
									hide: function(event, api) {
										$('#spot-' + {/literal}{$spot.id}{literal}).removeClass('hot-spot-active');
									}
								}

							});

							$('div#spot-{/literal}{$spot.id}{literal}').mouseover(function(event){

								var jObj = $(this);

								clearTimeout(timer);
								timer = setTimeout(function () {
									jObj.qtip('api').set({
										'position.adjust.mouse': true
									});
									jObj.qtip('api').reposition(event, true);
									jObj.qtip('api').set({
										'position.adjust.mouse': false
									});
								}, 100);


							});
							{/literal}

						</script>
					{/if}
				{if '1' == $spot.shade}
					<script type="text/javascript">
						{literal}
						$('#spot-' + {/literal}{$spot.id}{literal}).hover(
								function () {
									$('#spot-' + {/literal}{$spot.id}{literal}).addClass('hot-spot-active_hover');
								},
								function () {
									$('#spot-' + {/literal}{$spot.id}{literal}).removeClass('hot-spot-active_hover');
								}
						);
						{/literal}
					</script>
				{/if}


			{/foreach}

		{/if}


		</div>


	</li>
	{/foreach}
</ul>

	<script type="text/javascript">
		{literal}
		(function () {
			var jSlider = $('.homeslider-orange35');
			jSlider.each(function(){
				var oneJSlider = $(this);
				var o35AhsSlider = oneJSlider.bxO35AhsSlider({
					{/literal}
					auto: {if '1' == $o35ahs_homeslider.auto}true{else}false{/if},
					autoHover: true,
					autoAfterPagerBind: true,
					mode: '{$o35ahs_homeslider.mode}',
					speed: '{$o35ahs_homeslider.speed}',
					pause: '{$o35ahs_homeslider.pause}',
					{if !$o35ahs_homeslider.loop}
					infiniteLoop: false,
					hideControlOnEnd: true,
					{/if}
					pager: {$o35ahs_homeslider.pager},
					controls: {$o35ahs_homeslider.navigation},
					captions: true,
					easing: 'ease'
					{literal}
				});
				oneJSlider.show();
				o35AhsSlider.hideControls();
				$('.bx-o35ahsviewport').mouseout(function () {
					o35AhsSlider.hideControls();

				});
				$('.bx-o35ahsviewport, .bx-o35ahsprev, .bx-o35ahsnext, .bx-o35ahswrapper, map').mouseover(function () {
					o35AhsSlider.showControls();
				});
			}) ;

		})();

		{/literal}
		$('.bx-o35ahspager').css('width', '{$o35ahs_homeslider.width}px');
		$('.bx-o35ahsviewport').css('width', '{$o35ahs_homeslider.width}px');
		$('.bx-o35ahswrapper').css('width', '{$o35ahs_homeslider.width}px');
	</script>
	<p>&nbsp;</p>
{/if}