Ext.onReady(function(){
	function loadPage(item){
		var tabPanel = viewport.getComponent('center');
		item.tab = tabPanel.add({
			closable: true,
			title: item.text,
			itemId: item.url,
			iconCls: item.iconCls,
			html: '<iframe src="'+item.url+'?_dc='+new Date().getTime()+'" height=100% width=100% style="border: none"></iframe>'
		}).show();
	}
	var tbar = [{
		xtype: 'buttongroup',
		title: 'Apostila',
		columns: 1,
		defaults: {
			scale: 'small',
			iconCls: 'icon-apostila'
		},
		items: [{
			text: 'Versão 1.0',
			url: 'apostila/Apostila de ExtJS com PHP e PostgreSQL v1.0.pdf',
			handler: loadPage
		},{
			text: 'Versão 1.1',
			url: 'apostila/Apostila de ExtJS com PHP e PostgreSQL v1.1.pdf',
			handler: loadPage
		},{
			text: 'Versão 1.2',
			url: 'apostila/Apostila de ExtJS com PHP e PostgreSQL v1.2.pdf',
			handler: loadPage
		},{
			text: 'Versão 1.3',
			url: 'apostila/Apostila de ExtJS com PHP e PostgreSQL v1.3.pdf',
			handler: loadPage
		}]
	},{
		xtype: 'buttongroup',
		title: 'Exercícios Exemplos',
		columns: 2,
		defaults: {
			scale: 'small',
			iconCls: 'icon-exercicio'
		},
		items: [{
			text: 'Exemplo 1',
			url: 'exemplos/exercicio1.html',
			handler: loadPage
		},{
			text: 'Exemplo 2',
			url: 'exemplos/exercicio2.html',
			handler: loadPage
		},{
			text: 'Exemplo 3',
			url: 'exemplos/exercicio3.html',
			handler: loadPage
		},{
			text: 'Exemplo 4',
			url: 'exemplos/exercicio4.html',
			handler: loadPage
		},{
			text: 'Exemplo 5',
			url: 'exemplos/exercicio5.html',
			handler: loadPage
		},{
			text: 'Exemplo 6',
			url: 'exemplos/exercicio6.html',
			handler: loadPage
		},{
			text: 'Exemplo 7',
			url: 'exemplos/exercicio7.html',
			handler: loadPage
		}]
	},{
		xtype: 'buttongroup',
		title: 'Exercícios Resolvidos',
		columns: 2,
		defaults: {
			scale: 'small',
			iconCls: 'icon-exercicio'
		},
		items: [{
			text: 'Exercício 1',
			url: 'resolvidos/exercicio1.html',
			handler: loadPage
		},{
			text: 'Exercício 2',
			url: 'resolvidos/exercicio2.html',
			handler: loadPage
		},{
			text: 'Exercício 3',
			url: 'resolvidos/exercicio3.html',
			handler: loadPage
		},{
			text: 'Exercício 4',
			url: 'resolvidos/exercicio4.html',
			handler: loadPage
		},{
			text: 'Exercício 5',
			url: 'resolvidos/exercicio5.html',
			handler: loadPage
		},{
			text: 'Exercício 6',
			url: 'resolvidos/exercicio6.html',
			handler: loadPage
		},{
			text: 'Exercício 7',
			url: 'resolvidos/exercicio7.html',
			handler: loadPage
		}]
	},{
		xtype: 'buttongroup',
		title: 'Práticas Exemplos',
		columns: 1,
		defaults: {
			scale: 'small',
			iconCls: 'icon-pratica'
		},
		items: [{
			text: 'Prática 1',
			url: 'resolvidos/pratica1.html',
			handler: loadPage
		},{
			text: 'Prática 1.1',
			url: 'resolvidos/pratica1.1.html',
			handler: loadPage
		},{
			text: 'Prática 2',
			url: 'resolvidos/pratica2.html',
			handler: loadPage
		},{
			text: 'Prática 3',
			url: 'resolvidos/pratica3.html',
			handler: loadPage
		}]
	},{
		xtype: 'buttongroup',
		title: 'Práticas Resolvidas',
		columns: 1,
		defaults: {
			scale: 'small',
			iconCls: 'icon-pratica'
		},
		items: [{
			text: 'Prática Resolvida 1',
			url: 'resolvidos/pratica1.zip',
			handler: loadPage,
			disabled: false
		},{
			text: 'Prática Resolvida 1.1',
			url: 'resolvidos/pratica1.1.zip',
			handler: loadPage,
			disabled: false
		},{
			text: 'Prática Resolvida 2',
			url: 'resolvidos/pratica2.zip',
			handler: loadPage
		},{
			text: 'Prática Resolvida 3',
			url: 'resolvidos/pratica3.zip',
			handler: loadPage
		}]
	}];
	
	var viewport = new Ext.Viewport({
		layout: 'border',
		items: [{
			region: 'north',
			xtype: 'panel',
			title: '<center><b>Curso de ExtJS com PHP e PostgreSQL</b></center>',
			border: false,
			tbar: tbar,
			autoHeight: true
		},{
			region: 'center',
			itemId: 'center',
			xtype: 'tabpanel',
			border: false,
			activeTab: 0,
			items: [{
				title:'Home',
				autoLoad:{url:'content.html',nocache:true}
			}]
		}]
	})
})