window.addEvent('domready', function() {
	
	/* ----------variables a tocar----------- */
		
	var slideTimer = 5000;  //tiempo entre slides
	var transitionTime = 1000; // tiempo que dura la transicion del slide
	var items = $$('.slide_item');  //Se pilla cada elemento
	
	/* ------------------------------------------------- */
	
	//posiciones iniciales
	items.each(function(element, index) {
		
		//la 1 vez se empieza con el primer elemento left 0 q despues se quita, hay q volver a pones left 500 pq tenia -500
		if(index == 0){
			element.removeClass('first_item');
			element.setStyle('left', "0");
		}
		else{
			element.setStyle('left', "500");
			element.setStyle('opacity', "0");
		}
	
	});
	
	
	var slideFunction = new function() {
		
		var numItems = items.length;  //numero de divs
		var itemNum = 0;  //se inicializa a cero la primera vez
		
		var slideIt = function(){ 
		
			//esto es el div actual el q se tiene q ir
			var curItem = items[itemNum];  
			
			//se va cambiando el index
			if(itemNum < (numItems - 1)){
				itemNum++; 
			}
			else{
				itemNum = 0;
			}
			
			//representa el div nuevo que entra
			var newItem = items[itemNum];
			
			//Se define el efecto de transicion para cada div de entrada salida
			var item_in = new Fx.Morph(newItem, {
				     duration: transitionTime, 
				     transition: Fx.Transitions.Quad.easeInOut, 
				     wait:false
			});
			
			var item_out = new Fx.Morph(curItem, {
				     duration: transitionTime, 
				     transition: Fx.Transitions.Quad.easeInOut, 
				     wait:false
			});
			
			
			//nos permite indicar cuales de los elementos de nuestra colección serán los que tengan efectos como así también cuales son las propiedades que se modificaran acompañadas por sus valores
			item_in.start({
			'left': [500, 0],
			'opacity':[0,1]
			});
			
			//lo mismo pero para el que se va
			item_out.start({
			'left': '-500',
			'opacity':[0]
			});
			
		};
		
		//llamada periodica
		slideIt.periodical(slideTimer, this); 
	}
	
	
	
});