var margenActual = 0;
var maxwidth = 0;

$(function(){
	maxwidth += $('#personaje_1').width();
	maxwidth += $('#personaje_2').width();
	maxwidth += $('#personaje_3').width();
	maxwidth += $('#personaje_4').width();
	maxwidth += $('#personaje_5').width();
	maxwidth += $('#personaje_6').width();
	maxwidth += $('#personaje_7').width();
	maxwidth += $('#personaje_8').width();
	maxwidth += $('#personaje_9').width();
	maxwidth += $('#personaje_10').width();
	maxwidth += $('#personaje_11').width();
	$('#slider').css({width:maxwidth+'px'});
	
	$('#buttons .prev').click(function(e){
		e.preventDefault();
		if(margenActual >= 0) return;
		margenActual += 50;
		$('#personajes #slider').animate({marginLeft:margenActual+'px'});
	});
	$('#buttons .next').click(function(e){
		e.preventDefault();
		if(-margenActual >= 405) return;
		margenActual -= 50;
		$('#personajes #slider').animate({marginLeft:margenActual+'px'});
	});
	
	$('.scroll').jScrollPane();
});