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

		getEpnTapTab: function() {
			return {
				xtype : 'panelEpnTap',
				id : 'epnTapTab',
				title : 'EPN-TAP'
			};
		},

	      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'},
				this.getEpnTapTab()
			],
            listeners: {
                afterrender: function() { config.loadTab(this.getActiveTab()); },
                tabchange: function(tabpanel, tab) { config.loadTab(tab); }
            }
		};

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