<?php
			$query = "SELECT * FROM banners WHERE FIND_IN_SET(".PAG_ID.", banners.cat) ORDER BY banners.id DESC";
			$pics = $engine->DB->QueryToArray($query);
			
			$query = "SELECT * FROM banners ORDER BY RAND() DESC LIMIT 7";
			$pics2 = $engine->DB->QueryToArray($query);

?>

<link rel="stylesheet" id="anythingslider-base-css" href="{$TEMPLATE_URL}/css/anythingslider.css" type="text/css" media="all">
<link rel="stylesheet" id="anythingslider-base-css" href="{$TEMPLATE_URL}/css/theme-minimalist-round.css" type="text/css" media="all">
<script type="text/javascript" src="{$SITE_URL}/libs/jquery/plugins/jquery.anythingslider.js"></script>

<style>
#banner{
	width:960px;
	margin:0 auto 0px auto;}

#slider_wrapper {
	margin:0px 0px 0 0px;
	width: <?=TPL_BANNER_WIDTH+6?>px;
	height: <?=TPL_BANNER_HEIGHT?>px;
	list-style: none;
}

#anyslider { width: <?=TPL_BANNER_WIDTH+6?>px; height: <?=TPL_BANNER_HEIGHT?>px; 
border-radius:0px;
overflow:hidden;
}


#anyslider li { width: <?=TPL_BANNER_WIDTH+6?>px; height: <?=TPL_BANNER_HEIGHT?>px;
overflow:hidden;
	margin:0px !important;
	padding:0px !important;
	border-radius:0;

}

#anyslider li img {
	margin:0px !important;
	padding:0px !important;

}

.slider_cont{
		width: <?=TPL_BANNER_WIDTH+6?>px;
		overflow:hidden;
		height: <?=TPL_BANNER_HEIGHT?>px;
}

.slider_cont a{
	font-family:Arial;
	font-size:10pt;
	font-weight:bold;
	color:#09F;
	text-decoration:none;
	}


.link-info a{
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12pt;
	font-weight:bold;
	color:#09F;
	text-decoration:none;
	}
	
.caption{
	margin:0;
	background:#000;
	padding:10px 20px;
	opacity:0.8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
	position:relative;
	top:-105%;
	color:#CCC;
	text-shadow:none;}
	
.caption h2{
	color:#6C3;
	text-shadow:none;}
	
.bla{
	border:0px solid #900;
	padding:0px !important;
	margin:0px !important;}
</style>


<div id="banner" class="hidden-xs hidden-sm">
    <div id="slider_wrapper">
        <!-- Simple AnythingSlider -->
    
        <ul id="anyslider">
                <?php if(isset($pics)): $i=1; foreach ($pics as $pic):?>
                
            <li>
                <div class="slider_cont">
                            	<? if($pic['link']!=''):?><a href="<?=$pic['link']?>" target="<?=$pic['link_target']?>"><? endif; ?>
                                	<div class="bla"><img src="{$SITE_URL}/media/banners/<?=$pic['imagen']?>" /></div>
                                 <? if($pic['link']!=''):?></a><? endif; ?>
                </div>
            </li>
                
                <?php $i++; endforeach; else:?>
                
                <?php foreach ($pics2 as $pic):?>
                
            <li>
                <div class="slider_cont">
                            	<? if($pic['link']!=''):?><a href="<?=$pic['link']?>" target="<?=$pic['link_target']?>"><? endif; ?>
                                	<img src="{$SITE_URL}/media/banners/<?=$pic['imagen']?>" />
                                 <? if($pic['link']!=''):?></a><? endif; ?>
                           
                </div>
            </li>
                
                <?php endforeach; endif;?>
                
        </ul>
    </div>
    
    <style>
	
						#banner_thumb{
							background:url('{$TEMPLATE_URL}/img/banner_bottom.png') no-repeat top;
							overflow:hidden;
							height:121px;
							width:960px;
							z-index:15;}
							
                    	#thumbs{
							width:800px;
							margin:auto;
							height:65px;
							position:relative;
							overflow:hidden;
							}
						
						#thumbs li{
							width:140px;
							height:41px;
							float:left;
							margin:8px 20px;
							list-style:none;}
							
						#thumbs li.spacer{
							width:3px;
							height:55px;
							position:relative;
							margin:0px 7px !important;
							top:-5px;}
							
						#thumbs li div img{
							border:2px solid #eff0f4;
							width:140px;
							height:45px;
							}	
                    </style>
    <div id="banner_thumb">

                     <ul id="thumbs">
                     
                     
                     		<li class="spacer"><img src="{$TEMPLATE_URL}/img/banner_spacer.png" /></li>
								<?php if(isset($pics)): $i=1; foreach ($pics as $pic):?>
                                
                            <li>
                                <div class="thumbs_cont">
                                                <? if($pic['link']!=''):?><a href="<?=$pic['link']?>" target="<?=$pic['link_target']?>"><? endif; ?>
                                                    <a href="#<?=$i?>"><img src="{$SITE_URL}/media/banners/thumbs/<?=$pic['imagen']?>" id="<?=$i?>" /></a>
                                                 <? if($pic['link']!=''):?></a><? endif; ?>
                                </div>
                            </li>
                     		<li class="spacer"><img src="{$TEMPLATE_URL}/img/banner_spacer.png" /></li>
                                <?php $i++; endforeach; else:?>
                                
                                <?php foreach ($pics2 as $pic):?>
                                
                            <li>
                                <div class="thumbs_cont">
                                                <? if($pic['link']!=''):?><a href="<?=$pic['link']?>" target="<?=$pic['link_target']?>"><? endif; ?>
                                                    <a href="#<?=$i?>"><img src="{$SITE_URL}/media/banners/thumbs/<?=$pic['imagen']?>" id="<?=$i?>" /></a>
                                                 <? if($pic['link']!=''):?></a><? endif; ?>
                                           
                                </div>
                            </li>
                     		<li class="spacer"><img src="{$TEMPLATE_URL}/img/banner_spacer.png" /></li>
                                <?php  $i++; endforeach; endif;?>
	                     
                	</ul>
       
    </div>
