Jquery Image Slider with Margin Issues

Question

View a live example here http://ninjaparadise.co.cc/ , you click it to the right it goes fine but when you click it to the left then you see whats wrong..

Heres the javascript code i use

/* Slideshow

*/

$(document).ready(function() {

 slideshow_loading = true;

 slideshow_busy = true;

 current_slide = 1;

 slideshow_loop_interval = 0;

 total_slideshow_images = $('#slideshow-thumbs li').length;

 add_action('slideshow_after_preload', slideshow_ready );

 slideshow_init();

 slideshow_clicks();

 slideshow_preload();

});

function slideshow_init() {

 clicked_by_loop = false;

 // Resize Slideshow Wrapper

 $('#slideshow .wrap').height(610);

 // Add current slide reflection

 $('#current-slide').reflect({
  height: 150,
  opacity: 0.4
 });

 $('#slideshow').css('marginBottom', '-150px');

 // Separate chunks of thumbnails

 $('#slideshow-thumbs li').each(function(i) {

  var c = i+1;

  if ( c % 6 == 0 ) {

   $(this).css('marginRight', '50px');

  }

 });

 // Slideshow thumbs reflection

 $('#slideshow-thumbs li img').reflect({
  height: 24,
  opacity: 0.3
 });

 // Slideshow video frame reflection

 $('#slideshow .wrap #slideshow-video-reflection img').reflect({
  height: 60,
  opacity: 0.3
 });

 // Add rel=index to slideshow thumbs

 $('#slideshow-thumbs li a').each(function(i) {

  $(this).attr('rel', i);

 });

 // Configure Slideshow Mode

 slideshow_transition_init();

 // Configure hover & clickevent for #slideshow-video (only image, excluding the map)

 if ( slideshow_add_permalink ) {

  $('#slideshow-video, #current-slide')
  .hover(function() { $(this).css('cursor', 'pointer'); }, function() { $(this).css('cursor', 'default'); })
  .click(function() {

   var href = $('#slideshow-meta .meta-name').attr('href');

   window.location = href;

  });

 }

 // Slideshow Keyboard Shortcuts

 $(document).keyup(function(e) {

  //alert(e.keyCode);

  switch ( e.keyCode ) {

   case 39: // Right Key

    if ( slideshow_busy ) { return false; }

    if ( NOT_IE ) {
     $('#slideshow-right a').stop().animate({opacity: 1}, slideshow_transition_delay*0.5).animate({opacity: 0}, slideshow_transition_delay*0.5);
    } else {
     $('#slideshow-right a').css('visibility', 'visible');
     setTimeout(function() { $('#slideshow-right a').css('visibility', 'hidden'); }, slideshow_transition_delay*0.5);
    }

    $('#slideshow-right a').click();

    break;

   case 37: // Left Arrow

    if ( slideshow_busy ) { return false; }

    if ( NOT_IE ) {
     $('#slideshow-left a').stop().animate({opacity: 1}, slideshow_transition_delay*0.5).animate({opacity: 0}, slideshow_transition_delay*0.5);
    } else {
     $('#slideshow-left a').css('visibility', 'visible');
     setTimeout(function() { $('#slideshow-left a').css('visibility', 'hidden'); }, slideshow_transition_delay*0.5);
    }

    $('#slideshow-left a').click();

    break;

  }

 });

 // If Slideshow has no posts, remove loading indicator

 if ( slideshow_images.length > 0 ) {

  $('#slideshow-thumbs-container span.loading').css('visibility', 'visible');

 }

}


