/*
 *  $Id: docs.js 72 2009-10-10 21:57:03Z k42b3.x $
 *
 * psx
 * A object oriented and modular based PHP framework for developing
 * dynamic web applications. For the current version and informations
 * visit <http://phpsx.org>
 *
 * Copyright (c) 2009 Christoph Kappestein <k42b3.x@gmail.com>
 *
 * This file is part of psx. psx is free software: you can
 * redistribute it and/or modify it under the terms of the
 * GNU General Public License as published by the Free Software
 * Foundation, either version 3 of the License, or any later version.
 *
 * psx is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with psx. If not, see <http://www.gnu.org/licenses/>.
 */

Ext.ns('psx.docs');

/**
 * psx.docs
 *
 * @author     Christoph Kappestein <k42b3.x@gmail.com>
 * @license    http://www.gnu.org/licenses/gpl.html GPLv3
 * @link       http://phpsx.org
 * @package    js
 * @version    $Revision: 72 $
 */

psx_url = 'http://phpsx.org/api';

psx.docs.catalog = [];


psx.docs.header = Ext.extend(Ext.Panel, {

	initComponent: function(){

		var config = {

			html: '<div class="header"><h1>psx :: API documentation</h1><h2>version 0.0.3 (http://phpsx.org)</h2></div>',
			height: 60,
			region: 'north',
			border: false,
			margins: '0 0 5 0'

		};

		Ext.apply(this, Ext.apply(this.initialConfig, config));

		psx.docs.header.superclass.initComponent.apply(this, arguments);

	}

});


psx.docs.nav = Ext.extend(Ext.tree.TreePanel, {

	initComponent: function(){

		var root = new Ext.tree.AsyncTreeNode({

			id: 'root',
			expanded: true

		});

		var loader = new Ext.tree.TreeLoader({

			dataUrl: psx_url + '/docs/files/catalog.json',
			preloadChildren: true

		});

		var config = {

			title: 'Navigation',
			region: 'west',
			margins: '5 0 5 5',
			width: 250,
			border: true,
			collapsible: false,
			rootVisible: false,
			singleExpand: false,
			autoScroll: true,
			containerScroll: true,
			useArrows: true,
			loader: loader,
			root: root

		};

		Ext.apply(this, Ext.apply(this.initialConfig, config));

		psx.docs.nav.superclass.initComponent.apply(this, arguments);


		root.on('load', function(){

			var r = this.getRootNode();

			// preload all childresn for search function and expand
			// the first children of the root node
			var children = r.childNodes;

			for(var i = 0; i < children.length; i++)
			{
				if(r.firstChild == children[i])
				{
					this.getLoader().load(children[i], function(){

						var path = children[i].getPath();

						this.expandPath(path);

					}, this);
				}
				else
				{
					this.getLoader().load(children[i]);
				}
			}

		}, this);


		loader.on('load', function(nav, node, response){

			psx.docs.catalog = Ext.util.JSON.decode(response.responseText);

		}, this);

	}

});


psx.docs.seachinput = Ext.extend(Ext.form.TriggerField, {

	catalog: null,
	result: [],

	initComponent: function(){

		var config = {

			fieldLabel: 'Search',
			triggerClass: 'x-form-search-trigger'

		};

		Ext.apply(this, Ext.apply(this.initialConfig, config));

		psx.docs.seachinput.superclass.initComponent.apply(this, arguments);

		this.addEvents('result');

		this.on('specialkey', function(f, e){

			if(e.getKey() == e.ENTER){

				this.do_search();

			}

		}, this);

	},

	get_result: function(){

		return this.result;

	},

	do_search: function(){

		var v = this.getRawValue();

		this.reset();

		this.result = [];

		this.do_rec_search(psx.docs.catalog, v);

		this.fireEvent('result');

	},

	do_rec_search: function(node, value){

		for(var i = 0; i < node.length; i++){

			if(node[i].leaf == true){

				if(node[i].text.indexOf(value) != -1){

					this.result.push([node[i].id, node[i].text, node[i].iconCls]);

				}

			} else {

				if(node[i].children.length > 0){

					this.do_rec_search(node[i].children, value);

				}

			}
		}

	}

});


