const defaultConfig = {
  // If the image gets within 50px of the Y axis, start the download
  rootMargin: '50px',
}

// If we don't have support for intersection observer, throw error
if (!('IntersectionObserver' in window)) {
  throw new Error('Intersection Observer is not supported by this browser.')
}

export default function(selector = '.turtle', config = {}) {
  // Push default config options into config above
  const { rootMargin } = { ...defaultConfig, ...config }
  // Get all of the images that are marked up to lazy load
  const images = document.querySelectorAll(selector)
  // Create the observer
  let observer

  function observe(images) {
    // Create the observer instance
    observer = new IntersectionObserver(onIntersection, config)

    Array.from(images).forEach((image) => {
      // If the image has been handled, skip to the next image
      if (image.classList.contains('turtle--handled')) {
        return
      }
      // Observes the image
      observer.observe(image)
    })
  }

  function fetchImage(url) {
    // Create a promise to fetch an image
    return new Promise((resolve, reject) => {
      // Create a new image
      const image = new Image()
      // Set this image to the paramenter url
      image.src = url
      // Handles errors
      image.onload = resolve
      image.onerror = reject
    })
  }

  function preloadImage(image) {
    // Load src from the dataset
    const src = image.dataset.src

    // If src is not found break
    if (!src) {
      return
    }

    // Fetches an image and applies it to the viewport
    return fetchImage(src).then(() => { applyImage(image, src) })
  }

  function onIntersection(entries) {
    // Loop through image entries
    Array.from(entries).forEach((entry) => {
      // If the image is in the viewport unobserve it
      if (entry.intersectionRatio > 0) {
        // Stop watching and load the image
        observer.unobserve(entry.target)
        preloadImage(entry.target)
      }
    })
  }

  function applyImage(img, src) {
    // Prevent this from being lazy loaded a second time
    img.classList.add('turle--handled')
    // Update image src value
    img.src = src
  }

  return observe(images)
}

@@ -29,21 +29,22 @@
  If the 
-image
+window
  gets wi
@@ -64,21 +64,22 @@
 the 
-Y axis, start
+image, trigger
  the
@@ -406,43 +406,29 @@
 nto 
-config above%0A  const %7B rootMargin %7D
+the function%0A  config
  = %7B
@@ -617,32 +617,36 @@
 %0A%0A  
-function observe(images)
+const observe = (entries) =%3E
  %7B%0A 
@@ -760,20 +760,21 @@
 ay.from(
-imag
+entri
 es).forE
@@ -778,21 +778,21 @@
 orEach((
-image
+entry
 ) =%3E %7B%0A 
@@ -863,21 +863,21 @@
     if (
-image
+entry
 .classLi
@@ -911,26 +911,16 @@
 d'))
- %7B%0A       
  return%0A
     
@@ -915,24 +915,16 @@
  return%0A
-      %7D%0A
       //
@@ -966,21 +966,21 @@
 observe(
-image
+entry
 )%0A    %7D)
@@ -987,24 +987,21 @@
 %0A  %7D%0A%0A  
-function
+const
  fetchIm
@@ -1007,13 +1007,19 @@
 mage
+ = 
 (url)
+ =%3E
  %7B%0A 
@@ -1329,24 +1329,21 @@
 %0A  %7D%0A%0A  
-function
+const
  preload
@@ -1351,15 +1351,21 @@
 mage
+ = 
 (image)
+ =%3E
  %7B%0A 
@@ -1430,17 +1430,16 @@
 set.src%0A
-%0A
     // I
@@ -1481,29 +1481,14 @@
 rc) 
-%7B%0A      return%0A    %7D%0A
+return
 %0A   
@@ -1576,18 +1576,16 @@
 en(() =%3E
- %7B
  applyIm
@@ -1599,18 +1599,16 @@
 ge, src)
- %7D
 )%0A  %7D%0A%0A 
@@ -1608,24 +1608,21 @@
 %0A  %7D%0A%0A  
-function
+const
  onInter
@@ -1628,16 +1628,19 @@
 rsection
+ = 
 (entries
@@ -1640,16 +1640,19 @@
 entries)
+ =%3E
  %7B%0A    /
@@ -1962,24 +1962,21 @@
 %0A  %7D%0A%0A  
-function
+const
  applyIm
@@ -1978,16 +1978,19 @@
 plyImage
+ = 
 (img, sr
@@ -1991,16 +1991,19 @@
 mg, src)
+ =%3E
  %7B%0A    /

Refactor turtle