// detectamos javascript habilitado
document.documentElement.className = "js-enabled";

// inicializamos
window.addEvent('domready', function(){    
    // clases para primeros y ultimos elementos de lista
    $$('table tbody tr:nth-child(2n+1)').addClass('alt');
    $$('li:first-child').addClass('first-child'); // para IE 6
    $$('li:last-child').addClass('last-child'); // :last-child no esta en la espec CSS 2.1
	
	$$('div.item ul.descargas').getPrevious('p').addClass('txt-descargas');
	
	// arreglos de estilos
    if(!Browser.Engine.trident5){
        $$('#principal .conciertos li:nth-child(2n)').addClass('par');
    }
	
	if($$('#principal .conciertos li')[0]){
	   $$('#principal .conciertos li')[0].getNext().addClass('first-child');
	}
	

    
    new Buscador($$('#buscador form')[0]);
    new PlayIcon({
	imgSrc: '/frontend/images/play.png' // quitar esto en produccion. La ruta buena ya esta en las opciones por defecto
    })
    /*
    if(Browser.Engine.trident4){
	new HoverTablas($$('table.datos tbody tr'));
    }
    */
    if($('tonos')) new HoverTablas($$('#tonos table tbody tr'));
    
    if($('artistas')) {
	new SortingTable('artistas');
	new SortingTableTitles('artistas');
    }
    new Popup();
    // DD_belatedPNG.fix('img.play');
    
    var milkbox = new Milkbox({
	imageOfText: 'de'
    });
    // milkbox.overlay.setStyle('backgroundColor','transparent');

    $$('.articulo .imagen a').each(function(el){
	new ZoomImage(el,{
	    rutaImagen: '/frontend/images/zoom_in.png',
	    claseWrapperImage: 'zoom'
	});
    });
	if($('encuesta'))    new FormCheck('encuesta');
});

var ZoomImage = new Class({
    Implements: Options,
    options: {
	rutaImagen: '',
	claseWrapperImage: ''
    },
    initialize: function(element, options){
	this.element = element;
	this.setOptions(options);
	this.appendZoomIcon();
    },
    appendZoomIcon: function(){
	this.wrapperIcon = new Element('span',{
	    'class': this.options.claseWrapperImage
	}).inject(this.element);
	this.image = new Element('img',{
	    'src': this.options.rutaImagen,
	    'alt': ''
	}).inject(this.wrapperIcon);	
    }
})


// boton buscar oculto hasta que se introduce texto
var Buscador = new Class({
    Implements: Options,
    options: {
        campoTxt: 'input[type="text"]',
        btnSubmit: 'input[type="image"]',
	capaResultados: '.resultados',
	parentForm: '#buscador',
	claseOculto: 'oculto'
    },
    initialize: function(element, options){
        this.element = element;
        this.setOptions(options);
        
        if(!this.element) return;
        this.toggleButton();
    },
    toggleButton: function(){
	this.element.set('autocomplete', 'off');
        var inputTxt = this.element.getElement(this.options.campoTxt);
        var btnSubmit = this.element.getElement(this.options.btnSubmit);
	var capaResultados = this.element.getParent(this.options.parentForm).getElement(this.options.capaResultados);
	var claseOculto = this.options.claseOculto;
        
		inputTxt.addEvents({
			'keydown': function(ev){
				if(this.value.length >= 0 && ev.key != 'backspace') {
				    btnSubmit.fade('show');
				    capaResultados.removeClass(claseOculto);
				}				
			},
			'keyup': function(){
				if(this.value.length <= 0) {
				    btnSubmit.fade('hide');
				    capaResultados.addClass(claseOculto);
				}
			},
			'blur': function(){
				if(this.value.length <= 0) {
				    btnSubmit.fade('hide');
				    if(!capaResultados.hasClass(claseOculto)) capaResultados.addClass(claseOculto);
				}
			}
		})
    }
})


