Ext.onReady(function(){
	Ext.QuickTips.init();
	var detailEl;
	
	var contentPanel = {
		id: 'content-panel',
		region: 'center',
		layout: 'card',
		margins: '2 5 5 0',
		activeItem: 0,
		border: false,
		items: []
	};
	
	contentPanel.items[contentPanel.items.length] = {
		id: documentation.start.id + "-panel",
		title: documentation.start.name,
		layout: "fit",
		bodyStyle: "padding:25px",
		html: documentation.start.content
	};
	
	var treeRoot = new Ext.tree.TreeNode({
		id: "root-node",
		text: "Documentation",
		leaf: false
	});
	for (var h = 0; h < documentation.files.length; h ++) {
		var fileNode = new Ext.tree.TreeNode({
			id: documentation.files[h].file + "-node",
			text: documentation.files[h].file,
			leaf: false,
			expanded: (h == 0),
			singleClickExpand: true
		});
		treeRoot.appendChild(fileNode)
		
		for (var i = 0; i < documentation.files[h].items.length; i ++) {
			/*alert(
				"doc.files.length = " + documentation.files.length + "\n\r" +
				"doc.files[" + h + "].items.length = " + documentation.files[h].items.length + "\n\r" +
				"doc.files[" + h + "].items[" + i + "].items.length = " + documentation.files[h].items[i].items.length
			);*/
			for (var j = 0; j < documentation.files[h].items[i].items.length; j ++) {
				var thtml = "";
				
				thtml = "<p>";
				thtml += documentation.files[h].items[i].items[j].content;
				thtml += "</p><br />";
				thtml += "<ul>";
				if (documentation.files[h].items[i].items[j].parameters) {
					thtml += "<li><h3>Parameters</h3><table class=\"sub\">";
					for (var k = 0; k < documentation.files[h].items[i].items[j].parameters.length; k ++) {
						thtml += "<tr><td style=\"padding-right:10px;\"><i>";
						thtml += documentation.files[h].items[i].items[j].parameters[k].type;
						thtml += "</i></td><td><b>";
						thtml += documentation.files[h].items[i].items[j].parameters[k].name;
						thtml += "</b></td></tr><tr><td></td><td>";
						thtml += documentation.files[h].items[i].items[j].parameters[k].info;
						thtml += "</td></tr>";
					}
					thtml += "</table></li>";
				}
				if (documentation.files[h].items[i].items[j].returns) {
					thtml += "<li><h3>Returns</h3><table class=\"sub\"><tr><td style=\"padding-right:10px;\"><i>";
					thtml += documentation.files[h].items[i].items[j].returns.type;
					thtml += "</i></td><td><b>";
					thtml += documentation.files[h].items[i].items[j].returns.name;
					thtml += "</b></td></tr><tr><td></td><td>";
					thtml += documentation.files[h].items[i].items[j].returns.info;
					thtml += "</td></tr>";
				}
				thtml += "</table></li>";
				
				contentPanel.items[contentPanel.items.length] = {
					id: documentation.files[h].items[i].items[j].id + "-panel",
					title: documentation.files[h].items[i].items[j].name,
					layout: "fit",
					bodyStyle: "padding:25px",
					html: thtml
				};
				
				thtml = "<ul>";
					for (var k = 0; k < documentation.files[h].items[i].items[j].history.length; k ++) {
						thtml += "<li>";
						thtml += documentation.files[h].items[i].items[j].history[k].version;
						thtml += " : ";
						thtml += documentation.files[h].items[i].items[j].history[k].update;
						thtml += "</li>";
					}
				thtml += "</ul>";
				
				contentPanel.items[contentPanel.items.length] = {
					id: documentation.files[h].items[i].items[j].id + "-history",
					html: thtml,
					frame: false,
					border: false
				}
			}
		}
		
		for (var i = 0; i < documentation.files[h].items.length; i++) {
			var newNode = new Ext.tree.TreeNode({
				id: documentation.files[h].items[i].id + "-node",
				text: documentation.files[h].items[i].name,
				leaf: false,
				singleClickExpand: true
			});	
			fileNode.appendChild(newNode);
			
			for (var j = 0; j < documentation.files[h].items[i].items.length; j++) {
				newNode.appendChild(new Ext.tree.TreeNode({
					id: documentation.files[h].items[i].items[j].id + "-node",
					text: documentation.files[h].items[i].items[j].name,
					leaf: true
				}));
			}
		}
	}
	
    var treePanel = new Ext.tree.TreePanel({
    	id: "tree-panel",
    	title: "Documentation",
        region: "north",
        split: true,
        height: 450,
        minSize: 150,
        autoScroll: true,
        rootVisible: false,
        lines: false,
        singleExpand: true,
        useArrows: true,
        root: treeRoot
    });
    treePanel.on('click', function(n){
    	var sn = this.selModel.selNode || {};
    	if(n.leaf && n.id != sn.id){
			var tid = (n.id).substring(0, n.id.length - 5); // Remove "-node"
    		Ext.getCmp("content-panel").layout.setActiveItem(tid + '-panel');
    		if(!detailEl){
    			var bd = Ext.getCmp('history-panel').body;
    			bd.update('').setStyle('background','#fff');
    			detailEl = bd.createChild();
    		}
			detailEl.update(Ext.getDom(tid + '-history').innerHTML);
    		//detailEl.hide().update(Ext.getDom(tid + '-history').innerHTML).slideIn('l', {stopFx:true,duration:.2});
    	}
    });
	
	var historyPanel = {
		id: "history-panel",
        title: "History",
        region: "center",
		autoScroll: true,
		html: "<p class=\"details-info\">When you select a function from the tree, its history will be displayed here.</p>"
    };
	
	var viewPort = new Ext.Viewport({
		layout: "border",
		title: "AHKArray Documentation",
		items: [
			{
				xtype: 'box',
				region: 'north',
				applyTo: 'header',
				height: 30
			},{
				layout: 'border',
				id: 'layout-browser',
				region:'west',
				border: false,
				split:true,
				margins: '2 0 5 5',
				width: 275,
				minSize: 100,
				maxSize: 500,
				items: [treePanel, historyPanel]
			},
			contentPanel
		],
		renderTo: Ext.getBody()
	});
});