psx.docs.search = Ext.extend(Ext.grid.GridPanel, {

	o_seachinput: null,
	store: null,

	initComponent: function(){

		this.o_seachinput = new psx.docs.seachinput({

			width: 256

		});

		this.store = new Ext.data.ArrayStore({

			fields: [

				{name: 'id'},
				{name: 'title'},
				{name: 'type'}

			]

		});

		var tbar = new Ext.Toolbar({

			items: [{

				xtype: 'label',
				text: 'Search: '

			}, this.o_seachinput]

		});

		var config = {

			title: 'Home',
			iconCls: 'home',
			store: this.store,
			columns: [{

				id: 'title',
				header: 'Result',
				dataIndex: 'title',
				width: 400,
				sortable: false,
				menuDisabled: true,
				renderer: this.render_title

			}],
			stripeRows: true,
			autoExpandColumn: 'title',
			trackMouseOver: false,
			tbar: tbar

		};

		this.handler_searchinput();

		Ext.apply(this, Ext.apply(this.initialConfig, config));

		psx.docs.search.superclass.initComponent.apply(this, arguments);

	},

	load_data: function(result){

		this.store.loadData(result);

	},

	clear_data: function(){

		this.load_data([]);

	},

	handler_searchinput: function(){

		this.o_seachinput.on('result', function(){

			this.clear_data();

			var result = this.o_seachinput.get_result();

			this.load_data(result);

		}, this)

	},

	render_title: function(value, p, record){

		return String.format('<p style="padding:2px;margin:2px;font-size:1.2em;"><img src="' + psx_url + '/img/icons/{2}.png" style="margin:2px;margin-right:4px;vertical-align:middle;" /><a href="#" onclick="x.open_tab(\'{1}\');" style="text-decoration:none;">{0}</a></p><small style="color:#AAAAAA;padding:2px;margin:2px;">file: {0}.htm</small>', value, record.data.id, record.data.type);

	}

});


psx.docs.content = Ext.extend(Ext.TabPanel, {

	o_search: null,

	initComponent: function(){

		this.o_search = new psx.docs.search();

		var config = {

			title: 'Content',
			region: 'center',
			margins: '5',
			border: true,
			activeItem: 0,
			resizeTabs: true,
			minTabWidth: 128,
			tabWidth: 128,
			enableTabScroll: true,
			items: [this.o_search]

		};

		Ext.apply(this, Ext.apply(this.initialConfig, config));

		psx.docs.content.superclass.initComponent.apply(this, arguments);

	}

});


psx.docs.layout = Ext.extend(Ext.Viewport, {

	o_header: null,
	o_nav: null,
	o_content: null,

	initComponent: function() {

		this.o_header  = new psx.docs.header();
		this.o_nav     = new psx.docs.nav();
		this.o_content = new psx.docs.content();

		var config = {

			layout: 'border',
			items: [this.o_header, this.o_nav, this.o_content]

		};

		this.handler_nav();

		this.handler_content();

		Ext.apply(this, Ext.apply(this.initialConfig, config));

		psx.docs.layout.superclass.initComponent.apply(this, arguments);

	},

	handler_nav: function(){

		this.o_nav.on('click', function(n){

			if(n.leaf){

				this.open_tab(n.id);

			}

		}, this);

	},

	handler_content: function(){

		this.o_content.o_search.on('rowdblclick', function(grid, row, e){

			var data   = grid.getStore();
			var record = data.getAt(row);
			var id     = record.get('id');

			this.open_tab(id);

		}, this);

	},

	open_tab: function(id){

		var node = this.o_nav.getNodeById(id);

		this.o_nav.selectPath(node.getPath());


		var tab = this.o_content.findById(id);

		if(!tab)
		{
			tab = this.o_content.add({

				title: node.text,
				id: id,
				closable: true,
				//iconCls: 'class',
				html: '<iframe src="' + psx_url + '/docs/files/' + id + '.htm" width="100%" height="100%" frameBorder="0"></iframe>'

			});
		}

		this.o_content.setActiveTab(tab);

	}

});


var x;

Ext.onReady(function(){

	Ext.QuickTips.init();

	Ext.form.Field.prototype.msgTarget = 'qtip';

	x = new psx.docs.layout();

});