Cycle plugin -- #nav a.activeSlide NOT working while using pager option

Cycle plugin -- #nav a.activeSlide NOT working while using pager option

Can anyone help me figure out WHY my a.activeSlide class isn't working?  My slideshow works great, but as it cycles, the movement through my images isn't showing up with the thumbnails in my #nav div.  I have a feeling it has to do with the pager option.  Any help?  Thank you in advance to all you experts!
 
Here is my code:
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Simple Solutions</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">-->
<link rel="stylesheet" href="/SimpleSolutions.css" type="text/css">
<link rel="stylesheet" href="/slideshow.css" type="text/css">
<style>
#nav {clear:left;width:600px;margin:15px;}
#nav li {width:40px; float: left;margin:0 15px 0 15px; list-style: none }
#nav a {background:#99CC33;padding:2px;border:1px solid #3D626D;width:50px;display:block;text-decoration: none;}
#nav a.activeSlide {background:black;padding:2px; }
#nav a:focus {outline: none;}
#nav img {border:none; display:block;width:50px;height:50;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript">

















$(document).ready(function(){
 $("#mainContentRight img").hover(function(){
 $(this).fadeTo("slow",0.5);
 },function(){
 $(this).fadeTo("slow",1.0);
 }); //end hover
 
 $.fn.customFadeTo = function(speed,to,callback) {
  return this.animate({opacity: to}, speed, function() {
   if (to == 1 && jQuery.browser.msie)
    this.style.removeAttribute('filter');
   if (jQuery.isFunction(callback))
    callback();
  });
 };
 
 $('#slideshow').after('<id="nav">').cycle({
  fx: 'fade',
  speed: 2000,
  delay: 4000,
  pause: 1,
  pager: '#nav',
  pagerEvent: 'mouseover',
  pauseOnPagerHover: true,
  autostop:2,
  // callback fn that creates a thumbnail to use as pager anchor
     before:function() {
      $('#caption').html(this.alt);
     },
  pagerAnchorBuilder: function(idx, slide) {
        return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
     }
  }); //end cycle
});//end dom
</script>
</head>
<body>
<div id="wrapper">
 <div id="leftHeader">
 </div>
 <div id="rightHeader"><img class="logo" src="/Images/Logo.png" alt="Simple Solutions">
 </div>
 <div id="sidebar">
  <div id="navMenu">
  <li><a style="background:transparent url(Images/arrow.png);" href="/index.htm"><img src="/Images/home.png" alt="Home" /></a></li>
    <li><a href="/aboutUs.htm"><img src="/Images/aboutUs.png" alt="About Us" /></a></li>
    <li><a href="/services.htm"><img src="/Images/services.png" alt="Services" /></a></li>
    <li><a href="/seniors.htm"><img src="/Images/seniors.png" alt="Seniors" /></a></li>
        <li><a href="/contactUs.htm"><img src="/Images/contactUs.png" alt="Contact Us" /></a></li>
   </div>
 </div>
 <div id="content">
 <div id="mainContentLeft">
 <h1 style="font-size:130%;">"The one-stop shop for the small business or home-based entrepreneur"</h1>
  
  <div id="slideshow" class="pics">
  <img src="images/eNewsletter.png" alt="The e-Newsletter is a very cost-effective communication channel with your clients and encourages increased website traffic." />
  <img src="images/webSample2Home.png" alt="A well designed website draws the visitor's attention to important information and links.  Creating a 'user-friendly' website
  is essential to promoting a positive web experience while encouraging visitors to visit often."/>
  <img src="images/customDatabaseHome.png" alt="Data is useless unless it can be organized.  Organizing the masses of data we collect in an efficient manner
  necessitates the need for a well designed database."/>
  <img src="images/videoTutorialHome.png" alt="Video tutorial is a fantastic way to deliver information on a new product"/>
  <img src="images/softwareSupportHome" alt="Looking for an efficient and economical solution for understanding your software and what it can do for your business?
  Simple Solutions delivers an easy to follow video clearly defining the answer to your software questions."/>
  
  </div> <!--close slideshow-->
  <div id="caption"></div>
  <div id="nav"></div>
  
  
 </div> <!--maincontentleft end-->
 <div id="mainContentRight">
 
 <a href="consulting.htm"><img src="Images/consultingTraining.png" border="0"></a>
 <a href="webDesign.htm"><img src="Images/webDesignTEST.png" border="0"></a>
 <a href="customDatabases.htm"><img src="Images/customDatabasesTEST.png" border="0"></a>
    <a href="videoTutorial.htm"><img src="Images/videoTutorialTEST.png" border="0"></a>
 <a href="supportContract.htm"><img src="Images/softwareSupport.png" border="0"></a>
 <a href="eNewsletter.htm"><img src="Images/eNewsletterDesign.png" border="0"></a>
    </div>
  <!--maincontentright end-->
 </div><!--content end-->
   <div id="footer">
 <p>Any questions? Please contact Simple Solutions at <span class="emaillink"><a href="mailto:leslie@simplesolutions@verizon.net">leslie@SimpleSolutionsForComputing.com</a></span>
 </div> <!--footer end-->



















































































</div><!--wrapper end-->
</body>
</html>