function createLayout() 
{
    return new Ext.Viewport({
  		id: "UI-viewPort",
  		layout: "border",
		  items: 
		  [
			  createBannerPanel(),   			
  			createWestPanel(),  				
  			createTabPanel()
		  ]
	  });		
}


function createBannerPanel()
{
    return new Ext.BoxComponent({
        region: "north",
        id: "banner",        
        el: "banner",
        height: 70
    });
}


function createWestPanel() {
    return { 
        layout: "fit",
    		region: "west",    		
    		title: "iData Documentation",
    		split: true,
    		width: 295,
    		minSize: 175,
    		maxSize: 400,
    		collapsible: true,
    		margins: "0 0 0 0",
    		animCollapse: true,
    		contentEl: "left",
    		items:
    		[
    		  createTree()
    		]
    }
}


function createTabPanel() {
  
  var welcomeHTML = '<img src="/images/idatalogo.jpg" />' +
    '<p style="width: 600px; margin-top: 25px; font:12px trebuchet ms;">iData is a tool that allows you to access, ' +
    'search, organize, and edit your System i data with ease. Using its intuitive interface, you can ' +
    'build interactive charts with a few clicks of the mouse, scroll though massive amounts of data in a ' +
    'matter of seconds, create various layouts with drag-and-drop capabilities, and much more.</p><p style="text-align:center;">' +
    '<img src="/images/idatadocs/screenshot.jpg" style="border: 2px solid black; margin: 30px;" />' +
    '<p style="width:600px; margin-top: 25px; font:12px trebuchet ms;">To begin learning about all the features iData has to offer, ' +
    'browse the tree to the left and choose a topic.</p>';
  
	var tabPanel = new Ext.TabPanel({
		region: "center",
		id: "tabPanel",
		margins: '0 0 0 0',		
		frame: true,
		tabWidth:135,		
		deferredRender: false,
		tabPosition: "top",
		enableTabScroll: true,		
		activeTab: 0,
		items: 
		[{
				title: "About iData",
				contentEl: "main",				
				layout: "fit",
				id: "welcome",
				closable: false,
				autoScroll: true,
				bodyStyle: 'padding: 10px 10px 10px',
				html: welcomeHTML
		}]
	})		
	
	return tabPanel;				
}


function createTree()
{
    return new Ext.tree.TreePanel({
    		id: "treePanel",		    		
    		split: true,    		    		    		    
    		collapsible: true,
    		margins: "0 0 0 0",
    		autoScroll:true,
    		animate:true,
    		enableDD:false,
    		animCollapse: true,
    		containerScroll: true, 
    		loader: new Ext.tree.TreeLoader({			
    			url: 'DocTree.rpgsp',
    			baseAttrs: {
    			    listeners: {
    			      click: nodeDoubleClick
    			    }
    			}			
    		}),   		
    		root: new Ext.tree.AsyncTreeNode({
    			text: "Documentation",
    			draggable: false,
    			singleClickExpand: true,
    			id: "root"
    		}) 		
	  });	
}

function nodeDoubleClick(treeNode) {
  
  var tabPanel = Ext.getCmp("tabPanel");
  for(var i=0; i < tabPanel.items.length; i++){
    if(tabPanel.items.items[i].id == treeNode.id.split("_")[0]){
      
      tabPanel.activate(treeNode.id.split("_")[0]);
      if (treeNode.leaf == true){
        tabPanel.items.items[i].setTitle(treeNode.text);
        var sec = "section" + treeNode.attributes.level2Seq;
        var h2s = tabPanel.items.items[i].body.dom.getElementsByTagName("h2");
        for (var i = 0; i < h2s.length; i++) {
          if (h2s[i].id == sec) {
            h2s[i].scrollIntoView(true);  
            break;          
          }
        }
      }
      return;
    }
  }var newTab = tabPanel.add({
    id: treeNode.id.split("_")[0],
    title: treeNode.text,
    closable: true,
    layout: "fit",
    autoScroll: true,
    bodyStyle: "padding:10px 10px 0px"
  });
  tabPanel.activate(newTab);

  Ext.Ajax.request({
    url: treeNode.attributes.pageURL,
    callback: function(options, success, xmlhttp) {
        if (success == true) {
          newTab.body.dom.innerHTML = xmlhttp.responseText;
          
          if (treeNode.leaf == true){
          
            var sec = "section" + treeNode.attributes.level2Seq;
            var h2s = newTab.body.dom.getElementsByTagName("h2");
            for (var i = 0; i < h2s.length; i++) {
              if (h2s[i].id == sec) {
                h2s[i].scrollIntoView(true);  
                break;          
              }
            }
            
          }
        }
        else {
          // 404
          var msg = "The page could not be loaded.<br><br>" +
                    "Please see the video demos or contact us at support@profoundlogic.com for help.";
          Ext.MessageBox.alert('Error', msg, function(){ tabPanel.remove(newTab); });
        }
    }
  });
 
}