listen(window, 'load', setupSlider);

var iconSliders;

function setupSlider() {

   iconSliders = elemsByClass('themeicon_slider');

   if (iconSliders.length > 0) {
      var sliddy = new Slider();
      sliddy.start(sliddy);
   }
}

function Slider() {
   this.timer;
   this.pauseCount = 0;
   this.pauseSecs = 3;

   this.slidewidth = 117;
   this.framerate = 20;
   this.x = 0;
   this.displacement = 0;
   this.startPosition = 0;
   this.passes = 0;

   this.start = function (obj) {
      slide.slider = obj;
      pauseSlide.slider = obj;
      slide.slider.timer = setInterval(pauseSlide, 1000/slide.slider.framerate);
   }
}

function slide() {
   slide.slider.x += (1/slide.slider.framerate);
   slide.slider.displacement = Math.round(getNextIncrement(slide.slider.x));

   // Apply calculated background offset to slider elements.
   // This is the only line that interacts with the DOM. The rest is numbers & math.
   for (var i=0; i < iconSliders.length; i++) {
      iconSliders[i].style.backgroundPosition = slide.slider.startPosition - slide.slider.displacement + 'px 0px';
   }

   //if a single whole image has sliddedetedslidenslit, stop, reset and pause sliding
   if (slide.slider.displacement == slide.slider.slidewidth) {
      clearInterval(slide.slider.timer);

      slide.slider.passes++;
      slide.slider.startPosition = -slide.slider.slidewidth * slide.slider.passes;
      slide.slider.displacement = 0;
      slide.slider.x = 0;

      //slide.slider.start(pauseSlide.slider);
      slide.slider.timer = setInterval(pauseSlide, 1000/slide.slider.framerate);
   }
}
// timed pause function
function pauseSlide() {
   pauseSlide.slider.pauseCount++;
   if (pauseSlide.slider.pauseCount > pauseSlide.slider.framerate*pauseSlide.slider.pauseSecs) {
      clearInterval(pauseSlide.slider.timer);
      pauseSlide.slider.timer = setInterval(slide, 1000/pauseSlide.slider.framerate);
      pauseSlide.slider.pauseCount = 0;
   }
}

//formula function that determines the shape of the motion
function getNextIncrement(x) {
   var y = Math.sin(x/2) * slide.slider.slidewidth;
   return y;
}