$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  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 controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl"></span>')
    .append('<span class="control" id="rightControl"></span>');

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

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').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){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
});

/////////////////////////////////// comença SlideShow2 ///////////////////////

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide2');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer2').css('overflow', 'hidden');

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

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

  // Insert controls in the DOM
  $('#slideshow2')
    .prepend('<span class="control2" id="leftControl2"></span>')
    .append('<span class="control2" id="rightControl2"></span>');

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

  // Create event listeners for .controls clicks
  $('.control2')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl2') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner2').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){ $('#leftControl2').hide() } else{ $('#leftControl2').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl2').hide() } else{ $('#rightControl2').show() }
  }	
});

/////////////////////////////////// comença SlideShow3 ///////////////////////

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide3');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer3').css('overflow', 'hidden');

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

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

  // Insert controls in the DOM
  $('#slideshow3')
    .prepend('<span class="control3" id="leftControl3"></span>')
    .append('<span class="control3" id="rightControl3"></span>');

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

  // Create event listeners for .controls clicks
  $('.control3')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl3') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner3').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){ $('#leftControl3').hide() } else{ $('#leftControl3').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl3').hide() } else{ $('#rightControl3').show() }
  }	
});

/////////////////////////////////// comença SlideShow4 ///////////////////////

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide4');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer4').css('overflow', 'hidden');

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

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

  // Insert controls in the DOM
  $('#slideshow4')
    .prepend('<span class="control4" id="leftControl4"></span>')
    .append('<span class="control4" id="rightControl4"></span>');

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

  // Create event listeners for .controls clicks
  $('.control4')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl4') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner4').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){ $('#leftControl4').hide() } else{ $('#leftControl4').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl4').hide() } else{ $('#rightControl4').show() }
  }	
});

/////////////////////////////////// comença SlideShow5 ///////////////////////

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide5');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer5').css('overflow', 'hidden');

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

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

  // Insert controls in the DOM
  $('#slideshow5')
    .prepend('<span class="control5" id="leftControl5"></span>')
    .append('<span class="control5" id="rightControl5"></span>');

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

  // Create event listeners for .controls clicks
  $('.control5')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl5') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner5').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){ $('#leftControl5').hide() } else{ $('#leftControl5').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl5').hide() } else{ $('#rightControl5').show() }
  }	
});

/////////////////////////////////// comença SlideShow7 ///////////////////////

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide7');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer7').css('overflow', 'hidden');

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

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

  // Insert controls in the DOM
  $('#slideshow7')
    .prepend('<span class="control7" id="leftControl7"></span>')
    .append('<span class="control7" id="rightControl7"></span>');

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

  // Create event listeners for .controls clicks
  $('.control7')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl7') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner7').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){ $('#leftControl7').hide() } else{ $('#leftControl7').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl7').hide() } else{ $('#rightControl7').show() }
  }	
});

/////////////////////////////////// comença SlideShow8 ///////////////////////

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide8');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer8').css('overflow', 'hidden');

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

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

  // Insert controls in the DOM
  $('#slideshow8')
    .prepend('<span class="control8" id="leftControl8"></span>')
    .append('<span class="control8" id="rightControl8"></span>');

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

  // Create event listeners for .controls clicks
  $('.control8')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl8') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner8').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){ $('#leftControl8').hide() } else{ $('#leftControl8').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl8').hide() } else{ $('#rightControl8').show() }
  }	
});

/////////////////////////////////// comença SlideShow12 ///////////////////////

$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide12');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer12').css('overflow', 'hidden');

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

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

  // Insert controls in the DOM
  $('#slideshow12')
    .prepend('<span class="control12" id="leftControl12"></span>')
    .append('<span class="control12" id="rightControl12"></span>');

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

  // Create event listeners for .controls clicks
  $('.control12')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl12') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner12').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){ $('#leftControl12').hide() } else{ $('#leftControl12').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl12').hide() } else{ $('#rightControl12').show() }
  }	
});