document.documentElement.className = 'js-enabled';

window.addEvent('domready', function(){
	instGaleria = new Galeria();
})


Galeria = new Class({
	Implements: [Options],
	options: {
		mostrarRolloverBN: false, // cambiar por true en la instancia para mostrar rollover en blanco y negro
		selectorTexto: '#cuerpo .mitad .item',
		selectorThumb: '#galeria li a'
	},
	initialize: function(options){
		this.setOptions(options);
		this.texto = $$(this.options.selectorTexto);
		this.thumb = $$(this.options.selectorThumb);
		
		this.preparaItems(this.texto);
		this.preparaThumbs(this.thumb, this.options.mostrarRolloverBN);
		
	},
	
	
	preparaItems: function(elems){
		elems.each(function(el, ind){
			var contador = 'item-';
			contador += ind;
			el.addClass(contador);
		})
	},
	
	preparaThumbs: function(elems, mostrarRollover){
		elems.each(function(el, ind){
			var contador = 'item-';
			contador += (ind+1); // Nos saltamos el 0, que es el texto introductorio
			el.set({
				'rel': contador,
				'styles': {
					'outline': 'none'
				}
			});
			this.muestraCapaArtista(el, mostrarRollover);
			if(mostrarRollover){
				this.creaCopiaBN(el.getElement('span'));
			}
		}.bind(this))
	},
	
	creaCopiaBN: function(elem){
		var rutaImgBN = elem.getElement('img').get('src').split('.')[0];
		rutaImgBN += '_bn.gif';
		elem.rutaImgBN = rutaImgBN;		
		elem.setStyle('background', 'url('+elem.rutaImgBN+') 3px 3px no-repeat');
	},
	
	muestraCapaArtista: function(elem, mostrarRollover){		
		elem.addEvent('click', function(ev){
			ev.stop();
			var capaTexto;
			this.texto.each(function(el){
				if(el.hasClass(elem.get('rel'))){
					capaTexto = el;
				}				
			}.bind(this));
			
			this.texto.fade('out').setStyle('display', 'none');
			(function(){
				capaTexto.setStyles({
					'display': '',
					'visibility': 'visible',
					'opacity': 1
				}).fade('in');
			}).delay(400);
			
		}.bind(this))
		
		if(mostrarRollover){
			elem.getElement('span').addEvent('mouseover', function(){
				this.getElement('img').fade('out');
			})
			
			elem.getElement('span').addEvent('mouseout', function(){
				this.getElement('img').fade('in');
			})
		}
	}
})


function _log(que){
	try{
		console.log(que);
	}catch(err){};
}