I am debugging a site that was previously developed (by another developer) which uses JQuery UI Tabs.

The tabs pretty much work as required, except for 1 thing. When you move the mouse out of the tab container the First tab should become selected. Currently which tab is selected (my mouseover) will remain selected when moving mouse from container.

Here is the basic structure:
Code HTML4Strict:
<div class="card_container">
<div class="tabswrap">
<ul class="tablink">
<li class="first">First Tab</li>
<li>Second Tab</li>
<li>Third Tab</li>
<li>Fourth Tab</li>
<li class="last">Fifth Tab</li>
<div class="clear"></div>
<div class="panes">
<div style="display: block;">First tab's content in here</div>
<div style="display: block;">Second tab's content in here</div>
<div style="display: block;">Third tab's content in here</div>
<div style="display: block;">Fourth tab's content in here</div>
<div style="display: block;">Fifth tab's content in here</div>

And the code (I believe that initialises this) is:
Code JavaScript:
$("ul.tablink").tabs("div.panes > div", {event:'mouseover'});

So, when you mouse over a tab, the respective "pane" becomes visible.

When you leave the container with the mouse, the most recently active tab/pane combination remains active. However we need (with jQuery) to make the first tab active (and its respective "pane" visible). Hope that makes sense.

Any help would be greatly appreciated.