evalGridSort = function(rec1, rec2) {
	a = parseInt(rec1.data.categoryOrder, 10);
	b = parseInt(rec2.data.categoryOrder, 10);
	return (a > b) ? 1 : (a < b) ? -1 : 0;
};
evalRadioRenderer = function(value, meta, rec, rowIndex, colIndex, store) {
	return '<input type = radio ' + ((value != 0) ? 'checked' : '') + ' name = "' + rec.data.id + 'radio"/>';
};
var gradebookAbility = new Ext.Window({
	title: 'Ability Evaluations',
	width: 770,
	height: 470,
	minWidth: 770,
	minHeight: 470,
	modal: true,
	closeAction: 'hide',
	items: [{
		xtype: 'tabpanel',
		activeTab: 1,
		autoHeight: false,
		border: false,
		height: 400,
		items: [{
			xtype: 'panel',
			title: 'Assign',
			layout: 'border',
			items: [{
				xtype: 'panel',
				title: 'Students',
				region: 'west',
				width: 200,
				split: true,
				margins: '5 0 0 5',
				items: [{
					xtype: 'treepanel',
					border: false,
					titleCollapse: true,
					rootVisible: false,
					root: {
						text: 'Root Node',
						children: [{
							text: 'Student 1',
							leaf: true
						},
						{
							text: 'Student 2',
							leaf: true
						},
						{
							text: 'Student 3',
							leaf: true
						}]
					},
					loader: {}
				}]
			},
			{
				xtype: 'panel',
				title: 'Evaluations',
				region: 'center',
				margins: '5 5 0 0',
				layout: 'fit',
				items: [{
					xtype: 'grid',
					titleCollapse: true,
					enableColumnHide: false,
					enableColumnMove: false,
					enableColumnResize: false,
					stripeRows: true,
					border: false,
					autoExpandColumn: 'evaluationCategory',
					minColumnWidth: 60,
					id: 'evaluationsGrid',
					columns: [{
						xtype: 'gridcolumn',
						sortByFn: evalGridSort,
						sortable: false,
						resizable: true,
						width: 100,
						dataIndex: 'category',
						id: 'evaluationCategory'
					},
					{
						xtype: 'gridcolumn',
						header: 'Description',
						sortable: true,
						resizable: true,
						width: 100,
						dataIndex: 'col1',
						id: 'evaluationDescription'
					},
					{
						header: 'Outstanding',
						sortable: true,
						resizable: true,
						width: 80,
						dataIndex: 'col2',
						align: 'center',
						renderer: evalRadioRenderer
					},
					{
						header: 'Satisfactory',
						sortable: true,
						resizable: true,
						width: 80,
						dataIndex: 'col3',
						align: 'center',
						renderer: evalRadioRenderer
					},
					{
						xtype: 'booleancolumn',
						header: 'Neutral',
						sortable: true,
						resizable: true,
						width: 60,
						dataIndex: 'bool',
						align: 'center'
					},
					{
						xtype: 'booleancolumn',
						header: 'Unsatisfactory',
						sortable: true,
						resizable: true,
						width: 90,
						dataIndex: 'bool',
						align: 'center'
					},
					{
						xtype: 'booleancolumn',
						header: 'N/A',
						sortable: true,
						resizable: true,
						width: 60,
						dataIndex: 'bool',
						align: 'center'
					}],
					enableDragDrop: true,
					store: new Ext.data.GroupingStore({
						url: 'teacher_tools/gradebook_data.json.php',
						baseParams: {
							command: 'getEvaluations'
						},
						reader: new Ext.data.JsonReader({
							root: 'evaluations'
						}, [{
							name: 'id'
						},
						{
							name: 'category'
						},
						{
							name: 'categoryOrder'
						},
						{
							name: 'col1'
						},
						{
							name: 'col2'
						},
						{
							name: 'col3'
						}]),
						groupField: 'category',
						sortInfo: {
							field: 'category',
							direction: "DESC"
						},
						autoLoad: false,
						listeners: {
							load: function(store, recs) {
								evalGrid = Ext.getCmp('evaluationsGrid');
								lowestCatOrder = recs[0].data.categoryOrder;
								highestCatOrder = recs[recs.length - 1].data.categoryOrder;
								for (i = 0; i < recs.length; i++) {
									recs[i].data.lowestCatOrder = lowestCatOrder;
									recs[i].data.highestCatOrder = highestCatOrder;
								}
							}
						}
					}),
					sm: new Ext.grid.RowSelectionModel({
						singleSelect: true
					}),
					view: new Ext.grid.GroupingView({
						forceFit: true,
						showGroupName: false,
						hideGroupedColumn: true,
						groupTextTpl: ' <div class = "{[(values.rs[0].data.lowestCatOrder != parseInt(values.rs[0].data.categoryOrder,10)) ? "groupUp" : "hiddenGroup"]}">Up</div> <div class = "{[(values.rs[0].data.highestCatOrder != parseInt(values.rs[0].data.categoryOrder,10)) ? "groupDown" : "hiddenGroup"]}">Dn</div> {text} ',
						enableNoGroups: false,
						interceptMouse: function(e) {
							className = Ext.get(e.getTarget()).dom.className;
							if (className == 'groupUp') {
								this.shiftUp(e.getTarget('.x-grid-group-hd', this.mainBody));
							} else if (className == 'groupDown') {
								this.shiftDown(e.getTarget('.x-grid-group-hd', this.mainBody));
							} else {
								var hd = e.getTarget('.x-grid-group-hd', this.mainBody);
								if (hd) {
									e.stopEvent();
									this.toggleGroup(hd.parentNode);
								}
							}
						},
						shiftUp: function(groupHeader) {
							evalGrid = Ext.getCmp('evaluationsGrid');
							clickedChildren = evalGrid.store.queryBy(function(rec, recID) {
								return (rec._groupId + '-hd' == groupHeader.id)
							}, this);
							clickedCatOrder = clickedChildren.items[0].data.categoryOrder;
							prevCatOrder = clickedCatOrder - 1;
							prevChildren = evalGrid.store.queryBy(function(rec, recID) {
								return (rec.data.categoryOrder == prevCatOrder)
							}, this);
							for (i = 0; i < clickedChildren.length; i++) {
								clickedChildren.items[i].data.categoryOrder = prevCatOrder;
							}
							for (i = 0; i < prevChildren.length; i++) {
								prevChildren.items[i].data.categoryOrder = clickedCatOrder;
							}
							evalGrid.store.data.sort('ASC', evalGridSort);
							evalGrid.getView().refresh();
							Ext.get(clickedChildren.items[0]._groupId + '-hd').highlight();
						},
						shiftDown: function(groupHeader) {
							evalGrid = Ext.getCmp('evaluationsGrid');
							clickedChildren = evalGrid.store.queryBy(function(rec, recID) {
								return (rec._groupId + '-hd' == groupHeader.id)
							}, this);
							clickedCatOrder = parseInt(clickedChildren.items[0].data.categoryOrder, 10);
							nextCatOrder = clickedCatOrder + 1;
							nextChildren = evalGrid.store.queryBy(function(rec, recID) {
								return (rec.data.categoryOrder == nextCatOrder)
							}, this);
							for (i = 0; i < clickedChildren.length; i++) {
								clickedChildren.items[i].data.categoryOrder = nextCatOrder;
							}
							for (i = 0; i < nextChildren.length; i++) {
								nextChildren.items[i].data.categoryOrder = clickedCatOrder;
							}
							evalGrid.store.data.sort('ASC', evalGridSort);
							evalGrid.getView().refresh();
							Ext.get(clickedChildren.items[0]._groupId + '-hd').highlight();
						}
					}),
					plugins: new Ext.ux.grid.CustomSortPlugin(),
					ddGroup: 'evalDD',
					listeners: {
						render: function() {
							var evaluationsGridEl = this.getView().scroller.dom;
							var evaluationsGridDropTarget = new Ext.dd.DropTarget(evaluationsGridEl, {
								ddGroup: 'evalDD',
								notifyDrop: function(ddSource, e, data) {
									var records = ddSource.dragData.selections;
									selectedCategory = records[0].data.category;
									evalGrid = Ext.getCmp('evaluationsGrid');
									rowNum = evalGrid.getView().findRowIndex(e.getTarget());
									destinationRec = evalGrid.store.getAt(rowNum);
									if (destinationRec != undefined && destinationRec._groupId == data.selections[0]._groupId) {
										Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
										evalGrid.store.insert(rowNum, records);
										evalGrid.store.data.sort('ASC', evalGridSort);
										evalGrid.getView().refresh();
									}
									return true
								},
								notifyOver: function(source, e, data) {
									evalGrid = Ext.getCmp('evaluationsGrid');
									try {
										if (evalGrid.store.getAt(evalGrid.getView().findRowIndex(e.getTarget()))._groupId != data.selections[0]._groupId) {
											return this.dropNotAllowed;
										} else {
											return this.dropAllowed;
										}
									}
									catch (error) {
										return this.dropNotAllowed;
									}
								}
							});
						}
					}
				}]
			}],
			tbar: {
				xtype: 'toolbar',
				items: [{
					xtype: 'tbtext',
					text: 'Apply master template:',
					style: 'margin-left: 5px;'
				},
				{
					xtype: 'combo',
					fieldLabel: 'Label',
					style: 'margin-left: 5px;'
				}]
			},
			listeners: {
				show: function() {
					Ext.getCmp('evaluationsGrid').store.load();
				}
			}
		},
		{
			xtype: 'panel',
			title: 'Manage',
			layout: 'border',
			items: [{
				xtype: 'panel',
				title: 'Master Templates',
				region: 'west',
				width: 200,
				split: true,
				margins: '5 0 0 5',
				tbar: {
					xtype: 'toolbar',
					items: [{
						xtype: 'button',
						text: 'Add',
						iconCls: 'add',
						style: 'margin-left: 5px;'
					},
					{
						xtype: 'button',
						text: 'Delete',
						iconCls: 'delete',
						style: 'margin-left: 5px;'
					}]
				},
				items: [{
					xtype: 'editorgrid',
					autoHeight: true,
					border: false,
					autoExpandColumn: 'masterTemplateName',
					enableColumnMove: false,
					enableColumnResize: false,
					enableColumnHide: false,
					stripeRows: true,
					titleCollapse: true,
					id: 'masterTemplateGrid',
					columns: [
					new Ext.grid.CheckboxSelectionModel(),
					{
						xtype: 'gridcolumn',
						header: 'Name',
						sortable: true,
						resizable: true,
						dataIndex: 'templatename',
						id: 'masterTemplateName',
						editor: {
							xtype: 'textfield',
							fieldLabel: 'Label'
						}
					}],
					store: new Ext.data.Store({
						url: 'teacher_tools/gradebook_data.json.php',
						baseParams: {
							command: 'getTemplate'
						},
						reader: new Ext.data.JsonReader({
							root: 'template'
						}, [{
							name: 'templatename'
						}, ]),
						autoLoad: false
					})
				}]
			},
			{
				xtype: 'panel',
				title: 'Ability Descriptions',
				region: 'center',
				margins: '5 5 0 0',
				tbar: {
					xtype: 'toolbar',
					items: [{
						xtype: 'button',
						text: 'Add',
						iconCls: 'add',
						style: 'margin-left: 5px;',
						menu: {
							xtype: 'menu',
							items: [{
								xtype: 'menuitem',
								text: 'Category',
								iconCls: 'node_insert_previous'
							},
							{
								xtype: 'menuitem',
								text: 'Ability',
								iconCls: 'medal_red'
							}]
						}
					},
					{
						xtype: 'button',
						text: 'Delete',
						iconCls: 'delete',
						style: 'margin-left: 5px;'
					}]
				},
				items: [{
					xtype: 'editorgrid',
					autoHeight: true,
					titleCollapse: true,
					enableColumnHide: false,
					enableColumnMove: false,
					enableColumnResize: false,
					stripeRows: true,
					border: false,
					autoExpandColumn: 'abilityDescriptionsName',
					id: 'abilityDescriptionsGrid',
					columns: [
					new Ext.grid.CheckboxSelectionModel(),
					{
						xtype: 'gridcolumn',
						header: 'Name',
						sortable: true,
						resizable: true,
						width: 100,
						dataIndex: 'string',
						id: 'abilityDescriptionsName',
						editor: {
							xtype: 'textfield',
							fieldLabel: 'Label'
						}
					},
					{
						xtype: 'gridcolumn',
						header: 'Print Layout',
						sortable: true,
						resizable: true,
						width: 100,
						dataIndex: 'string',
						editor: {
							xtype: 'textfield',
							fieldLabel: 'Label'
						}
					}],
					store: new Ext.data.Store({
						url: 'teacher_tools/gradebook_data.json.php',
						baseParams: {
							command: ''
						},
						reader: new Ext.data.JsonReader({
							root: 'template'
						}, [{
							name: 'templatename'
						}, ]),
						autoLoad: false
					})
				}]
			}]
		}]
	}],
	fbar: {
		xtype: 'toolbar',
		items: [{
			xtype: 'button',
			text: 'Submit'
		},
		{
			xtype: 'button',
			text: 'Close'
		}]
	}
});