menu Opcje

[mundek88]

Witajcie,
pootrzebuję pilnie stworzyć menu działające identycznie jak na http://mootools.net/ (chodzi o te kolorowe duże menu)
Jako że w JS jestem laikiem po kilku męcząych godzinach pracy napisałem coś takiego:

Kod

<script>
animeInt=null;
odlicz=0;
blokada=0;

function powieksz(ktore)
{
        if (blokada==0){
        odlicz++;
        
        // glowny
        objl=document.getElementById("element_"+ktore);
        objl.style.width = parseInt(objl.style.width) + 8 + 'px';    
        
        //nastepne
        for (i=ktore; i<4; i++){
        obj=document.getElementById("element_"+eval(ktore+i));
        obj.style.width = parseInt(obj.style.width) - 1 + 'px';  }

        animeInt=setTimeout("powieksz("+ktore+")", 3)
        }
        if (odlicz==10) {clearTimeout(animeInt); blokada=1;}  
        window.status=odlicz+", "+blokada;
}

function zmniejsz(ktore)
{  
        if (blokada==1){
        odlicz--;
        
        // glowny
        objl=document.getElementById("element_"+ktore);
        objl.style.width = parseInt(objl.style.width) - 8 + 'px';    

        
        //nastepne
        for (i=ktore; i<4; i++){
        objp=document.getElementById("element_"+eval(ktore+i));
        objp.style.width = parseInt(objp.style.width) + 1 + 'px';  }
        

        animeInt=setTimeout("zmniejsz("+ktore+")", 3)
        }    
        
        if (odlicz==0) { blokada=0; clearTimeout(animeInt);}  
        window.status=odlicz+", "+blokada;
}


</script>


    <font color=white>

<div id="element_4" class="menu"  style="float:left;  width:90px; position:relative; left:0px; background-color:black;"></div>

<div id="element_5" class="menu"  style="float:left;  width:90px; position:relative; left:0px; background-color:black;"></div>

<div id="element_6" class="menu"  style="float:left;  width:90px; position:relative; left:0px; background-color:black;"></div>



<table><tr>
<td id="element_0" class="menu" onmouseover="powieksz(0)" onmouseout="zmniejsz(0)" style=" width:90px; min-width:90px; background-color:white;">111111111</td>

<td id="element_1" class="menu" onmouseover="powieksz(1)" onmouseout="zmniejsz(1)" style=" width:90px; min-width:90px; background-color:white;">111111111</td>

<td id="element_2" class="menu" onmouseover="powieksz(2)" onmouseout="zmniejsz(2)" style=" width:90px; min-width:90px; background-color:white;">111111111</td>

<td id="element_3" class="menu" onmouseover="powieksz(3)" onmouseout="zmniejsz(3)" style=" width:90px; min-width:90px; background-color:white;">111111111</td>

</tr></table>

</font>

^ działanie skryptu odbiega od tego na którym się wzoruje.
Dlatego zwracam się do Was z ogromną prośbą pomocy.

Z góry serdcznie dziękuje i czekam na odpowiedź, pozdrawiam..