Ext.onReady(function() {
	var header = new Ext.BoxComponent({ el : "Header", region:"north", height:65 });
	var footer = { region:'south', contentEl: 'Footer', frame : true, split:true, height: 60, margins: "5 100 5 100" };
	var myFunction = function() {
		var DomNodes = Ext.query(".localLink");
		if (DomNodes.length > 0) {
			for (var dnI = 0, dnL = DomNodes.length; dnI < dnL; dnI++) {
				var theNode = Ext.get(DomNodes[dnI]);
				theNode.on( {
					'click' : function  (e, t, o ) {
						var theCenter = vp.getComponent( center.id );
						theCenter.body.load({
							url: t.href,
							text: 'Loading...' + t.innerHTML,
							timeout: 30,
							// scripts: false,
							scripts: true,
							callback: myFunction,
							scope: this
						});
						theCenter.body.update("The page requested is not available: " + t.innerHTML);
						e.stopEvent();
					}
				})
			}
		}
	};

	var Sec0Content = {
		titleID : "HomePageWelcomeTitle",
		id : "pnlHomePageWelcome",
		contentEl : "HomePageWelcome"
	}

	var Sec1Content = {
		titleID : "TCF2009UpdatesTitle",
		id : "pnlTCF2009Updates",
		contentEl : "TCF2009Updates"
	}

	var Sec2Content = {
		titleID : "TCF2009Title",
		id : "pnlTCF2009",
		contentEl : "TCF2009Info"
	}
	var Sec3Content = {
		titleID : "ProfessionalSummaryTitle",
		id : "pnlProfessionalSummary",
		contentEl : "ProfessionalSummary"
	}

	var contents = [ Sec0Content, /* Sec1Content, Sec2Content, */ Sec3Content ];


	var center = {
		id : "vpContent",
		contentEl : "Body",
        region: 'center',
        xtype: 'panel',
		margins : "3 25 3 3",
		autoScroll : true,
		frame : true,

		title : "Welcome",
		closable : true,
		defaults : {frame : true, collapsible : true, cls : "Padding", header : true },
		items : contents
    };

	var cfg = {
		url : "NavWindow.js",
		rootID : "examples"  // This is also the folder name to show
	};

    var dfltCfgParams = {
      split : true,
      collapsible : true,
      margins : "3 0 3 25",
      cmargins : "3 3 3 25"
    };

      // set up the config params for the navigation tree panel
    var treeParams = Ext.apply( {
      region : "west",
      width : 240,
      frame : true,
      title : "What would you like to see?",
      footerCfg : {
        tag : "a",
		href : "pages/ContactInfo",
		cls : "NavFooter",
		id : "NavFooterLink",
		html : "Who is Mike Barlow?"
	  }
    }, cfg );


	var NavBar1 = new wcc.tree(
      Ext.apply( treeParams, dfltCfgParams )
    );


	var vp = new Ext.Viewport({
		layout: 'border',
	    items: [
			header,
			NavBar1,
			center,
			footer
		]
	});

	// Once the viewport is generated, set the titles of each content panel
	// from the specified element within the content panel
	// and hide the specified element.
	// this allows for each section to have a "title" even if javascript is disabled
	Ext.each(vp.getLayout().center.items, function(region, idx, ary) {
		var title = Ext.get(region.titleID).dom.innerHTML;
		Ext.get(region.titleID).dom.style.display="none";
		Ext.getCmp(region.id).setTitle( title );
	});



      // Tell the window to handle the custom 'clickLeaf' and
      // 'clickBranch' events from the tree/navigation panel
    vp.relayEvents(NavBar1, ['clickLeaf', 'clickBranch']);
	vp.relayEvents(Ext.get("NavFooterLink"), ["click"]);
	vp.getEl().fadeIn();

      // here's the handlers for the custom TreePanel events
      // nothing fancy for the example but lots more could be done.
    vp.on( {
      'click' : function  (e, t, o ) {
		var theCenter = vp.getComponent( center.id );
		theCenter.body.load({
			url: t.href,
			text: 'Loading...' + t.innerHTML,
			timeout: 30,
			scripts: false,
			callback: myFunction,
			scope: this
		});
//        theCenter.body.update("The page requested is not available: " + t.innerHTML);
        e.stopEvent();
	  },
      'clickLeaf' : function (nodeObj, nodeAttr, nodeText) {
		var theCenter = vp.getComponent( center.id );
		theCenter.body.load({
			url: nodeObj.id,
			text: 'Loading...',
			timeout: 30,
			scripts: false,
			callback: myFunction,
			scope: this
		});
        // theCenter.body.update("The page requested is not available: " + nodeObj.text);
      },
      'clickBranch' : function(nodeObj, nodeAttr, nodeText) {
		if ("Home" === nodeObj.text) {
			var theCenter = vp.getComponent( center.id );
			theCenter.body.load({
				url: nodeObj.id,
				text: 'Loading...',
				timeout: 30,
				scripts: false
			});
		    // theCenter.body.update("The page requested is not available: " + nodeObj.text);
		}
		else {
		  nodeObj.expanded ? nodeObj.collapse() : nodeObj.expand();
		}
      },
      scope : this
    });

	// Get all nodes with a class of "localLink"
	// This is the standard for all anchors in this site which have a local path.
	// This is used to display the linked to page in the content panel rather than opening a new window
	myFunction();


	document.getElementById("Footer").style.display = "block";
	document.getElementById("Body").style.display = "block";

});