
	// Instantiate main tree classes
	var treeLoader = new Ext.tree.TreeLoader({
		dataUrl:'tech/tech_json.php'
	});

	var rootNode = new Ext.tree.AsyncTreeNode({
		text: 'My Tech Notes',
		expanded: true
	});

	var techTree= new Ext.tree.TreePanel({
		loader: treeLoader,
		root: rootNode,
		hideBorders: true,
		enableDD: false,
		autoScroll: true,
		sortType: function(node) {
			return node.attributes.text
		}
	});
	techTree.expandAll();
	
	var showJustThisOne = function(elements, thisOne){
		for (var x = 0 ; x < elements.length; x ++){
			var el = Ext.get(elements[x]);
			if (el && el.id == thisOne) {
				el.removeClass("hide");
				el.addClass("show");
			} else {
				el.removeClass("show");
				el.addClass("hide");
			}
		}
	}
	//showJustThisOne( Ext.query("*[id^=content]"), 'content-3' );

	techTree.getSelectionModel().on('selectionchange', function(techTree, node) {

		// If root node clicked show designated splash page.
		if (node.attributes.text === 'My Tech Notes') {
			node.attributes.entryDiv = 'techSplash';
		}

		// Retrieve references for document content panel and toolbar header description area.
		//var el_docBody = Ext.getCmp('entry').body;
		var el_tbTitleArea = Ext.getCmp('panelTitle');
		el_tbTitleArea.setText('<div style="font-weight:bold;font-size:1.2em">'+node.attributes.text+'</div>');

		// Hide all 'techContent' div's except the one just clicked.
		//showJustThisOne( Ext.query("*[id^=techContent-]"), node.attributes.entryDiv );
		
		// Hide previous content.
		var curr_item = Ext.getCmp(current_tech_item);
		if (curr_item) { curr_item.hide(); }
		// Show new content.
		current_tech_item = node.attributes.entryDiv;
		//alert( current_tech_item );
		var curr_item = Ext.getCmp(current_tech_item);
		if (curr_item) {
			//alert( curr_item.id );
			curr_item.show();
		}
	});
	
	techTree.expandAll();
