Solo reconoce el de la ultima iteracion

[reonevk]

Buenos dias amigos, tengo un codigo para la creacion de eventos al pasar el raton por encima de unas imagenes y no consigo establecer a un div llamado tooltipLayer las coordenadas de la imagen sobre la cual el raton esta encima, siempre aparecen calculando las de la imagen 10, que es la ultima en crearse, sin embargo el contenido html que le asigno si es correcto, es por ello que no entiendo porque por una parte si funciona que el div tenga distintos contenidos pero solo las coordenadas del ultimo. este es mi codigo:

--------------------------

function buildItems()
{
var elements = new Array();
for(cont = 1; cont <= 10; cont ++)
{
//create the imagen in the layer
var layer = '#itemLayer' + cont;
var nameItem = 'heroItem' + cont;
$(layer).html(heroInventory[cont].getImage(nameItem));
//create thelements for the evnets
//nameItem = '#' + nameItem

elements[cont] = heroInventory[cont].getTooltip();
}

jQuery.each(elements,function(i,itemInfo)
{
nameItem = '#heroItem' + i;
$(nameItem).mouseover(function()
{

//get the x,y coordinates
//--x--
var x = $(nameItem).offset().left;
if(x >= 340)
{
x -= 210; //coordenada X si sale a la izquierda
}else{
x += 80; //Get X coodrinates
}
//--y--
var y = $(nameItem).offset().top;
//set de coordinates on tooltipLayer
$("#tooltipLayer").css( "left",x );
$("#tooltipLayer").css( "top",y );

//set the tooltip in information
//...
$("#tooltipCenter").html(itemInfo);


//show the tooltipLayer
$("#tooltipLayer").show();
});
//+++++**mouseout**++++++
$(nameItem).mouseout(function()
{
$("#tooltipLayer").hide();
$("#tooltipCenter").html('<tr><td class="WhiteBold12" align="center">Cargando...</td></tr>');
});
});
}

----------------
a ver si alguien puede hecharme una mano, gracias.