/*
 * GridGallery is a plugin that will generate a grid depending on
 * the elements width and height. it is not required to have the same height
 * also you can enable/disable show lightbox effect to load content
 *
 * license: under MIT
 *          https://github.com/pencilpix/grid-gallery/blob/master/LICENSE
 * Author: Mohamed Hassan
 * Author Url: mohamedhassan@me
 */
(function($doc, $win){
  'use strict';

  /*=========================
   * @private helper functions
   *=========================*/

   /*
    * _extend Private method that extends an object using
    * properties of another object.
    * @param { Object } obj1 The object that will be extended
    * @param { Object } obj2 The object that will be used to extend another.
    *
    * @return { Object } obj1 The first object after being extended.
    */
  function _extend(obj1, obj2) {
    for ( var prop in obj2 ) {
      if ( obj2.hasOwnProperty(prop) ) {
        obj1[prop] = obj2[prop];
      }
    }

    return obj1;
  }


  /*
   * _checkItems Private method that check if GridGallery enabled on items
   * @param { Array-like } items The grid elements.
   * @return { Array } notEnabled The grid items that not set yet.
   */
  function _checkItems(items) {
    var notEnabled = Array.prototype.map.call(items, function(item) {
      var pattern = new RegExp('grid-gallery__item');
      if(!item.dataset.grid && pattern.test(item.className)){
        return item;
      }
    });

    if (notEnabled.length){
      return notEnabled;
    }
  }

  /*
   * class constructor of GridGallery component
   * @param { HTMLElement } element The element that will be the container.
   * @param { Object } options The options to initialize the component.
   */
  function GridGallery(element, options) {
    var _defaultOptions = { lightBox: false };

    this.element = element;

    this.options = _extend({}, _defaultOptions); // extend options to default
    this.options = _extend(this.options, options); // extend default to custom

    this.init();
  }


  /*
   * init this method that do the rest of initialization
   * work and updates the dom.
   */
  GridGallery.prototype.init = function() {

  };

  $win.GridGallery = GridGallery; // makes the component globally exist.
})(document, window);


@@ -2027,24 +2027,1889 @@
 nit();%0A  %7D%0A%0A
+  /*%0A   * _enableItems Private method to handle un-enabled grid items%0A   * and give each element position and data-grid attribute.%0A   * @param %7B Array %7D items un-enabled elements.%0A   * @retrun %7B Array %7D enabledItems elements after update position%0A   * and data-grid.%0A   */%0A  function _enableItems(items) %7B%0A    var parentPos = items%5B0%5D.parentNode.getBoundingClientRect();%0A    var rowItemsNo = Math.floor(parentPos.width / items%5B0%5D.offsetWidth);%0A    var nextPos = %5B%5D;%0A    var prevItem, parentHeight;%0A    var whiteSpace = parentPos.width - items%5B0%5D.offsetWidth * 4;%0A%0A    // enable elements and set each item position%0A    var enabled = items.map(function(item, index, ar) %7B%0A     if(index === 0) %7B%0A       item.style.top = 0;%0A       item.style.left = whiteSpace / 2 + 'px';%0A%0A       nextPos%5B0%5D = %7B%0A         top: item.offsetHeight,%0A         left: 0%0A       %7D%0A     %7D else if(index %3C rowItemsNo) %7B%0A       prevItem = ar%5Bindex - 1%5D;%0A%0A       item.style.top = 0;%0A       item.style.left = prevItem.offsetLeft + prevItem.offsetWidth + 'px';%0A%0A       nextPos%5Bindex%5D = %7B%0A         top: item.offsetHeight,%0A         left: item.offsetLeft%0A       %7D;%0A     %7D else if(index %25 rowItemsNo %3C= nextPos.length)%7B%0A       var posIndex = index %25 rowItemsNo;%0A%0A       item.style.top = nextPos%5BposIndex%5D.top + 'px';%0A       item.style.left = (posIndex) ? nextPos%5BposIndex%5D.left + 'px' : (whiteSpace / 2) + 'px';%0A%0A       nextPos%5BposIndex%5D = %7B%0A         top: item.offsetTop + item.offsetHeight,%0A         left: item.offsetLeft%0A       %7D;%0A     %7D%0A%0A     item.dataset.grid = true;%0A    %7D);%0A%0A    // set container height%0A    parentHeight = nextPos.reduce(function(prevPos, pos) %7B%0A      if(prevPos %3E pos.top) %7B%0A        return prevPos;%0A      %7D else %7B%0A        prevPos = pos.top;%0A        return prevPos;%0A      %7D%0A    %7D, nextPos%5B0%5D.top);%0A%0A    items%5B0%5D.parentNode.style.height = parentHeight + 'px';%0A    return enabled;%0A  %7D%0A%0A
 %0A  /*%0A   * i
@@ -4040,16 +4040,68 @@
 ion() %7B%0A
+    _enableItems(_checkItems(this.element.children))
 %0A  %7D;%0A%0A 

update element height and childs position '_enableItems'