/*
	Efectos de transicion con Mootools
	Codigo de los ejemplos de http://uninstallme.com/efectos-de-transicion-con-mootools
*/

window.addEvent('domready', iniciarEventos);

function iniciarEventos(){
	var instanciaClaseEfecto = new Efecto();
}


var Efecto = new Class();
Efecto.prototype = {
	linkEfecto: {
		'selector': 'a.efecto',
		'tipoEfecto': {
			'efecto1': 'efecto-1', // 'tipo de efecto': 'clase css'
			'efecto2': 'efecto-2',
			'efecto3': 'efecto-3',
			'efecto4': 'efecto-4',
			'efecto5': 'efecto-5'
		}
	},
	
	initialize: function(){
		this.linkEfectos = $$(this.linkEfecto.selector);
		this.efecto1(); // Efecto de transicion de una propiedad CSS: Fx.Tween el.tween('propiedad', 'valor al que cambiara');				
		this.efecto2(); // Efecto de destacado con hihglight()
		this.efecto3(); // Fx.Morph permite cambiar el valor de varias propiedades CSS a la vez
		this.efecto4(); // Efecto de desvanecimiento con fade()
		this.efecto5();	// Otro efecto con Fx.Tween
	},
	
	efecto1: function(){
		this.linkEfectos.each(function(el){
			if(el.hasClass(this.linkEfecto.tipoEfecto.efecto1)){
				el.set('tween', {duration: 200});
				el.addEvent('mouseover', function(){
					el.tween('background-position', '0 -35px');
				})		
				el.addEvent('mouseout', function(){
					el.tween('background-position', '0 0');
				})
			}
		}.bind(this))
	},
	
	efecto2: function(){
		this.linkEfectos.each(function(el){
			if(el.hasClass(this.linkEfecto.tipoEfecto.efecto2)){
				el.addEvent('click', function(e){
					//el.highlight('#ddf'); // se especifica el color de fondo al que cambiara
					//el.highlight('#ddf', '#ccc'); // de x color a x color
					el.highlight(); // cambia por defecto a un background amarillo ('#ff8')					
					Event.stop(e);
				})
			}
		}.bind(this))
	},
	
	efecto3: function(){
		this.linkEfectos.each(function(el){
			if(el.hasClass(this.linkEfecto.tipoEfecto.efecto3)){
				el.addEvent('click', function(e){
					var transicion = new Fx.Morph(el,{
						duration: 800,
						transition: Fx.Transitions.Elastic.easeOut,
						link: 'ignore',
						onComplete: function(){
							el.set('text', 'Mootools mooola!');
							el.addClass('activado');
						}
					})
					if(!el.hasClass('activado')){
						transicion.start({
							'width': [300, 350],
							'background-color': '#fce30d',
							'border-color': '#fff',
							'text-align': 'center',
							'line-height': 50,
							'left': '-100px'
						})
						el.removeClass('activado');
					}
					else{
						el.fade();
					}					
					Event.stop(e);
				})			
			}
		}.bind(this))
	},
	
	efecto4: function(){
		this.linkEfectos.each(function(el){
			if(el.hasClass(this.linkEfecto.tipoEfecto.efecto4)){
				el.addEvent('click', function(e){
					el.fade('out');
					Event.stop(e);
				})
			}
		}.bind(this))
	},
	
	efecto5: function(){
		this.linkEfectos.each(function(el){
			if(el.hasClass(this.linkEfecto.tipoEfecto.efecto5)){
				el.set('tween',{duration: 300});
				el.addEvent('mouseover', function(){
					el.tween('background-color', '#9fd805');
				})
				el.addEvent('mouseout', function(){
					el.tween('background-color', '#0eb2fe');
				})
			}
		}.bind(this))
	}
}