Layout = Class.create({
	
	//NUM_COLS : 5,
	MIN_COLS : 2,
	COL_WIDTH : 127,
	GUTTER_WIDTH : 15,
	WIDTHS: [100],
	
	initialize : function(block)
	{
		this.block = block;
		this.data = [];
		this.content = [];
		this.delayTimeout = null;
		this.oldW = 0;
		
		while(block.firstChild)
		{
			if(block.firstChild.nodeType == 3) // discard text nodes
			{
				block.removeChild(block.firstChild);
			}
			else // harvest the node
			{
				//log(block.firstChild);
				var w = block.firstChild.clientWidth; //block.firstChild.getWidth(); // this was killing IE?
				if(!w) // stray node eg <br>
				{
					block.removeChild(block.firstChild);
					continue;
				}
				else if(this.WIDTHS.indexOf(w)<0 ) // block is wrong size
				{
					log("Layout error: w=",w,block.firstChild);
					w = 2;
				}
				else w = this.WIDTHS.indexOf(w); // success
				
				this.data.push({width:w});
				
				this.content.push(block.removeChild(block.firstChild));
			}
		}
		
		this.onResize();
		Event.observe(window,'resize', this.onResize.bindAsEventListener(this));
	},
	
	onResize : function(delay)
	{
		//log('resize',delay);
		if(delay){
			clearTimeout(this.delayTimeout);
			var that = this;
			return this.delayTimeout = setTimeout(function(){that.onResize()},500);
		}
		
		var w = window;
		var width = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
		width -= this.GUTTER_WIDTH; // PADDING
		width -= 200;
		
		this.num_cols =
			Math.max(
				Math.floor( width / (this.COL_WIDTH+this.GUTTER_WIDTH) ),
				this.MIN_COLS
			);
		
		if(this.oldW == this.num_cols) return; //log('same size'); // same, no need to change
		this.oldW = this.num_cols;
		
		this.layout();
	},
	
	layout : function()
	{
		//this.num_cols = this.NUM_COLS;
		
		this.cols = [];
		var i=0;
		while(i<this.num_cols){
			this.cols.push({x:i++,y:0});
		}
		
		//log(this.data);
		
		for(i=0; i<this.data.length; i++) // place in position
		{
			var o = this.data[i]; // the object
			o.width= Number(o.width);
			
			this.cols.sort(this.ySort); // find shortest col
			
			if(o.width==1) // easy - add to shortest col & set new height
			{
				var new_item = this.attachItem(i,
					this.cols[0].x*(this.COL_WIDTH+this.GUTTER_WIDTH),
					this.cols[0].y
				);
				
				this.cols[0].y += new_item.clientHeight;
				
				//this.cols.sort(this.xSort)
				//log(this.cols);
			}
			else this.placeWide(o,i); // harder, see below
		}
		
		this.placeFootNav();
	},
	
	placeWide : function(o,id) // place an item that spans 2+ columns
	{
		this.cols.sort(this.xSort); // set cols in normal L-R order
		
		var i, j,
			last_col = this.num_cols-o.width+1, // last possible col due to item width
			max_y, spanned_y,
			possible_places = [];
		
		for(i=0; i<last_col; i++) // for each possible col ...
		{
			max_y = 0;
			for(j=0; j<o.width; j++) // find the max y of the cols that item will span
			{
				spanned_y = this.cols[i+j].y;
				max_y = Math.max(spanned_y,max_y);
			}
			possible_places.push({x:this.cols[i].x, y:max_y});
		}
		
		possible_places.sort(this.ySort); // find the shortest possible place
		
		var new_item = this.attachItem(id,
			possible_places[0].x*(this.COL_WIDTH+this.GUTTER_WIDTH),
			possible_places[0].y
		);
		
		for(i=possible_places[0].x; i<possible_places[0].x+o.width; i++) // set each spanned col to new height
		{
			this.cols[i].y = possible_places[0].y + new_item.clientHeight;
		}
		
		//this.cols.sort(this.xSort);
		//log(this.cols);
	},
	
	attachItem: function(id,x,y)
	{
		var new_item = this.content[id];
		new_item.style.position = "absolute";
		new_item.style.left = x+"px";
		new_item.style.top = y+"px";
	
		this.block.appendChild(new_item);
		
		return new_item;
	},
	
	xSort : function(a,b) // sort columns from left to right
	{
		return(a.x-b.x);
	},
	
	ySort : function (a,b) // sort by column height (ascending)
	{
		if(a.y==b.y) return(a.x-b.x);
		else return(a.y-b.y);
	},
	
	placeFootNav : function() // place at bottom right of page
	{
		if(!$('footNav')) return;
		
		this.cols.sort(this.ySort);
		var x = ((this.num_cols-1)*(this.COL_WIDTH+this.GUTTER_WIDTH));
		var y = this.cols[this.cols.length-1].y; // tallest column
		
		var n = $('footNav');
		n.style.top = y+"px";
		n.style.left = x+"px";
	}
});