$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 218;
  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) + ($('.slide').outerWidth(true))*2));

  // Insert left and right arrow controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Move left</span>')
    .append('<span class="control" id="rightControl">Move right</span>');

  // Manage the controls
  //manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
	  if ((currentPosition < 4) && ($(this).attr('id')=='leftControl')) {
		// Set position to show the last elements
			currentPosition = (currentPosition == 0)
			? (numberOfSlides - 4) : 0;
	  } else if (((numberOfSlides - currentPosition) < 8) && ($(this).attr('id')=='rightControl')) {
		// Set position to show the last elements
		  currentPosition = ((numberOfSlides - currentPosition )== 4)
		  ? 0 : (currentPosition + ((numberOfSlides) - (currentPosition + 4)));
	  } else {
		// Determine new position
		  currentPosition = ($(this).attr('id')=='rightControl')
		? currentPosition + 4 : currentPosition - 4;
	  }

      // Hide / show controls
      manageControls(currentPosition);
      // Move slideInner using margin-left
      $('#slideInner').animate({
        'marginLeft' : (slideWidth + 12)*(-currentPosition)
      });
    });
	
  // manageControls: Hides and shows controls depending on currentPosition
  function manageControls(position){
	/*
    // Hide left arrow if position is first slide
    if(position==0){ $('#leftControl').hide() }
    else{ $('#leftControl').show() }
    // Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() }
    else{ $('#rightControl').show() }
	*/
	
	$('#leftControl').show()
	$('#rightControl').show()
    }
  });