/* exported RectCache */
/* Copyright 2015, Yahoo Inc.
   Designed by Irae Carvalho
   Copyrights licensed under the MIT License.
   See the accompanying LICENSE file for terms. */
"use strict";

var initialRect = { left : 0, right : 0, top : 0, height : 0, bottom : 0, width : 0 };

var RectCache = {
  rect: initialRect,
  _updateRectCache: function() {
    if(!this.isMounted()) {
      return; // Edge case, this should not happen, maybe react bug?
    }
    var oldRect = this.rect;
    var newRect = this.getDOMNode().getBoundingClientRect();
    this.rect = newRect;

    // Interesting fact: Checking for changes is not only better for performance. Since
    // a consumer of onResize might update state variables, preventing unnecessary events also
    // avoids weird side-effects.
    // This is specially true for nested rect-cached elements inside overflow: hidden; elements
    // where the outermost rect-cache is not updated while the inner most might be.
    if (oldRect.width !== newRect.width || oldRect.height !== newRect.height) {
      this.props.onResize && this.props.onResize();
      this.onResize && this.onResize();
    }
  },

  componentDidMount: function(){
    var node = this.getDOMNode();
    var update = this._updateRectCache;
    update();
    getImageLoadedNotifications(node, update);
    node.addEventListener('DOMSubtreeModified', update);
    if (this.props.hasOwnProperty('viewport')) {
      window.addEventListener('orientationchange', update);
      window.addEventListener("resize", update);
    }
  },

  componentWillUnmount: function(){
    var node = this.getDOMNode();
    var update = this._updateRectCache;
    node.removeEventListener('DOMSubtreeModified', update);
    if (this.props.hasOwnProperty('viewport')) {
    window.removeEventListener('orientationchange', update);
    window.removeEventListener("resize", update);
    }
  },
};

function getImageLoadedNotifications(node, callback) {
  watchLoadImages(node.getElementsByTagName('img'), callback);
  node.addEventListener('DOMNodeInserted', function(event) {
    var images = event.target.getElementsByTagName && event.target.getElementsByTagName('img');
    if (event.target.nodeName.toLowerCase() === 'img') {
      watchLoadImages([event.target], callback);
    }
    watchLoadImages(images, callback);
  });
}
function watchLoadImages(imgArr, callback) {
  if(imgArr && imgArr.length) {
    for (var i = 0; i < imgArr.length; i++) {
      var img = imgArr[i];
      img.addEventListener('load', callback);
    }
  }
}

/* istanbul ignore if */
if (typeof window === 'undefined'){
  module.exports = {
    rect: initialRect,
  };
} else {
  module.exports = RectCache;
}

@@ -1141,32 +1141,130 @@
 ();%0A    %7D%0A  %7D,%0A%0A
+  _bindImgLoad: function(event) %7B%0A    watchLoadImages(event.target, this._updateRectCache);%0A  %7D,%0A%0A
   componentDidMo
@@ -1376,34 +1376,22 @@
     
-getImageLoadedNotification
+watchLoadImage
 s(no
@@ -1452,32 +1452,97 @@
 fied', update);%0A
+    node.addEventListener('DOMNodeInserted', this._bindImgLoad);%0A
     if (this.pro
@@ -1861,24 +1861,92 @@
 ', update);%0A
+    node.removeEventListener('DOMNodeInserted', this._bindImgLoad);%0A
     if (this
@@ -1978,24 +1978,26 @@
 ewport')) %7B%0A
+  
     window.r
@@ -2045,24 +2045,26 @@
 pdate);%0A    
+ 
+ 
 window.remov
@@ -2125,634 +2125,405 @@
 ion 
-getImageLoadedNotifications(node, callback) %7B%0A  watchLoadImages(node.getElementsByTagName('img'), callback);%0A  node.addEventListener('DOMNodeInserted', function(event) %7B%0A    var images = event.target.getElementsByTagName && event.target.getElementsByTagName('img');%0A    if (event.target.nodeName.toLowerCase() === 'img') %7B%0A      watchLoadImages(%5Bevent.target%5D, callback);%0A    %7D%0A    watchLoadImages(images, callback);%0A  %7D);%0A%7D%0Afunction watchLoadImages(imgArr, callback) %7B%0A  if(imgArr && imgArr.length) %7B%0A    for (var i = 0; i %3C imgArr.length; i++) %7B%0A      var img = imgArr%5Bi%5D;%0A      img.addEventListener('load', callback);%0A    %7D
+watchLoadImages(node, callback) %7B%0A  var imgArr = getAllImagesInTree(node);%0A  for (var i = 0; i %3C imgArr.length; i++) %7B%0A    var img = imgArr%5Bi%5D;%0A    img.addEventListener('load', callback);%0A  %7D%0A%7D%0A%0Afunction getAllImagesInTree(node) %7B%0A  if (node && node.nodeName.toLowerCase() === 'img') %7B%0A    return %5Bnode%5D;%0A  %7D else %7B%0A    return (node.getElementsByTagName && node.getElementsByTagName('img')) %7C%7C %5B%5D;
 %0A  %7D

Refactor the RectCache to have better DOM event cleanup on unmount