// JavaScript Document
//Autor: Jonathan Gonzalez Herrera :: jonathan@flsikorski.com
//Version 0.1
//Efectos:Aalancha

var Cuadritos =  Class.create({
	
	vesrion: 0.1,
	id: null,
	imagen:null,
	lista_imagenes: [],
	imagen_actual:0,
	efecto: "abalancha",
	
	ancho_cudro: 50,
	alto_cuadro: 50,
	dalayTimer:2,
	degradado:4,
	
		initialize:function( id, options )
		{
			//OPCIONES PREDETERMINADAS
			options = Object.extend({ ancho_cudro:50,alto_cuadro:50,efecto:'abalancha', dalayTimer:2, dalay:0.5,degradado:4 }, options || {});
			
			
			this.id = id;
			this.lista_imagenes = options.lista_imagenes;
			
			this.ancho_cudro = options.ancho_cudro;
			this.alto_cuadro = options.alto_cuadro;
			this.dalayTimer = options.dalayTimer <= 0 ? 0 : options.dalayTimer;
			this.dalay = options.dalay <= 0 ? 0 : options.dalay;
			this.degradado = options.degradado <= 4 ? 4 : options.degradado;
	
	
			this.imagen = $(id).select("img")[0];
			
			//INICIAMOS LAS TRANSICIONES			
			this.abalancha.bind(this).delay(this.dalayTimer);
			
			//this.executer = new PeriodicalExecuter(this.abalancha.bind(this),this.dalayTimer );
			
			
		},
		
		abalancha: function()
		{

		
		if( !this.valida_imagen.bind(this) )
			return false;
			
			//Cantidad de divs
			var num_col = (this.imagen.getWidth()/this.ancho_cudro);
			var num_filas = (this.imagen.getHeight()/this.alto_cuadro);
			var retardo = 1;
			
			
			if( this.imagen_actual >= this.lista_imagenes.size() ){	this.imagen_actual = 0; }		


			for(var fila = 0;fila <num_filas ;fila+=1 )
			  for( var col = 0;col <num_col ;col+=1)
				{
					
					var cuadrito = new Element("div",{ style:"width:"+this.ancho_cudro+"px; height:"+this.alto_cuadro+"px; position:absolute; " });

					//FONDO
					cuadrito.setStyle({  background:"url("+this.lista_imagenes[this.imagen_actual]+") no-repeat" });	
					
					//POSICION
						//FIREFOX
						cuadrito.setStyle({  backgroundPosition:-(this.ancho_cudro*col)+"px "+ (-this.alto_cuadro*fila)+"px" });	
						
						//IE7, CHROME
						cuadrito.setStyle({  backgroundPositionX:-(this.ancho_cudro*col)+"px" });			
						cuadrito.setStyle({  left:(this.ancho_cudro*col)+"px" });
						
						cuadrito.setStyle({  backgroundPositionY:(-this.alto_cuadro*fila)+"px" });
						cuadrito.setStyle({  top:(this.alto_cuadro*fila)+"px" });
					
					//TRANSPARENCIA
					cuadrito.setOpacity(0.0);
					
					$(this.id).insert(cuadrito);
					
					
					//EFECTO
					retardo = (col+fila)/this.degradado;
					new Effect.Appear(cuadrito,{delay:retardo,duration:1.3 });
					
				}
			
			//IMAGEN SIGUIENTE	
			this.imagen_actual += 1;
			
			//LIMPIAMOS LOS CUADRITOS	
			this.elina_cuadritos.bind(this).delay( (retardo + 0.5) );
				
			this.abalancha.bind(this).delay((this.dalay + retardo + 0.5));
		},
		
		valida_imagen:function()
		{
			//this.imagen.show();
			if(this.imagen.getWidth()>0){
				//this.imagen.hide();
				return true;
			}
			else{		
			 this.imagen.hide();
				this.abalancha.delay(0.5);
			}
			
		},
		
		
		elina_cuadritos:function()
		{
			
			 //CAMBIAMOS LA IMAGEN ANTERIOR POR LA ACTULA	
			 var img = this.lista_imagenes[this.imagen_actual-1]; 
			 this.imagen.src = img;
			 
			 $(this.id).setStyle( { backgroundImage: "url("+img+")", backgroundPosition:"center",height:"146px" } );
			// $(this.id).setStyle( { backgroundImage: "url("+img+")", backgroundPosition:"center", height:"146px" } );
			 
			$$('#'+this.id+' > div').each(function( cub ){ cub.remove(); });  
		}

});


/*---------------- AJUSTES DEL BANNER ---------------*/
function plugIn_centrar_banner()
{
	var imagen_width = 1680;
	if($("img_cuadritos"))
	$("img_cuadritos").setStyle({ position:"absolute",left: (document.viewport.getWidth() / 2) - ( imagen_width /2) + "px"});
}

/*---------------- ANIMACION DEL BANNER ---------------*/
Event.observe(window,'load',function(){
	new Cuadritos( 'img_cuadritos' ,{ lista_imagenes: lista_imagenes || [], dalay:10, degradado:10, ancho_cudro:29, alto_cuadro:29,dalayTimer:0 });
	plugIn_centrar_banner();
});

Event.observe(window,'resize',plugIn_centrar_banner);