var id;
var altura;
var alturabox;
var heightbox;
var offset;
$(document).ready(function(){
	$("#holder").css({height:$(document).height()});
	$(".branco").hover(
		function() {
			$(this).css("color","#fc0");
		},
		function() {
			if($(this).attr("id")==id){
				$(this).css("color","#fc0");
			} else {
				$(this).css("color","#fff");
			}
		}
	);
	$(".branco").click(
		function() {
			$(this).css("color","#fc0");
			altura = $(this).offset();
			alturabox = $("#selector").offset();
			heightbox = $("#selector").outerHeight();
			if(id!==undefined){
				$("#"+id).css("color","#fff");
				$("#bo"+id).fadeOut("slow");
				offset = 0;
			} else {
				$(".dotted").css("top",altura.top+8);
				offset = 1;
			}
			id = $(this).attr("id");
			$(".dotted").animate({top:altura.top+8,height:(altura.top-(alturabox.top+heightbox+6))*(-1)},"slow",function(){$("#bo"+id).fadeIn("slow");$.scrollTo("#selector","slow");
				if(offset==1){
					$("#holder").animate({height:$(document).height()+25},"slow");
				} else {
					void(0);
				}
				});
			$(".dotted").fadeIn("slow");
		}
	);
});