Ext.namespace('Root.Theme');

Root.Theme.Top = Ext.extend(Ext.Container,
{
   id: 'top',

   siteRoot: undefined,

   // Constructor
   initComponent: function() {
      var logoImgUrl = 'images/ethnosimo.png';

      var logo =
        {
           id: 'topLogo',
           xtype: 'container',
           height: 60,
           layout:
            {
               type: 'table',
               columns: 3,
               tableAttrs: { style: 'width: 100%; height: 100%' }
            },
           items:
            [
                Root.Helper.hotImage('http://www.ypes.gr', logoImgUrl, { cellCls: 'ethnosimo' }),
                {
                   xtype: 'box',
                   cellCls: 'title1',
                   html: '<div id="ypes"><h2>Υπουργείο Εσωτερικών</h2><h4>Αποκέντρωσης & Ηλεκτρονικής Διακυβέρνησης</h4></div>'
                },
                {
                   xtype: 'box',
                   cellCls: 'title2',
                   html: '<div id="title">ΕΚΛΟΓΕΣ</div>'
                }
            ]
        };

      var toolbar =
        {
           id: 'topToolbar',
           xtype: 'container',
           height: 30,
           layout:
            {
               type: 'table',
               columns: 1,
               tableAttrs: { style: 'width: 100%; height: 100%' }
            }
        };

      Ext.apply(this,
	    {
	       layout:
	        {
	           type: 'vbox',
	           align: 'stretch'
	        },
	       items: [logo, { xtype: 'spacer', height: 4 }, toolbar, { xtype: 'spacer', height: 4}]
	    });

      // Call parent
      Root.Theme.Top.superclass.initComponent.apply(this, arguments);
   }
});

// Register xtype
Ext.reg('Root-Theme-Top', Root.Theme.Top);