/*
	Para preparar un Carrusel se necesita:
		<div id="idDelCarrusel">
			<div>
				<div>Panel 1</div>
				<div>Panel 2</div>
				<div>Panel 3</div>
			</div>
		</div>
		
		idDelCarrusel debe tener asignada la propiedad width (que determinará el ancho "visible" del carrusel), overflow:hidden y position:relative
		Los paneles deben tener asignado un ancho y float:left
	
	Después solo queda inicializarlo haciendo:
	
	var miCarrusel = new Carrusel('idDelCarrusel')
*/


if (typeof(Carrusel)=="undefined"){
	//Defino Carrusel solo si no esta ya incluido
	function Carrusel(idPanel){
		
		if (idPanel[0]!='#')
			idPanel = '#'+idPanel;
		
		var superPanel = jQuery(idPanel);
		
		this.panel = superPanel.children().eq(0);
		
		this.anchoBloque;
		this.totalAncho;
		this.visible = parseInt(superPanel.css("width"));
		
		//Cuantos paneles tengo
		var cuantos = this.panel.children();
		this.anchoBloque = parseInt(cuantos.eq(0).css("width"));
		cuantos = cuantos.length;
		this.totalAncho = this.anchoBloque * cuantos;
		this.panel.css("width",this.totalAncho+"px");
		
		this.mover = function(valor){
			
			jQuery(this.panel).stop(true,true);
			
			var variacion = (-1*this.anchoBloque)*valor;
			var mov = jQuery(this.panel).css('left');
			var max = (this.totalAncho - this.visible)*-1;
			mov=parseInt(mov.replace(/px/,""));
			mov=mov+variacion;
			
			if ((mov<=0 && valor==-1) || (mov>max && valor==1)) {
					mov = mov + "px";
					jQuery(this.panel).animate({left:mov},{duration:300,easing:'swing',queue:true});
			}
		}
		
		this.moverDer = function(){
			this.mover(1);
		}
		
		this.moverIzq = function(){
			this.mover(-1);
		}
		
	}
}