Ext.onReady(function(){
	
	setTimeout(function(){
	    Ext.get('loading').remove();
	    Ext.get('loading-mask').fadeOut({remove:true});
	  }, 250);

	
	Ext.get('logout').on('click', function(e)
	{
		Ext.MessageBox.confirm('Confirm', 'Are you sure want to logout?', showResult);
	});
	
	Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	
	   var viewport = new Ext.Viewport({
            id:'viewportid',
	    layout:'border',
            items:[{
	        region: 'north',
		xtype: 'panel',
		border:false,
		height: 100,
		contentEl: 'north'
		},{
		region:'west',
                id:'westpanel',
                title:'Main Menu',
                split:true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins:'0 0 5 5',
                cmargins:'35 5 5 5',
                layout:'accordion',
                layoutConfig:{
                    animate:true
                },
                items: [

		{
			title:'Abouts',
			contentEl: 'abouts',
			border:false,
			autoScroll:true,
			iconCls:'settings'
                }]
            },
		tabs
		]
        });
});

var tabs = new Ext.TabPanel({
        region: 'center',
		xtype: 'tabpanel', // TabPanel itself has no title
		resizeTabs:true, // turn on tab resizing
        margins:'0 0 0 0',
		minTabWidth: 115,
        tabWidth:135,
        enableTabScroll:true,
        plain:true,
        width:600,
        height:250,
		defaults: {autoScroll:true}			
});

function addTab(strId, strTitle, strLink){
	
	tabs.add({
		id:strId,
		title: strTitle,
		fitToFrame: true,                   
		html: '<iframe id="'+strId+'" src="'+strLink+'" frameborder="0" width="100%" height="100%" border="0" marginwidth="0" marginheight="0"></iframe>',   
		iconCls: 'tabs',
		closable:true,
		listeners: {
		  tabchange: function(){
			tabs.reload();
		  }
	   }
	}).show();		
	
}

function showResult(btn){
	if (btn == 'yes')
	{
		window.location.href='logout.php';
	}
};