/*
 * BackgroundCheck
 * http://kennethcachia.com/background-check
 *
 * v1.2.2
 */

(function (root, factory) {

    if (typeof define === 'function' && define.amd) {
      define(factory);
    } else {
      root.BackgroundCheck = factory(root);
    }
  
  }(this, function () {
  
    'use strict';
  
    var resizeEvent = window.orientation !== undefined ? 'orientationchange' : 'resize';
    var supported;
    var canvas;
    var context;
    var throttleDelay;
    var viewport;
    var attrs = {};
  
  
    /*
     * Initializer
     */
    function init(a) {
  
      if (a === undefined || a.targets === undefined) {
        throw 'Missing attributes';
      }
  
      // Default values
      attrs.debug         = checkAttr(a.debug, false);
      attrs.debugOverlay  = checkAttr(a.debugOverlay, false);
      attrs.targets       = getElements(a.targets);
      attrs.images        = getElements(a.images || 'img', true);
      attrs.changeParent  = checkAttr(a.changeParent, false);
      attrs.threshold     = checkAttr(a.threshold, 50);
      attrs.minComplexity = checkAttr(a.minComplexity, 30);
      attrs.minOverlap    = checkAttr(a.minOverlap, 50);
      attrs.windowEvents  = checkAttr(a.windowEvents, true);
      attrs.maxDuration   = checkAttr(a.maxDuration, 500);
  
      attrs.mask = checkAttr(a.mask, {
        r: 0,
        g: 255,
        b: 0
      });
  
      attrs.classes = checkAttr(a.classes, {
        dark: 'background--dark',
        light: 'background--light',
        complex: 'background--complex'
      });
  
      if (supported === undefined) {
        checkSupport();
  
        if (supported) {
          canvas.style.position = 'fixed';
          canvas.style.top = '0px';
          canvas.style.left = '0px';
          canvas.style.width = '100%';
          canvas.style.height = '100%';
  
          window.addEventListener(resizeEvent, throttle.bind(null, function () {
            resizeCanvas();
            check();
          }));
  
          window.addEventListener('scroll', throttle.bind(null, check));
  
          resizeCanvas();
          check();
        }
      }
    }
  
  
    /*
     * Destructor
     */
    function destroy() {
      supported = null;
      canvas = null;
      context = null;
      attrs = {};
  
      if (throttleDelay) {
        clearTimeout(throttleDelay);
      }
    }
  
  
    /*
     * Output debug logs
     */
    function log(msg) {
  
      if (get('debug')) {
        console.log(msg);
      }
    }
  
  
    /*
     * Get attribute value, use a default
     * when undefined
     */
    function checkAttr(value, def) {
      checkType(value, typeof def);
      return (value === undefined) ? def : value;
    }
  
  
    /*
     * Reject unwanted types
     */
    function checkType(value, type) {
  
      if (value !== undefined && typeof value !== type) {
        throw 'Incorrect attribute type';
      }
    }
  
  
    /*
     * Convert elements with background-image
     * to Images
     */
    function checkForCSSImages(els) {
      var el;
      var url;
      var list = [];
  
      for (var e = 0; e < els.length; e++) {
        el = els[e];
        list.push(el);
  
        if (el.tagName !== 'IMG') {
          url = window.getComputedStyle(el).backgroundImage;
  
          // Ignore multiple backgrounds
          if (url.split(/,url|, url/).length > 1) {
            throw 'Multiple backgrounds are not supported';
          }
  
          if (url && url !== 'none') {
            list[e] = {
              img: new Image(),
              el: list[e]
            };
  
            url = url.slice(4, -1);
            url = url.replace(/"/g, '');
  
            list[e].img.src = url;
            log('CSS Image - ' + url);
          } else {
            throw 'Element is not an <img> but does not have a background-image';
          }
        }
      }
  
      return list;
    }
  
  
    /*
     * Check for String, Element or NodeList
     */
    function getElements(selector, convertToImages) {
      var els = selector;
  
      if (typeof selector === 'string') {
        els = document.querySelectorAll(selector);
      } else if (selector && selector.nodeType === 1) {
        els = [selector];
      }
  
      if (!els || els.length === 0 || els.length === undefined) {
        throw 'Elements not found';
      } else {
  
        if (convertToImages) {
          els = checkForCSSImages(els);
        }
  
        els = Array.prototype.slice.call(els);
      }
  
      return els;
    }
  
  
    /*
     * Check if browser supports <canvas>
     */
    function checkSupport() {
      canvas = document.createElement('canvas');
  
      if (canvas && canvas.getContext) {
        context = canvas.getContext('2d');
        supported = true;
      } else {
        supported = false;
      }
  
      showDebugOverlay();
    }
  
  
    /*
     * Show <canvas> on top of page
     */
    function showDebugOverlay() {
  
      if (get('debugOverlay')) {
        canvas.style.opacity = 0.5;
        canvas.style.pointerEvents = 'none';
        document.body.appendChild(canvas);
      } else {
  
        // Check if it was previously added
        if (canvas.parentNode) {
          canvas.parentNode.removeChild(canvas);
        }
      }
    }
  
  
    /*
     * Stop if it's slow
     */
    function kill(start) {
      var duration = new Date().getTime() - start;
      
      log('Duration: ' + duration + 'ms');
  
      if (duration > get('maxDuration')) {
        // Log a message even when debug is false
        console.log('BackgroundCheck - Killed');
        removeClasses();
        destroy();
      }
    }
  
  
    /*
     * Set width and height of <canvas>
     */
    function resizeCanvas() {
      viewport = {
        left: 0,
        top: 0,
        right: document.body.clientWidth,
        bottom: window.innerHeight
      };
  
      canvas.width = document.body.clientWidth;
      canvas.height = window.innerHeight;
    }
  
  
    /*
     * Process px and %, discard anything else
     */
    function getValue(css, parent, delta) {
      var value;
      var percentage;
  
      if (css.indexOf('px') !== -1) {
        value = parseFloat(css);
      } else if (css.indexOf('%') !== -1) {
        value = parseFloat(css);
        percentage = value / 100;
        value = percentage * parent;
  
        if (delta) {
          value -= delta * percentage;
        }
      } else {
        value = parent;
      }
  
      return value;
    }
  
  
    /*
     * Calculate top, left, width and height
     * using the object's CSS
     */
    function calculateAreaFromCSS(obj) {
      var css = window.getComputedStyle(obj.el);
  
      // Force no-repeat and padding-box
      obj.el.style.backgroundRepeat = 'no-repeat';
      obj.el.style.backgroundOrigin = 'padding-box';
  
      // Background Size
      var size = css.backgroundSize.split(' ');
      var width = size[0];
      var height = size[1] === undefined ? 'auto' : size[1];
  
      var parentRatio = obj.el.clientWidth / obj.el.clientHeight;
      var imgRatio = obj.img.naturalWidth / obj.img.naturalHeight;
  
      if (width === 'cover') {
  
        if (parentRatio >= imgRatio) {
          width = '100%';
          height = 'auto';
        } else {
          width = 'auto';
          size[0] = 'auto';
          height = '100%';
        }
  
      } else if (width === 'contain') {
  
        if (1 / parentRatio < 1 / imgRatio) {
          width = 'auto';
          size[0] = 'auto';
          height = '100%';
        } else {
          width = '100%';
          height = 'auto';
        }
      }
  
      if (width === 'auto') {
        width = obj.img.naturalWidth;
      } else {
        width = getValue(width, obj.el.clientWidth);
      }
  
      if (height === 'auto') {
        height = (width / obj.img.naturalWidth) * obj.img.naturalHeight;
      } else {
        height = getValue(height, obj.el.clientHeight);
      }
  
      if (size[0] === 'auto' && size[1] !== 'auto') {
        width = (height / obj.img.naturalHeight) * obj.img.naturalWidth;
      }
  
      var position = css.backgroundPosition;
  
      // Fix inconsistencies between browsers
      if (position === 'top') {
        position = '50% 0%';
      } else if (position === 'left') {
        position = '0% 50%';
      } else if (position === 'right') {
        position = '100% 50%';
      } else if (position === 'bottom') {
        position = '50% 100%';
      } else if (position === 'center') {
        position = '50% 50%';
      }
  
      position = position.split(' ');
  
      var x;
      var y;
  
      // Two-value syntax vs Four-value syntax
      if (position.length === 4) {
        x = position[1];
        y = position[3];
      } else {
        x = position[0];
        y = position[1];
      }
  
      // Use a default value
      y = y || '50%';
  
      // Background Position
      x = getValue(x, obj.el.clientWidth, width);
      y = getValue(y, obj.el.clientHeight, height);
  
      // Take care of ex: background-position: right 20px bottom 20px;
      if (position.length === 4) {
  
        if (position[0] === 'right') {
          x = obj.el.clientWidth - obj.img.naturalWidth - x;
        }
  
        if (position[2] === 'bottom') {
          y = obj.el.clientHeight - obj.img.naturalHeight - y;
        }
      }
  
      x += obj.el.getBoundingClientRect().left;
      y += obj.el.getBoundingClientRect().top;
  
      return {
        left: Math.floor(x),
        right: Math.floor(x + width),
        top: Math.floor(y),
        bottom: Math.floor(y + height),
        width: Math.floor(width),
        height: Math.floor(height)
      };
    }
  
  
    /*
     * Get Bounding Client Rect
     */
    function getArea(obj) {
      var area;
      var image;
      var parent;
  
      if (obj.nodeType) {
        var rect = obj.getBoundingClientRect();
  
        // Clone ClientRect for modification purposes
        area = {
          left: rect.left,
          right: rect.right,
          top: rect.top,
          bottom: rect.bottom,
          width: rect.width,
          height: rect.height
        };
  
        parent = obj.parentNode;
        image = obj;
      } else {
        area = calculateAreaFromCSS(obj);
        parent = obj.el;
        image = obj.img;
      }
  
      parent = parent.getBoundingClientRect();
  
      area.imageTop = 0;
      area.imageLeft = 0;
      area.imageWidth = image.naturalWidth;
      area.imageHeight = image.naturalHeight;
  
      var ratio = area.imageHeight / area.height;
      var delta;
  
      // Stay within the parent's boundary
      if (area.top < parent.top) {
        delta = parent.top - area.top;
        area.imageTop = ratio * delta;
        area.imageHeight -= ratio * delta;
        area.top += delta;
        area.height -= delta;
      }
  
      if (area.left < parent.left) {
        delta = parent.left - area.left;
        area.imageLeft += ratio * delta;
        area.imageWidth -= ratio * delta;
        area.width -= delta;
        area.left += delta;
      }
  
      if (area.bottom > parent.bottom) {
        delta = area.bottom - parent.bottom;
        area.imageHeight -= ratio * delta;
        area.height -= delta;
      }
  
      if (area.right > parent.right) {
        delta = area.right - parent.right;
        area.imageWidth -= ratio * delta;
        area.width -= delta;
      }
  
      area.imageTop = Math.floor(area.imageTop);
      area.imageLeft = Math.floor(area.imageLeft);
      area.imageHeight = Math.floor(area.imageHeight);
      area.imageWidth = Math.floor(area.imageWidth);
  
      return area;
    }
  
  
    /*
     * Render image on canvas
     */
    function drawImage(image) {
      var area = getArea(image);
  
      image = image.nodeType ? image : image.img;
  
      if (area.imageWidth > 0 && area.imageHeight > 0 && area.width > 0 && area.height > 0) {
        context.drawImage(image,
                          area.imageLeft, area.imageTop, area.imageWidth, area.imageHeight,
                          area.left, area.top, area.width, area.height);
      } else {
        log('Skipping image - ' + image.src + ' - area too small');
      }
    }
  
  
    /*
     * Add/remove classes
     */
    function classList(node, name, mode) {
      var className = node.className;
  
      switch (mode) {
      case 'add':
        className += ' ' + name;
        break;
      case 'remove':
        var pattern = new RegExp('(?:^|\\s)' + name + '(?!\\S)', 'g');
        className = className.replace(pattern, '');
        break;
      }
  
      node.className = className.trim();
    }
  
  
    /*
     * Remove classes from element or
     * their parents, depending on checkParent
     */
    function removeClasses(el) {
      var targets = el ? [el] : get('targets');
      var target;
  
      for (var t = 0; t < targets.length; t++) {
        target = targets[t];
        target = get('changeParent') ? target.parentNode : target;
        
        classList(target, get('classes').light, 'remove');
        classList(target, get('classes').dark, 'remove');
        classList(target, get('classes').complex, 'remove');
      }
    }
  
  
    /*
     * Calculate average pixel brightness of a region 
     * and add 'light' or 'dark' accordingly
     */
    function calculatePixelBrightness(target) {
      var dims = target.getBoundingClientRect();
      var brightness;
      var data;
      var pixels = 0;
      var delta;
      var deltaSqr = 0;
      var mean = 0;
      var variance;
      var minOverlap = 0;
      var mask = get('mask');
  
      if (dims.width > 0 && dims.height > 0) {
        removeClasses(target);
  
        target = get('changeParent') ? target.parentNode : target;
        data = context.getImageData(dims.left, dims.top, dims.width, dims.height).data;
  
        for (var p = 0; p < data.length; p += 4) {
  
          if (data[p] === mask.r && data[p + 1] === mask.g && data[p + 2] === mask.b) {
            minOverlap++;
          } else {
            pixels++;
            brightness = (0.2126 * data[p]) + (0.7152 * data[p + 1]) + (0.0722 * data[p + 2]);
            delta = brightness - mean;
            deltaSqr += delta * delta;
            mean = mean + delta / pixels;
          }
        }
  
        if (minOverlap <= (data.length / 4) * (1 - (get('minOverlap') / 100))) {
          variance = Math.sqrt(deltaSqr / pixels) / 255;
          mean = mean / 255;
          log('Target: ' + target.className +  ' lum: ' + mean + ' var: ' + variance);
          classList(target, mean <= (get('threshold') / 100) ? get('classes').dark : get('classes').light, 'add');
  
          if (variance > get('minComplexity') / 100) {
            classList(target, get('classes').complex, 'add');
          }
        }
      }
    }
  
  
    /*
     * Test if a is within b's boundary
     */
    function isInside(a, b) {
      a = (a.nodeType ? a : a.el).getBoundingClientRect();
      b = b === viewport ? b : (b.nodeType ? b : b.el).getBoundingClientRect();
  
      return !(a.right < b.left || a.left > b.right || a.top > b.bottom || a.bottom < b.top);
    }
  
  
    /*
     * Process all targets (checkTarget is undefined)
     * or a single target (checkTarget is a previously set target)
     *
     * When not all images are loaded, checkTarget is an image
     * to avoid processing all targets multiple times
     */
    function processTargets(checkTarget) {
      var start = new Date().getTime();
      var mode = (checkTarget && (checkTarget.tagName === 'IMG' || checkTarget.img)) ? 'image' : 'targets';
      var found = checkTarget ? false : true;
      var total = get('targets').length;
      var target;
  
      for (var t = 0; t < total; t++) {
        target = get('targets')[t];
  
        if (isInside(target, viewport)) {
          if (mode === 'targets' && (!checkTarget || checkTarget === target)) {
            found = true;
            calculatePixelBrightness(target);
          } else if (mode === 'image' && isInside(target, checkTarget)) {
            calculatePixelBrightness(target);
          }
        }
      }
  
      if (mode === 'targets' && !found) {
        throw checkTarget + ' is not a target';
      }
  
      kill(start);
    }
  
  
    /*
     * Find the element's zIndex. Also checks
     * the zIndex of its parent
     */
    function getZIndex(el) {
      var calculate = function (el) {
        var zindex = 0;
  
        if (window.getComputedStyle(el).position !== 'static') {
          zindex = parseInt(window.getComputedStyle(el).zIndex, 10) || 0;
  
          // Reserve zindex = 0 for elements with position: static;
          if (zindex >= 0) {
            zindex++;
          }
        }
  
        return zindex;
      };
  
      var parent = el.parentNode;
      var zIndexParent = parent ? calculate(parent) : 0;
      var zIndexEl = calculate(el);
  
      return (zIndexParent * 100000) + zIndexEl;
    }
  
  
    /*
     * Check zIndexes
     */
    function sortImagesByZIndex(images) {
      var sorted = false;
  
      images.sort(function (a, b) {
        a = a.nodeType ? a : a.el;
        b = b.nodeType ? b : b.el;
  
        var pos = a.compareDocumentPosition(b);
        var reverse = 0;
  
        a = getZIndex(a);
        b = getZIndex(b);
  
        if (a > b) {
          sorted = true;
        }
  
        // Reposition if zIndex is the same but the elements are not
        // sorted according to their document position
        if (a === b && pos === 2) {
          reverse = 1;
        } else if (a === b && pos === 4) {
          reverse = -1;
        }
  
        return reverse || a - b;
      });
  
      log('Sorted: ' + sorted);
  
      if (sorted) {
        log(images);
      }
  
      return sorted;
    }
  
  
    /*
     * Main function
     */
    function check(target, avoidClear, imageLoaded) {
  
      if (supported) {
        var mask = get('mask');
  
        log('--- BackgroundCheck ---');
        log('onLoad event: ' + (imageLoaded && imageLoaded.src));
  
        if (avoidClear !== true) {
          context.clearRect(0, 0, canvas.width, canvas.height);
          context.fillStyle = 'rgb(' + mask.r + ', ' + mask.g + ', ' + mask.b + ')';
          context.fillRect(0, 0, canvas.width, canvas.height);
        }
  
        var processImages = imageLoaded ? [imageLoaded] : get('images');
        var sorted = sortImagesByZIndex(processImages);
  
        var image;
        var imageNode;
        var loading = false;
  
        for (var i = 0; i < processImages.length; i++) {
          image = processImages[i];
  
          if (isInside(image, viewport)) {
            imageNode = image.nodeType ? image : image.img;
  
            if (imageNode.naturalWidth === 0) {
              loading = true;
              log('Loading... ' + image.src);
  
              imageNode.removeEventListener('load', check);
  
              if (sorted) {
                // Sorted -- redraw all images
                imageNode.addEventListener('load', check.bind(null, null, false, null));
              } else {
                // Not sorted -- just draw one image
                imageNode.addEventListener('load', check.bind(null, target, true, image));
              }
            } else {
              log('Drawing: ' + image.src);
              drawImage(image);
            }
          }
        }
  
        if (!imageLoaded && !loading) {
          processTargets(target);
        } else if (imageLoaded) {
          processTargets(imageLoaded);
        }
      }
    }
  
  
    /*
     * Throttle events
     */
    function throttle(callback) {
  
      if (get('windowEvents') === true) {
  
        if (throttleDelay) {
          clearTimeout(throttleDelay);
        }
  
        throttleDelay = setTimeout(callback, 200);
      }
    }
  
  
    /*
     * Setter
     */
    function set(property, newValue) {
  
      if (attrs[property] === undefined) {
        throw 'Unknown property - ' + property;
      } else if (newValue === undefined) {
        throw 'Missing value for ' + property;
      }
  
      if (property === 'targets' || property === 'images') {
  
        try {
          newValue = getElements(property === 'images' && !newValue ? 'img' : newValue, property === 'images' ? true : false);
        } catch (err) {
          newValue = [];
          throw err;
        }
      } else {
        checkType(newValue, typeof attrs[property]);
      }
  
      removeClasses();
      attrs[property] = newValue;
      check();
  
      if (property === 'debugOverlay') {
        showDebugOverlay();
      }
    }
  
  
    /*
     * Getter
     */
    function get(property) {
  
      if (attrs[property] === undefined) {
        throw 'Unknown property - ' + property;
      }
  
      return attrs[property];
    }
  
  
    /*
     * Get position and size of all images.
     * Used for testing purposes
     */
    function getImageData() {
      var images = get('images');
      var area;
      var data = [];
  
      for (var i = 0; i < images.length; i++) {
        area = getArea(images[i]);
        data.push(area);
      }
  
      return data;
    }
  
  
    return {
      /*
       * Init and destroy
       */
      init: init,
      destroy: destroy,
  
      /*
       * Expose main function
       */
      refresh: check,
  
      /*
       * Setters and getters
       */
      set: set,
      get: get,
  
      /*
       * Return image data
       */
      getImageData: getImageData
    };
  
  }));