<?
	$query = "SELECT * FROM contenidos WHERE FIND_IN_SET(".SITIO_ID.", contenidos.sitio) AND contenidos.status = '1' AND contenidos.sitemap = '1' AND contenidos.tipo IN('1,2') AND contenidos.index = '0' ORDER BY RAND() DESC";
	$paginas = $engine->DB->QueryToArray($query);
?>
<style>

#intro_secciones{
	float:left;
    overflow:hidden;
    width:100%;
    max-width:1170px;
	margin:0;
	padding:0;
	border:0px solid #03C; 
    height:auto;
	position:relative;
}


#intro_secciones .items {
    width:20000em;
    position:relative;
    clear:both;
}

#intro_secciones .active {
    position:relative;
    cursor:default;
}

#intro_secciones div.itemwrap{
	width:auto;
	max-width:100%;
	list-style:none;
	height:auto;
	float:left;
	overflow:hidden;
	}


div.item_item{
	float:left;
	width:auto;
	border:0px solid #06C;
	margin:0;
	padding:0 1px 0 0;
	height:auto;
	overflow:hidden;
	position:relative
}

a.next2{
	color:#9F0 !important;
	background:url('{$TEMPLATE_URL}/img/layer_autoprev.png');
	padding:0 10px;
	cursor:pointer;
	position:absolute;
	border-left:1px solid #FFF;
	border-right:1px solid #FFF;
	bottom:0px;
	height:100%;
	z-index:1200;
	right:0px;
	}
a.next2 img{
	position:relative;
	top:40%;
	margin-top:5px;
	width:auto;
	max-width:100%;
	height:20px;}
	
a.prev2{
	color:#9F0 !important;
	background:url('{$TEMPLATE_URL}/img/layer_autoprev.png');
	padding:0 10px;
	cursor:pointer;
	position:absolute;
	border-left:1px solid #FFF;
	border-right:1px solid #FFF;
	bottom:0px;
	height:100%;
	z-index:200;
	left:0px;
	}
	
a.prev2 img{
	position:relative;
	top:40%;
	margin-top:5px;
	width:auto;
	max-width:100%;
	height:20px;}
	
#intro_secciones div.tit{
	z-index:5;
	position:relative;
	border-top:1px #31a5f7 solid;
	color:#fff;
	background:url('{$TEMPLATE_URL}/img/layer_1_bg.png');
	max-width:100%;
	height:auto;
	text-align:center;
	overflow:hidden;
	bottom:0;
	padding:5px 20px;}
	
#intro_secciones div.tit h3{
 text-shadow: 0px 1px 1px #004f84;
 	font-weight:normal;
	font-size:25px !important;
	color:#fff;
	}

	
#intro_secciones div.picautoprev{
	overflow:hidden;
	position:relative;
	width:auto;
	max-width:100%;
	height:auto;
	max-height:auto;
	z-index:4;
	}

	
#intro_secciones div.picautoprev img{
	position:relative;
	width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
	z-index:4;
	}
	
#intro_secciones div.info{
	opacity:0.0;
	filter:alpha(opacity=00); /* For IE8 and earlier */
	z-index:1000;
	top:0px;
	padding:0px 30px;
	background:url('{$TEMPLATE_URL}/img/layer_1_bg.png');
	position:absolute;
	width:auto;
	height:100%;
	text-align:justify;
	overflow:hidden;
	}
	
	#intro_secciones div.info p{
		overflow:hidden;
		text-shadow:none;
			margin:15px 0 0px 0;
			color:#fff;
			height:auto !important;
			font-size:14px !important;
			letter-spacing:normal !important;

		}
		
	#intro_secciones div.info a{
		font-weight:normal;
		float:right;
		background-color:#06F;
		padding:2px 10px;
		font-style:italic;
		text-shadow:none;
		margin-top:6px;
		margin-right:-6px;
		color:#fff;
		font-size:15px !important;
		text-decoration:none;

		}

.moreinfo{
	background-color:#556379;
	text-align:center; 
	padding:5px 0;
	}
	
.moreinfo a{
	font-family: 'Oxygen', sans-serif !important;
	color:#FFF !important;
	font-size:12px !important;
	text-decoration:none;
	}
.moreinfo a:hover{
	color:#ffdb96 !important;
	}
	
.apkey{
	display:none;}

</style>

    <div id="intro_secciones">
        <div id="scroll_autoprev" class="scroll_autoprev">
                        <div class="items">
                            <div class="itemwrap">
                                <? $i=1; if($paginas != ''): foreach($paginas as $pagina):?>
                                
                                <div class="item_item">
                                    
                                    <div class="picautoprev">
                                        <div class="info">
                                            <p><?=cortar_texto($pagina['descripcion'], 110)?></p>
                                        </div>
                                        <?=obtener_thumb2($pagina['contenido'], 390, 112, 90, 'autopreview', $pagina['pic_portada'], '', '')?>
                                    </div>
                                    <div class="tit"><h3><?=cortar_texto($pagina['titulo'], 40)?></h3></div>
                                    <div class="moreinfo"><a href="{$SITE_URL}/<?=$pagina['seo']?>">+ Información >></a></div>
                                </div>       
                                        <? if(($i%3)=='0'):?></div><div class="itemwrap"><? endif; ?>
                                <? $i++; endforeach; endif;?>
                            </div>                    
                        </div>
        <a class="apkey next2 right"><img src="{$TEMPLATE_URL}/img/autoprev_next.png" /></a>
        <a class="apkey prev2 left"><img src="{$TEMPLATE_URL}/img/autoprev_prev.png" /></a>
        </div>
    </div>

{literal}
<script>
	$('div.item_item').hover(
			function(){
					$('.info', this).animate({
								opacity: 1.0
							}, 100)
				},
			
			function(){
					$('.info', this).animate({
								opacity: 0.0,
							}, 100)
				}
		);	


	var wrapwidth = $('.contenido_ajax').width();
	
	var wrapwidth =	wrapwidth/3;
	$('.item_item').css("width", wrapwidth);


		$(document).ready(function() {
		// heeeeeeeeeeere we go.
		  $('#scroll_autoprev').scrollable({ next: '.next2', prev: '.prev2', easing: 'swing', speed: 1000, vertical: false, circular: true, mousewheel: false }).navigator().autoscroll({ interval: 12000 });
		});


	$(document).ready(function(){
			$('#scroll_autoprev').hover(function(){$('.apkey').show().stop()},function(){$('.apkey').hide().stop()});
		});

</script>
{/literal}