Ext.ns('Ext.pv.fandf');
Ext.pv.fandf.UserGrid = Ext.extend(Ext.grid.EditorGridPanel, {
	region : 'center',
	viewConfig: {
		forceFit: true,
		selectedRowClass : 'x-grid3-row-selected no-selection'
	},
	autoScroll: true,
	stripeRows : true,
	enableColumnHide : false,
	enableColumnMove : false,
	enableHdMenu : false,
	trackMouseOver : false,
	loadMask : true,

	clicksToEdit : 1,
	
	// Localized strings
	lineNumLabel : 'Line',
	lastNameLabel : 'Last Name',
	firstNameLabel : 'First Name',
	emailLabel : 'Email',
	issuesLabel : 'Issue(s):',

	personId : 0,
	contextPath : null,
	
	/**
	 * initComponent
	 * @protected
	 */
	initComponent : function() {
		
		this.addEvents({
            gridload: true
		});
		
		this.sm = new Ext.grid.CheckboxSelectionModel({
			header : '',
			checkOnly : true,
			renderer : function(v, p, record) {
				p.cellAttr = 'rowspan="2"';
				if (record.data.status==null || record.data.status=='ERROR') {
					return '<div>&#160;</div>';
				} else {
					return '<div class="x-grid3-row-checker">&#160;</div>';
				}
			}
		});
	
		// Initialize the data store
		this.store = this.buildDataStore(this.buildProxy(), this.buildReader());
		this.store.on(
			'load',
			function (store, records, options) {
				for (var i=0; i<records.length; i++) {
					var record = records[i];
					if (record.data.status=='VALID') {
						this.getSelectionModel().selectRow(i,true);
					}
				}
				this.fireEvent('gridload', this);
			},
			this
		);
		
		this.expander = new Ext.grid.RowExpander({
			enableCaching: false,
			tpl : new Ext.Template(
				'<div style="padding: 5px;">',
				'<b>' + this.issuesLabel + '</b> {statusText}&nbsp;',
				'</div>'
			),
			renderer : function(v, p, record){
				p.cellAttr = 'rowspan="2"';
				if (record.data.status!=null && record.data.status=='VALID') {
					return '<div>&#160;</div>';
				} else {
					return '<div class="x-grid3-row-expander">&#160;</div>';
				}
			}
		});
		
	    this.ffCheckColumn = new Ext.ux.grid.CheckColumn( {
	    	id : 'isFamilyAndFriendsHD',
			dataIndex : 'isFamilyAndFriends',
			width : 30,
			fixed : true
		});
	    
		this.plugins = [this.expander, this.ffCheckColumn];
		
		// Initialize the column model
		this.columns = this.buildColumnModel(this.sm, this.expander, this.ffCheckColumn);
		
		// super
		Ext.pv.fandf.UserGrid.superclass.initComponent.call(this);
	},
	
	/**
	 * load
	 * @public
	 */
	load : function(params) {
		this.getStore().removeAll();
		this.getStore().baseParams = params;
		this.getStore().load();
	},
	
	/**
	 * refresh
	 * @public
	 */
	refresh : function() {
		this.getStore().load();
	},
	
	getSelectedRowCount : function() {
		return this.getSelectionModel().getSelections().length;
	},
	
	/**
	 * getSelectedRowsAsJson
	 * @private
	 */
	getSelectedRowsAsJson : function () {

		var selectedRows = this.getSelectionModel().getSelections();
		var users = new Array(selectedRows.length);
		
		for (var i=0; i<selectedRows.length; i++) {
			var record = selectedRows[i];
			
			var user = new Object();
			user.lineNum = record.data.lineNum;
			user.lastname = record.data.lastname;
			user.firstname = record.data.firstname;
			user.email = record.data.email;
			user.isFamilyAndFriends = record.data.isFamilyAndFriends;
			users[i] = user;
		}
		
		return Ext.util.JSON.encode(users);
	},
	
	/**
	 * buildProxy
	 * @private
	 */
	buildProxy : function() {
		return new Ext.data.HttpProxy( {
			url : this.contextPath + '/siteAdmin/family/preview.html?personId=' + this.personId
		});
	},
	
	/**
	 * buildReader
	 * @private
	 */
	buildReader : function() {
		return new Ext.data.JsonReader({
			idProperty : 'lineNum',
			root : 'rows',
			fields : [ {
				name : 'lineNum'
			}, {
				name : 'email'
			}, {
				name : 'isFamilyAndFriends',
				type : 'bool'
			}, {
				name : 'lastname'
			}, {
				name : 'firstname'
			}, {
				name : 'status'
			}, {
				name : 'statusText'
			} ]
		});
	},
	
	/**
	 * buildDataStore
	 * @private
	 */
	buildDataStore : function(proxy, reader) {
		return new Ext.data.Store({
			proxy : proxy,
			reader : reader,
			contextPath : this.contextPath
		});
	},
	
	/**
	 * buildColumnModel
	 * @private
	 */
	buildColumnModel : function(sm, expander, ffCheckColumn) {
		return [sm, expander, {
			header : this.lineNumLabel,
			width : 40,
			fixed : true,
			sortable : true,
			dataIndex : 'lineNum'
		}, {
			header : this.emailLabel,
			width : 150,
			sortable : true,
			dataIndex : 'email'
		}, ffCheckColumn, {
			header : this.firstNameLabel,
			width : 100,
			sortable : true,
			dataIndex : 'firstname'
		}, {
			header : this.lastNameLabel,
			width : 100,
			sortable : true,
			dataIndex : 'lastname'
		}, {
			header : '',
			width : 20,
			sortable : true,
			dataIndex : 'status',
			renderer : this.statusRenderer
		}];
	},
	
	/**
	 * statusRenderer
	 * @private
	 */
	statusRenderer : function(data, metadata, record, rowIndex, columnIndex, store) {
		metadata.attr = ' style="white-space: normal;" ';
		if (record.data.status=='ERROR') {
			return '<img src="' + store.contextPath + '/assets/images/error.png" height="16" width="16" />';
		} else if (record.data.status=='WARNING') {
			return '<img src="' + store.contextPath + '/assets/images/warning.png" height="16" width="16" />';
		}
		return '<img src="' + store.contextPath + '/assets/images/accept.png" height="16" width="16" />';
	}
  
});