/**
 * Project   : AMDA-NG

 * Name	  : InteropUI.js

 * @class   amdaUI.InteropUI
 * @extends Ext.tab.Panel
 * @brief   Interop Module UI definition (View)
 * @author  Benjamin RENARD
 * @version $Id: InteropUI.js 1093 2012-10-03 15:54:26Z elena $
 ******************************************************************************

 *	FT Id	 :   Date   : Name - Description

 ******************************************************************************

 *  :		   :23/04/2012: BRE  - file creation

 */


Ext.define('amdaUI.InteropUI', {

	extend: 'Ext.tab.Panel',
	alias: 'widget.panelInterop',

	requires: [

		'amdaUI.ParamsMgrUI', 'amdaUI.EpnTapUI'
	],

	constructor: function(config) {
		this.init(config);
		this.callParent(arguments);
	},

	onSwitchConnect	: Ext.emptyFn,

	updateStatus: function(isConnected) {
		var sampTab = this.getComponent('samp_tab_panel');

		var sampButton = sampTab.dockedItems.items[0].items.items[1];
		sampButton.setIconCls(isConnected ? 'icon-connected' : 'icon-disconnected');
	},

	/*updateClients : function(clients)
	{
		var sampTab = this.getComponent('samp_tab_panel');

		var sampDataView = sampTab.query('dataview')[0];

		sampDataView.store.loadData(clients);
	},*/

	getSampToolBar: function() {
		var me = this;
		return [
				'SAMP connection : ',
				{
					iconCls: 'icon-disconnected',
					handler: function() {
						if (me.onSwitchConnect)
							me.onSwitchConnect();
					}
				}
		];
	},

	getSampClientsDataView: function(clientsStore) {
		var tpl = new Ext.XTemplate(
			'<tpl for=".">',
			  '<div style="margin: 2px;border: 1px solid #99BDE8;" class="clientinfo">',
				'<img src="{iconUrl}" width=24 height=24/><br/>',
				'<b>Name : </b><span>{name}</span><br/>',
				'<b>Identificator : </b><span>{id}</span><br/>',
				'<b>Description : </b><span>{descriptionText}</span><br/>',
				//'<b>Documentation : </b><span>{documentationUrl}</span><br/>',
			  '</div>',
			'</tpl>'
		);

		return {
			xtype : 'dataview',
			store : clientsStore,
			tpl: tpl,
			emptyText: 'No clients to show',
			itemSelector : 'div.clientinfo',
			overClass:'x-view-over',
			autoScroll : true,
			width  : 300,
			height : 300
		};
	},

	getSampTab: function (clientsStore) {
		var me = this;
		return {
			xtype : 'panel',
			id : 'samp_tab_panel',
			title : 'SAMP',
			layout : 'fit',
			items : [
					 this.getSampClientsDataView(clientsStore)
					 ],
			tbar : me.getSampToolBar()
		};
	},

	init: function(config) {
		var me = this;
		this.onSwitchConnect = config.onSwitchConnect;
		var activeTab = config.activeTab ? config.activeTab : 0;

		var myConf = {
			plain : true,
			activeTab: activeTab,
			defaults: {
				autoHeight: true,
				layout : 'fit',
				bodyStyle: { background : '#dfe8f6' }
			},
			items: [
				this.getSampTab(config.clientsStore),

				{xtype: 'paramsMgrPanel', baseId: config.baseId, layout: 'hbox'},
				{xtype: 'panelEpnTap'}

			],

			listeners: {
				afterrender: function() { config.loadTab(this.getActiveTab()); },
				tabchange: function(tabpanel, tab) { config.loadTab(tab); }
			}

		};

		Ext.apply (this , Ext.apply (arguments, myConf));
	}
});