// detectamos javascript habilitado. Clase usada en la CSS segun la que usaremos unos u otros estilos
document.documentElement.className = 'js-enabled';

window.addEvent('domready', function(){
	// Shadowbox
	Shadowbox.init({
    	handleOversize: "drag",
    	modal: true
	});
	
	
	// para navegadores chungos
	$$('li:first-child').addClass('first-child');
	$$('li:last-child').addClass('last-child');
	$$('form input[type=text], form textarea').addEvents({
		'focus': function(){
			this.addClass('activo');
		},
		'blur': function(){
			this.removeClass('activo');			
		}
	});
	$$('table.datos tbody tr:nth-child(2n)').addClass('par');
	$$('table.datos tbody tr').addEvents({
	    'mousenter': function(){
	        this.addClass('hover');
        },
        'mouseleave': function(){
            this.removeClass('hover');
        }
    });

	
	// marcar enlaces externos
	if(! (Browser.Engine.trident4 || Browser.Engine.trident5)){
       $$('a[href^="http:"]').addClass('external');
	   $$('a[href^="http://kus.cool-z.com"], a[href^="http://www.cool-z.com"], a[href^=http://cool-z.com], a[href^=http://v2.cool-z.com], div.img a[href^="http://"]').removeClass('external');	
    }
	
	// clases html
	$$('div.bloque.clientes div.grid_4:nth-child(3n-2)').addClass('primero');
	$$('div.bloque.clientes div.grid_4:nth-child(3n+0)').addClass('ultimo');

	
	new CZ.Efectos($$('a:not(.button)'), {
		color: '#8d9f27'
	});
	new CZ.Efectos($$('.button'),{
	    background: '#ff1662'
    });
	new CZ.Imgs($$('.img img'));
		
	$$('ul.image-set').each(function(el){
		new CZ.ImageSet(el);		
	})
});

var CZ = CZ || {};
CZ.Efectos = new Class({
	Implements: Options,
	options: {},
	initialize: function(elements, options){
		this.setOptions(options);		
		this.elements = elements;
		this.hoverLinks();
	},
	hoverLinks: function(){				
		var colorFinal = this.options.color;	
		var bgFinal = this.options.background;
		if(this.options.color){
    		this.elements.each(function(el){
    			var colorOriginal = el.getStyle('color');
    			
    			el.addEvent('mouseenter', function(){
    				this.set('tween',{
    				    duration: 200
    				}).tween('color', colorFinal);				
    			});
    			el.addEvent('mouseleave', function(){
    				this.set('tween',{
    				    duration: 400
    				}).tween('color', colorOriginal);				
    			})
    		})    
        }	
        if(this.options.background){
            this.elements.each(function(el){
    			var colorOriginal = el.getStyle('background-color');    			
				el.addEvents({
					'mouseenter': function(){
						this.set('tween',{
	    				    duration: 200
	    				}).tween('background-color', bgFinal);					
					},
					'focus': function(){
						this.set('tween',{
	    				    duration: 200
	    				}).tween('background-color', bgFinal);
					},
					'mouseleave': function(){
						this.set('tween',{
	    				    duration: 400
	    				}).tween('background-color', colorOriginal);	
					},
					'blur': function(){
						this.set('tween',{
	    				    duration: 400
	    				}).tween('background-color', colorOriginal);
					}
				});
    		})
        }
	}
});

CZ.Imgs = new Class({
	Implements: Options,
	options: {
		
	},
	initialize: function(elements, options){
		this.setOptions(options);
		this.elements = elements;
		this.hoverImgs();		
	},
	hoverImgs: function(){
		var all = this.elements;
		this.elements.addEvents({
			'mouseenter': function(){
				all.set('tween',{
					duration: 300
				}).tween('opacity', .3);
				this.set('tween',{
					duration: 300
				}).tween('opacity', 1);				
			},
			'mouseleave': function(){
				all.set('tween',{
					duration: 300
				}).tween('opacity', 1);				
			}
		})
	}
});

CZ.ImageSet = new Class({
	Implements: Options,
	options: {
		claseOculto: 'oculto',
		claseNavegacion: 'set-nav',
		claseLinkActivo: 'activo'
	},
	initialize: function(element, options){
		this.setOptions(options);
		this.element = element;
		this.preparaGaleria();
	},
	preparaGaleria: function(){
		var _this = this;
		var set = this.element;
		var divNavegacion = new Element('div',{
			'class': this.options.claseNavegacion
		});
		set.getParent().grab(divNavegacion);
		
		set.getElements('li').each(function(el,ind){
			ind+= 1;
			el.set('id', 'item-' + ind);
			
			if(ind > 1){ // ocultamos todos menos el primero
				el.addClass(_this.options.claseOculto);				
			}
			// creamos la navegacion
			var link = new Element('a',{
				href: 'imagen: ' + ind,
				text: ind,
				id: 'link-' + ind
			}).inject(divNavegacion);
			
			divNavegacion.getElement('a').addClass(_this.options.claseLinkActivo);
			
			
			link.addEvent('click', function(ev){
				ev.stop();				
				this.getParent().getElements('a').removeClass(_this.options.claseLinkActivo);				
				this.addClass(_this.options.claseLinkActivo);								
				var activo = set.getElement(('#item-' + ind));		
				set.getElements('li').addClass(_this.options.claseOculto);				
				activo.removeClass(_this.options.claseOculto);				
			})
		})	
	}
})