Stylish Navigation Problem

[ptemedia]

Hi,

I have followed a tutorial to create a stylish new navigation for my portfolio, and then changing it to suit my needs.

This is the tutorial I used:

http://net.tutsplus.com/tutorials/javascript-ajax/a-different-top-navigation/#respond

I have moved the 'secondary links' below the primary links. I have 5 links (say 1,2,3,4 and 5 each with varying numbers of secondary links)

The different links do not go to different pages, they allow the user to change what data is shown on the page (clicking them does not refresh or change page).

The first link, 'Type', is active at the start (its a different colour and its links are visible)

I can then hover over the other links to show their links, but on unhover I would like the 'active' links to show again. But I am having problems with this.

This is the effect I am looking for: (the latest word, tutorials navigation part)

http://www.sohtanaka.com/web-design/2010/10/

Here is my javascript code. ('Type' is the first link)
hovactive works fine. This changes the css to show which item is being hovered over
alwaysactive is the one I'm having trouble with. This is initially the first option and is only changed by the user clicking an option. At the moment after I stop hovering over an item the sub-links go blank but do not show the 'alwaysactive' links.

$(document).ready(function () {

    $(Type).siblings(".sub-links").show();
    $(Type).addClass("hovactive");
    var alwaysactive = "Type";

    $("#main-nav li a.main-link").hover(function () {
        $("#main-nav li a.main-link").removeClass("alwaysactive");
        $("#main-nav li a.main-link").removeClass("hovactive");
        $(this).addClass("hovactive");
        $(".sub-links").hide();
        $(this).siblings(".sub-links").show();
    }, function(){
        $("#main-nav li a.main-link").removeClass("hovactive");
        $(".sub-links").hide();
        $(alwaysactive).siblings(".sub-links").show();
    });
   

    $("#main-nav li a.main-link").click(function () {
        alwaysactive = (this);
    });

});

I am sorry if this does not make much sense, but I am very grateful for any help.

Cheers, Patrick