</div>



    
    
        <!-- AnythingSlider initialization -->
        
                <script>
					var $s = $('#anyslider'),
						nav = $('#thumbs li div img'),
						updateNav = function(page){
							nav
								.removeClass('cur')
								.eq(page).addClass('cur');
						};
					
					$s.anythingSlider({
						// If true, builds a list of anchor links to link to each panel
						    theme               : 'minimalist-round', 
                            expand              : false,     
                            resizeContents      : false,
                            vertical            : false,      
                            showMultiple        : 1,     
                            easing              : 'swing',   
                            
                            buildArrows         : false,      
                            buildNavigation     : false,      
                            buildStartStop      : false,      
                        
                            toggleArrows        : false,     
                            toggleControls      : false,     
                            
                            startText           : 'Iniciar',   
                            stopText            : 'Parar',    
                            forwardText         : '»', 
                            backText            : '«', 
                            tooltipClass        : 'tooltip', 
                            
                            
                            enableArrows        : false,      
                            enableNavigation    : true,      
                            enableStartStop     : false,      
                            enableKeyboard      : false,      
                            
                            
                            startPanel          : '1',         
                            changeBy            : '1',         
                            hashTags            : false,      
                            infiniteSlides      : true,
                            navigationFormatter : 'NULL',      
                            
                            
                            autoPlay            : true,     
                            autoPlayLocked      : true,     
                            autoPlayDelayed     : false,     
                            pauseOnHover        : true,      
                            stopAtEnd           : false,     
                            playRtl             : false,     
                            
                            
                            delay               : 4500,      
                            resumeDelay         : 0, 
                            animationTime       : 350,
                            delayBeforeAnimate  : 0,       
                            
                            
                            clickForwardArrow   : 'click',         
                            clickBackArrow      : 'click',         
                            clickControls       : 'click focusin', 
                            clickSlideshow      : 'click',        
                            
                            
                            resumeOnVideoEnd    : true,      
                            addWmodeToObject    : 'transparent',
					
						onInitialized: function(e, slider) {
							updateNav(slider.currentPage-1);
						},
						// Callback before slide animates
						onSlideBegin: function(e, slider) {
							updateNav(slider.targetPage-1);
						}
					});
					
					// set up external links
					$('#thumbs li div a').click(function(){
						// get slide number (ignore the #)
						var slide = $(this).attr('href').substring(1),
							// get AnythingSlider data object
							slider = $s.data('AnythingSlider');
						if (slide === "play") {
							// toggle slideshow
							slider.startStop( !slider.playing );
							// change link text
							$('a.play').text( slider.playing ? 'Pause' : 'Play' );
						} else {
							// go to selected slide
							$s.anythingSlider(slide);
						}
						// prevent link from changing the hash
						return false;
					});


									
				</script>
        
        <!-- END AnythingSlider -->            
