function banner_init( margin, banners )
{
	// usamos la variable ANIM para no permitir que se expanda un anuncio
	// mientras otros se estan moviendo ( evita errores )
	ANIM = 0;
	MARGIN = margin;
	BANNERS = banners;
	MAX_MARGIN = ( MARGIN * BANNERS ) - MARGIN;
	IMAGE_WIDTH = parseInt( $( "#banners" ).css( "width" ).replace( "px", "" ) ) - ( BANNERS * MARGIN );
}

function set_images( images )
{
	var bannerId ;
	
	for ( var b = 0; b < images.length; b++ )
	{
		bannerId = "#b" + b;
		$( bannerId ).css( "background-image", "url( " + images[b] + " )" );
	}
}

function expandir( banner )
{
	// para mostrar ( expandir ) el anuncio que queremos ver
	// deslizamos a la izquierda todos los anuncios que estan a su izquierda
	banner++;

	for ( var b = banner; b < BANNERS; b++ )
	{
		var bannerId = "#b" + b;
		var targetMargin = parseInt( $( bannerId ).css( "margin-left" ).replace( "px", "" ) );
		
		if (  targetMargin <= MAX_MARGIN )
		{
			var marginLeft = targetMargin + IMAGE_WIDTH;
			ANIM++;

			$( bannerId ).animate( { "margin-left" : marginLeft }, "slow", removeAnim() );
		}
	}
}

// llamamos a esta funcion cuando termina de moverse un anuncio 
// asi sabremos cuando todos estan parados ( ANIM == 0 )
function removeAnim( ) { ANIM--; } 

function contraer( banner )
{
	for ( var b = banner; b > -1; b-- )
	{
		var bannerId = "#b" + b;
		var targetMargin = parseInt( $( bannerId ).css( "margin-left" ).replace( "px", "" ) );
		
		if ( targetMargin > MAX_MARGIN )
		{
			var marginLeft = b * MARGIN;
			ANIM++;

			$( bannerId ).animate( { "margin-left" : ( b * MARGIN ) }, "slow", removeAnim() );
		}
	}
}

function reactivar( id )
{
	if ( ANIM )
		return false;

	for ( var b = 0; b < BANNERS; b++ )
	{
		var bannerId = "#b" + b;
		$( bannerId + "> .shadow " ).removeClass( "showed" );		
	}
	
	$( id + "> .shadow " ).addClass( "showed" );
		return true;
}

// funcion que se ejecuta cuando se hace clic encima de un anuncio
function bannerClick( ) 
{
	var id = "#" + $(this).attr( "id" );
	var idNumber = $(this).attr( "id" ).replace( "b", "" );
	var currentMarginLeft = parseInt( $(this).css( "margin-left" ).replace( "px", "" ) );
	var banner = parseInt( $(this).attr("id").replace( "b", "" ) );
	
	if( $( id + "> .shadow " ).hasClass( "showed" ) == true )
		location.href = LINKS[idNumber];
	
	if ( reactivar( id ) )
	{
		if ( currentMarginLeft <= MAX_MARGIN )
			expandir( banner );
			
		else
			contraer( banner );
	}
}


function bannerClick2( elemento ) 
{

	var id = "#" + elemento.attr( "id" );
	
	var idNumber = elemento.attr( "id" ).replace( "b", "" );
	var currentMarginLeft = parseInt( elemento.css( "margin-left" ).replace( "px", "" ) );
	var banner = parseInt( elemento.attr("id").replace( "b", "" ) );
	
	if( $( id + "> .shadow " ).hasClass( "showed" ) == true )
		location.href = LINKS[idNumber];
	
	if ( reactivar( id ) )
	{
		if ( currentMarginLeft <= MAX_MARGIN )
			expandir( banner );
			
		else
			contraer( banner );
	}
}


// funcion que se ejecutar cuando el puntero entre encima de un anuncio
function bannerMouseOver() 
{
	var id = "#" + $(this).attr( "id" );
	$( id + "> .shadow " ).addClass( "active-banner" );
}

// funcion que se ejecutar cuando el puntero salga de encima de un anuncio
function bannerMouseOut() 
{
	var id = "#" + $(this).attr( "id" );
	$( id + "> .shadow " ).removeClass( "active-banner" );
}

// funcion que se ejecuta al cargar la pagina la cual enlanza cada eventos con su funcion correspondiente
$( document ).ready
(
	function() 
	{
		set_images( IMAGES );
		banner_init( 30, 4 );
		$( ".banner" ).mouseover( bannerMouseOver );
		$( ".banner" ).mouseout( bannerMouseOut );		
		$( ".banner" ).click( bannerClick );
		
//Para que los banners se muevan solos
		
		elemento_actual0=$( "#b0" );
		elemento_actual1=$( "#b1" );	
		elemento_actual2=$( "#b2" );	
		elemento_actual3=$( "#b3" );	
		cont = 0;
		
		for ( var b = 1; b < 50 ; b++){						
			setTimeout("bannerClick2( elemento_actual2 )", (cont+5000) );
			setTimeout("bannerClick2( elemento_actual1 )", (cont+10000) );
			setTimeout("bannerClick2( elemento_actual0 )", (cont+15000) );
			setTimeout("bannerClick2( elemento_actual3 )", (cont+20000) );
			cont=cont+20000;
		}
		
	}
)