$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 800;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
	var loop = true;
	var autoSlide = true;
	var autoSlideDuration = 8000;

  // Remove scrollbar in JS
  $('#slidesContainer').css({
		'overflow':'hidden',
		'width':'800px'
	});

  // 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')
    .prepend('<span class="control" id="leftControl"></span>')
    .append('<span class="control" id="rightControl"></span>');

	if (!loop) {
		// Hide left arrow control on first load
	  manageControls(currentPosition);
	}

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
			autoSlide = false; // stop autoslide
			if (!$(this).hasClass('hidden'))
			{
				// Determine new position
		      currentPosition = ($(this).attr('id')=='rightControl')
		    ? currentPosition+1 : currentPosition-1;
					
				doSlide();
			}
    });
  // manageControls: Hides and shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').addClass('hidden') }
    else{ $('#leftControl').removeClass('hidden') }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').addClass('hidden') }
    else{ $('#rightControl').removeClass('hidden') }
  }

	
	function doSlide() {
		if (loop) {
			if(currentPosition >= numberOfSlides) currentPosition = 0; // send to start
			else if (currentPosition < 0) currentPosition = (numberOfSlides-1); // send to end
		} else {
			// Hide / show controls
      manageControls(currentPosition);
		}
		
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    }, 500);
	}
	

	function doAutoSlide(){
		if (autoSlide) {
			if (loop || (!loop && currentPosition < (numberOfSlides -1)))
			{
				currentPosition++;
				doSlide();
				setTimeout(doAutoSlide,autoSlideDuration);
			}
		}
	}
	
	if (autoSlide) setTimeout(doAutoSlide,autoSlideDuration);
	
});