{
  xtype: 'panel'
	,title:ip2.i18n('languages')
	,closable: true
  ,helpLink: '../help/html/language.htm'
	,autoScroll: true
	,labelAlign: 'top'
  ,layout:{
    type:'fit'
  }
  ,onInitialize: function(myPanel) {
    var me = this;
    var dbName = 'navlng';

    if (!Ext.ClassManager.isCreated(dbName)) {
      Ext.define(dbName, {
        extend: 'Ext.data.Model'
        ,proxy:{
          type:'ajax'
          ,url:ip2.navigator.setUrl('database', {dbName:dbName, action:'list'})
          ,reader:{
            type:'json'
            ,rootProperty:'rows'
            ,totalProperty:'totalRows'
          }
        }
      });
    }

    var rowMenu = Ext.create('Ext.menu.Menu', {
      items: [
        {text:ip2.i18n('update'), cls:'ip2-default', iconCls:'ip2-icon-edit ip2-default', handler:function() { updateRow(); }}
        ,{text:ip2.i18n('delete'), iconCls:'ip2-icon-delete', handler:function() { deleteRow(); }}
      ]
    });

    var grid = Ext.create('Ext.grid.Panel', {
      store:Ext.create('Ext.data.Store', {
        model:dbName
        ,autoLoad:true
      })
      ,columns: [
        {header: ip2.i18n('LNGID'),  dataIndex: 'LNGID'}
        ,{header: ip2.i18n('LNGTXT'), renderer:me.textRenderer}
        ,{header: ip2.i18n('LNGFLG'), renderer:me.flagRenderer}
      ]
      ,listeners: {
        itemdblclick:function(view, record, item, index, e) {
          updateRow();
        }
        ,itemcontextmenu:function(view, record, item, index, e) {
          e.stopEvent();
          var coords = e.getXY();
          rowMenu.showAt([coords[0], coords[1]]);
        }
      }
		  ,tbar:[{
        xtype:'button'
        ,text:ip2.i18n('addNew')
        ,iconCls:'ip2-icon-add'
        ,handler:function() {
          createRow();
        }
      },{
        xtype:'button'
        ,text:ip2.i18n('refresh')
        ,iconCls:'ip2-icon-refresh'
        ,handler:function() {
          grid.store.load();
          grid.getView().refresh();
        }
      }]
    });

    myPanel.add(grid);

    var createRow = function() {
      var dataModel = grid.store.proxy.getModel();
      var record = new dataModel();
      detailForm('create', record);
    }
    var updateRow = function() {
      var records = grid.getSelectionModel().getSelection();
      for (var i = 0; i < records.length; i++) {
        var record = records[i];
        detailForm('update', record);
      }
    }
    var deleteRow = function() {
      Ext.MessageBox.show({
        title:ip2.i18n('confirmDeleteTitle')
        ,msg:ip2.i18n('confirmDelete')
        ,buttons: Ext.MessageBox.OKCANCEL
        ,fn:doDelete
        ,icon: Ext.MessageBox.WARNING
      });
    }

    var detailForm = function(action, gridRow) {
      var form = Ext.create('Ext.form.Panel', {
        url:ip2.navigator.setUrl('database', {dbName:dbName, action:action, rrn:gridRow.data.RRN})
        ,border: false
        ,bodyStyle:'padding:10px;'
        ,defaults:{
          xtype:'textfield'
          ,labelAlign:'left'
          ,width:400
        }
        ,items:[{
          fieldLabel:ip2.i18n('LNGID')
          ,name:'LNGID'
          ,dataIndex:'LNGID'
          ,xtype:'ip2LocaleLanguageComboBox'
          ,allowBlank:false
        }]
        ,buttons:[{
          text:ip2.i18n('ok')
          ,type: 'submit'
          ,handler: function() {
            var form = this.up('form').getForm();
            if (form.isValid()) {
              form.submit({
                success: function(form, response) {
                  if (action == 'create') {
                    grid.store.insert(0, gridRow);
                    gridRow.set('RRN', response.result.rrn);
                  }
                  var values = form.getFieldValues();
                  for(var field in form.getValues()) {
                    gridRow.set(field, values[field]);
                  }
                  gridRow.commit();
                  window.hide();
                }
                ,failure: function(form, response) {
                  ip2.navigator.displayDBerror(response.result);
                }
              });
            }
          }
          ,listeners:{
            afterrender:function(button) {
              ip2.setDefaultButtonStyle(button);
              ip2.mapButton2key(this.up('form').getForm().owner.el, button, 'ENTER');
            }
          }
        },{
          text:ip2.i18n('cancel')
          ,type: 'button'
          ,handler: function() {
            window.hide();
          }
        }]
        ,listeners:{
          afterrender:function(form) {
            form.getForm().loadRecord(gridRow);
            form.getForm().findField('LNGID').focus();
          }
        }
      })

      var window = Ext.create('Ext.window.Window', {
        id:'win'+ip2.unique()
        ,title:ip2.i18n('languageInformation')
        ,closeAction: 'hide'
        ,width: 450
        ,height: 125
        ,minHeight: 50
        ,layout: 'fit'
        ,resizable: true
        ,modal: true
        ,items: form
        ,constrain : true
      }).show();
    }

    var doDelete = function(btn) {
      if (btn != 'ok') { return; }

      var result = {};
      var records = grid.getSelectionModel().getSelection();
      for (var i = 0; i < records.length; i++) {
        var record = records[i];
        Ext.Ajax.request({
          url:ip2.navigator.setUrl('database', {dbName:dbName, action:'delete', rrn:record.data.RRN})
          ,success:function(response) {
            eval('result =' + response.responseText);
            if (result.success) {
              grid.store.remove(record);
            } else {
              ip2.navigator.displayDBerror(response.result);
            }
          }
        })
      }
    }
  }
  ,textRenderer:function(value, meta, record) {
    return ip2.locale.getLanguageTextByLanguageCode(record.data.LNGID);
  }
  ,flagRenderer:function(value, meta, record) {
    return '<img src="' + ip2.locale.getCountryFlagByLanguageCode(record.data.LNGID) + '" />';
  }
}
