Всплывающее окно для ввода в Input значений
 

Доброго времени суток!
Вопрос такой:есть такой код:

<table width="327" border="0" id="inpShirinaTable">
      <tr>
        <td width="93">Ширина(см): </td>
        <td width="60"><div id="keyboardInp"><input type="text" name="inpShirina" id="inpShirina" /></div>
        </td>
        <td width="100">
        <div id="keyboardGor">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td title="1" ><a href="#"><img src="img/keyboard/g1.jpg"/></a></td>
            <td title="2" ><a href="#"><img src="img/keyboard/g2.jpg"/></a></td>
            <td title="3" ><a href="#"><img src="img/keyboard/g3.jpg"/></a></td>
            <td title="4" ><a href="#"><img src="img/keyboard/g4.jpg"/></a></td>
            <td title="5" ><a href="#"><img src="img/keyboard/g5.jpg"/></a></td>
          </tr>
          <tr>
            <td title="6"><a href="#"><img src="img/keyboard/g6.jpg"/></a></td>
            <td title="7"><a href="#"><img src="img/keyboard/g7.jpg"/></a></td>
            <td title="8"><a href="#"><img src="img/keyboard/g8.jpg"/></a></td>
            <td title="9"><a href="#"><img src="img/keyboard/g9.jpg"/></a></td>
            <td title="0"><a href="#"><img src="img/keyboard/g0.jpg"/></a></td>
          </tr>
        </table>
        </div></td>
      </tr>
    </table>

вот сам скрипт:

// изменение цвета при наведении на клаву цифр
$('#keyboardGor td').mouseover(function(){
	$(this).find('img').hide();
	});
$('#keyboardGor td').mouseout(function(){
	$(this).find('img').show();
	}); 

// передаем значение нажатой клавы
$('#keyboardGor td').click(function(){
	var znachKlava = $(this).attr('title');
	var znachInput = $('#inpShirina').val();
	
		if (znachInput >= 0 && znachInput < 100){
			znachInput = znachInput + znachKlava;
			}
		else {
			znachInput = 0;
			znachInput = znachKlava;
			}
	$('#inpShirina').val(znachInput);	
	
	});

//проверка значения input
  $('#inpShirina').keypress(function (e)  
    { 
      if( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57))
      {
       $('#errMsg').show('pulsate',['slow']).fadeOut(); 
        return false;
		}    
    }); 


// показ/скрытие клавы 
$('#inpShirinaTable').click (function(){
	$('#keyboardGor').show();
	});
$('#keyboardInp, #keyboardGor, #inpShirina').mouseout(function(){
	$('#keyboardGor').hide();
	});

Так вот у меня никак не получается сделать последнюю часть скрипта чтобы при клике на Input открывалась "клава"(таблица id="keyboardGor" позволяющая при нажатии ссылки передавать значение в input), а при увидении мышки со всей таблицы id="inpShirinaTable"(включая все то что в ней находится) она исчезала через какоето время :-?
Аналог ожидаемого есть тут www.renins.com в поле возраст и стаж.

можно вот так:

// показ/скрытие клавы 
$('#inpShirina').click (function(){
 $('#keyboardGor').stop().animate({"width":"show"});
});

$('#inpShirinaTable').mouseleave(function(){
  $('#keyboardGor').delay(1000).animate({"width":"hide"});
});

Спасибо огромное ! Все работает!