/******loads all the necessary extjs libraries*****/
Ext.require(['*']);

var metadatatab_center_items = {
	xtype:'panel',
	layout:'border',
	items:[{
    xtype:'panel',
    region:'center',
    layout:'fit',
    hidden: true,
    id:'metadatatab_mapPanel',
    html:'<div id=\'metadatatab_map\' style=\'display:hidden;width:100%;height:100%\'></div>',
    listeners:{
      resize:function(){
        if(typeof metadata_map!=="undefined")
        {
          metadata_map.updateSize();
        }
      }
    }
  }]
};

/******When Ext is ready, it renders the viewport TabsViewport to the html body*****/
/******it also initialize other features such as quicktips and text selection*****/
function renderExtElements() {
    var cmp1 = new Ext.container.Container({
      layout: {
        type: 'fit',
        align: 'stretch'
      },
      border:false,
      height: '100%',
      width: '100%',
      renderTo: Ext.get('metadata-panel'),
      items:[
        metadatatab_west_form_panel,
        {
          xtype:'panel',
          border:false,
          items:[
            metadatatab_center_items,
            {
              xtype:'panel',
              id:'metadatatab_south',
              border:false,
              flex:1,
              items:[{
                xtype:'panel',
                id:'metadatatab_south_tabpanel',
                layout:'fit',
                items:[metadata_search_results_grid_var]
              }]
            }],
          listeners:{
            afterrender:function()
            {
              init_metadata_map();
            }
          }
        }
      ]
    });
}