Ext.apply(ww.qs, {
  getItem_defQuestion: function (i, xtype, conf, arg) {
    if (!arg) arg=[];
    var addon = "";
    if (i == 2) {
      var oReturn = {
        id: 'grp_'+ww.qs[i].name, xtype: xtype, itemCls: 'x-question-item', 
        defaults: {width:180, name: ww.qs[i].inputName, parentid: 'grp_'+ww.qs[i].name}, 
        fieldLabel: (i+1) + '.  ' + ww.qs[i].question,
        items: ww.el.options(ww.qs[i].options, arg[0]||null, arg[1]||null) 
      }
    } else if (i==3) {
      var oReturn = {
        id: 'grp_'+ww.qs[i].name, xtype: xtype, itemCls: 'x-question-item', 
        defaults: {AutoWidth:true, height:40, name: ww.qs[i].inputName, parentid: 'grp_'+ww.qs[i].name}, 
        fieldLabel: (i+1) + '.  ' + ww.qs[i].question,
        items: ww.el.options(ww.qs[i].options, arg[0]||null, arg[1]||null) 
      }    
    }else {
      var oReturn = {
        id: 'grp_'+ww.qs[i].name, xtype: xtype, itemCls: 'x-question-item', 
        defaults: {name: ww.qs[i].inputName, parentid: 'grp_'+ww.qs[i].name}, 
        fieldLabel: (i+1) + '.  ' + ww.qs[i].question,
        items: ww.el.options(ww.qs[i].options, arg[0]||null, arg[1]||null) 
      }    
    }
    return Ext.apply(oReturn, conf||{});
  },
  getItem_otherSpecify: function (i) {
    var oReturn = {
      xtype:'textfield', disabled: true, allowBlank: false, hideLabel: true, hidden: true, width: 200, 
      id: ww.qs[i].inputName + '_Other', name: ww.qs[i].inputName + '_Other', style: 'margin-bottom: 1px', 
      fieldLabel: 'Q' + (i+1) + ': Others specify'
    }
    return oReturn;
  },
  getButton_proceedNext: function (i) {
    var sPrev = (ww.qs[i-1])?'Question ' + (i):'';
    var sNext = (ww.qs[i+1])?ww.qs[i+1].name:'';
    var btnStyle = 'color: #0076B0; font-size: 11pt; font-weight: bold;';
    var buttonWidth = '130px';
    if (sPrev != '') {
      var oPrev = new Ext.ww.Button({ 
        currentTab: i, btnType: 'label', style: btnStyle, buttonWidth: buttonWidth, 
        overStyle: {color: '#cd3301'}, outStyle: {color: '#0076B0'}, 
        text: '< Back to ' + sPrev + '', 
        handler: function () {
          var prevTab = this.currentTab - 1;
          var tabs = Ext.getCmp('kpl_questTab');
          tabs.activate(prevTab);
        }
      });
    }
    if (sNext != '') {
      cusPadding = 0;
      var oNext = new Ext.ww.Button({
        currentTab: i, btnType: 'label', style: btnStyle, buttonWidth: buttonWidth, 
        overStyle: {color: '#cd3301'}, outStyle: {color: '#0076B0'}, 
        text: 'Proceed to ' + sNext + ' >', 
        handler: function () {
          var nextTab = this.currentTab + 1;
          var tabs = Ext.getCmp('kpl_questTab');
          tabs.activate(nextTab);
        }
      });
    }
    
    var oReturn = [];
    //if (oPrev) oReturn.push(oPrev);
    if (oNext) oReturn.push(oNext);
    return oReturn;
  }
});

Ext.onReady(function () {
  ww.q = {
    frmQuest: new Ext.form.FieldSet({
      title: 'Questionnaire', autoHeight:true,
      items: [{
        border: false, style:'margin-bottom: 10px;', html: '<b>Please complete this simple questionnaire.</b>'
      }, new Ext.TabPanel({
        id: 'kpl_questTab', activeTab: 0, plain: true, width: 575, deferredRender: false, bodyStyle: 'padding: 10px;', 
        border: true, defaults: {layout: 'form', height: 250, labelAlign: 'top', border: false,  
          defaults: { columns: 1, labelSeparator: '', width: 555, allowBlank: false }
        }, 
        items: [{
          title: ww.qs[0].name, buttonAlign: 'right',
          items: [
            ww.qs.getItem_defQuestion(0, 'checkboxgroup', {columns: 2}, ['Others (please specify):', 'Others: [X]']), 
            ww.qs.getItem_otherSpecify(0)
          ],
          buttons: ww.qs.getButton_proceedNext(0)
        }, {  
          title: ww.qs[1].name, 
          items: [
            ww.qs.getItem_defQuestion(1, 'radiogroup')
          ],
          buttons: ww.qs.getButton_proceedNext(1)
        }, {  
          title: ww.qs[2].name, 
          items: [
            ww.qs.getItem_defQuestion(2, 'radiogroup')
          ],
          buttons: ww.qs.getButton_proceedNext(2)
        }, {  
          title: ww.qs[3].name, 
          items: [
            ww.qs.getItem_defQuestion(3, 'radiogroup')
          ],
          buttons: ww.qs.getButton_proceedNext(3)
        }/*, {  
          title: ww.qs[4].name, 
          items: [
            ww.qs.getItem_defQuestion(4, 'radiogroup')
          ],
          buttons: ww.qs.getButton_proceedNext(4)
        }, {  
          title: ww.qs[5].name, 
          items: [
            ww.qs.getItem_defQuestion(5, 'radiogroup')
          ],
          buttons: ww.qs.getButton_proceedNext(5)
        }*/]
      })]
    })
  }
});