Javascript-форум - перемещение картинки внутри элемента

Задача:картинка перемещается клавишами внутри элемента и не должна выходить за границы элемента.Есть функция на проверку пересечения границ элемента.Проблема в том,что я не могу привязать её к функции движения.Вот код:

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
#pole {
padding: 0;
margin: 0;
width: 300px;
height: 200px;
border: 1px solid black;
position:absolute;
background-image: url('fieldbg.jpg');
}
 </style>
<script type="text/javascript">
 //определение выхода за границы элемента.   
function borderColl() {
if (left < 0 || left > 272) {
dx = -dx;
}
if (top <= 0 || top >= 172) {
dy = -dy;
}
}


function move(e) {
    // Кросс-браузерное получение объекта событие:
    e = e || window.event;
     
    // Получаем keyCode:
    var keyCode = e.keyCode;
 
    // Берем элемент:
    var el= document.getElementById("Player");
 
    // Определяем нажатие клавиш "влево", "вверх"
    // "вправо" и "вниз", коды клавиш 37, 38, 39, 40:
    if (keyCode == 37) {
        el.style.left = parseInt(el.style.left || 0) - 2;
    } else if (keyCode == 38) {
        el.style.top = parseInt(el.style.top || 0) - 2;
    } else if (keyCode == 39) {
        el.style.left = parseInt(el.style.left || 0) + 2;
    } else if (keyCode == 40) {
        el.style.top = parseInt(el.style.top || 0) + 2;
    } else {
        // Если нажаты другие клавиши: выходим
        return;
    }
 
    // Отменяем действие по умолчанию:
    e.preventDefault(); // Gecko, ...
    e.returnValue = false; // IE
}
 
// Устанавливаем обработчик на весь документ:
document.onkeydown = move;

</script>
</head>
<body> 
<div id="pole">
<div style="position: absolute; left: 0; top: 0;" id="Player">
<img src="1.jpg">
</div>
</div>
</body>
</html>

Может кто подскажет,как привязать проверку к скрипту движения.