var currentPosition = 0;
var slideWidth = 0;
var slides = null;
var numberOfSlides = 0;

$(document).ready(function(){
  
  currentPosition = 0;
  slideWidth = 790; // $('.slide:first').css('width').split('px')[0];
  slides = $('.slide');
  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) );

	$('#slideshow_nav span').each(function(spanCount) 
	{ 
		$(this).bind('click mouseenter',function() {
			// Move slideInner using margin-left
			$('#slideInner').animate({
			  'marginLeft' : slideWidth*(-spanCount)
			});
			
			//loop through spans, remove active class
			$('#slideshow_nav span').removeClass('active');
						
			//set triggered span active
			$(this).addClass('active');		
		});
		

		if (spanCount == 0) {
			$(this).addClass('active');
		}	
	});

});