// JavaScript Document
$(function() {
  $(window).scroll(function() {
    var car = $('#car');  // this id should be whatever the car element is
    var scrollTop = $(window).scrollTop();
    var pointAtWhichCarsChangeInPixels = 1500; // tweak this to make it transition correctly
    
    var section1 = 300;
    var section2 = 1700;
    var section3 = 2700;
    var section4 = 3400;

    if (scrollTop > section1 && scrollTop < section2) {
      if (!car.hasClass('transition1')) { car.addClass('transition1'); }
      if (car.hasClass('transition2')) { car.removeClass('transition2'); }
      if (car.hasClass('transition3')) { car.removeClass('transition3'); }
      if (car.hasClass('transition4')) { car.removeClass('transition4'); }
    } else if (scrollTop > section2 && scrollTop < section3) {
      if (!car.hasClass('transition2')) { car.addClass('transition2'); }
      if (car.hasClass('transition1')) { car.removeClass('transition1'); }
      if (car.hasClass('transition3')) { car.removeClass('transition3'); }
      if (car.hasClass('transition4')) { car.removeClass('transition4'); }
    } else if (scrollTop > section3 && scrollTop < section4) {
      if (!car.hasClass('transition3')) { car.addClass('transition3'); }
      if (car.hasClass('transition1')) { car.removeClass('transition1'); }
      if (car.hasClass('transition2')) { car.removeClass('transition2'); }
      if (car.hasClass('transition4')) { car.removeClass('transition4'); }
    } else if (scrollTop > section4) {
      if (!car.hasClass('transition4')) { car.addClass('transition4'); }
      if (car.hasClass('transition1')) { car.removeClass('transition1'); }
      if (car.hasClass('transition2')) { car.removeClass('transition2'); }
      if (car.hasClass('transition3')) { car.removeClass('transition3'); }
    }
  });
});