(function() {
  'use strict';
  
  jQuery.noConflict();
  gsap.registerPlugin(ScrollTrigger);
  
  function generateImageUrls(baseUrl, baseName, start, end, extension) {
    var urls = [];
    for (var i = start; i <= end; i++) {
      var padded = String(i).padStart(3, '0');
      urls.push(baseUrl + baseName + padded + extension);
    }
    return urls;
  }
  
  function imageSequence(config) {
    var canvas = gsap.utils.toArray(config.canvas)[0];
    canvas.width = config.width || 1920;
    canvas.height = config.height || 1920;
    
    var ctx = canvas.getContext('2d');
    var playhead = { frame: 0 };
    var images = [];
    
    function updateImage() {
      var frameIndex = Math.round(playhead.frame);
      if (images[frameIndex] && images[frameIndex].complete) {
        ctx.drawImage(images[frameIndex], 0, 0);
      }
      if (config.onUpdate) {
        config.onUpdate.call(this);
      }
    }
    
    images = config.urls.map(function(url, i) {
      var img = new Image();
      img.src = url;
      if (i === 0) {
        img.onload = updateImage;
      }
      return img;
    });
    
    return gsap.to(playhead, {
      frame: images.length - 1,
      ease: 'none',
      onUpdate: updateImage,
      scrollTrigger: config.scrollTrigger
    });
  }
  
  function initBackgroundAnimation() {
    gsap.timeline({
      scrollTrigger: {
        trigger: '.msrback',
        start: 'top bottom',
        end: 'bottom top',
        scrub: 1,
        id: 'markit'
      }
    }).to('.msrback', {
      backgroundPosition: '500% 50%',
      ease: 'none'
    });
  }
  
  function initImageSequence() {
    var urls = generateImageUrls(
      'https://perfection.sarstedt.com/media/m43rot2/',
      'mikro-schraubroehre_animation_schrauben_standalone',
      0,
      269,
      '.jpg'
    );
    
    imageSequence({
      urls: urls,
      canvas: '#bmecanvas',
      width: 1920,
      height: 1920,
      scrollTrigger: {
        trigger: '#animation',
        start: 'top top',
        end: '+=400%',
        pin: true,
        scrub: true
      }
    });
  }
  
  function init() {
    initBackgroundAnimation();
    initImageSequence();
  }
  
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();