
jQuery.fn.slideShow = function(opciones){
	
	var ancho;
	var alto;
	var total;
	var finalX;
	var carrusel;
	var intervalo;
	var btn_left;
	var btn_right;
	
	var indice = 0;	
	
	var porDefecto = {
		velocidad: 700, 
		pausa: 5
	}
	
	 var opciones = $.extend(porDefecto, opciones);
		
	this.each(function() {
		alto = $(this).height();
		$(this).append('<div class="boton-izquierdo"></div>')
		btn_left = $(this).find('.boton-izquierdo');
		$(btn_left).css({ position: 'absolute', zIndex:'10', width:'50px', height:alto+'px', lineHeight:alto+'px', textAlign:'center', color:'#FFF', fontSize:'36px',  background:'rgba(0,0,0,0.65) url(../images/bg_btn_prev_slideshow.png) no-repeat center', left:'0px', top:'0px', cursor:'pointer'});
		$(btn_left).click(anterior);
		//
		$(this).append('<div class="boton-derecho"></div>')
		btn_right = $(this).find('.boton-derecho');
		$(btn_right).css({ position: 'absolute', zIndex:'10', width:'50px', height:alto+'px', lineHeight:alto+'px', textAlign:'center', color:'#FFF', fontSize:'36px',  background:'rgba(0,0,0,0.65) url(../images/bg_btn_next_slideshow.png) no-repeat center', right:'0px', top:'0px', cursor:'pointer'});
		$(btn_right).click(siguiente);
		//
		$(this).mouseover(muestraControles).mouseout(ocultaControles);
		//
		ancho = $(this).width();
		total = $(this).find('li').length;
		carrusel = $(this).find('ul');
		$(carrusel).css( { width: (ancho*total)+'px'} );
		intervalo  = setInterval(siguiente, opciones.pausa*1000);	
		ocultaControles()
	}); 
	
	function siguiente(){
		( indice < total-1 ) ? indice++ : indice = 0;
		mueve()
	}
	function anterior(){
		( indice > 0 ) ? indice-- : indice = total-1;
		mueve()
	}
	function mueve() {
		clearInterval(intervalo);
		intervalo  = setInterval(siguiente, opciones.pausa*1000);	
		finalX = -ancho*indice;
		$(carrusel).stop().animate({ marginLeft:  finalX+'px' }, opciones.velocidad);
	}
	function muestraControles(){
		$(btn_right).stop().css({ opacity:0 }).fadeTo(400,1)
		$(btn_left).stop().css({ opacity:0 }).fadeTo(400,1)
		clearInterval(intervalo);
	}
	function ocultaControles(){
		$(btn_right).stop().css({ opacity:1 }).fadeTo(400,0)
		$(btn_left).stop().css({ opacity:1 }).fadeTo(400,0)
		mueve()
	}
	
}

