// JavaScript Document

$(document).ready(function(){
      var currentPosition = 0;
      var slideWidth = 737;
      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">Clicking moves left</span>')
        .append('<span class="control" id="rightControl">Clicking moves right</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() }
      }	
	  
	  ///for 2nd slider
	  
	  var currentPosition2 = 0;
      var slideWidth2 = 737;
      var slides2 = $('.slide2');
      var numberOfSlides2 = slides2.length;
    
      // Remove scrollbar in JS
      $('#slidesContainer2').css('overflow', 'hidden');
    
      // Wrap all .slides with #slideInner div
      slides2
        .wrapAll('<div id="slideInner2"></div>')
        // Float left to display horizontally, readjust .slides width
        .css({
          'float' : 'left',
          'width' : slideWidth2
        });
    
      // Set #slideInner width equal to total width of all slides
      $('#slideInner2').css('width', slideWidth2 * numberOfSlides2);
    
      // Insert controls in the DOM
      $('#slideshow2')
        .prepend('<span class="control2" id="leftControl2">Clicking moves left</span>')
        .append('<span class="control2" id="rightControl2">Clicking moves right</span>');
    
      // Hide left arrow control on first load
      manageControls2(currentPosition2);
    
      // Create event listeners for .controls clicks
      $('.control2')
        .bind('click', function(){
        // Determine new position
        currentPosition2 = ($(this).attr('id')=='rightControl2') ? currentPosition2+1 : currentPosition2-1;
        
        // Hide / show controls
        manageControls2(currentPosition2);
        // Move slideInner using margin-left
        $('#slideInner2').animate({
          'marginLeft' : slideWidth2*(-currentPosition2)
        });
      });
    
      // manageControls: Hides and Shows controls depending on currentPosition
      function manageControls2(position2){
        // Hide left arrow if position is first slide
        if(position2==0){ $('#leftControl2').hide() } else{ $('#leftControl2').show() }
        // Hide right arrow if position is last slide
        if(position2==numberOfSlides2-1){ $('#rightControl2').hide() } else{ $('#rightControl2').show() }
      }	

	  var currentPosition3 = 0;
      var slideWidth3 = 737;
      var slides3 = $('.slide3');
      var numberOfSlides3 = slides3.length;
    
      // Remove scrollbar in JS
      $('#slidesContainer3').css('overflow', 'hidden');
    
      // Wrap all .slides with #slideInner div
      slides3
        .wrapAll('<div id="slideInner3"></div>')
        // Float left to display horizontally, readjust .slides width
        .css({
          'float' : 'left',
          'width' : slideWidth3
        });
    
      // Set #slideInner width equal to total width of all slides
      $('#slideInner3').css('width', slideWidth3 * numberOfSlides3);
    
      // Insert controls in the DOM
      $('#slideshow3')
        .prepend('<span class="control3" id="leftControl3">Clicking moves left</span>')
        .append('<span class="control3" id="rightControl3">Clicking moves right</span>');
    
      // Hide left arrow control on first load
      manageControls3(currentPosition3);
    
      // Create event listeners for .controls clicks
      $('.control3')
        .bind('click', function(){
        // Determine new position
        currentPosition3 = ($(this).attr('id')=='rightControl3') ? currentPosition3+1 : currentPosition3-1;
        
        // Hide / show controls
        manageControls3(currentPosition3);
        // Move slideInner using margin-left
        $('#slideInner3').animate({
          'marginLeft' : slideWidth3*(-currentPosition3)
        });
      });
    
      // manageControls: Hides and Shows controls depending on currentPosition
      function manageControls3(position3){
        // Hide left arrow if position is first slide
        if(position3==0){ $('#leftControl3').hide() } else{ $('#leftControl3').show() }
        // Hide right arrow if position is last slide
        if(position3==numberOfSlides3-1){ $('#rightControl3').hide() } else{ $('#rightControl3').show() }
      }	


	  var currentPosition4 = 0;
      var slideWidth4 = 737;
      var slides4 = $('.slide4');
      var numberOfSlides4 = slides4.length;
    
      // Remove scrollbar in JS
      $('#slidesContainer4').css('overflow', 'hidden');
    
      // Wrap all .slides with #slideInner div
      slides4
        .wrapAll('<div id="slideInner4"></div>')
        // Float left to display horizontally, readjust .slides width
        .css({
          'float' : 'left',
          'width' : slideWidth4
        });
    
      // Set #slideInner width equal to total width of all slides
      $('#slideInner4').css('width', slideWidth4 * numberOfSlides4);
    
      // Insert controls in the DOM
      $('#slideshow4')
        .prepend('<span class="control4" id="leftControl4">Clicking moves left</span>')
        .append('<span class="control4" id="rightControl4">Clicking moves right</span>');
    
      // Hide left arrow control on first load
      manageControls4(currentPosition4);
    
      // Create event listeners for .controls clicks
      $('.control4')
        .bind('click', function(){
        // Determine new position
        currentPosition4 = ($(this).attr('id')=='rightControl4') ? currentPosition4+1 : currentPosition4-1;
        
        // Hide / show controls
        manageControls4(currentPosition4);
        // Move slideInner using margin-left
        $('#slideInner4').animate({
          'marginLeft' : slideWidth4*(-currentPosition4)
        });
      });
    
      // manageControls: Hides and Shows controls depending on currentPosition
      function manageControls4(position4){
        // Hide left arrow if position is first slide
        if(position4==0){ $('#leftControl4').hide() } else{ $('#leftControl4').show() }
        // Hide right arrow if position is last slide
        if(position4==numberOfSlides4-1){ $('#rightControl4').hide() } else{ $('#rightControl4').show() }
      }


	  var currentPosition5 = 0;
      var slideWidth5 = 737;
      var slides5 = $('.slide5');
      var numberOfSlides5 = slides5.length;
    
      // Remove scrollbar in JS
      $('#slidesContainer5').css('overflow', 'hidden');
    
      // Wrap all .slides with #slideInner div
      slides5
        .wrapAll('<div id="slideInner5"></div>')
        // Float left to display horizontally, readjust .slides width
        .css({
          'float' : 'left',
          'width' : slideWidth5
        });
    
      // Set #slideInner width equal to total width of all slides
      $('#slideInner5').css('width', slideWidth5 * numberOfSlides5);
    
      // Insert controls in the DOM
      $('#slideshow5')
        .prepend('<span class="control5" id="leftControl5">Clicking moves left</span>')
        .append('<span class="control5" id="rightControl5">Clicking moves right</span>');
    
      // Hide left arrow control on first load
      manageControls5(currentPosition5);
    
      // Create event listeners for .controls clicks
      $('.control5')
        .bind('click', function(){
        // Determine new position
        currentPosition5 = ($(this).attr('id')=='rightControl5') ? currentPosition5+1 : currentPosition5-1;
        
        // Hide / show controls
        manageControls5(currentPosition5);
        // Move slideInner using margin-left
        $('#slideInner5').animate({
          'marginLeft' : slideWidth5*(-currentPosition5)
        });
      });
    
      // manageControls: Hides and Shows controls depending on currentPosition
      function manageControls5(position5){
        // Hide left arrow if position is first slide
        if(position5==0){ $('#leftControl5').hide() } else{ $('#leftControl5').show() }
        // Hide right arrow if position is last slide
        if(position5==numberOfSlides5-1){ $('#rightControl5').hide() } else{ $('#rightControl5').show() }
      }
});