jQuery(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 650;
  var slides = jQuery('.slide-1');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  jQuery('#slidesContainer-1').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner-1"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  jQuery('#slideInner-1').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  jQuery('#slideshow-1')
    .prepend('<a class="control-1" id="leftControl-1">Clicking moves left</a>')
    .append('<a class="control-1" id="rightControl-1">Clicking moves right</a>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  jQuery('.control-1')
    .bind('click', function(){
    // Determine new position
	currentPosition = (jQuery(this).attr('id')=='rightControl-1') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    jQuery('#slideInner-1').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ jQuery('#leftControl-1').hide() } else{ jQuery('#leftControl-1').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ jQuery('#rightControl-1').hide() } else{ jQuery('#rightControl-1').show() }
  }	
});

jQuery(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 650;
  var slides = jQuery('.slide-2');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  jQuery('#slidesContainer-2').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner-2"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  jQuery('#slideInner-2').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  jQuery('#slideshow-2')
    .prepend('<a class="control-2" id="leftControl-2">Clicking moves left</a>')
    .append('<a class="control-2" id="rightControl-2">Clicking moves right</a>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  jQuery('.control-2')
    .bind('click', function(){
    // Determine new position
	currentPosition = (jQuery(this).attr('id')=='rightControl-2') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    jQuery('#slideInner-2').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ jQuery('#leftControl-2').hide() } else{ jQuery('#leftControl-2').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ jQuery('#rightControl-2').hide() } else{ jQuery('#rightControl-2').show() }
  }	
});

jQuery(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 650;
  var slides = jQuery('.slide-3');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  jQuery('#slidesContainer-3').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner-3"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  jQuery('#slideInner-3').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  jQuery('#slideshow-3')
    .prepend('<a class="control-3" id="leftControl-3">Clicking moves left</a>')
    .append('<a class="control-3" id="rightControl-3">Clicking moves right</a>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  jQuery('.control-3')
    .bind('click', function(){
    // Determine new position
	currentPosition = (jQuery(this).attr('id')=='rightControl-3') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    jQuery('#slideInner-3').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ jQuery('#leftControl-3').hide() } else{ jQuery('#leftControl-3').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ jQuery('#rightControl-3').hide() } else{ jQuery('#rightControl-3').show() }
  }	
});