/* ENFORCE 'CONCRETE5 AREA' BLOCK LIMITS
  ======================================= */
 
    // ensure that the "Add Too.." functionality is disabled when block limits are reached.
    // function is called with no parameters but is then recursively polled passing back
    // two arrays of 'concrete area' data
    hasScannedBlockLimits = false;
    function enforceBlockLimits ( recAreas = [], recLimits = [] ) {
 
      // scan page for limited areas once
      if(!hasScannedBlockLimits) {
        var areaElements = getLimitedAreas();
        var areas  = areaElements[0];
        var limits = areaElements[1];
        hasScannedBlockLimits = true;
      }
      // limited areas have been passed in recursively
      else {
        var areas  = recAreas;
        var limits = recLimits;
      }
 
      // loop through the areas
      $( areas ).each( function( index ) {    
 
        // the area and it's block limit
        var area = areas[index];
        var blockLimit = limits[index];
 
        // an array of the blocks within the area
        var blocks = $( area ).find( '.ccm-block' );    
 
        // count only the visible blocks ( this is because deleted blocks are still in the DOM, just with "display: none;" )
        var numBlocks = 0;    
        blocks.each( function( index ) {
          if ( window.getComputedStyle( blocks[index], null ).getPropertyValue( 'display' ) != 'none' )
            numBlocks ++;
        });// end inner loop
 
        // hide the "Add Too.." functionality if the maximum block limit has been reached
        if ( numBlocks >= blockLimit )
          $( area ).find( ' .ccm-add-block' ).css( 'display', 'none' );
        else
          $( area ).find( ' .ccm-add-block' ).css( 'display', 'block' );      
 
      });// end outer loop
 
      // poll to ensure "Add Too.." functionality remains disabled while adding/removing blocks
      setTimeout(function() { enforceBlockLimits( areas, limits ) }, 500 );
    }
 
    // return a 2D array of [container-elements, block-limits] of elements
    // in the page that have attr "data-block-limit"
    function getLimitedAreas() {
 
      var theAreaElements = $('div[data-block-limit]');
      var theAreas  = [];
      var theLimits = [];
 
      // collect the limited area data
      for(var i = 0; i < theAreaElements.length; i++)  {    
        // collect the containers
        theAreas[theAreas.length]   = $(theAreaElements[i]);
        // collect the block limits
        theLimits[theLimits.length] = $(theAreaElements[i]).attr('data-block-limit'); 
      }
 
      // return the data
      var data = [theAreas, theLimits];                         
      return data;
 
    }