Nested jQuery UI Tabs back button history

Question

I'm using the jQuery Address plug-in to make my jQuery UI tabs bookmarkable and compliant to back button history. Works great.

However, I was wondering if it was possible to do provide the same sort of 'deep linking' for nested tabs? E.g., I have the following:

<div id="tabs">
 <ul class="links">
  <li><a href="#one">main tab one</a></li>     
  <li><a href="#two">main tab two</a></li>
  <li><a href="#three">main tab three</a></li>
  <li><a href="#four">main tab four</a></li>
 </ul>
 <div id="one">  Main tab one content </div> 
 <div id="two">
  Main tab two content 
  <div id="nested">
   <ul>
    <li><a href="#nestedone">nested tab one</a></li>
    <li><a href="#nestedtwo">nested tab two</a></li>
    <li><a href="#nestedthree">nested tab three</a></li>
   </ul>
   <div id="nestedone"> nested tab one </div>
   <div id="nestedtwo"> nested tab two </div>
   <div id="nestedthree"> nested tab three </div>
  </div> <!-- end nested -->
 </div> 
 <div id="three">  Main tab three content </div> 
 <div id="fout">  Main tab four content </div> 
</div> <!-- end tabs -->


<script>
$(document).ready(function(){
   /* main tabs stuff */
   var $tabs = $("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
   $("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');

   /* nested tabs */
   var $nested = $("#nested").tabs().addClass('ui-tabs-hz');
   $("#nested ul").removeClass('ui-tabs-nav');

   /* show the hash's tab whenever the address is changed */
   $.address.change(function(event){               
      $("#tabs").tabs( "select" , window.location.hash ) ;  
   })

   /* when the tab is selected update the url with the hash */
   $("#tabs").bind("tabsselect", function(event, ui) {          
      window.location.hash = ui.tab.hash;                           
   })
});
</script>

Everything works perfectly for the main (outer tabs):

• the tab's href link gets put on the URL as a has correctly
• outer tabs obey the browser's back and forward buttons
• outer tabs are bookmark-able

However, I can't seem to get the same type of functionality for the inner tabs.

Given the nested tabs are contained in one of the 'main' tabs, the above bind function above sees $(this) as being the outer tab (even when an nested tab is clicked). The result is the JavaScript code executes correctly for the nested tab, but then executes as if the last main (outer) tab was the tab selected.

I can't seem to figure out how to stop the JavaScript from executing after the nested tab has been processed and before the last main (outer) tab is run. The closest I can get is the adding the following to the bind function and stop the execution on the outer tab containing the nested tabs.

   $("#tabs").bind("tabsselect", function(event, ui) {          
      if ($(ui.tab).closest('div').attr('id') !== "nested") {
         window.location.hash = ui.tab.hash; 
      }                     
   })

I'm sure I'm missing something obvious. Any suggestions?

Thanks!