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

    

});