function slideshow_clicks() {

 // Thumbnail controls Click Event

 slideshow_thumbs_easing = 'easeOutSine';

 slideshow_thumbs_scroll_time = 700;

 $('#slideshow-thumb-left, #slideshow-thumb-right').click(function() {

  /* Exit event if Slideshow is loading, or Slideshow UI is busy, or No Images in Slideshow */

  if ( slideshow_loading || slideshow_busy || total_slideshow_images == 0 ) {return false;}

  slideshow_busy = true; /* Lock slideshow interface */

  var where = $(this).attr('rel');

  var left_coord = $('#slideshow-thumbs').css('left');

  left_coord = (parseInt(left_coord.replace('px', '')));

  var x = 811; // Total offset distance between spans

  switch ( where ) {

   case 'left':

    if ( left_coord == 49 ) {

     // Left limit reached

     var t1 = 100;

     var t2 = 80;

     $('#slideshow-thumbs').stop().animate({left: '63px'}, t1).animate({left: '49px'}, t2);

     setTimeout(function() {

      slideshow_busy = false;

     }, t1+t2+50); // Add 50 miliseconds offset, to prevent bad behavior on rapid clicks

     return false;

    } else {

     // Scroll left

     var next_coord = x - left_coord;

     var t = slideshow_thumbs_scroll_time;

     $('#slideshow-thumbs').stop().animate({left: next_coord + 'px'}, t, slideshow_thumbs_easing);

     setTimeout(function() {

      slideshow_busy = false;

     }, t);

     return false;

    }

    break;

   case 'right':

    var next_coord = left_coord - x;

    var right_limit = Math.abs( ( Math.floor( (total_slideshow_images - 1 ) / 6 ) * x ) - 49 );

    if ( left_coord < right_limit ) {

     // Scroll right

     var t = slideshow_thumbs_scroll_time;

     $('#slideshow-thumbs').stop().animate({left: next_coord + 'px'}, t, slideshow_thumbs_easing);

     setTimeout(function() {

      slideshow_busy = false;

     }, t);

     return false;

    } else {

     // Right limit reached

     var t1 = 100;

     var t2 = 80;

     if ( total_slideshow_images > 6 ) {

      $('#slideshow-thumbs').stop().animate({left: '-' + left_coord - 14 + 'px'}, t1).animate({left: '-' + left_coord + 'px'}, t2);

     } else {

      $('#slideshow-thumbs').stop().animate({left: '35px'}, t1).animate({left: '49px'}, t2);

     }

     setTimeout(function() {

      slideshow_busy = false;

     }, t1+t2+50);  // Add 50 miliseconds offset, to prevent bad behavior on rapid clicks

     return false;

    }

    break;

  }

 });


 // Thumbnails Click Event

 $('#slideshow-thumbs li a').click(function(evt) {

  /* Exit event if Slideshow is loading, or Slideshow UI is busy, or No Images in Slideshow */

  if ( slideshow_loading || slideshow_busy || total_slideshow_images == 0 ) {return false;}

  slideshow_busy = true;

  if ( evt.which == 1 ) {

   /* evt.which is 1 when clicked, undefined when triggered by click();
    * http://api.jquery.com/category/events/event-object/ */

   clearInterval(slideshow_loop_interval);

  }

  var rel = parseInt( $(this).attr('rel') );

  var next = rel;

  if ( current_slide == ( rel + 1 ) ) { slideshow_busy = false; return false;} // Exit event if it's the same slide

  current_slide = rel + 1;

  slideshow_fade_transition(next, evt);

  return false;

 });

}

function slideshow_preload() {

 var counter = 0;

 var total_images = slideshow_images.length;

 do_action('slideshow_before_preload');

 $.cacheImage(slideshow_images, {
  load  : function(e) {counter += 1;},
  error  : function(e) {total_images -= 1;},
  complete : function(e) {
   if ( counter == total_images ) {

    //setTimeout(function() {
     slideshow_loading = false;
     do_action('slideshow_after_preload');
    //},2000);

   }
  }

 });

}

function slideshow_ready() {

 var t = 500;

 $('#slideshow-thumbs-container span.loading').fadeOut(t);

 setTimeout(function() {

  $('#slideshow-thumbs').stop().animate({left: '49px'}, t+100, 'easeOutExpo');

  // Enable slideshow video frame

  if ( total_slideshow_images > 0 ) {

   var video = slideshow_meta[0]['video'];

   if ( video != '' ) {

    $('#slideshow-video-trigger, #slideshow map area').attr('href', video);

    if ( NOT_IE ) {
     $('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').fadeIn(t+100);
    } else {
     $('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').show();
    }

   }

  }

  setTimeout(function() {

   slideshow_busy = false; // Unlock the Slideshow UI

   slideshow_loop();

  }, t+120);

 }, t+20 );

}

