var iNoOfStories = Math.random()*100+12;
var aLayoutSizes = [9, 7, 5, 3, 1];
var numberOfStories = 1;
var iX = 0;
var iY = 0;

var sHTML = "";
var sCSS = "";
var iCount = 0;
var iDimension;

$(function() {
  

function generateGrid() {
iNoOfStories = parseInt(Math.random()*100+12);
aLayoutSizes = [9, 7, 5, 3, 1];
numberOfStories = 1;
iX = 0;
iY = 0;

sHTML = "";
sCSS = "";
iCount = 0;
for (var i = 1; i < iNoOfStories; i++) {
	for (var stories = 0; stories < numberOfStories; stories++) {
		iCount++;
		sHTML += "<div class=\"story\">" + iCount + "</div>"
	}
}
$("#container").html(sHTML);
iDimension = parseInt(Math.random()*150+55);
  $("#info").html("Placing "+iNoOfStories+" bricks, each has the dimension: "+iDimension+" x "+iDimension);
}

function move() {

  $("#container").css("left", -iDimension);
var css = "";
var iCount = 0;
for (var i = 1; i < iNoOfStories; i++) {
	var currLeft = (i - 1) * iDimension;
	var iDir = -1;
	for (var stories = 0; stories < numberOfStories; stories++) {
		iCount++;
		iDir = (Math.floor(stories / i))
		var maxLeft = (Math.floor(numberOfStories / i) * iDimension);
		var relLeft = currLeft + (maxLeft - (Math.floor(stories / i) * iDimension));
		var relTop = (stories % i) * iDimension;
		if (iDir !== 0) {
			var temp = relLeft;
			relLeft = relTop + iDimension;
			relTop = temp;
		}
    
		var selector = "#container .story:nth-child(" + iCount + ")";
    var rot = parseInt(Math.random()*3)*360;
   
    var red = parseInt(Math.random()*255);
    var green = parseInt(Math.random()*255);
    var blue = parseInt(Math.random()*255);
    var alpha = Math.random()*.5+.5;
    
    var zIndex = parseInt(Math.random()*500)+1;
    
    var oVal = {
      "z-index":zIndex,
      "transition-delay": Math.random()*3+"s",
      "transition-duration": Math.random()*4+1+"s",
      "left": relLeft + "px",
      "background":"rgba("+red+","+green+","+blue+","+alpha+")",
      "top": relTop + "px",
      "width": iDimension+"px",
      "height": iDimension+"px",
      "line-height": iDimension+"px",
      "transform":"rotate("+rot+"deg)"
    }
		var value = "left" + relLeft + "px; " + "top " + relTop + "px ";
		$(selector).css(oVal);
		css += selector + " {" + value + "}\n";
	}
	numberOfStories += 2;
}
}

function reset() {

  $(".story").css({"transition-duration": 0, "transition-delay":0, left: "-100px", top: "-100px"});
  generateGrid();
    setTimeout(function() {
move();
}, 1000);
}
reset();
  $("#reset").on("click", function() {
    reset();
  })
})