/**
 * @author albert.sole
 */
/*
 * Component to disply and choose user groups 
 */
GmSoft.components.UserGroupEditor = function(config) {
	
	var groupsURL = config.groupsURL;
	var removeButtonText = getLanguageForElement("removeButtonText", selectedLangId);
	var addButtonText = getLanguageForElement("addButtonText", selectedLangId);
	var editGroupsLabelText = "Select groups";//getLanguageForElement("editCategoriesLabelText", selectedLangId);	
	var groupChooserColumnName = "name"; 
	
	this.edit_userGroupsCombo = new getComboSelector(		null,
															editGroupsLabelText,
															'group',
															'name',																	
															groupsURL,
															Ext.emptyFn);
	this.edit_userGroupsCombo.getCombo().setWidth(120);


	/**
	 * If noclean is true, the elements from the list will not be deleted
	 * @param {Object} noclean
	 */
	this.reload = function(noclean){
		if(!noclean) this.store.removeAll();
		this.edit_userGroupsCombo.refresh();
	}

	this.groupRecord = Ext.data.Record.create([
		{name: 'id', type: 'string'},
		{name: 'name', type: 'string'}
	]);
	
    // create the Data Store
    this.store = new Ext.data.Store({        
        reader: new Ext.data.DataReader(null, this.groupRecord)
    });
							
												
    this.dataGrid = new Ext.grid.GridPanel({
		store: this.store,
        columns: [{
            id: 'Name',
            header: 'group name',
            dataIndex: 'name',
            sortable: true
        }],
	    border: false,		
        width: '100%',
		autoHeight : true,
		sm: new Ext.grid.RowSelectionModel({singleSelect:true})
    });								

	this.addGroupButton = new Ext.Button(
		{
			text: addButtonText,
			scope: this,	
	        handler: function(This,e){			
				//we allow to add as much groups as user wants	
				//get the record
				var selection = This.scope.edit_userGroupsCombo.getValue();					
				This.scope.store.add(selection);
	        }			
		}
	);
	
 	this.removeGroupButton = new Ext.Button(
		{
			text: removeButtonText,
			scope: this,	
	        handler: function(This,e){
				//remove the item
				This.scope.store.remove(This.scope.dataGrid.getSelectionModel().getSelected());
	        }			
		}		
	);
 
    // Create a config object that will be passed to the Panel constructor.
    // The use of Ext.apply preserves the properties passed in the config object
    this.initialConfig = Ext.apply(config, {
        border: false,
        width: 470,
        layout: 'column',	
		bodyStyle:'padding:4px 0px 10px 0px',
        border: false,
        items: [
			{					
	            border: false,
				width: 266,
	            items: [{
		            layout: 'form',			
		            border: false,
		            items: [this.edit_userGroupsCombo.getCombo()]			
				}]					
			},{
	            border: false,				
				width: 50,
	            items: [{
		            layout: 'form',			
		            border: false,
					bodyStyle:'padding:0px 6px 0px 6px',					
		            items: [this.addGroupButton]			
				}]				
			},{			
	            border: false,
				width: 95,
	            items: [{
		            layout: 'form',			
		            border: false,
		            items: [this.dataGrid]			
				}]				
			},{
	            border: false,
				width: 50,
	            items: [{
		            layout: 'form',			
		            border: false,
					bodyStyle:'padding:0px 6px 0px 8px',						
		            items: [this.removeGroupButton]			
				}]				
			}
		]
    });
	
	this.getSelectedGroupsID = function(){
		var result = new Array(this.store.getCount());
		
		//get all the ids and put them into an array
		var i = 0;
		for(i = 0 ; i<this.store.getCount() ; i++){
			var element = this.store.getAt(i)
			result[i] = this.store.getAt(i).get('id');
		}
		
		return result;
	}
	
	this.getXMLSelectedGroupID = function(){
		var result = '<groups>'
		
		//get all the ids and put them into an array
		var i = 0;
		for(i = 0 ; i<this.store.getCount() ; i++){
			result = result + '<group id=\'' + this.store.getAt(i).get('id') + '\'\/>';
		}		
		
		result = result + '</groups>';
		return result;
	}
 
 	this.removeAllSelections = function(){
		this.store.removeAll();
	}
 
 	this.setGroupsRecords = function(ids,names){
		var i = 0;
		
		//remove all elements	
		this.store.removeAll();
						
		if (ids.length == names.length) {
			for (i = 0; i < ids.length; i++) {
				var record = new this.groupRecord({
					id: ids[i],
					name: names[i]					
				});
				
				this.store.add([record]);
			}
		}
	}
 
    // Create a Panel instance and bind it to this DeskIcon instance
    this.panel = new Ext.Panel(this.initialConfig);
}; 
// The DeskIcon prototype defines all the methods shared by the DeskIcon instances
GmSoft.components.UserGroupEditor.prototype = {
    myApplicationSpecificFunction: function(p1, p2, p3) {
        // Perform application-specific processing
    },
 
    // Make this class usable by a Container, so that we can add and remove it.
    // Create delegates in the scope of our contained Panel which reference Panel's methods
    render: Ext.Panel.prototype.render.createDelegate(this.panel),
    destroy: Ext.Panel.prototype.destroy.createDelegate(this.panel)
};

