jQuery Isotope with BBQ Hash History - highlight t

Question

I have a verry simple test page using the excellent Isotope and BBQ jQuery plugins.

The combination of the two plugins works well, but I cannot figure out how to get the active category link to highlight when clicking the back button.

Here is my HTML:

<div id="wrapper">

<div id="sidebar">

<ul class="nav">
<li><a href="#filter=*" class="selected">All</a></li>
<li><a href="#filter=.red">Red</a></li>
<li><a href="#filter=.orange">Orange</a></li>
<li><a href="#filter=.yellow">Yellow</a></li>
<li><a href="#filter=.green">Green</a></li>
<li><a href="#filter=.blue">Blue</a></li>
<li><a href="#filter=.black">Black</a></li>
</ul>

</div>

<div id="gallery">

<div class="box red" style="background-color:red;"></div>
<div class="box orange" style="background-color:orange;"></div>
<div class="box yellow" style="background-color:yellow;"></div>
<div class="box green" style="background-color:green;"></div>
<div class="box blue" style="background-color:blue;"></div>
<div class="box black" style="background-color:black;"></div>
<div class="box blue" style="background-color:blue;"></div>
<div class="box green" style="background-color:green;"></div>
<div class="box red" style="background-color:red;"></div>
<div class="box black" style="background-color:black;"></div>
<div class="box green" style="background-color:green;"></div>
<div class="box orange" style="background-color:orange;"></div>            

</div>

</div>

and here is my script:

$(document).ready(function(){
  // cache container
  var $container = $('#gallery');
  // initialize isotope
  $container.isotope({
    // options
    filter: '*',
    animationOptions: {
      duration: 750,
      easing: 'linear',
      queue: false
    }
});


// FILTER

$('ul.nav a').click(function(){
  var selector = $(this).attr('data-filter');
  $container.isotope({ 
  filter: selector 
  });
  return false;
});


// HIGHLIGHT SELECTED MENU ITEM

  var $optionSets = $('ul.nav'),
  $optionLinks = $optionSets.find('a');

  $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
  var $optionSet = $this.parents('ul.nav');
  $optionSet.find('.selected').removeClass('selected');
  $this.addClass('selected'); 
});


// HASH HISTORY WITH JQUERY BBQ

$('ul.nav a').click(function(){
  // get href attr, remove leading #
  var href = $(this).attr('href').replace( /^#/, '' ),
  // convert href into object
  // i.e. 'filter=.inner-transition' -> { filter: '.inner-transition' }
  option = $.deparam( href, true );
  // set hash, triggers hashchange on window
  $.bbq.pushState( option );
  return false;
});

$(window).bind( 'hashchange', function( event ){
  // get options object from hash
  var hashOptions = $.deparam.fragment();
  // apply options from hash
  $container.isotope( hashOptions );
})
  // trigger hashchange to capture any hash data on init
  .trigger('hashchange');

});

Any help would be appreciated ???

I think the solution is not hard because the HTML code and the Isotope options are verry simple, but I'm not a webmaster.

Cheers