$(document).ready(function() { 

  var slideWidth = 300;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#wrapper').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);
  $('#seo-picture').css({opacity: '1'});
  $('#affilliate-picture').css({opacity: '0'});
  $('#sem-picture').css({opacity: '0'});

  
  $('#slide1').click(
  function(){
  	$('#slideInner').css({'marginLeft' : 0});
	$('#seo-picture').animate({opacity: '1'}, 1000);
	$('#affilliate-picture').animate({opacity: '0'}, 1000);
	$('#sem-picture').animate({opacity: '0'}, 1000);
	$('#slide1').addClass("active");
	$('#slide2').removeClass("active");
	$('#slide3').removeClass("active");
  });
  
  $('#slide2').click(
  function(){
  	$('#slideInner').css({'marginLeft' : '-300px'});
	$('#seo-picture').animate({opacity: '0'}, 1000);
	$('#affilliate-picture').animate({opacity: '1'}, 1000);
	$('#sem-picture').animate({opacity: '0'}, 1000);
	$('#slide1').removeClass("active");
	$('#slide2').addClass("active");
	$('#slide3').removeClass("active");
  });  
  
  $('#slide3').click(
  function(){
  	$('#slideInner').css({'marginLeft' :'-600px'});
	$('#seo-picture').animate({opacity: '0'}), 1000;
	$('#affilliate-picture').animate({opacity: '0'}), 1000;
	$('#sem-picture').animate({opacity: '1'}, 1000);
	$('#slide1').removeClass("active");
	$('#slide2').removeClass("active");
	$('#slide3').addClass("active");
  });
  
});