/*****************************************************************************
 * COMPONENT TO DISPLAY AND SELECT DESTINATION ITEMS FOR THE GROUP EDITOR
 *****************************************************************************/
/*
 * Component to disply and choose user groups 
 */
GmSoft.components.GroupItemsEditor = function(config) {
	
	var groupItemsURL = config.groupItemsURL;
	var removeButtonText = getLanguageForElement("removeButtonText", selectedLangId);
	var addButtonText = getLanguageForElement("addButtonText", selectedLangId);
	var editGroupsLabelText = "Select groups";//getLanguageForElement("editCategoriesLabelText", selectedLangId);	
	var groupChooserColumnName = "name"; 
	
	this.edit_userGroupsCombo = new getComboSelector(		null,
															editGroupsLabelText,
															'menu_item',
															'name',																	
															groupItemsURL,
															Ext.emptyFn);
	this.edit_userGroupsCombo.getCombo().setWidth(120);


	/**
	 * If noclean is true, the elements from the list will not be deleted
	 * @param {Object} noclean
	 */
	this.reload = function(noclean){
		if(!noclean) this.store.removeAll();
		this.edit_userGroupsCombo.refresh();
	}

    //the grid panel to show all/select one news names
	this.groupRecord = Ext.data.Record.create([
		{name: 'id', type: 'string'},
		{name: 'name', type: 'string'}
	]);
	
    // create the Data Store
    this.store = new Ext.data.Store({        
        reader: new Ext.data.DataReader(null, this.groupRecord)
    });
							
												
    this.dataGrid = new Ext.grid.GridPanel({
		store: this.store,
        columns: [{
            id: 'Name',
            header: 'item name',
            dataIndex: 'name',
            sortable: true
        }],
	    border: false,		
        width: '100%',
		autoHeight : true,
		sm: new Ext.grid.RowSelectionModel({singleSelect:true})
    });								

	this.addGroupButton = new Ext.Button(
		{
			text: addButtonText,
			scope: this,	
	        handler: function(This,e){			
				//we allow to add as much groups as user wants	
				//get the record
				var selection = This.scope.edit_userGroupsCombo.getValue();					
				This.scope.store.add(selection);
	        }			
		}
	);
	
 	this.removeGroupButton = new Ext.Button(
		{
			text: removeButtonText,
			scope: this,	
	        handler: function(This,e){
				//remove the item
				This.scope.store.remove(This.scope.dataGrid.getSelectionModel().getSelected());
	        }			
		}		
	);
 
    // Create a config object that will be passed to the Panel constructor.
    // The use of Ext.apply preserves the properties passed in the config object
    this.initialConfig = Ext.apply(config, {
        border: false,
        width: 470,
        layout: 'column',	
		bodyStyle:'padding:4px 0px 10px 0px',
        border: false,
        items: [
			{					
	            border: false,
				width: 266,
	            items: [{
		            layout: 'form',			
		            border: false,
		            items: [this.edit_userGroupsCombo.getCombo()]			
				}]					
			},{
	            border: false,				
				width: 50,
	            items: [{
		            layout: 'form',			
		            border: false,
					bodyStyle:'padding:0px 6px 0px 6px',					
		            items: [this.addGroupButton]			
				}]				
			},{			
	            border: false,
				width: 95,
	            items: [{
		            layout: 'form',			
		            border: false,
		            items: [this.dataGrid]			
				}]				
			},{
	            border: false,
				width: 50,
	            items: [{
		            layout: 'form',			
		            border: false,
					bodyStyle:'padding:0px 6px 0px 8px',						
		            items: [this.removeGroupButton]			
				}]				
			}
		]
    });
	
	this.getSelectedGroupsID = function(){
		var result = new Array(this.store.getCount());
		
		//get all the ids and put them into an array
		var i = 0;
		for(i = 0 ; i<this.store.getCount() ; i++){
			var element = this.store.getAt(i)
			result[i] = this.store.getAt(i).get('id');
		}
		
		return result;
	}
	
	this.getXMLSelectedGroupID = function(){
		var result = '<items>'
		
		//get all the ids and put them into an array
		var i = 0;
		for(i = 0 ; i<this.store.getCount() ; i++){
			result = result + '<item id=\'' + this.store.getAt(i).get('id') + '\'\/>';
		}		
		
		result = result + '</items>';
		return result;
	}
 
 	this.removeAllSelections = function(){
		this.store.removeAll();
	}
 
 	this.setGroupsRecords = function(ids,names){
		var i = 0;
		
		//remove all elements	
		this.store.removeAll();
						
		if (ids.length == names.length) {
			for (i = 0; i < ids.length; i++) {
				var record = new this.groupRecord({
					id: ids[i],
					name: names[i]					
				});
				
				this.store.add([record]);
			}
		}
	}
 
    // Create a Panel instance and bind it to this DeskIcon instance
    this.panel = new Ext.Panel(this.initialConfig);
}; 
// The DeskIcon prototype defines all the methods shared by the DeskIcon instances
GmSoft.components.GroupItemsEditor.prototype = {
    myApplicationSpecificFunction: function(p1, p2, p3) {
        // Perform application-specific processing
    },
 
    // Make this class usable by a Container, so that we can add and remove it.
    // Create delegates in the scope of our contained Panel which reference Panel's methods
    render: Ext.Panel.prototype.render.createDelegate(this.panel),
    destroy: Ext.Panel.prototype.destroy.createDelegate(this.panel)
};


