$(document).ready(function() {
	
//over del primero

	$('.banner_primero').mouseover(function() {
		if (!$(this).hasClass('activo')){
			activar('.banner_primero');
		}
	});
	$('.banner_medio').mouseover(function() {
		if (!$(this).hasClass('activo')){
		activar('.banner_medio');
		}
	});
	$('.banner_ultimo').mouseover(function() {
		if (!$(this).hasClass('activo')){
		activar('.banner_ultimo');
		}
	});
});

function activar(clase){
	//primero quitamos la clase activo
	$('.activo').animate({
					width: ['300', 'swing'],
					opacity: ['0.5', 'swing']
					}, {
					duration: 200, 
					specialEasing: {
					width: 'swing'
					},
					complete: function() {
						$('.activo').removeClass('activo');
						$('.titulo_banner_portada').fadeOut();
						$('.texto_banner_portada').fadeOut();
					}	
				});
	//luego, se la ponemos al indicado
	//$(clase).addClass('activo',300);
	$(clase).animate({
					width: ['400', 'swing'],
					opacity: ['1', 'swing']
					}, {
					duration: 200, 
					specialEasing: {
					width: 'swing'
					},
					complete: function() {
						$(clase).addClass('activo');
						$(clase +' .titulo_banner_portada').fadeIn();
						$(clase +' .texto_banner_portada').fadeIn('slow');
					}			
				});
}