Ext.onReady( function() {

    v = new Ext.Viewport(
    {
    layout:"border",
    items:[
      {
        region:'north',
        contentEl: 'north'
      },
      {
        region: "center",
        contentEl: 'center',
        title: "Content"
      },
      {
        region:"south",
        id: 'south',
        contentEl: 'status',
        title:"Status/Log window",
        height:80,
        split:true,
        collapsible: true,
        titleCollapse:true,
        autoScroll : true
      },
      {
        xtype: 'treepanel',
	autoScroll: true,
	id: 'ktree',
	region:"west",
	title:"Knowledge Tree",
	width:220,
	split:true,
	collapsible: true,
        containerScroll: true,
	rootVisible: false,
        listeners: {
		click: function (node) {
                        // show_node_content( node );    // rem: "selectionchange" event now does this.
		},
		load: function () {
                    // output_log( "load - root: " + this.root + ", firstChild: " + this.root.firstChild + ", isFirst" + this.root.firstChild.isFirst() );
                    var vourroot = this.root.firstChild;  // real ExtJS root is hidden.
                    var rootpath = vourroot.getPath();
                    this.selectPath( rootpath );          // select our root
                    // this.expandPath( rootpath );       // expand our root if req'd.
                    // show_node_content( vourroot );     // and display its record. rem: "selectionchange" event now does this.
                    // this.setRootNode( this.root.firstChild );
		},
                contextmenu: function ( node, e ) {
                        // console.info( 'You clicked: '+ node + ",  node.isLeaf: " + node.isLeaf() + " " + node.firstChild + ", expanded: " + node.expanded );
                        if ( node.firstChild )    // only on nodes with children. ie. non-empty folders.
                        {
                            // menuC.items.get('expand').setDisabled( node.expanded ); - might have collapsed/expanded children
                            // menuC.items.get('collapse').setDisabled( !node.expanded );
                            menuC.node = node;   // pass to handler
                            menuC.showAt( e.getXY() );
                        }
		},
		show: function () {
                    // output_log( "show - root: " + this.root + ", firstChild: " + this.getRootNode().firstChild );
		},
		render: function () {
                    // output_log( "render - root: " + this.root + ", firstChild: " + this.getRootNode().firstChild );
                    // this.root.expand( true );
		}
        },
	loader: new Ext.ux.CustomXmlTreeLoader({
            dataUrl:'webpod.xml',
            requestMethod: 'GET'
                }),
                root: new Ext.tree.AsyncTreeNode()
      }
      ]
    });

    // Hide South Panel
    if ( true )
    {
        Ext.getCmp( 'south' ).hide();
        Ext.getCmp( 'south' ).collapse();
    }

// Display the html content for the spec'd node.
function show_node_content( node )
{
    Ext.get('center-iframe').dom.src = node.attributes.hrefsrc;
}

// Track selection changes.
var ktree = Ext.getCmp('ktree');
ktree.getSelectionModel().on("selectionchange", function( selModel, node ){
    // output_log( "Selection changed to node: " + node );
    show_node_content( node );
    }, this, true
);

menuC.add( {text: 'Expand All', handler: onNodeClick, id: 'expand' },
           {text: 'Collapse All', handler: onNodeClick, id: 'collapse' }
         );

// Context menu item click handler
function onNodeClick( item )
{
    // console.info( 'You clicked: ' + item.text + ", id: " + item.id + ", menuC.node: " + menuC.node );
    if ( item.id == 'collapse' )
    {
        var ktree = Ext.getCmp('ktree');
        // output_log( "Root: " + ktree.getRootNode().firstChild.id + ", Selected node: " + menuC.node.id );
        if ( ktree.getRootNode().firstChild == menuC.node )
            menuC.node.collapse( false );       // collapse(true) at root screws up!!
        else
            menuC.node.collapse( true );
    }
    else
        menuC.node.expand( true );
}

});

// KTree Context menu
var menuC = new Ext.menu.Menu('mainContext');

function handleOnClick()
{
    // output_log( "handleOnClick " );

    // Hide the KTree Context menu
    if ( menuC.isVisible() )
        menuC.hide();
}


// Hide the KTree Context menu
function HideContextMenu()
{
    if ( menuC.isVisible() )
        menuC.hide();
}

function ContentOnClick()
{
    // output_log( "ContentOnClick " );

    // Hide the KTree Context menu
    HideContextMenu();
}


function ContentOnContextMenu( e, target )
{
    // output_log( "ContentOnContextMenu" );
    HideContextMenu();
    return false;
}


/****************
******/