/* ---------------------------------------------------------------------------
 * Main page
 * ---------------------------------------------------------------------------
 */
WebGenie.bm.FrontMainPanel = Ext.extend(Ext.Panel,
{
	initComponent : function()
	{
		var menuTreePanel = new WebGenie.bm.DefaultTreePanel(
		{
//			title: 'Menu',
			titleCollapse : true,
			border: false,
			autoScroll: true,
			iconCls: 'index',
//			width : 200,
//			split : true,
//			collapsible : true,
//			region : 'west',
//			width : 200,
			region : 'center',
			
			selectedAllFlag: false,
	
			id: 'menu',
			
			detailTag: null,
	
			treeLoaderDataUrl: ACTION_menu_jsonMenu,
			selModel : new Ext.tree.DefaultSelectionModel(),
	
			enableDragDrop : true,
			listeners:
			{
				click: function(node)
				{
//					if (!accessibilityEl)
//					{
//						var bd = Ext.getCmp('accessibility-panel').body;
//						bd.update('').setStyle('background', '#fff');
//						detailEl = bd.createChild(); // create default empty div
//					}
//					detailEl.hide().update('<h2>' + accessibilityID + '</h2><p>When you select something, additional details will display here.</p>').slideIn('l',
//					{
//						stopFx : true,
//						duration : .2
//					});
					//alert("fsdfsdfsdf");
			
					if (menuTreePanel.detailTag == null)
					{
						var bd = Ext.getCmp('accessibility-panel').body;
						if (bd != null)
						{
							menuTreePanel.detailTag = bd.createChild(); // create default empty div
						}
					}
					//var detailTag = Ext.getCmp('detailTag');
					if (menuTreePanel.detailTag != null)
					{
						var description = node.attributes.description;
						var message = '<h2>' + node.text + '</h2>';
						if (description != null)
						{
							message = message + '<p>' + description + '</p>';
						}
						else
						{
							message = message + '<p>無關於' + node.text + '的說明</p>';
						}
						
						menuTreePanel.detailTag.hide().update(message).slideIn('l',
						{
							stopFx : true,
							duration : .5
						});
					}
				}
			}
		});

		var detailsPanel = {
			id: 'accessibility-panel',
	        title: 'Accessibilityseasedfseffwㄋ',
	        region: 'south',
			autoScroll: true,
			height: 150,
			split : true,
			collapsible : true,
			collapsed  : false,
			html: '請點選上面資料庫，獲得說明文字。'
	    };
	 

		var template = 
		{
			layout : 'border',
			items: [
				{
					xtype: 'panel',
					region : 'north',
					split : true,
					collapsible : true,
					height:95,
					maxHeight: 95,
					minHeight: 95,
					autoLoad: ACTION_common_header
				},
				{
					xtype: 'panel',
					region : 'south',
					title : '',
					split : true,
					collapsible : true,
					height: 75,
					maxHeight: 75,
					minHeight: 75,
					autoLoad: ACTION_common_footer
					//html: '<div align="center">Copyright © 2009 Introduction of Biomedical Engineering Research Laboratories. All rights reserved.</div>'
					
				},
				{
					xtype: 'panel',
					region : 'center',
					//html: '<iframe width="100%" marginwidth="100%" id="bodyPage" name="bodyPage" height="100%" marginheight="100%" frameborder="0" src="' + ACTION_others_introduction + '"></iframe>'
					html: '<iframe id="bodyPage" name="bodyPage" width="100%" height="100%" frameborder="0" src="' + ACTION_others_introduction + '"></iframe>'
				},
				{
					xtype: 'panel',
					layout : 'border',

					title: 'Menu',
					
					width : 230,
					split : true,
					collapsible : true,
					region : 'west',
					
					items: [
						menuTreePanel,
						detailsPanel
					]
				}
			]
		};

		Ext.apply(this, template);
		WebGenie.bm.FrontMainPanel.superclass.initComponent.apply(this, arguments);
		
	}
});
Ext.reg('bmFrontMainPanel', WebGenie.bm.FrontMainPanel);