var gradebookemailpopup = new Ext.Window({
  layout: 'fit',
  title: 'Automated Gradebook Emails',
  width: 450,
  height: 340,
  closeAction:'hide',
  resizable: false,
  modal: true,
  plain: true,            
  items: [
    {
      xtype: 'tabpanel',
      activeTab: 0,
      border: false,
      items: [
        {
          title: 'Low Grade',
          xtype: 'form',
          cls: 'formpadding',
          items: [
            {
              layout:'column',
              border: false,
              items:[
                {
                  columnWidth: .05,
                  border: false,
                  items:[
                    {
                       xtype: 'checkbox',
                       id: 'lowsetting',
                       hideLabel: true,
                       listeners: {
                           check: function(checkbox, checked) {
                              if (checked) {
                                 Ext.getCmp('lowgrade').enable();
                              } else {
                                 Ext.getCmp('lowgrade').disable();
                              }
                           }
                       }
                    }
                  ]
                },
                {
                  columnWidth: .95,
                  border: false,
                  layout:'form',
                  items:[
                    {
                      xtype: 'numberfield',
                      fieldLabel: 'Issue an automated e-mail for grades lower than',
                      labelStyle:'width:auto',
                      width: 50,
                      id: 'lowgrade'
                  }]
                }
              ]
            },
            {
              xtype: 'fieldset',
              title: 'E-mail Content',
              layout: 'anchor',
              anchor: '100%',
              items: [
                {
                  xtype: 'label',
                  text: "[Student's name] received a grade of [grade] on [date] in the following [course] [task]: [task name]."
                },
                {
                  html: '<br /><p>Custom footer:</p>',
                  border: false
                },
                
                {
                  xtype: 'textarea',
                  id:'lowmessage',
                  anchor: '100%',
                  height: 90 
             
                }
              ]
            }
          ]
        },
        {
          title: 'High Grade',
          xtype: 'form',
          cls: 'formpadding',
          items: [
            {
              layout:'column',
              border: false,
              items:[
                {
                  columnWidth: .05,
                  border: false,
                  items:[
                    {
                       xtype: 'checkbox',
                       id: 'highsetting',
                       hideLabel: true,
                       listeners: {
                           check: function(checkbox, checked) {
                              if (checked) {
                                 Ext.getCmp('highgrade').enable();
                              } else {
                                 Ext.getCmp('highgrade').disable();
                              }
                           }
                       }
                    }
                  ]
                },
                {
                  columnWidth: .95,
                  border: false,
                  layout:'form',
                  items:[
                    {
                      xtype: 'numberfield',
                      fieldLabel: 'Issue an automated e-mail for grades higher than',
                      labelStyle:'width:auto',
                      width: 50,
                      id: 'highgrade'
                  }]
                }
              ]
            },
            {
              xtype: 'fieldset',
              title: 'E-mail Content',
              layout: 'anchor',
              anchor: '100%',
              items: [
                {
                  xtype: 'label',
                  text: "[Student's name] received a grade of [grade] on [date] in the following [course] [task]: [task name]."
                },
                {
                  html: '<br /><p>Custom footer:</p>',
                  border: false
                },
                
                {
                  xtype: 'textarea',
                  id: 'highmessage',
                  anchor: '100%',
                  height: 90              
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  buttons: [
    {
      text: 'Close',
      handler: function(btn){ 
         gradebookemailpopup.hide();
      }  
    }
  ],
  listeners: {
    show: function (popup) { 
        Ext.Ajax.request({
        url: 'teacher_tools/gradebook_data.json.php',
        method: 'POST',
        params: {command: 'getlowhighgrades'},
        success : function(responseObject){ 
          eval("var results = "+responseObject.responseText);     
          Ext.getCmp('lowgrade').setValue(results[0].lowgrade);
          Ext.getCmp('highgrade').setValue(results[0].highgrade);
          Ext.getCmp('lowsetting').setValue(results[0].lowsetting);
          Ext.getCmp('highsetting').setValue(results[0].highsetting);
          Ext.getCmp('lowmessage').setValue(results[0].lowmessage);
          Ext.getCmp('highmessage').setValue(results[0].highmessage);
        },
        failure: function() {
            Ext.Msg.alert('Status', 'Unable to set low and high settings.');
        }
      });  
    },
    hide: function (popup){
      Ext.Ajax.request({
        url: 'teacher_tools/gradebook_data.json.php',
        method: 'POST',
        params: {command: 'setlowhighgrades', lowgrade: Ext.getCmp('lowgrade').getValue(), highgrade: Ext.getCmp('highgrade').getValue(), lowsetting: Ext.getCmp('lowsetting').getValue(), highsetting: Ext.getCmp('highsetting').getValue(), lowmessage: Ext.getCmp('lowmessage').getValue(), highmessage: Ext.getCmp('highmessage').getValue()},
        success: function() {
        },
        failure: function() {
            Ext.Msg.alert('Status', 'Unable to set low grades or high grades.');
        }
      });
    }         
  }
});