$(document).ready(function(){
	
	var cont = 0;
	$("#cabecera_rotar img").each(function(){
		if (cont == 0) {
			$(this).attr("class","primera");
		}
		cont++;
	});

	//setInterval("rotar('caja_banner_oferta')",3000);
	if (cont > 0) {
		setInterval("rotar('cabecera_rotar')",5000);
	}
	
	
	// la primera imagen de la serie debe estar marcada con la clase "primera" (con display:block)
	// la funcion rotar() recibe el id del contenedor de las imagenes
	// el contenedor debe tener tama?o fijo y overflow:hidden
	// las imagenes deben tener posicionamiento relativo (top:0, left:0) y display:none

});

function rotar(id) {

	var indice_primera = 0;
	var primera;
	var array = new Array();
	var cont = 0;
	$("#"+id+" img").each(function(){ // paso a un array las imagenes
		array[cont] = $(this);
		cont++;
	});
	
	var longitud = array.length;
	//alert(longitud);
	
	// busco la que esta marcada como inicial ("primera") y le cambio la clase a "activa"
	// solo se usa la clase "primera" en la primera llamada a la funcion
	var inicio = $("#"+id+" img.primera");
	inicio.removeClass();
	inicio.addClass("activa");
	
	// busco la imagen que esta activa en este momento y le quito la clase
	for (i = 0; i < longitud; i++) {
		if (array[i].attr("class") == "activa") {
			primera = array[i];
			indice_primera = i;
			array[i].removeClass();
		}
	}
	
	// calculo cual es la siguiente imagen
	if (indice_primera == (longitud-1)) siguiente = 0;
	else siguiente = indice_primera + 1;

	primera.fadeOut("slow"); // desaparece la que estaba activa activa
	primera.css("display","none"); // la oculto para que deje su espacio libre y no empiece a aparecer la nueva fuera del espacio visible
	array[siguiente].addClass("activa"); // marco la siguiente como activa
	array[siguiente].fadeIn("slow"); // aparece la siguiente
	
	
}