How to use JQuery functions in TAB Pages?

How to use JQuery functions in TAB Pages?

Hi,
I'm having an .aspx page with 8 tabs, i used CSS tabs and on each tab click respective <div> layers are loaded. In each tab i'm using JQuery slide show so i need to load 8 different dynamic image slideshows from the database in my .aspx page.
I did this for my first tab, everything has gone well, but when i'm trying to do the same for second tab, the second slide show is not working.
can anyone please help meo ut?
how can i use document.ready() function for 8 tabs?

Here is my CSS and JQuery Code.
<style type="text/css">

/**
* Slideshow style rules.
*/
#slideshow {
   margin:0 auto;
   margin-left:0px;
   margin-right:0px;
   width:750px;
   height:250px;
   border-style:solid;
   border-color:gray;
   border-width:0px;
   position:relative;
}
#slideshow #slidesContainer {
  margin:0 auto;
  margin-left:0px;
  margin-right:0px;
  width:750px;
  height:250px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  margin-left:0px;
  margin-right:10px;
  width:580px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:250px;
}




/**
* Slideshow controls style rules.
*/

.control {
  display:block;
  width:57px;
  height:265px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}

#leftControl {
  top:80;
  left:0;
  background:url(images/LeftYarrow.gif) no-repeat 0 0;
}

#rightControl {
  top:80;
  right:0;
  background:url(images/RightYarrow.gif) no-repeat 0 0;
}


.slide {
    padding: 0px;
   border: 1px solid #999;   
}

.slide img {
  float:left;
  padding-left:0px;
  margin-left:0px;
  margin-right:0px;
  margin-top:0px;
  margin-bottom:0px;
 
}



</style>


<script type="text/javascript" src="scripts/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 185;
  var slides = $('.slide');
  var numberOfSlides = slides.length;


  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');


  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
   .css({
      'float' : 'left',
      'width' : slideWidth
    });
   
     
  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slidesContainer')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
   
   
  // Hide left arrow control on first load
  //manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
   currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
   
   // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
   if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
   // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }   
});
</script>


i tried doing like this, as the DIV's are being used for the firstslideshow i changed the DIV layer names in my CSS and JQuery but it had not worked.
Thanks,
Pavan