function slideshow_thumbs_autoscroll(next, rel) {

 /* Do nothing if nothign to scroll */

 if ( total_slideshow_images <= 6 ) { return false; }

 switch( rel ) {

  case 1:

   // Slide Right

   if ( current_slide % 6 == 0 || current_slide == total_slideshow_images ) {

    if ( next != 0 ) {

     // Scroll right

     slideshow_busy = false;

     $('#slideshow-thumb-right').click();

     return false;

    } else {

     // Go to the beginning

     slideshow_busy = true;

     $('#slideshow-thumbs').stop().animate({left: '49px'}, slideshow_thumbs_scroll_time, slideshow_thumbs_easing);

     setTimeout(function() {

      slideshow_busy = false;

     }, slideshow_thumbs_scroll_time + 50);

     return false;

    }

   }

   break;

  case -1:

   // Slide Left

   if ( (current_slide - 1 ) % 6 == 0 ) {

    if ( current_slide == 1 ) {

     // Go to the end

     slideshow_busy = true;

     var x = 811;

     var right_limit = Math.abs( ( Math.floor( (total_slideshow_images - 1 ) / 6 ) * x ) - 49 );

     $('#slideshow-thumbs').stop().animate({left: '-' + right_limit + 'px'}, slideshow_thumbs_scroll_time, slideshow_thumbs_easing);

     setTimeout(function() {

      slideshow_busy = false;

     }, slideshow_thumbs_scroll_time + 50);

     return false;

    } else {

     // Scroll left

     slideshow_busy = false;

     $('#slideshow-thumb-left').click();

     return false;

    }

   }

   break;

 }

}

function slideshow_transition_init() {

 $('#slideshow-left a, #slideshow-right a').click(function(evt) {

  /* Exit event if Slideshow is loading, or Slideshow UI is busy, or No Images in Slideshow */

  if ( slideshow_loading || slideshow_busy || total_slideshow_images == 0 ) {return false;}

  slideshow_busy = true;

  if ( evt.which == 1 ) {

   /* evt.which is 1 when clicked, undefined when triggered by click();
    * http://api.jquery.com/category/events/event-object/ */

   clearInterval(slideshow_loop_interval);

  }

  var rel = parseInt( $(this).attr('rel') );

  var next = cycle(rel, current_slide, total_slideshow_images) - 1;

  slideshow_thumbs_autoscroll(next, rel);

  current_slide = next + 1;

  slideshow_fade_transition(next, evt);

  return false;

 });

}

function slideshow_fade_transition(next, evt) {

 // Add slideshow video (if any)

 var video = slideshow_meta[next]['video'];

 if ( video == '' ) {

  if ( NOT_IE ) {
   $('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').fadeOut(slideshow_transition_delay);
  } else {
   $('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').hide();
  }

 } else {

  $('#slideshow-video-trigger, #slideshow map area').attr('href', video);

  if ( NOT_IE ) {
   $('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').fadeIn(slideshow_transition_delay);
  } else {
   $('#slideshow .wrap #slideshow-video, #slideshow .wrap #slideshow-video-reflection').show();
  }

 }

 // Configure Transition

 var title = $( slideshow_meta[next]['title'] );

 var category = slideshow_meta[next]['category'];

 $('#slideshow .wrap').append('<img alt="" width="960" height="460" class="below" src="' + slideshow_images[next] + '" />');

 $('#slideshow .wrap .below').reflect({height: 150, opacity: 0.4});

 var t = slideshow_transition_delay;

 $('#slideshow .wrap .above').stop().fadeOut(t);

 $('#slideshow .wrap .below').stop().fadeIn(t);

 $('#slideshow-thumbs li.active').removeClass('active');

 $('#slideshow-thumbs li a[rel=' + next + ']').parents('li').addClass('active');

 $('#slideshow-meta .meta-name, #slideshow-meta .meta-category').stop().animate({opacity: 0}, t*0.5);

 setTimeout(function() {

  $('#slideshow-meta .meta-name').html( title.html() ).attr('href', title.attr('href') );

  $('#slideshow-meta .meta-category').html( category );

  $('#slideshow-meta .meta-name, #slideshow-meta .meta-category').stop().animate({opacity: 1}, t*0.5);

 }, t*0.3);

 setTimeout(function() {

  $('#slideshow .wrap .above').remove();

  $('#slideshow .wrap .below').removeClass('below').addClass('above');

  slideshow_busy = false;

  if ( slideshow_add_permalink ) {

   $('#slideshow .wrap .above')
   .hover(function() { $(this).css('cursor', 'pointer'); }, function() { $(this).css('cursor', 'default'); })
   .click(function() { var href = $('#slideshow-meta .meta-name').attr('href'); window.location = href; });

  }

  if ( evt.which == 1 ) {

   // Reinitiate loop if control buttons clicked

   slideshow_loop();

  }

 }, t+10);

}

function slideshow_loop() {

 if ( slideshow_loop_enabled == false ) { return false; }

 slideshow_loop_interval = setInterval(function() {

  $('#slideshow-right a').stop().animate({opacity: 1}, slideshow_transition_delay*0.5).animate({opacity: 0}, slideshow_transition_delay*0.5);

  $('#slideshow-right a').click();

 }, slideshow_loop_time * 1000 );

}