// Icono play en thumbnails
var PlayIcon = new Class({
    Implements: Options,
    options: {
	selectorThumbVideoPlayer: 'div.thumbnails li a',
	imgSrc: '/frontend/images/play.png',
	claseImagen: 'play'
    },
    initialize: function(options){
	this.setOptions(options);
	this.thumbVideoPlayer = $$(this.options.selectorThumbVideoPlayer);
	this.addPlayIcon(this.thumbVideoPlayer);
    },
    addPlayIcon: function(elements){
	elements.each(function(el){	    
	    var img = new Element('img',{
		alt: '',
		'class': this.options.claseImagen,
		src: this.options.imgSrc
	    })
	    el.grab(img);
	    if(!Browser.Engine.trident) {
		img.set('opacity', .7);
		el.addEvent('mouseenter', this.hoverEffectON.bind(this));
		el.addEvent('mouseleave', this.hoverEffectOFF.bind(this));
	    }
	}.bind(this));
    },
    hoverEffectON: function(ev){
	//if(Browser.Engine.trident) var target = ev.target || $(ev.srcElement);
	var link = ev.target;
	var img = Element.getParent(link, 'li').getElement('img.play');
	img.tween('opacity', 1);	
    },
    hoverEffectOFF: function(ev){
	//if(Browser.Engine.trident) var target = ev.target || $(ev.srcElement);	
	var link = ev.target;	
	var img = Element.getParent(link, 'li').getElement('img.play');
	img.tween('opacity', .7);
    }
});

// rollover en tablas
var HoverTablas = new Class({
    Implements: Options,
    options: {
	claseHover: 'hover'
    },
    initialize: function(elements, options){
	this.elements = elements;
	this.setOptions(options);
	this.makeRollOver();
    },
    makeRollOver: function(){
	var clase = this.options.claseHover;

	$$(this.elements).each(function(el){
	    el.addEvent('mouseover', function(){
		el.addClass(clase);
	    })
	    el.addEvent('mouseout', function(){
		el.removeClass(clase);
	    })
	})
    }
})

var SortingTableTitles = new Class({
    Implements: Options,
    options: {
	titleHeaders: 'Ordenar por '
    },
    initialize: function(element, options){
	this.element = $(element);
	this.setOptions(options);
	this.addTitleToTableHeaders();
    },
    addTitleToTableHeaders: function(){
	var title = this.options.titleHeaders;
	var headers = this.element.getElements('thead th');
	headers.each(function(el){
	    el.set('title', title + el.get('text').toLowerCase());
	})
    }
});

// Popup para enlaces con atributo rel="popup[ancho, alto]"
var Popup = new Class({
    Implements: [Options],
	options: {
		selLinkPopup: 'popup',
		txtInfoNuevaVentana: '. (Abre en nueva ventana)',
		claseOculto: 'invisible'
	},
	initialize: function(options){
		this.setOptions(options);
		this.openPopup(this.options.selLinkPopup);
	},
	openPopup: function(valorRel){
		var _this = this;
		var links = $$('a');
        links.each(function(el){
			if(el.get('rel') && el.get('rel').lastIndexOf(valorRel) != -1){
				el.grab(_this.creaTxtOcultoInfo());
				var medidasPopup = {};
				medidasPopup.ancho = el.get('rel').split(',')[0].substring(6);
				medidasPopup.alto = el.get('rel').split(',')[1].split(']')[0];

				el.ancho = medidasPopup.ancho;
				el.alto = medidasPopup.alto;

				el.addEvent('click', function(ev){
					ev.stop();
					var url = this.get('href');
					var a = this.ancho;
					a += 'px';
					var b = this.alto;
					b += 'px';
					var params = 'width=' + a + ',' + 'height=' + b;
					var newWin = window.open(url, 'pop', params + 'resizable=yes, scrollbars=yes');
					if(window.focus && !Browser.Engine.trident) { // quitamos a IE por las restricciones del modo protegido en Win Vista :S
						newWin.focus();
					}
				})				
			}
        })
	},
	creaTxtOcultoInfo: function(){
		var textoOculto = new Element('span',{
			'class': this.options.claseOculto
		}).set('text', this.options.txtInfoNuevaVentana);
		return textoOculto;
	}
});