$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 782;
  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 left and right arrow controls in the DOM
  $('#slideshow')
    .append('<span class="control" id="leftControl">Move left</span>')
    .append('<span class="control" id="rightControl">Move right</span>')
  	.everyTime('5s', 'slide', function() {slide('right');});

  // Create event listeners for .controls clicks
  $('#leftControl').bind('click', function(){ slide('left') });
  $('#rightControl').bind('click', function(){ slide('right') });

  function slide(direction) {
		$('#slideshow').stopTime('slide');

	  	// Determine new position
	    currentPosition = (direction == 'right') ? currentPosition+1 : currentPosition-1;

	    // Set current position to first/last slide if we hit the last/first slide
	    if(currentPosition < 0) {
	   	  currentPosition = numberOfSlides - 1;
	    }
	    if(currentPosition >= numberOfSlides) {
	   	  currentPosition = 0;
	    }
	        
	    // Move slideInner using margin-left
	    $('#slideInner').animate({'marginLeft' : slideWidth*(-currentPosition)}, 
	      function () {
	        $('#slideshow').everyTime('5s', 'slide', function() {slide('right');});
	      }
	    );
	  };

  });