$(document).ready(function(){
  $('li#tssPoses a').click(function()
    {
		$('div#tssTabsNav').removeClass('photosTab videosTab artistsTab');
		$('div#posesTab').removeClass('tssTabOff').siblings().addClass('tssTabOff');
		return false;
	});
	$('li#tssPhotos a').click(function()
    {
		$('div#tssTabsNav').removeClass('videosTab artistsTab').addClass('photosTab');
		$('div#photosTab').removeClass('tssTabOff').siblings().addClass('tssTabOff');
		return false;
	});
	$('li#tssVideos a').click(function()
    {
		$('div#tssTabsNav').removeClass('photosTab artistsTab').addClass('videosTab');
		$('div#videosTab').removeClass('tssTabOff').siblings().addClass('tssTabOff');
		return false;
	});
	$('li#tssArtists a').click(function()
    {
		$('div#tssTabsNav').removeClass('videosTab photosTab').addClass('artistsTab');
		$('div#artistsTab').removeClass('tssTabOff').siblings().addClass('tssTabOff');
		return false;
	});
	
	
  var tss1CurrentPosition = 0;
  var tss1SlideWidth = 222;
  var tss1Slides = $('.tss1Slide');
  var tss1NumberOfSlides = tss1Slides.length;

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

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

  // Set #slideInner width equal to total width of all slides
  $('#tss1SlideInner').css('width', tss1SlideWidth * tss1NumberOfSlides);

  // Insert controls in the DOM
  $('#tss1Slideshow')
    .prepend('<span class="tss1Control" id="tss1LeftControl">Previous</span>')
    .append('<span class="tss1Control" id="tss1RightControl">Next</span>');

  // Hide left arrow control on first load
  tss1ManageControls(tss1CurrentPosition);

  // Create event listeners for .controls clicks
  $('.tss1Control')
    .bind('click', function(){
    // Determine new position
	tss1CurrentPosition = ($(this).attr('id')=='tss1RightControl') ? tss1CurrentPosition+1 : tss1CurrentPosition-1;
    
	// Hide / show controls
    tss1ManageControls(tss1CurrentPosition);
    // Move slideInner using margin-left
    $('#tss1SlideInner').animate({
      'marginLeft' : tss1SlideWidth*(-tss1CurrentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function tss1ManageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#tss1LeftControl').hide() } else{ $('#tss1LeftControl').show() }
	// Hide right arrow if position is last slide
    if(position==tss1NumberOfSlides-1){ $('#tss1RightControl').hide() } else{ $('#tss1RightControl').show() }
  }
  
  
  var tss2CurrentPosition = 0;
  var tss2SlideWidth = 222;
  var tss2Slides = $('.tss2Slide');
  var tss2NumberOfSlides = tss2Slides.length;

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

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

  // Set #slideInner width equal to total width of all slides
  $('#tss2SlideInner').css('width', tss2SlideWidth * tss2NumberOfSlides);

  // Insert controls in the DOM
  $('#tss2Slideshow')
    .prepend('<span class="tss2Control" id="tss2LeftControl">Previous</span>')
    .append('<span class="tss2Control" id="tss2RightControl">Next</span>');

  // Hide left arrow control on first load
  tss2ManageControls(tss2CurrentPosition);

  // Create event listeners for .controls clicks
  $('.tss2Control')
    .bind('click', function(){
    // Determine new position
	tss2CurrentPosition = ($(this).attr('id')=='tss2RightControl') ? tss2CurrentPosition+1 : tss2CurrentPosition-1;
    
	// Hide / show controls
    tss2ManageControls(tss2CurrentPosition);
    // Move slideInner using margin-left
    $('#tss2SlideInner').animate({
      'marginLeft' : tss2SlideWidth*(-tss2CurrentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function tss2ManageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#tss2LeftControl').hide() } else{ $('#tss2LeftControl').show() }
	// Hide right arrow if position is last slide
    if(position==tss2NumberOfSlides-1){ $('#tss2RightControl').hide() } else{ $('#tss2RightControl').show() }
  }
  
  
  var tss3CurrentPosition = 0;
  var tss3SlideWidth = 222;
  var tss3Slides = $('.tss3Slide');
  var tss3NumberOfSlides = tss3Slides.length;

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

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

  // Set #slideInner width equal to total width of all slides
  $('#tss3SlideInner').css('width', tss3SlideWidth * tss3NumberOfSlides);

  // Insert controls in the DOM
  $('#tss3Slideshow')
    .prepend('<span class="tss3Control" id="tss3LeftControl">Previous</span>')
    .append('<span class="tss3Control" id="tss3RightControl">Next</span>');

  // Hide left arrow control on first load
  tss3ManageControls(tss3CurrentPosition);

  // Create event listeners for .controls clicks
  $('.tss3Control')
    .bind('click', function(){
    // Determine new position
	tss3CurrentPosition = ($(this).attr('id')=='tss3RightControl') ? tss3CurrentPosition+1 : tss3CurrentPosition-1;
    
	// Hide / show controls
    tss3ManageControls(tss3CurrentPosition);
    // Move slideInner using margin-left
    $('#tss3SlideInner').animate({
      'marginLeft' : tss3SlideWidth*(-tss3CurrentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function tss3ManageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#tss3LeftControl').hide() } else{ $('#tss3LeftControl').show() }
	// Hide right arrow if position is last slide
    if(position==tss3NumberOfSlides-1){ $('#tss3RightControl').hide() } else{ $('#tss3RightControl').show() }
  }
  
  
  var tss4CurrentPosition = 0;
  var tss4SlideWidth = 222;
  var tss4Slides = $('.tss4Slide');
  var tss4NumberOfSlides = tss4Slides.length;

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

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

  // Set #slideInner width equal to total width of all slides
  $('#tss4SlideInner').css('width', tss4SlideWidth * tss4NumberOfSlides);

  // Insert controls in the DOM
  $('#tss4Slideshow')
    .prepend('<span class="tss4Control" id="tss4LeftControl">Previous</span>')
    .append('<span class="tss4Control" id="tss4RightControl">Next</span>');

  // Hide left arrow control on first load
  tss4ManageControls(tss4CurrentPosition);

  // Create event listeners for .controls clicks
  $('.tss4Control')
    .bind('click', function(){
    // Determine new position
	tss4CurrentPosition = ($(this).attr('id')=='tss4RightControl') ? tss4CurrentPosition+1 : tss4CurrentPosition-1;
    
	// Hide / show controls
    tss4ManageControls(tss4CurrentPosition);
    // Move slideInner using margin-left
    $('#tss4SlideInner').animate({
      'marginLeft' : tss4SlideWidth*(-tss4CurrentPosition)
    });
  });

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