Ext.onReady(function() {

	var mainLayout = new Ext.BorderLayout(document.body, 
	{
	    north: { 
		split: false, 
		titlebar: false,
		initialSize: 75 
	    },
	    south: {
		split: true, 
		collapsible: true,
		titlebar: false,
		initialSize: 50,
		minSize: 10,
		maxSize: 150
	    },
	    east: { 
		title: "Waypoints",
		split: true, 
		collapsible: true,
		titlebar: true,
		fitToFrame: true,
		autoScroll: true,
		initialSize: 300,
		minSize: 150,
		maxSize: 600
	    }, 
	    center: {
		title: "Map",
		titlebar: true,
		collapsible: false
	    }
	});

	mainLayout.beginUpdate();

	mainLayout.add('north', new Ext.ContentPanel('header', {
	    fitToFrame: true
	}));
	mainLayout.add('south', new Ext.ContentPanel('footer', {
	    fitToFrame: true
	}));
	mainLayout.add('east', new Ext.ContentPanel('rightside', {
	    fitToFrame: true
	}));
	mainLayout.add('center', new Ext.ContentPanel('map-wrapper', {
	    fitToFrame: true
	}));

	mainLayout.endUpdate();

	glidermaps.sidebarEl = mainLayout.getRegion('east').bodyEl;
	glidermaps.sidebarEl.setStyle('overflow-x', 'hidden');

});