/**
 * 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'
	  ],

    	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'}
	    	        ]
	        };

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

		}

});