[Resolvido] dockMenu com JavaScript e JQuery

Boa Tarde... depois de uma longa semana procurando algo bom para colocar de menu no meu site, achei algo bem lega, interessante e dificil.

Passei a semana toda procurando arrumar os probleminhas e até mesmo procurando outras formas de se fazer a mesma coisa.

O que eu havia achado não funciona também (para variar), então resolvi postar aqui o código que eu peguei com as alterações JS que fiz.

Abaixo está o JS que peguei que esta funcionando certinho:

 var dock = function (dock, sMin, sMax) {
 /* ---- private vars ---- */
 var xm = xmb = ov = 0;
 var M = true;
 var icons = document.getElementById(dock).getElementsByTagName('img');
 var N = icons.length;
 var s = sMin;
 var ovk = 0;
 var addEvent = function (o, e, f) {
 if (window.addEventListener) o.addEventListener(e, f, false);
 else if (window.attachEvent) r = o.attachEvent('on' + e, f);
 }
 var pxLeft = function(o) {
 for(var x=-document.documentElement.scrollLeft; o != null; o = o.offsetParent) x+=o.offsetLeft;
 return x;
 }
 for(var i=0;i<N;i++) {
 var o = icons[i];
 o.style.width = sMin+"px";
 o.style.height = sMin+"px";
 o.className = "dockicon";
 }
 var run = function() {
 for(var i=0;i<N;i++) {
 var o = icons[i];
 var W = parseInt(o.style.width);
 if(ov && ov.className=="dockicon") {
 if(ov!=ovk){
 ovk=ov;
 document.getElementById("legend").innerHTML = ov.lang;
 }
 if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin);
 s = Math.min(sMax,s+.5);
 } else {
 s = Math.max(s-.5,sMin);
 W = Math.max(W-N,sMin);
 }
 o.style.width = W+"px";
 o.style.height = W+"px";
 }
 if(s >= sMax) M = false;
 }
 addEvent(document, 'mousemove', function (e) {
 if(window.event) e=window.event;
 xm = (e.x || e.clientX);
 if(xm!=xmb){
 M = true;
 xmb = xm;
 }
 ov = (e.target)?e.target:((e.srcElement)?e.srcElement:null);
 });
 setInterval(run, 16);
 };

 window.onload = function() {
 dock("dock", 48, 80);
 }

E o menu em si no HTML:

<div id="dock">
 <a href="#"><img src="@Url.Content("~/img/menu/calendario.png")" lang="Agenda" ></a>
 <a href="#"><img src="@Url.Content("~/img/menu/consulta.png")" lang="Consulta"></a>
 <a href="#"><img src="@Url.Content("~/img/menu/produto.png")" lang="Produto"></a>
 <a href="#"><img src="@Url.Content("~/img/menu/paciente.png")" lang="Paciente"></a>
</div>
<div id="legend"></div>

Sim está funcionando tudo e voc~e me pergunta: "Então se esta funcionando o que você esta fazendo aqui?"

E eu lhe respondo que estou aqui pelo motivo de que quando eu clicar em cima do link do menu gostaria que na legenda ficasse fixo o local que estou. Exemplo: Clico em Consulta e na legenda fica aparecendo "Consulta". O que não esta acontecendo.

Abaixo esta o codigo em JS utilizando JQuery que tentei fazer:

$(document).ready(function () {
 $("div#dock a").each(function () {
 var urlLink = location.pathname;
 var navAtual = $(this);
 urlLink = urlLink.split('/');
 urlLink = "/" + urlLink[1] + "/" + urlLink[2];
 if ($(this).attr('href') == urlLink) {
 $(document).ready(function () {
 $("div#dock a").click(function () {
 $(urlLink).show("div#legend")
 });
 });
 }
 });
});

Estou chamando tudo certinho no HTML... Apenas que não fica na legenda o local onde estou.

Desde ja agradeço.