var reservar = 0;
var ocupado = 0;
var automatico = true;

$(document).ready(function (){
	
	var pausa = null;
	var pausa2 = null;
	
	//Cuando se pasa por encima del icono
	$('#icono').mouseover(function (){
		automatico = false;
		if(pausa) clearTimeout(pausa);
		if(pausa2) clearTimeout(pausa2);
		if (ocupado == 0){
			ocupado = 1;
			$('.tooltip').css({
				//Aparece (ya que estaba en display none)
				top: 0,
				display: 'block',
				opacity: 0
			}).animate({
				//Sube 20px y pasa a ser opaco
				top: '-=' + '20px',
				opacity: 1
			}, 'normal',
			function (){
				ocupado = 0;
				automatico = true;
			});
		}
	});
	//Cuando sale de la zona del icono
	$('#icono').mouseout(function (){
		pausa = setTimeout(function () {
			pausa = null;
			if (ocupado == 0){
				ocupado = 1;
				$('.tooltip').css({
					opacity: 1
				}).animate({
					top: '-=' + '50px',
					opacity: 0
				}, 'slow',
				function(){
				$('.tooltip').css({
						display: 'none',
						top: 0
					});
					ocupado = 0;
					automatico = true;
				});
			}else {
				$('.tooltip').css({
					display: 'none'
				});
				ocupado = 0;
				automatico = true;
			}
		}, 500);
	});
});

function tooltip()
{
	if(automatico) {
		if (reservar == 0){
			reservar = 1;
			$('.tooltip').css({
				opacity: 1
			}).animate({
				top: '-=' + '50px',
				opacity: 0
			}, 'slow',
			function(){
			$('.tooltip').css({
					display: 'none',
					top: 0
				});
				reservar = 1;
			});
		} else {
			$('.tooltip').css({
				//Aparece (ya que estaba en display none)
				top: 0,
				display: 'block',
				opacity: 0
			}).animate({
				//Sube 20px y pasa a ser opaco
				top: '-=' + '20px',
				opacity: 1
			}, 'normal',
			function (){
				reservar = 0;
			});
		}
	}
	pausa2 = setTimeout("tooltip()", 5000);
		
}