var Application = new App({

	init :function(){
		Ext.QuickTips.init();
	},
	
	initModules : function(){
		for(var i in this.modules){
            var m = this.modules[i];
            m.app = this;  //backlink
			m.init();
        }
		this.start();
		this.isReady = true;
    },
	
	start : function(){
		var $this = this;
	
		var tb = new Ext.Toolbar({
			hideBorders: true,
			cls: "tasks-toolbar"
		});
	
		var tp = new Ext.TabPanel({
			id: 'tabs',
			activeTab: 0,
			enableTabScroll: true,
			region:'center',
			plugins: new Ext.ux.TabCloseMenu()
		});
		
		for(var i in this.modules) {
			var m = this.modules[i];
			var b = new Ext.Button({
				text: m.title,
				handler: function(id){ 
					var tab = tp.getComponent(id);
					if(tab) {
						tp.setActiveTab(id);
					} else {
						var item = $this.getModule(id).start();
						tp.add(item);
						tp.doLayout(); 
						tp.setActiveTab(id);
					}
				}.createCallback(m.id)
			});
			tb.add(b);
		}
		tb.doLayout();
		
		var item = this.getModule('tasks').start();
		
		tp.add(item);
		tp.doLayout();  
		
		var utb = new Ext.Panel({
			id: 'user-toolbar',
			cls: 'user-toolbar',
			html:'<i>Hello, </i><button id="profile" class="utb-btn">Andrew</button>|<button id="settings" class="utb-btn">setings</button>|<button id="logout" class="utb-btn">log out</button>',
			hideBorders: true,
			height: 30,
			width: 400,
			renderTo: Ext.getBody()
		});
		
		new Ext.Viewport({
			layout: 'border',
			hideBorders: true,
			title: 'Ext Layout Browser',
			items: [
			{
				xtype: 'panel',
				region: 'north',
				bbar: tb,
				cls: 'logo-panel',
				height: 80,
				html: '',
				hideBorders: true
			},
			tp
			],
			renderTo: Ext.getBody()
		});
		
	}
	
});