Проблема с анимацией
 

Есть код анимации

<div id="kvad" style="position: absolute;top:15;width:50px;height:50px;background:#000"></div>
<script>
var b=document.getElementById("kvad");
var l =100;
function igb()
{
l+=100;
b.style.top=l;
}
if(l<500) {
maa=setInterval(igb,1000);
document.write(b.style.top);
}
else{
clearInterval(maa);
}
</script>

Как видите движение квадрата должно остановится при l>500, но почему-то l всегда равно 100
Пытался не объявлять ее перед функцией как глобальную переменную - это вообще приводит к тому, что квадрат стоит на месте.

Igbal,

<div id="kvad" style="position: absolute;top:15;width:50px;height:50px;background:#000;color:#FFFFFF"></div>
<script>
var b=document.getElementById("kvad");
var l = 100;
function igb()
{
l+=100;
b.style.top=l+"px";
b.innerHTML = l
if(l<500) {
window.setTimeout(igb,1000);

}}
igb()
</script>