Ext.onReady(function(){
   // Menu containing actions
    var tabActions = new Ext.Panel({
    	frame:true,
    	title: 'Links',
    	collapsible:true,
    	contentEl:'actions-div',
    	titleCollapse: true
    });
    var tabActions2 = new Ext.Panel({
    	frame:true,
    	title: 'Search',
    	collapsible: true,
    	contentEl:'gsearch',
    	titleCollapse: true
    });
    var tabActionsStore = new Ext.Panel({
    	frame:true,
    	title: 'Computer Stores',
    	collapsible: true,
    	contentEl:'actions-store',
    	titleCollapse: true,
    	collapsed: true
    });
    var tabFireFox = new Ext.Panel({
    	frame:true,
    	title: 'Banners',
    	collapsible: false,
    	contentEl:'action-banner',
    	collapsed: false
    });
    var tabSpacer1 = new Ext.Panel({
       frame: false,
       html: '<div style="height: 5px;">&nbsp;</div>',
       shadow: false,
       baseCls: 'x-plain'
    });
    var tabSpacer2 = new Ext.Panel({
       frame: false,
       html: '<div style="height: 5px;">&nbsp;</div>',
       shadow: false,
       baseCls: 'x-plain'
    });
    var tabSpacer3 = new Ext.Panel({
       frame: false,
       html: '<div style="height: 5px;">&nbsp;</div>',
       shadow: false,
       baseCls: 'x-plain'
    });
    
 
    // Parent Panel to hold actions menu
    var actionPanel = new Ext.Panel({
    	id:'action-panel',
    	region:'west',
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:200,
    	minWidth: 165,
    	border: false,
    	baseCls:'x-plain',
    	items: [tabActions, tabSpacer1, tabActions2, tabSpacer2, tabActionsStore, tabSpacer3, tabFireFox]
    });
 
    // Main (Tabbed) Panel
    var tabPanel = new Ext.TabPanel({
		region:'center',
		deferredRender:false,
		autoScroll: true, 
		margins:'0 4 4 0',
		activeTab:0,
		items:[{
			id:'tab1',
			contentEl:'tabs',
    		title: 'Main',
    		closable:false,
    		autoScroll:true
		}]
    });
    var tabHeader = new Ext.Panel({
    	region: 'north',
    	frame: true,
    	margins: {left: 5, top: 1, bottom: 1, right: 15},
    	autoScroll: false,
		id:'header-panel',
		baseCls:'x-plain',
		contentEl: 'el-header'
	});
 
    // Adds tab to center panel
    function addTab(tabTitle, targetUrl){
        tabPanel.add({
	    title: tabTitle,
	    iconCls: 'tabs',
	    autoLoad: {url: targetUrl, callback: this.initSearch, scope: this},
	    closable:true
	}).show();
    }
 
    // Update the contents of a tab if it exists, otherwise create a new one
    function updateTab(tabId,title, url) {
    	var tab = tabPanel.getItem(tabId);
    	if(tab){
    		tab.getUpdater().update(url);
    		tab.setTitle(title);
    	}else{
    		tab = addTab(title,url);
    	}
    	tabPanel.setActiveTab(tab);
    }

    function addTabIFrame(tabTitle, targetUrl, tabId){
        var tab = tabPanel.getItem(tabId);
        if(tab) {
            tabPanel.setActiveTab(tab);
        } else {
        	tabPanel.add({
        	    id: tabId,
        		title: tabTitle,
        		iconCls: 'tabs',
        		closable:true,
        		html:'<iframe width="100%" height="100%" src="' + targetUrl + '"></iframe>'
        	}).show();
        }
    }
    function addTabUrl(tabTitle, targetUrl, tabId){
        var tab = tabPanel.getItem(tabId);
        if(tab) {
            tabPanel.setActiveTab(tab);
        } else {
        	tabPanel.add({
        	    id: tabId,
        		title: tabTitle,
        		iconCls: 'tabs',
        		closable:true,
        		autoLoad: targetUrl,
        		autoScroll: true
        	}).show();
        }
    }
 
    // Map link ids to functions
    var count = 0;
    var actions = {
    	'a-home' : function(){
    	    tabPanel.setActiveTab('tab1');
    	},
		'a-webmail' : function(){
			addTabIFrame('Webmail','http://webmail.refamco.ca/','tab-webmail');
		},
		'a-reading' : function(){
		    addTabIFrame('Suggested Reading List','getpage.php?page=Suggested%20Reading','tab-reading');
		},
		'a-gallery' : function() {
		    addTabIFrame('Photo Gallery','http://gallery.refamco.ca/','tab-gallery');   
		}
    };
 
    function doAction(e, t){
    	e.stopEvent();
    	actions[t.id]();
    }
    
     // Configure viewport
    viewport = new Ext.Viewport({
           layout:'border',
           items:[
           		tabHeader,
           		actionPanel, 
           		tabPanel
			]
	});
 
    // This must come after the viewport setup, so the body has been initialized
    actionPanel.body.on('mousedown', doAction, null, {delegate:'a'});

});