/**
 * 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));

	}

});