Ext.onReady(function(){

	mainPanel = new Ext.Viewport({
		id:				'mainPanel',
		layout:			'column',
		items: [
			{
				columnWidth:	0.5,
				html:			' '
			},
			new Ext.Panel({
				id:				'mainViewport',
				layout:			'border',
				cls:			'mainViewport',
				width:			800,
				height:			500,
				defaults:		{
					border:			false,
					monitorResize: 	true
				},
				
				items:[{
						region:		'west',
						id:			'westPanel',
						width:		178,
						items:[
							new Ext.tree.TreePanel({
								region:		'center',
								id:			'treePanel',
								cls:		'sectionsTree',
								loader:		new Ext.tree.TreeLoader({}),
								root:		new Ext.tree.AsyncTreeNode({
												expanded:		true,
												children:		[{
																	text: 'Articles',
																	panel: Articles,
																	leaf: true
																},{
																	text: 'Classes',
																	panel: Classes,
																	leaf: true
																},{
																	text: 'Projects',
																	panel: Projects,
																	leaf: true
																},{
																	text: 'Art Design',
																	panel: ArtDesign,
																	leaf: true
																},{
																	text: 'Pictures',
																	panel: Pictures,
																	leaf: true
																},{
																	text: 'Files',
																	panel: Files,
																	leaf: true
																},{
																	text: 'About Me',
																	panel: AboutMe,
																	leaf: true
															}]
											}),
								rootVisible:false,
								height:		500,
								listeners: {
									'click': function(node, e) {
										var center = Ext.getCmp('centerPanel');
										var panel = node.attributes.panel;

										center.layout.setActiveItem(panel);
										if(panel.body) {
											panel.body.setSize(center.body.getSize());
										}
									}
								}
							})
						]
					},{
						region:		'east',
						id:			'eastPanel',
						width:		8
					},{
						region:		'south',
						id:			'southPanel',
						height:		8
					},{
						region:		'center',
						id:			'centerPanel',
						layout:		'card',
						activeItem:	0,
						items:		[
							Articles,
							Classes,
							Projects,
							ArtDesign,
							Pictures,
							Files,
							AboutMe
						]
					}
				]
			}),
			{
				columnWidth:	0.5,
				html:			' '
			}
		]
	});

	var map = {
		'articles':		0,
		'classes':		1,
		'projects':		2,
		'artdesign':	3,
		'pictures':		4,
		'files':		5,
		'aboutme':		6
	};
	
	mainPanel.render(document.body);

	var startup = 0;
	if(window.location.href.match(".*?start=(.*)")) {
		startup = map[window.location.href.match(".*?start=(.*)")[1]];
	}
	Ext.getCmp('treePanel').root.childNodes[startup].select();
	Ext.getCmp('centerPanel').layout.setActiveItem(startup);
});