$(document).ready(function(){
  var currentPosition = 0;
  var currentPosition2 = 0;
  var slideWidth = 900;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  var slides2 = $('.slide2');
  var numberOfSlides2 = slides2.length;
  
  $('.slideshow2').hide();
  $('.bestSellers').addClass('onTabLeft');
  $('.comingSoon').addClass('offTabRight');
  
  
  //$('#bookScroller').css('height', '18.5em'); 
  //$('.slideshow').css('height', '13.4em');
  //$('.slideshow2').css('height', '13.4em'); 
  
  $('#bookScroller').css('height', '171px'); 
  $('.slideshow').css('height', '123px');
  $('.slideshow2').css('height', '123px'); 
  
  $('.bestSellers').click(function () {
      $('.slideshow2').hide();
	  $('.slideshow').show();
      $(this).removeClass('offTabLeft').addClass('onTabLeft');
	  $('.comingSoon').removeClass('onTabRight').addClass('offTabRight');
      return true;
    });

	$('.comingSoon').click(function () {
      $('.slideshow2').show();
	  $('.slideshow').hide();
	  $(this).removeClass('offTabRight').addClass('onTabRight');
	  $('.bestSellers').removeClass('onTabLeft').addClass('offTabLeft');
      return true;
    });
  
 
  // Remove scrollbar in JS
  $('.slidesContainer').css('overflow', 'hidden').css('height', 'auto');
  $('.slidesContainer2').css('overflow', 'hidden').css('height', 'auto');
  
  // Wrap all .slides with .slideInner div
  slides
  .wrapAll('<div class="slideInner"></div>')
  // Float left to display horizontally, readjust .slides width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });

  slides2
  .wrapAll('<div class="slideInner2"></div>')
  // Float left to display horizontally, readjust .slides2 width
  .css({
    'float' : 'left',
    'width' : slideWidth
  });
  
  // Set .slideInner width equal to total width of all slides
  $('.slideInner').css('width', slideWidth * numberOfSlides);
  $('.slideInner2').css('width', slideWidth * numberOfSlides2);

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

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

  // 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)
      }, 1000);
    });

	$('.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' : slideWidth*(-currentPosition2)
      }, 1000);
    });
	
	
  // 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() }
    }

 function manageControls2(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==numberOfSlides2-1){ $('#rightControl2').hide() }
    else{ $('#rightControl2').show() }
    }
  });