function updateDimensions( dimension ){
	less.modifyVars({"@sizeWidth":dimension+"px"});
}
function populateHoneycomb( ){

	honeyCells = jsonExample;
	var height = "innerHeight" in window 
               ? window.innerHeight
               : document.documentElement.offsetHeight;
    var width = "innerWidth" in window 
               ? window.innerWidth
               : document.documentElement.offsetWidth;
    var cellWidth = width/(honeyCells.width+0.7);
    updateDimensions( cellWidth );
    var honeyComb = document.getElementById("honeyComb");

    for (var i = honeyCells.height - 1; i >= 0; i--) {
    	var even = (i%2 == 0) ? "even" : "";

    	var container = document.createElement('div');
    	container.className = "hex-row " + even;
    	honeyComb.appendChild(container);

    	for (var j = honeyCells.width - 1; j >= 0; j--) {
    		
    		var hexCell = document.createElement("div");
    		hexCell.className = "hex";

    		container.appendChild(hexCell);

    		var topPart = document.createElement('div');
    		topPart.className = "top";
    		var middlePart = document.createElement('div');
    		middlePart.className = "middle";
    		var bottomPart = document.createElement('div');
    		bottomPart.className = "bottom";

    		hexCell.appendChild(topPart);
    		hexCell.appendChild(middlePart);
    		hexCell.appendChild(bottomPart);
    		
    	};


    };
}
function setFilled(){
		honeyCells = jsonExample;

	var hexCells = document.getElementsByClassName("hex");
	for (var i = honeyCells.filled.length - 1; i >= 0; i--) {
			
			honeyCell = hexCells[ (honeyCells.filled[i].x * honeyCells.width)+honeyCells.filled[i].y];
			honeyCell.className += " disabled";
		};	
}
	
jsonExample = {"height":15,"width":15,"sourceSeeds":[0],"units":[{"members":[{"x":0,"y":0}],"pivot":{"x":0,"y":0}}],"id":1,"filled":[{"x":2,"y":4},{"x":3,"y":4},{"x":4,"y":4},{"x":5,"y":4},{"x":6,"y":4},{"x":11,"y":4},{"x":2,"y":5},{"x":8,"y":5},{"x":11,"y":5},{"x":2,"y":6},{"x":11,"y":6},{"x":2,"y":7},{"x":3,"y":7},{"x":4,"y":7},{"x":8,"y":7},{"x":11,"y":7},{"x":2,"y":8},{"x":9,"y":8},{"x":11,"y":8},{"x":2,"y":9},{"x":8,"y":9},{"x":2,"y":10},{"x":3,"y":10},{"x":4,"y":10},{"x":5,"y":10},{"x":6,"y":10},{"x":9,"y":10},{"x":11,"y":10}],"sourceLength":100};