/**
 * This function returns a grid component that displays all the users
 * @param {Object} queryURL
 * @param {Object} queryField
 */
function getShowAllUsersGrid(queryURL, queryField, onDoubleClick, doubleClickScope){
	var fileRecord = new Ext.data.Record.create([
			{name: "id", mapping: "id", type:'string'},			
			{name: "name", mapping: "name", type:'string'},
			{name: 'code', type: 'string'},
			{name: 'email', type: 'string'}
	]);
	
	var proxy = new Ext.data.HttpProxy({url: queryURL});
    // create the Data Store
    var store = new Ext.data.Store({
        // load using HTTP
        proxy: proxy,
        // the return will be XML, so lets set up a reader
        reader: new Ext.data.XmlReader({
               // records will have a "category" tag
               record: queryField
           }, fileRecord)
    });				

	var grid = new Ext.grid.GridPanel({
		store: store,
	    columns: [
			{header: 'id',  sortable: true},
			{header: 'name', sortable: true, width: 100},
			{header: 'code', sortable: true, width: 100},
			{header: 'email', sortable: true, width: 180}
	    ],
	    height:180,
		width: 515,
		title: "all users"
	});		
	
	grid.addListener('dblclick', function(e){
		onDoubleClick(e,this);
	},doubleClickScope);
	
	return grid;
}

function getShowAllUsersGroups(queryURL, queryField, onDoubleClick, doubleClickScope){
	return getShowAllUsersGrid(queryURL, queryField, onDoubleClick, doubleClickScope)
}