$(document).ready(function(){
	var Unit = 'px';
	var Cells = $("#grid").children();
	var grid = new Object();
	var grid_r = new Object();	
	var last_row = 1;

	//--Calculate widths-----------------------------------------------//
	var unitCell = $("<div />").addClass("cell").appendTo("body");
	var uw = unitCell.width();
	var uh = unitCell.height();
	var um = parseInt(unitCell.css("margin-right"));
	var ub = parseInt(unitCell.css("border-right-width"));
	if (!um) um = 0;
	if (!ub) ub = 0;
	var ucs = uw + (um + ub) * 2;
	unitCell.remove();
	
	var ww, wh, num_cols, num_cells, r, last_r, c, cellsRemaining


	$(window).bind("resize", function()
	{
		ww = $('#grid').width();
		wh = $('#grid').height();
		num_cols = Math.floor(ww/ucs)
		r=1;
		last_r = 1;
		c=1;
		cellsRemaining
		num_cells = 0;			
			
		//Set size ----------------------------------//
		Cells.each(function(){
			/* From the grid-based dimensions ... */
			w = $(this).metadata().w;
			h = $(this).metadata().h;
			var cw = uw * w + (um + ub) * 2 * (w - 1); /* calc cell px width */
			var ch = uh * h + (um + ub) * 2 * (h - 1); /* and height */
			$(this).css({float: 'none', width:cw, height:ch});
			num_cells = num_cells + (w*h)
		});
		
		for(var i=1; i<=num_cols; i++) grid[i] = {}					
		
		cellsRemaining = Cells;
		while(cellsRemaining.length > 0)
		{
			var thisCell = cellsRemaining[0]
			var w = $(thisCell).metadata().w;
			var h = $(thisCell).metadata().h;
			
			c=1
			r=1
	
			placeCell()
			var _top = ucs * (r-1);
			var _left = ucs * (c-1);
			 $(thisCell).css({position:"absolute"})
			 .stop().animate({top:_top ,left:_left }, 500, "swing" );
			
			c = c+w
			if (c > num_cols)
			{
				r++;
				c=1;
			}
			cellsRemaining = cellsRemaining.not(thisCell);
		}
		
		function nextCell()
		{
			c++;
			if (c + w - 1 > num_cols)
			{
				c = 1;
				r++;
			}			
		} 
		
		
		function placeCell()
		{
			if(checker(c, r, w, h) == true)
			{
				setUsed(c,r,w,h)		
			}
			else
			{
				nextCell();
				placeCell();	
			}
		}	
		

		
		function getUsed(c, r)
		{
			if(grid[c][r] == true) return true;	

			return false;	
		}
		
		function setUsed(c, r, w, h)
		{
			var cur_c = c
			var cur_r = r
			
			for (jc = 1; jc < w+1; jc++)
			{				
				for (jr = 1; jr < h+1; jr++)
				{
					if (cur_c > num_cols)
					{
						cur_c = 1;
						cur_r++;					
					}
					if (cur_r+jr-1 > last_r) last_r = cur_r+jr-1;	
					grid[cur_c+jc-1][cur_r+jr-1] = true;								
				}
			}
		}
		
		function checker(c, r, w, h)
		{
			var cur_c = c
			var cur_r = r
			
			for (jc = 0; jc < w; jc++)
			{				
				for (jr = 0; jr < h; jr++)
				{

					if (cur_c+jc > num_cols)
					{
						cur_c = 1;
						cur_r++;
					}					
					if(getUsed(cur_c+jc,cur_r+jr) == true){ return false }					
				}
			}
			return true;
		}	
		
		$('#grid').css('height', last_r*ucs+20)
			
	}).trigger("resize");
});//END DOCUMENT READY