// Bendita OOP
Function.prototype.bind = function() {
	var fn = this, args = jQuery.makeArray(arguments), scope = args.shift();
	return function() {
		return fn.apply(scope, args);
	}
}

var Slider = {
	
	activo:			-1,
	thumbs:			[],
	feats:			[],
	descripciones:	[],
	opciones: {
		duracion: 8000,
		automatico: true
	},

	
	init:		function(elem, opciones) {
	
		elem = $(elem);
		this.opciones = jQuery.extend(this.opciones, opciones || {});

		// Un poco de markup para los bordes sin tener que quebrarnos la cabeza crossbrowser
		elem
			.wrap('<div class="slider-contenedor"/>')
			.after('<div class="slider-thumbs"></div><div class="slider-marco-top"></div><div class="slider-marco-bottom"></div><div class="slider-marco-left"></div><div class="slider-marco-right"></div>')
			.before('<div class="slider-feat"></div>').show();
			
		// Quitamos los sobrantes de los li y los acomodamos en otros contenedores
		this.feats			= $('li a.feat', elem).appendTo('.slider-feat').hide();
		this.thumbs			= $('li img.thumb', elem).appendTo('.slider-thumbs').fadeTo(300, 0.50);
		this.descripciones	= $('li', elem).css({bottom:'-66px'});
		
		// Event handlers para los thumbs
		var ref = this;
		this.thumbs.each(function(index) {
			$(this).click(ref.mostrarSlide.bind(ref, index));
		});
		
		// Centramos los links que sean más grandes que el contenedor
		this.feats.each(function(index) {
			var z = -( ($(this).height() - 330 ) / 2);
			$(this).css({'top': z + 'px'});
		});
		
		// Ajustar el ancho de las descripciones
		this.descripciones.width( 750 - $('.slider-thumbs').width() );
		
		this.mostrarSlide(0, false);

		if(this.opciones.automatico) {
			this.timer = setInterval(this.siguiente.bind(this), this.opciones.duracion);
		}

		
	},
	
	mostrarSlide:	function(index, pausa) {
		
		if ( this.activo == index ) return;
		this.ocultarActivo();
		
		this.activo = index;
		
		$(this.thumbs[this.activo]).addClass('activo').fadeTo(1000, 1);
		$(this.descripciones[this.activo]).addClass('activo').delay(400).animate({bottom:'0px'});
		$(this.feats[this.activo]).addClass('activo').fadeIn(1800);
		
		if(pausa != false) {
			clearTimeout(this.timer);
			this.timer = setInterval(this.siguiente.bind(this), this.opciones.duracion);
		}

		
	},
	
	ocultarActivo:	function() {
		if(this.activo >= 0 && this.activo < this.feats.length) {
			$(this.thumbs[this.activo]).removeClass('activo').fadeTo(1000, 0.50);
			$(this.descripciones[this.activo]).removeClass('activo').animate({bottom:'-66px'});
			$(this.feats[this.activo]).removeClass('activo').fadeOut();
		}
	},
	
	siguiente:			function() {
		
		var siguienteIndice = parseInt(this.activo + 1);
	    
		if ( siguienteIndice >= $(this.feats).length) {
			siguienteIndice = 0;
		}
		
		this.mostrarSlide(siguienteIndice, false);

	}
		
}