$(document).ready(function()
{ 

  // Give an 'id' for the <a class='selected'> to keep track of it
  $("div#navigation-left ul li a.selected, div#navigation-top ul li a.selected").attr('id','selected');
  
  
  // for each <a> that don't have class 'selected'
  // bind an event 'mouseover'
  // in which i remove the the class 'selected' from <a class='selected'>
  $("div#navigation-left ul li a").each( function () {
    if($(this).hasClass('selected') == false)
    {
      $(this).bind("mouseover" , function() {
          $("div#navigation-left ul li a#selected").removeClass("selected");
      });
    }
  });
  
  $("div#navigation-top ul li a").each( function () {
    if($(this).hasClass('selected') == false)
    {
      $(this).bind("mouseover" , function() {
          $("div#navigation-top ul li a#selected").removeClass("selected");
      });
    }
  });
  
  
  // <a class='selected'> hover(over,out) event:
  // Add and Remove the class 'selected'      
  $("div#navigation-left ul li a#selected, div#navigation-top ul li a#selected").hover(
      // hover over
      function () {
        $(this).addClass("selected");
      }, 
      //hover out
      function () {
        $(this).removeClass("selected");
      }
    );
    
  
  // When the mouse is out of the menu restore the selected item  
  $("div#navigation-left").hover(
      // hover over
      function () {
        // do nothing
      }, 
      //hover out
      function () {
        // restore the selected class
        $("div#navigation-left ul li a#selected").addClass("selected");
      }
    );
    
    $("div#navigation-top").hover(
      // hover over
      function () {
        // do nothing
      }, 
      //hover out
      function () {
        // restore the selected class
        $("div#navigation-top ul li a#selected").addClass("selected");
      }
    );
});