var select = function(s) { return document.querySelector(s); };
var selectAll = function(s) { return document.querySelectorAll(s); };
var container = select(".container");

function makeBg(side, gutter, rows) {
  var rSide = side; // Ratio of rect side
  var rGutt = gutter; // Ratio of gutter
  var rowNum = rows; // Number of rows
  var unitNum = Math.pow(rowNum, 2); // Total number of units
  var rowBreak = rowNum; // Store row break point
  var rSpace = rSide+rGutt; // Total space for one rect
  var vbWidth = rowNum*rSide + (rowNum-1)*rGutt; // ViewBox width
  var vbHeight = vbWidth; // ViewBox height
  
  // Create the background SVG element
  var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

  // Add the background SVG element to the DOM
  container.appendChild(svg);

  // Give the background SVG element attributes
  svg.setAttribute("id", "bg");
  svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
  svg.setAttribute("xlinkns", "http://www.w3.org/1999/xlink");
  svg.setAttribute("width", "100%");
  svg.setAttribute("viewBox", "0 0 " + vbWidth +" "+ vbHeight);
  
  // Populate SVG with rects
  for (var i = 0; i<unitNum; i++) {
    
    // Create a rect
    var r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    
    // Add each rect to the SVG
    svg.appendChild(r);
    
    // Give each rect dimensions
    r.setAttribute("width", rSide);
    r.setAttribute("height", rSide);
    r.setAttribute("class", "rectangle rectangle" +i);

    // Give each rect a unique position
    if(i < rowBreak ) {
      r.setAttribute("x", rSpace*(i-(rowBreak-rowNum)) );
      r.setAttribute("y", rSpace*((rowBreak/rowNum)-1));
      if (i+1 == rowBreak) {
        rowBreak += rowNum;
      }
    } 
  }
}
makeBg(5, 1, 4); // Side, gutter, rows




// Function to keep background centered on resize
window.addEventListener("resize", centerBg);
function centerBg() {
    TweenMax.set(bg, { x: "-50%", y: "-50%" });
};

// Function to return random number between given range
function randomBetween(min,max){
    return Math.floor(Math.random()*(max-min+1)+min);
};



var rects = selectAll(".rectangle"); // Array of rects
var mainTl = new TimelineMax(); // Main timeline

// Loop through the array and output a timeline for each rect in the array
function makeTls(parentTL) {
//   for(var i = 0; i<rects.length; i++){
//     var tl = new TimelineMax(); // Create a sub-timeline
//     var ranDur = randomBetween(0.5, 3); // Generate a random duration
    
//     tl.from(rects[i], ranDur, { scale: 0 }); // Specify unique tween
    
//     return tl; // Return a unique timeline 
//   }
  
  rects.reduce(function(parent, rect) {
    var tl = new TimelineMax();
    tl.from(rect, randomBetween(0.5, 3), { scale: 0 });
    return parent.add(tl);
  }, parentTL);
}

// mainTl.add( makeTls() ); // How to add a dynamic number of tls to the main tl?

// Convert to array 
rects = Array.from(rects); // Modern browsers
// Array.prototype.slice.call(rects) // Old browsers

makeTls(mainTl);