function toggleMenu(flag) {
  document.getElementById('menu').style.display = flag ? 'block' : 'none';
}

Ext.onReady(function(){

    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';

    var simple = new Ext.FormPanel({
        frame:false,
        border:false,
        bodyStyle: 'background: none',
        labelWidth: 125,
        onSubmit: Ext.emptyFn,
        defaultType: 'textfield',
        defaults: { width: 200 },
        width: 380,
        items: [
            {
               fieldLabel: 'Name',
               name: 'name',
               allowBlank:false
            },
            {
               fieldLabel: 'Number of Guests',
               name: 'guests',
               allowBlank:false
            },
            new Ext.form.DateField({
               fieldLabel: 'Arrival Date',
               name: 'arrival_date',
               format: 'd/m/y',
               allowBlank:false,
               editable: false
            }),
            new Ext.form.TimeField({
               fieldLabel: 'Arrival Time',
               name: 'arrival_time',
               minValue: '8:00am',
               maxValue: '11:00pm',
               style: 'color: black',
               listClass: 'dropDownItem',
               selectedClass: 'x-combo-selected dropDownItem',
               allowBlank:false,
               editable: false
            }),
            {
               fieldLabel: 'Email',
               name: 'email',
               vtype:'email',
               allowBlank:false
            }, 
            {
               fieldLabel: 'Contact Phone',
               name: 'phone',
               allowBlank:false
            },
            new Ext.form.TextArea({
               fieldLabel: 'Special Requests or Occasion',
               name: 'comments',
               height: 120
            })
        ]   
    });

    var sb = new Ext.Button({
        text: 'Submit',
        renderTo: 'submit',
        handler: function(){
            var f = simple.getForm();
            if(f.isValid()) {
              var form = document.getElementById('form');
              form.name.value = f.findField('name').getValue();
              form.guests.value = f.findField('guests').getValue();
              form.arrival_time.value = f.findField('arrival_time').getValue();
              form.arrival_date.value = f.findField('arrival_date').getValue();
              form.email.value = f.findField('email').getValue();
              form.phone.value = f.findField('phone').getValue();   
              form.comments.value = f.findField('comments').getValue();  
              
              /*
              document.getElementById('name').value = f.findField('name').getValue();
              document.getElementById('guests').value = f.findField('guests').getValue();    
              document.getElementById('arrival_date').value = f.findField('arrival_date').getValue();
              document.getElementById('arrival_time').value = f.findField('arrival_time').getValue();
              document.getElementById('email').value = f.findField('email').getValue();    
              document.getElementById('phone').value = f.findField('phone').getValue();   
              document.getElementById('comments').value = f.findField('comments').getValue();  
              */

              /*
              if(
                !document.getElementById('canape_option_1').checked 
                && !document.getElementById('canape_option_2').checked
                && !document.getElementById('canape_option_3').checked 
                && !document.getElementById('group_option_1').checked
                && !document.getElementById('group_option_2').checked
                && !document.getElementById('group_option_3').checked
              ) {
                Ext.Msg.alert('Please select your canape or group option');
                return;
              } 
              
              
              // See what group option user has selected
              var g_o = 0;
              if(document.getElementById('group_option_1').checked) {
                g_o = 1;
              } else if(document.getElementById('group_option_2').checked) {
                g_o = 2;
              } else if(document.getElementById('group_option_3').checked) { 
                g_o = 3;
              } 
              
              var a = [
                ['entree', <?=count($ENTREE)?>, 3],
                ['mains', <?=count($MAINS)?>, 3],
                ['dessert', <?=count($DESSERT)?>, 2]
              ];
              var meals = {}
              
              // Now count the number of options in every course
              for(var i = 0; i < a.length; i++) {
                meals[a[i][0]] = 0;
                for(var j = 1; j <= a[i][1]; j++) {
                  var e = document.getElementById(a[i][0] + '_' + j);
                  if(e.checked) {
                    meals[a[i][0]] += 1;
                  }
                }
              }
              
              // Now compare the number of fields in the meals array with the g_o
              var ctr = 0;
              for(var i in meals) {
                if(meals[i] > 0) {
                  ctr++; // should not be larger than 3
                }
              }
              if(ctr > g_o) {
                if(g_o == 1) {
                  Ext.Msg.alert('Error', 'Please select meals from only one course');
                } else if (g_o == 2) {
                  Ext.Msg.alert('Error', 'Please select meals from any two courses');
                }
                return false;
              }
              if(ctr < g_o) {
                Ext.Msg.alert('Error', 'Please select meals from any ' + g_o + ' course' + (g_o > 1 ? 's' : ''));
                return false;
              }
              
              // Now see if the number of selected options in every meal is not too high
              for(var i = 0; i < a.length; i++) {
                if(meals[a[i][0]] > 0) {
                  if(meals[a[i][0]] != a[i][2]) {
                    Ext.Msg.alert('Error', 'Please select ' + a[i][2] + ' options for ' + a[i][0]);
                    return false;
                  }
                } 
              }
              */
              /*
              if(g_o == 3) {
                if(meals['entree'] == 0) {
                  Ext.Msg.alert('Error', 'You have not selected entree');
                  return; 
                }
                if(meals['mains'] == 0) {
                  Ext.Msg.alert('Error', 'You have not selected mains');
                  return;
                }
                if(meals['dessert'] == 0) {
                  Ext.Msg.alert('Error', 'You have not selected dessert');
                  return;
                }
              }
              */
              
              document.getElementById('form').submit();               
            } else {
              document.getElementById('top').focus();
              Ext.Msg.alert('Error', 'Please fill the required fields');
              
            }
        }
    });
    
    simple.render('fform');
})