MIN_COLS = 2;
COL_WIDTH = 180;
GUTTER_WIDTH = 4;
GUTTER_HEIGHT = 4;
WIDTHS = [0,180,364,548];

gaps = [];

function layout(){

	offset = $( '#project' ).offset();
	
	num_cols = Math.max(
				Math.floor( ($('body').width()-offset.left+GUTTER_WIDTH) / (COL_WIDTH+GUTTER_WIDTH) ),
				MIN_COLS
			);
			
	if( num_cols < MIN_COLS ){ num_cols = MIN_COLS; }
	
	cols = [];
	
	clearGaps();
	
	for( i=0 ; i<num_cols ; i++ ){	cols.push({x:i,y:0});	}
	
	$('.project-grid .item').each( function(l)
	{
		//w = $( this ).children('.image').width();
		w = $( this ).width();
		$( this ).css( 'width', w + 'px' );
		h = $( this ).outerHeight();
		n = Math.floor( w/COL_WIDTH );
		
		x = 0;
		y = 0;
		
		if( n > 1 )
		{
			cols.sort( xSort );
			possible_cols = [];
			s = num_cols-n+1;
			if( s <= 0 )
			{
				possible_cols.push({x:cols[0].x, y:cols[0].y});
			}
			else
			{
				for( i=0 ; i < s ; i++ )
				{
					max_y = 0;
					for( k=0 ; k < n ; k++ )
					{
						new_y = cols[ i + k ].y;
						max_y = Math.max( new_y, max_y );
					}
					possible_cols.push({x:cols[i].x, y:max_y});
				}
			}
			possible_cols.sort(ySort);
			x = possible_cols[0].x;
			y = possible_cols[0].y;
		}
		else
		{
			cols.sort( ySort );
			x = cols[0].x;
			y = cols[0].y;
		}
		
		// add GUTTER HEIGHT
		
		if( y > 0 ){ y += GUTTER_HEIGHT; }
		
		cols.sort( xSort );
		$( this ).css( 'position', 'absolute' );
		$( this ).css( 'top', y + 'px' );
		$( this ).css( 'left', x*(COL_WIDTH+GUTTER_WIDTH) + 'px' );

		for( i=x ; i < x+n ; i++ )
		{
			if( cols[ i ].y < y )
			{ 
				fillGap( cols[i].x*(COL_WIDTH+GUTTER_WIDTH), cols[i].y+GUTTER_HEIGHT, COL_WIDTH, y-cols[i].y-GUTTER_HEIGHT );
				/*if( cols[i+1].y == cols[i].y )
				{
					fillGap( cols[i].x*(COL_WIDTH+GUTTER_WIDTH), cols[i].y, COL_WIDTH*2+GUTTER_WIDTH, y-cols[i].y );
					cols[ i ].y = (y + GUTTER_WIDTH) + h;
					i++;
				}
				else
				{
					fillGap( cols[i].x*(COL_WIDTH+GUTTER_WIDTH), cols[i].y, COL_WIDTH, y-cols[i].y );
				}*/
			}
			
			cols[ i ].y = y + h;
		}
		
	});
	
	cols.sort( ySort );
	
	for( i=0 ; i <cols.length ; i++ )
	{
		if( cols[ i ].y < cols[ cols.length-1 ].y )
		{
			fillGap( cols[i].x*(COL_WIDTH+GUTTER_WIDTH), cols[i].y+GUTTER_HEIGHT, COL_WIDTH, cols[ cols.length-1 ].y-cols[i].y );
			
			cols[i].y = cols[ cols.length-1 ].y;
		}
	}
	
	var w = cols.length*(COL_WIDTH+GUTTER_WIDTH)-GUTTER_WIDTH;
	var h = cols[0].y;
	
	onGridRefresh( w, h );	
}

function fillGap( x, y, w, h )
{
	if( h <= 0 ){ return; }
	var myDiv = document.createElement("div");
	//var myText = document.createTextNode(" ");
	var myText = document.createElement("img");
	myText.setAttribute( 'src', '/line.php?w='+w+'&h='+h );
	myText.setAttribute( 'width', w );
	myText.setAttribute( 'height', (h-GUTTER_HEIGHT) );
	myDiv.appendChild( myText );
	myDiv.className = "item-spacer";
	myDiv.style.height = (h-GUTTER_HEIGHT) +"px";
	myDiv.style.width = w +"px";
	myDiv.style.left = x +"px";
	myDiv.style.top = y +"px";
	$( '#project' ).append( myDiv );	
	gaps.push( myDiv );
}

function clearGaps()
{
	for( i=0 ; i <gaps.length ; i++ )
	{
		gaps[i].style.display = "none";
	}
	gaps = [];
}

function xSort(a,b) // sort columns from left to right
{
	return(a.x-b.x);
}

function ySort(a,b) // sort by column height (ascending)
{
	if(a.y==b.y) return(a.x-b.x);
	else return(a.y-b.y);
}