// Variables
var cols_min = 2;
var col_width = 210;
var col_gap = 15; 
var offX = 45;
var offY = 100;
maxY = [];

$(function() {
		
	// Lay out the widgets on load and when window is resized
	$(window).bind("resize load", function(){
		gridflow();
	});

});

function gridflow() {

	var cols = Math.max(cols_min, parseInt(($('body').innerWidth() - (offX * 2)) / (col_width+col_gap)));
	$('.widget').css('width',col_width  + 'px');
	$('.twocol').css('width', col_width*2 + col_gap);
	$('.threecol').css('width', col_width*3 + col_gap*2);

	for (x=0; x < cols; x++) {
		maxY[x] = 0;
	}

	$('.widget').each(function(i) {

		var pos, marker, w, altura= 0;

		w = (Math.floor($(this).outerWidth() / col_width));
		marker = 0;

		if (w>1) {
			for (x=0; x < cols-(w-1); x++) {
				marker = maxY[x] < maxY[marker] ? x : marker;
			}
			pos = marker;
			for (var x=0; x<w; x++) {
				altura = Math.max(altura, maxY[pos+x]);
			}
			for (var x=0; x<w; x++) {
				maxY[pos+x] = parseInt($(this).outerHeight()) + col_gap + altura;
			}
			$(this).css('left', pos*(col_width+col_gap) + offX).css('top',altura + offY);
		} else {
			for (x=0; x < cols; x++) {
				marker = maxY[x] < maxY[marker] ? x : marker;
			}
			$(this).css('left', marker*(col_width+col_gap) + offX).css('top',maxY[marker] + offY);
			maxY[marker] += $(this).outerHeight() + col_gap;
		}
		
		$(this).css('visibility', 'visible');
		
	});

	
}