$(document).ready(function(){

var step;
var $panels = $("#container > ul > li");
var ancho = $panels[0].offsetWidth * $panels.length;
var $img_lab = $(".fade_lab");
var $img_dentist = $(".fade_dentist");
$("#container").css('width', ancho);

 for (var x=0;x<$panels.length;x++) {
     $("#steps").append("<a name='"+x+"'>"+x+"</a>");
     $("#steps > a").eq(x).addClass('step');
     $("#steps > a").eq(x).click(function(event){
     	clearTimeout(step);
     	$("#container").stop();
     	var i = parseInt($(this).attr("name"));
     	slider(i);
     	event.preventDefault();
     });	
 };

var iniciar = setTimeout(function(){
		slider(0);
	}, 200);
	
var slider = function(i) {
	// if (i == $panels.length-1) {
	// $("#container > ul > li").eq($panels.length-1).css('left', '0px');
	// };
		var ancho_panel = i*(ancho/$panels.length);
		
		$("#container").animate({left: -ancho_panel}, 500, function(){

			$("#steps > a").eq(i).addClass('selected_step');
				for (var x=0;x<$panels.length;x++) {
					if (x != i){
					$("#steps > a").eq(x).removeClass('selected_step');
					};
				};

			i += 1;

			if (i == $panels.length){
			//	$(this).css('left', ancho_uno);
			//	$("#container > ul > li").eq($panels.length-1).css('left', -ancho);
				i = 0;
			};
			step = setTimeout(function(){
				slider(i);
			}, 5000);
		});

	};
	
var fade_in = function(which, y) {
	which.eq(y).animate({opacity: 'toggle'}, 600, function(){
		var next = setTimeout(function(){
			fade_out(which, y);
		}, 3000);
	});
};

var fade_out = function(which, y) {
	which.eq(y).animate({opacity: 'toggle'}, 300, function(){
	y += 1;
	if (y == which.length) {y = 0;};
	fade_in(which, y);
	});
};

fade_in($img_lab, 0);
fade_in($img_dentist, 0);


});