// Anadimos la clase js al elemento HTML para que la clase "noscroll" (quita la barra de scroll a la lista del carrusel) solo tenga efecto con javascript habilitado
document.documentElement.className = 'js';

window.addEvent('domready', function(){
	new Carrusel();
});

/*
	Carrusel:
		1. Genero un parrafo para cada libro a partir del texto alternativo.
		2. Doy a cada item del menu un z-index y los superpongo
		3. Cambio el tamano de la imagen y la posicion
			- de mas pequena en la izda a mas grande en el centro y mas pequena en la dcha
		4. Cambio el z-index de la imagen mostrada y la llevo al ppio de la lista. La ultima es la que tiene un z-index mayor y esta visible
*/

var Carrusel = new Class({
	Implements: [Options],
	options: {
		idCarrusel: 'carrusel'
	},
	
	initialize: function(options){
		this.setOptions(options);
		if($(this.options.idCarrusel)) {
			var carrusel = $(this.options.idCarrusel);
		}
		else{
			return;
		}
				
		this.creaImgLabel(carrusel); // creamos el texto para cada imagen a partir de su texto alternativo
		this.preparaEstiloItems(carrusel);
	},
	
	// creamos el texto para cada imagen a partir de su texto alternativo
	creaImgLabel: function(element){
		var images = element.getElements('li a img');
		images.each(function(el){
			var para = new Element('p');
			var link = new Element('a',{
				text: el.get('alt'),
				href: el.getParent('a').get('href')
			});			
			el.getParent('li').grab(para.grab(link),'top');
		});
	},
	
	preparaEstiloItems: function(carrusel){
		var items = $A(carrusel.getElements('li')); // $A para tratar el HTML Collection como un array
		items.each(function(el, ind){
			el.setStyle('visibility', 'hidden');
			el.addClass('z-' + ind);
		});
		
		var lastItem = items.getLast();
		lastItem.setStyle('visibility', 'visible');
		
		this.animaImgItemActual(lastItem, carrusel);
	},
	
	animaImgItemActual: function(lastItem, carrusel){
		var _this = this;
		var desvanecimiento = new Fx.Tween(lastItem);		
		lastItem.setStyle('opacity', 0);
		desvanecimiento.start('opacity', 1);
		// cambiamos las propiedades iniciales de estilo de la imagen
		lastItem.getElement('img').setStyles({
			'width': '40px',
			'top': 15,
			'left': 120,
			'margin-left': 0
		});
		
		// efecto salida (izda)
		var efectoSalida = new Fx.Morph(lastItem.getElement('img'),{
			duration: 400,
			link: 'chain',
			transition: Fx.Transitions.Elastic.EaseOut,
			onChainComplete: function(){					
				desvanecimiento.start('opacity', '0');
				_this.cambiaOrdenApilado(lastItem, carrusel, efectoEntrada);					
			}
		});
		
		// efecto entrada (dcha)
		var efectoEntrada = new Fx.Morph(lastItem.getElement('img'),{
			duration: 300,
			link: 'chain',
			transition: Fx.Transitions.Elastic.EaseOut,
			onChainComplete: function(){				
				(function(){
					efectoSalida.start({
						'width': 40,
						'top': 15,
						'left': 0,
						'margin-left': 0					
					});
				}).delay(5000);			
			}
		}).start({
			'width': 60,
			'top': 5,
			'left': 80,
			'margin-left': '-30px'
		});
	},
	
	// llevamos el ultimo item de la lista al ppio y volvemos a pintar las clases z-index para cada item
	cambiaOrdenApilado: function(lastItem, carrusel, transicion){
		var copiaLastItem = lastItem.clone().inject(lastItem.getParent('ul'), 'top');
		carrusel.getElements('li').each(function(el){
			el.erase('class');
			el.erase('style');
		});
		lastItem.dispose();
		transicion.cancel();
		this.preparaEstiloItems(carrusel);
	}
});