var studentOrderPopup = new Ext.Window({
   title: 'Student Order',
   width: 400,
   height: 450,
   autoScroll: true,
   plain: false,
   modal: true,
   resizable: true,
   bodyBorder: false,
   closeAction:'hide',
   bodyStyle: 'background-color: white;',
   tbar: {
      xtype: 'toolbar',
      items: [
          {
              xtype: 'button',
              text: 'Order Alphabetically',
              iconCls: 'sort_alphabet',
               handler: function(btn){ 
                  var popup = this.ownerCt.ownerCt;
                  var grid = popup.items.item('studentOrder');
                  grid.store.sort('name', 'ASC');
               }
          }
      ]
   },
   items: [
      { //**************** gridpanel ***************************
         xtype: 'grid',
         store:new Ext.data.Store({
            url : 'teacher_tools/gradebook_data.json.php',  
            baseParams: {command: 'studentOrder'},     
            reader: new Ext.data.JsonReader({
               root: 'order',
               idProperty: 'studentid'
            }, [
               {name: 'studentid'}, 
               {name: 'name'}, 
               {name: 'orderno', type:'int'}
            ]),
            autoLoad : false,
            autoSave: false,
            writer: new Ext.data.JsonWriter({}),
            listeners: {
               load: function(store, records, options) {
                  var hasOrder;
                  for (var i=0, len=store.data.items.length; i<len; i++) {
                     var record = store.data.items[i];
                     if(record.data.orderno != null) hasOrder = true;
                  }
                  store.sort( (hasOrder?'orderno':'name'), 'ASC');
               },
               write: function(store, action, result, res, records) {
                  Ext.getCmp('gradebookGrid').loadGrid();
               }
            }
         }),
         autoHeight: true,
         titleCollapse: true,
         border: false,
         autoExpandColumn: 'studentOrderName',
         id: 'studentOrder',
         columns: [
            new Ext.grid.RowNumberer(),
            { 
                xtype: 'gridcolumn', 
                header: 'Name', 
                sortable: true, 
                resizable: true, 
                width: 100, 
                dataIndex: 'name', 
                id: 'studentOrderName' 
            }
         ],
         enableDragDrop: true,
         view: new Ext.grid.GridView({
           listeners: {
            rowsinserted: function(){
              this.refresh();
            }
           }
         }),
         listeners: {
            render: function(g) {
               var ddrow = new Ext.ux.dd.GridReorderDropTarget(g, {
                   copy: false //true=copy, false=move
               });
               Ext.dd.ScrollManager.register(g.getView().getEditorParent()); // if you need scrolling, register the grid view's scroller with the scroll manager
            },
            beforedestroy: function(g) { // if you previously registered with the scroll manager, unregister it (if you don't it will lead to problems in IE)
               Ext.dd.ScrollManager.unregister(g.getView().getEditorParent());
            }
         }
      } // *************** end gridpanel ***********************
   ],
   fbar: {
      xtype: 'toolbar',
      items: [
          {
               xtype: 'button',
               text: 'Save',
               handler: function(btn){ 
                  var popup = this.ownerCt.ownerCt;
                  var store = popup.items.item('studentOrder').store;
                  for (var i=0, len=store.data.items.length; i<len; i++) {
                     var record = store.data.items[i];
                     record.set('orderno', i+1);
                  }
                  store.save();
                  popup.hide();
               }
          },
          {
               xtype: 'button',
               text: 'Cancel',
               handler: function(btn){ 
                  this.ownerCt.ownerCt.hide();
               }  
          }
      ]
   },
   listeners: {
      beforeshow: function(popup) {
         var maingrid = Ext.getCmp('gradebook-panel').items.items[0].getActiveTab();
         if (maingrid.id != 'gradebookGrid') return false;
         
         if (Ext.getCmp('gradebookcourseid').getValue().length > 0) {
            var popupgrid = popup.items.item('studentOrder');
            popupgrid.store.baseParams.courseid=SchoolDynamics.currentCourseID;
            popupgrid.store.load();
         } else {
            Ext.Msg.alert('Status', 'Please select a course from the course dropdown to continue.');
            return false;
         }
      }
   }
});