function layoutPage( pageObjects, left, right, top, bottom )
{
	var area = new Area( left, top, right, bottom );
	
	var panels = new Array( new Panel( area.getLeft( ), area.getTop( ), area.getRight( ), area.getBottom( ), area ) );

	var previousFitID = null;
	
	for ( var objectsSeen = 0; objectsSeen < pageObjects.length; ++objectsSeen ) //------------------------------------------------------------->
	{
		var object = pageObjects[ objectsSeen ];
		
		if ( previousFitID == null || object.id != previousFitID )
		{
			var best_distance = null;
			var current_best_panel = null;
			
			for ( var panelsSeen = 0; panelsSeen < panels.length; ++panelsSeen ) //------------------------->
			{
				var panel = panels[ panelsSeen ];
				
				var distance = panel.distance( object );
				
				var can_fit_in_panel = ( distance != null );
				var first_fit = ( best_distance == null );
				var new_distance_is_closer = can_fit_in_panel && !first_fit && distance < best_distance;
	
				if ( can_fit_in_panel && ( first_fit || new_distance_is_closer ) )
				{
					best_distance = distance;
					
					current_best_panel = panel;
				}
				
				var fit_found = ( current_best_panel != null );
				var fit_cant_be_better = ( best_distance == 0 );
	
				if ( fit_found && fit_cant_be_better )
				{
					break; //-------------------------------------------------------->
				}
			}
			
			var fit_found = ( current_best_panel != null );
			
			if ( fit_found )
			{
				var new_panels = current_best_panel.add( object );
	
				informationPanel.addText( "layoutPage( ) --> Fit found for object " + object.id + " " + object.getArea( ) + " in panel " + current_best_panel.area );//////////////////////////////////////////////////////////
				
				for ( var newPanelsSeen = 0; newPanelsSeen < new_panels.length; ++newPanelsSeen )
				{
					var new_panel = new_panels[ newPanelsSeen ];
					
					informationPanel.addText( "layoutPage( ) --> Add New Panel: " + new_panel.area );//////////////////////////////////////////////////////////
				}
				
				// remove old panel from panel list
				// find old panel index
				var oldPanelIndex = -1;
				
				for ( var panelIndex = 0; panelIndex < panels.length; ++panelIndex )
				{
					if ( panels[ panelIndex ] == current_best_panel )
					{
						oldPanelIndex = panelIndex;
					}
				}
	
				informationPanel.addText( "layoutPage( ) --> Remove Old Panel: " + current_best_panel.area );//////////////////////////////////////////////////////////
	
				if ( oldPanelIndex != -1 )
				{
					panels.splice( oldPanelIndex, 1 );
				}
	
				panels = panels.concat( new_panels );
	
				object.show( );
				
				previousFitID = object.id;
			}
			else
			{
				informationPanel.addText( "layoutPage( ) --> Object with id: " + object.id + " does not fit" );//////////////////////////////////////////////////////////
				
				// remove object from page
				object.hide( );
			}
			
			if ( panels.length == 0 )
			{
				informationPanel.addText( "layoutPage( ) --> No more panels" );//////////////////////////////////////////////////////////
	
				// all the remaining page objects will be removed
			}
			
	//		informationPanel.addText( "layoutPage( ) --> Current Panels: ", false );//////////////////////////////////////////////////////////
	//	
	//		for each ( panel in panels )
	//		{
	//			informationPanel.addText( panel.area + " ", false );//////////////////////////////////////////////////////////
	//		}
		}
	}
	
	/*
	for each ( panel in panels )
	{
		var div = document.createElement( "div" );
		div.style.position = "absolute";
		div.style.left = panel.area.getLeft( );
		div.style.top = panel.area.getTop( );
		div.style.width = panel.area.getWidth( );
		div.style.height = panel.area.getHeight( );
		div.style.border = "1px solid red";
		div.style.zIndex = "100";
		document.body.appendChild( div );
	}
	*/
}