var speed = 400;
var msegs = 10000;
var index = 0;
var timer;

$(document).ready( function() {
	$('#wp-module-banner-0').parent().show();
	//Al primer elemento le añadimos la clase "BannerCabeceraViewItemContainerSelected"
	$('#wp-module-banner-0').addClass("wp-module-banner-container-selected");
	
	//Llamamos a la función rotateBanner indicándole el número de milisegundos tras el cual queremos que rote, el índice inicial y la velocidad de rotacion
	rotateBanner();
})

function SelectImage(imageIndex) {
	clearTimeout(timer);
	changeImage(imageIndex);	
	index = imageIndex;
	rotateBanner();
}

function changeImage(imageIndex) {
	// Ocultamos el elemento que se está mostrando
	$('.wp-module-banner-container').removeClass("wp-module-banner-container-selected");
	$('.wp-module-banner-imagen').fadeOut(speed);
	$('.wp-module-banner-container').parent().hide();
	
	// Mostramos el elemento seleccionado (index)
	$('#wp-module-banner-' + imageIndex).addClass("wp-module-banner-container-selected");
	$('#wp-module-banner-imagen-' + imageIndex).fadeIn(speed);
	$('#wp-module-banner-' + imageIndex).parent().fadeIn(speed);
}

function rotateBanner() {
	var elements = $('.wp-module-banner-container').length;
	// Cada X milisegundos ocultamos el banner que se está mostrando actualmente (index) y mostramos el siguiente
	timer = setTimeout(function() { 
		var siguiente = (index>=elements-1)?0:index+1;
		changeImage(siguiente);	
		index = siguiente;
		rotateBanner();	
		},msegs);
}