Main = function(){
	var background = Ext.get('background');
	var body = Ext.get(document.body);
	var layout;

	return {
		init : function(){
			var leftpanel = {
				region: 'center',
				layout: 'border',
				items: [
					{
						region: 'north',
						contentEl: 'leftheader',
						border: false,
						height: 12
					},
					{
						region: 'center',
						border: false,
						contentEl: 'leftcontent'
					},
					{
						region: 'south',
						contentEl: 'leftfooter',
						border: false,
						height: 12
					}
				],
				border: false,
				split: true,
				minSize: 200,
				width: '50%'
			};

			var rightpanel = {
				region: 'east',
				layout: 'border',
				items: [
					{
						region: 'north',
						contentEl: 'rightheader',
						border: false,
						height: 12
					},
					{
						region: 'center',
						border: false,
						contentEl: 'rightcontent'
					},
					{
						region: 'south',
						contentEl: 'rightfooter',
						border: false,
						height: 12
					}
				],
				border: false,
				split: true,
				minSize: 300,
				width: '50%'
			};

			var mainpanel = {
				layout: 'border',
				border: false,
				style: 'z-index: 200;',
				items: [
					{
						region: 'north',
						contentEl: 'header',
						border: false,
						margins: '5 5 0 5',
						height: 40
					},
					
					{
						region: 'center',
						layout: 'border',
						border: false,
						margins: '0 15',
						items: [leftpanel, rightpanel]
					},
	
					{
						region: 'south',
						contentEl: 'footer',
						border: false,
						margins: '0 5 5 5',
						height: 40
					}
				]
			}

			layout = new Ext.Viewport(mainpanel);

			Ext.EventManager.onWindowResize(this.onResize);
			this.onResize(body.getWidth(), body.getHeight());
			Ext.EventManager.on(body, 'playerlistupdate', function(){
				alert(arguments);
			}); 

			Ext.get('loading').hide();
			Ext.get('loading-mask').hide();
		},

		onResize : function(width, height) {
			background.setHeight(height - 10);
			background.setWidth(width - 10);
		}
		
	};
}();