var meals = {
  title: 'Meals Ordering',
  id: 'meals-panel',
  layout: 'fit',
  hideMode: 'offsets',
  tools: [
    {
        id:'help',
        handler: function(btn){
            helppopup.loadHelpFile("Meal Ordering", 500, 455);
        }
    }
  ],
  tbar: {
        xtype: 'toolbar',
        defaults: {style: 'margin-left: 5px;'},
        items: [
            {
                xtype: 'label',
                text: 'Order date:'
            },
            {
                xtype: 'datefield',
                id: 'meals_date',
                value: new Date().format('m/d/Y'),
                tabIndex: 1,
                listeners: {
                  setValue: function (datefield, newValue, oldValue) {
                     Ext.getCmp('mealsMenuGrid').store.baseParams.date = datefield.value;
                     Ext.getCmp('mealsMenuGrid').store.load();
                     Ext.getCmp('mealsStudentGrid').store.baseParams.date = datefield.value;
                     Ext.getCmp('mealsStudentGrid').store.load();
                  }
                }
            },
            {
                xtype: 'tbseparator',
                style: 'margin-left: 10px;'
            },
            {
                xtype: 'label',
                text: 'Homeroom:'
            },
            new SchoolDynamics.homeroomCombo({
               id:'meals_homeroom',
               listeners: {
                  setValue: function (combobox, newValue, oldValue) {
                     Ext.getCmp('mealsStudentGrid').store.baseParams.homeroom = newValue;
                     Ext.getCmp('mealsStudentGrid').store.load();
                  }
               }
            }),
            {
                xtype: 'tbseparator',
                style: 'margin-left: 10px;'
            },
            {
                xtype: 'label',
                text: 'Meal:'
            },
            {
                xtype: 'combo',
                width: 100,
                id: 'meals_meal',
                store: new Ext.data.Store({
                    url : 'teacher_tools/meals_data.json.php',
                    baseParams: {command: 'getMeals'},
                    reader: new Ext.data.JsonReader({root: 'meals'}, [            
                        {name: 'mealid'},
                        {name: 'meal'}
                    ]),
                    autoLoad : false
                }),
                listWidth:100,
                allowBlank: false,    
                displayField: 'meal', 
                valueField: 'mealid', 
                typeAhead: true, 
                triggerAction: 'all',
                listeners: {
                  setValue: function (combobox, newValue, oldValue) {
                     Ext.getCmp('mealsMenuGrid').store.baseParams.meal = newValue;
                     Ext.getCmp('mealsMenuGrid').store.load();
                     Ext.getCmp('mealsStudentGrid').store.baseParams.meal = newValue;
                     Ext.getCmp('mealsStudentGrid').store.load();
                  }
                }
            }
        ]
  },
  items: [{
      xtype: 'panel',
      layout: 'uxcolumn',
      defaults: {style: {padding: 15}, columnWidth: .5},
      layoutConfig: { fitHeight: true },
      border: false,   
      items: [
        new mealsMenuGrid(),
        {
          xtype: 'panel',
          border: false,
          columnWidth: 0,
          width: 30,
          style: 'margin: 0;',
          layout: { type:'vbox', padding:'5', pack:'center', align:'center' },
          defaults: {xtype:'button',margins:'0 0 5px 0'},
          items:[
            {
               iconCls:'arrow_right',
               listeners: {
                  click:function(btn){
                     var gridFrom = Ext.getCmp('mealsMenuGrid'), gridTo = Ext.getCmp('mealsStudentGrid');
                     var menurecords = gridFrom.selModel.getSelections(), studentrecords = gridTo.selModel.getSelections();
                     if (!menurecords.length) {
                        Ext.MessageBox.alert ('ERROR','Please select food choices to order.');
                        return false;
                     } else if (!studentrecords.length) {
                        Ext.MessageBox.alert ('ERROR','Please select students to add the food choices to.');
                        return false;
                     }
                     
                     for (var i=0, mlen=menurecords.length; i < mlen; i++) {
                        for (var j=0, slen=studentrecords.length; j < slen; j++) {
                           Ext.getCmp('mealsStudentGrid').addItem(menurecords[i].data, studentrecords[j]._groupId);
                        }
                     }
                  }
               }
            },
            {
               iconCls:'arrow_left',
               id: 'meals_removebtn',
               listeners: {
                  click:function(btn){
                     var grid = Ext.getCmp('mealsStudentGrid');
                     grid.store.remove(grid.selModel.getSelections());
                  }
               }
            }
          ]
        },
        new mealsStudentGrid()
      ]
  }],
  listeners: {
      show: function(panel) {
         panel.getTopToolbar().items.item('meals_homeroom').setValue(SchoolDynamics.homeroom);
         panel.getTopToolbar().items.item('meals_meal').setValue(SchoolDynamics.meal);
      },
      render: function(panel){
         /****************************
          * drag student data
          */
         var grid = Ext.getCmp('mealsStudentGrid');
         var firstGridDDGroup = new Ext.dd.DropTarget(panel.getEl().dom, { // drag off of "Students" grid
                ddGroup    : 'dd_students_off',
                notifyDrop : function(ddSource, e, data){
                    if (this.invaliddrop) return false;
                    
                     var selectedRows = data.selections; 
                     for (i = 0; i < selectedRows.length; i++) {
                        grid.store.remove(selectedRows[i]);
                     }
                     return true;
                },
                notifyOver : function(ddSource, e, data){
                     grid.addClass(grid.ddGroup);
                     if (!Ext.get(e.target).findParentNode("div."+grid.ddGroup)){ //if we're NOT dragging over the originating grid
                        this.invaliddrop = false;
                        return this.dropAllowed;
                     } else {
                        this.invaliddrop = true;
                        return this.dropNotAllowed;
                     }
                }
         });
         //end student drag
      }
  }
};