/*
 * Presto docs web site
 */
TocPanel = function() {
  TocPanel.superclass.constructor.call(this, {
    applyTo:'toc-tree',
    region:'west',
    split:true,
    border: false,
    width: 250,
    minSize: 175,
    maxSize: 400,
    collapsible: false,
    margins:'5 1 5 5',
    cmargins:'0 0 0 0',
    rootVisible:false,
    lines:true,
    autoScroll:true,
    animCollapse:false,
    animate: false,
    collapseMode:'mini',
    loader: new Ext.tree.TreeLoader({
      preloadChildren: true,
      clearOnLoad: false}), 
    root: { nodeType:'async',
      id:'root',
      expanded:true,
      children:[Docs.data]
    }
  });
};

Ext.extend(TocPanel, Ext.tree.TreePanel);

//get content from a div w known id
TopicPanel = function(){
  TopicPanel.superclass.constructor.call(this, {
    applyTo:'content',
    region:'center',
    margins:'5 5 5 0',
    autoScroll: true,
    border: false
  });
};

Ext.extend(TopicPanel, Ext.Panel, {
  initEvents: function(){
    TopicPanel.superclass.initEvents.call(this);
  }
});


Ext.onReady(function(){
  //create nav and topic panes
  var toc = new TocPanel();
  var topicPanel = new TopicPanel();

  var hd = new Ext.Panel({
    applyTo: 'header',
    border: false,
    layout:'anchor',
    region:'north',
    height: 59,
    margin: '5 5 0 5'
  });

  function syncToc(id) {
    var node = toc.getNodeById(id);
    var path = node.getPath();
    toc.expandPath(path);
    toc.selectPath(path);
  } 

  var viewport = new Ext.Viewport({
    layout:'border',
    items:[ hd, toc, topicPanel ]
  }); 

  viewport.doLayout();
  syncToc(thisToC);

});