problem with jquery slide show

I have gallery page with different slideshows, every slideshow is connected to a different date, and when I click on a particular date the corresponding slide show will come up, the problem is that after viewing the first slide show and clicking the second slide show, the slide show doesn't start from the first slide, it shows from the previous slide number, I was wondering if anyone could help me fix this problem.thanks

Update: After setting the currentPosition = 0; I need to click on the right arrow to bring the slide to the first one,(that's because the .bind('click',function) that's connected to the arrow, so I was wondering how I can bring it to the first slide just by clicking on the appropriate gallery, the link to the site is link text

 <div id="gallery_page">
    <div class="slide">
      <span id="first"><p>King Baby Lunch Party</p></span>
      <span id="second"><p>Feb 2008</p></span>
    </div>
 </div&g开发者_如何学JAVAt;



<div id="main_gallery_pics_first">
     <div class="slide2">
        <img src="" />
     </div>
     <div class="slide2">
        <img src="" />
     </div>
     <div class="slide2">
        <img src="" />
     </div>
 </div>

 <div id="main_gallery_pics_second">
     <div class="slide3">
         <img src="images/people/miles.jpg" />
     </div>
     <div class="slide3">
         <img src="images/people/dal.jpg" />
     </div>
 </div>


$(document).ready(function(){

  var currentPosition = 0; 
  var slideWidth2 = 475;
  var slideWidth3 = 475;
  var slides2 = $('.slide2');
  var slides3 = $('.slide3');
  var numberOfSlides2 = slides2.length;
  var numberOfSlides3 = slides3.length;

  function hide() {
    $('#main_gallery_pics_first,#main_gallery_pics_second').hide();
  }
  //hide everything
  hide();

  //show first gallery on page load
  $('#main_gallery_pics_first').show();

  //show appropriate gallery when one is clicked
  var id;
  $('.slide span').click(function() {
    id = $(this).attr('id');
    hide();
    $('#main_gallery_pics_'+id).show();
  });


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

  // Wrap all .slides with #slideInner div
  slides2
  .wrapAll('<div id="slideInner2"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth2
  });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner2').css('width', slideWidth2 * numberOfSlides2);

   // Wrap all .slides with #slideInner div
  slides3
  .wrapAll('<div id="slideInner3"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth3
  });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner3').css('width', slideWidth3 * numberOfSlides3);


  // Insert left and right arrow controls in the DOM
  $('#main_content')
    .prepend('<span class="control2" id="left_arrow2">Move left</span>')
    .append('<span class="control2" id="right_arrow2">Move right</span>');


  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control2')
    .bind('click', function(){
    // Determine new position

      currentPosition = ($(this).attr('id')=='right_arrow2')
    ? currentPosition+1 : currentPosition-1;


      // Hide / show controls
      manageControls(currentPosition);
      // Move slideInner using margin-left

      $('#slideInner2').animate({
        'marginLeft' : slideWidth2*(-currentPosition)
      });


      $('#slideInner3').animate({
        'marginLeft' : slideWidth3*(-currentPosition)
      });

    });


  // manageControls: Hides and shows controls depending on currentPosition
  function manageControls(position){

    // Hide left arrow if position is first slide
    if(position==0){ $('#left_arrow2').hide() }
    else{ $('#left_arrow2').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides2-1){ $('#right_arrow2').hide() }
    else{ $('#right_arrow2').show() }
    }

  });

Just set currentPosition to 0 when you open a new gallery

$('.slide span').click(function() {
    //not needed actually
    //id = $(this).attr('id');

    //reset position and margins
    currentPosition = 0;
    $('#slideInner2').css('marginLeft' , 0);
    $('#slideInner3').css('marginLeft' , 0);

    hide();
    $('#main_gallery_pics_'+this.id).show();
});

Reset the currentposition variable when you start the new slideshow.