/**
 * Extjs 3.2.0 - Versione csi 1.0.0 Plugin per gestire le griglie multisort
 */
Ext.ns("Ext.ux.csi.grid");
Ext.ux.csi.grid.GridMultisort = function(config) {
	var store = new Ext.data.JsonStore( {
		listeners : {
			exception : Ext.util.Format.messaggiErrore
		// ***gestisco le eccezioni server side
		},
		url : config.actionUrl,
		fields : config.storeFields
	});
	store.load();
	var reorderer = new Ext.ux.ToolbarReorderer();
	var droppable = new Ext.ux.ToolbarDroppable(
			{
				/**
				 * Creates the new toolbar item from the drop event
				 */
				createItem : function(data) {
					var column = this.getColumnFromDragDrop(data);
					return createSorterButton( {
						text : column.header,
						sortData : {
							field : column.dataIndex,
							direction : "ASC"
						}
					});
				},
				/**
				 * Custom canDrop implementation which returns true if a column
				 * can be added to the toolbar
				 * 
				 * @param {Object}
				 *            data Arbitrary data from the drag source
				 * @return {Boolean} True if the drop is allowed
				 */
				canDrop : function(dragSource, event, data) {
					var sorters = getSorters(), column = this
							.getColumnFromDragDrop(data);
					for ( var i = 0; i < sorters.length; i++) {
						if (sorters[i].field == column.dataIndex)
							return false;
					}
					return true;
				},
				afterLayout : doSort,
				/**
				 * Helper function used to find the column that was dragged
				 * 
				 * @param {Object}
				 *            data Arbitrary data from
				 */
				getColumnFromDragDrop : function(data) {
					var index = data.header.cellIndex, colModel = grid.colModel, column = colModel
							.getColumnById(colModel.getColumnId(index));
					return column;
				}
			});
	// create the toolbar with the 2 plugins
	var tbar = new Ext.Toolbar( {
		items : [ 'Ordinamento:', '-' ],
		plugins : [ reorderer, droppable ],
		listeners : {
			scope : this,
			reordered : function(button) {
				changeSortDirection(button, false);
			}
		}
	});
	// create the Grid
	var grid = new Ext.grid.GridPanel(
			{
				tbar : tbar,
				store : store,
				columns : config.gridColumns,
				autoExpandColumn : config.autoExpandColumn,
				stripeRows : true,
				height : config.height,
				width : config.width,
				title : config.title,
				listeners : {
					scope : this,
					// here we tell the toolbar's droppable plugin that it can
					// accept items from the columns' dragdrop group
					render : function() {
						var dragProxy = grid.getView().columnDrag, ddGroup = dragProxy.ddGroup;
						droppable.addDDGroup(ddGroup);
					}
				}
			});
	tbar.add(createSorterButton(config.primoBottone));
	tbar.add(createSorterButton(config.secondoBottone));
	// render the grid to the specified div in the page
	grid.render(config.idDiv);
	doSort();
	
	//The following functions are used to get the sorting data from the toolbar
	// and apply it to the store
	/**
	 * Tells the store to sort itself according to our sort data
	 */
	function doSort() {
		store.sort(getSorters(), "ASC");
	};
	/**
	 * Callback handler used when a sorter button is clicked or reordered
	 * 
	 * @param {Ext.Button}
	 *            button The button that was clicked
	 * @param {Boolean}
	 *            changeDirection True to change direction (default). Set to
	 *            false for reorder operations as we wish to preserve ordering
	 *            there
	 */
	function changeSortDirection(button, changeDirection) {
		var sortData = button.sortData, iconCls = button.iconCls;
		if (sortData != undefined) {
			if (changeDirection !== false) {
				button.sortData.direction = button.sortData.direction.toggle(
						"ASC", "DESC");
				button.setIconClass(iconCls.toggle("sort-asc", "sort-desc"));
			}
			store.clearFilter();
			doSort();
		}
	};
	/**
	 * Returns an array of sortData from the sorter buttons
	 * 
	 * @return {Array} Ordered sort data from each of the sorter buttons
	 */
	function getSorters() {
		var sorters = [];
		Ext.each(tbar.findByType('button'), function(button) {
			sorters.push(button.sortData);
		}, this);
		return sorters;
	}
	/**
	 * Convenience function for creating Toolbar Buttons that are tied to
	 * sorters
	 * 
	 * @param {Object}
	 *            config Optional config object
	 * @return {Ext.Button} The new Button object
	 */
	function createSorterButton(config) {
		config = config || {};
		Ext.applyIf(config, {
			listeners : {
				click : function(button, e) {
					changeSortDirection(button, true);
				}
			},
			iconCls : 'sort-' + config.sortData.direction.toLowerCase(),
			reorderable : true
		});
		return new Ext.Button(config);
	};
}
