Jquery slideshow with custom controls
===

I have created a jquery slideshow that already goes through the images fading in and out, however, I also need to add a behavior in which as the images fade in and out, there is a list of captions that need to:
1. add the class active whenever it's on the corresponding picture (ie. if the slideshow is on picture1, then the div under accordion should have class="link active"), and also be removed whenever the picture is not active.
2. I also need a click event for the slideshow to switch to the image when the user clicks on a link under the accordion div.

Thank you for any help that you can provide, it will be very much appreciated. Here is the code that I have so far:

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		<meta charset='UTF-8'>
    		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
    		<style>
    
    			#slideShowContainer{
    				margin: 50px auto; 
    			}
    			#slideshow { 
    			    position: relative; 
    			    width: 1000px; 
    			    height: 360px; 
    			    padding: 0; 
    			}
    
    			#slideshow > div { 
    			    position: absolute; 
    			}
    
    			#accordion{ 
    			    color:white;
    			    top:-36px;
    			    position:relative;
    			}
    
    			#accordion .link{
    				font-family: Arial;
    				font-size: 12px;
    				text-transform: uppercase;
    				font-weight:bold;
    				float:left;
    				text-align:center;
    				background: transparent url(blue_bkg.png) no-repeat top left;
    				height:26px;
    				padding-top:10px;
    			}
    
    			#accordion .active{
    				background: transparent url(green_bkg.png) no-repeat top left;
    			}
    
    		</style>
    
    		<script>
    			$(document).ready(function (){
    
    
    				var slideCount = $('.cont').length;
    				var slideShowWidth = $('#slideshow').width();
    				var captionWidth = slideShowWidth / slideCount;
    
    				$('#accordion .link').width(captionWidth);
    
    				$(function() {
    				
    					$('#slideshow > div:gt(0)').hide();
    					$('#accordion > div:first').addClass('active');
    					
    
    					setInterval(function() { 
    					  $('#slideshow > div:first')
    					    .fadeOut(1000)
    					    .next()
    					    .fadeIn(1000)
    					    .end()
    					    .appendTo('#slideshow');
    
    					
    
    					},  3000);
    					
    				});
    			});
    		</script> 
    
    
    		
    </head>
    <body>
    
    <div id="SlideShowContainer">
    	<div id="slideshow">
    	   <div class="cont"><img src="1.jpg"/></div>
    	   <div class="cont"><img src="2.jpg"/></div>
    	   <div class="cont"><img src="3.jpg"/></div>
    	   <div class="cont"><img src="4.jpg"/></div>
    	</div>
    
    	<div id="accordion">
    		<div class="link">Caption 1</div>
    		<div class="link">Caption 2</div>
    		<div class="link">Caption 3</div>
    		<div class="link">Caption 4</div>
    	</div>
    </div>
    </body>
    </html>

