Ext.onReady(function(){
 
    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.
    //Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    var viewport = new Ext.Viewport({
        layout:'border',
        border:false,
        baseCls:'x-ebo-transparent',
        items:[{
            baseCls:'x-ebo-center',
            border:false,
            region:'center',
            autoScroll:true,
            //bodyStyle:'overflow-x:hidden;',
            layout:'column',
            items:[{
                // left column
                layout: {
                    type: 'hbox',
                    pack: 'start',
                    align: 'stretch'
                },
                bodyStyle:'position:static;',
                height:931,
                baseCls:'x-ebo-side',
                border:false,    
                columnWidth:.50,
                items:[{
                    border:false,
                    flex:1,
                    baseCls:'x-ebo-transparent'
                },{
                    baseCls:'x-ebo-shadow-left-full',
                    border:false,
                    width:10
                }]
                
            },{
                // center column (content)
                baseCls:'x-ebo-transparent',
                width:780,
                border:false,
                items:[{
                    baseCls:'x-ebo-transparent',
                    border:true,
                    width:780,
                    items:new EBO.Website.RUL.Common.Frame({layoutName:'home'})
                }]
            },{
                // right column
                layout: {
                    type: 'hbox',
                    pack: 'start',
                    align: 'stretch'
                },
                baseCls:'x-ebo-side',
                border:false,
                columnWidth:.50,
                height:931,
                items:[{
                    baseCls:'x-ebo-shadow-right-full',
                    border:false,
                    width:50
                },{
                    border:false,
                    flex:1,
                    baseCls:'x-ebo-transparent'
                }]
            }]
        }]
    });
    
    // link menu items
    Ext.get('header-logo').addListener('click', function(evt, el){window.location.href = '/';});
    Ext.get('menu-button-about').addListener('click', function(evt, el){window.location.href = '/index.php/about';});
    Ext.get('menu-button-services').addListener('click', function(evt, el){window.location.href = '/index.php/services';});
    Ext.get('menu-button-references').addListener('click', function(evt, el){window.location.href = '/index.php/references';});
    Ext.get('menu-button-news').addListener('click', function(evt, el){window.location.href = '/index.php/news';});
    Ext.get('menu-button-downloads').addListener('click', function(evt, el){window.location.href = '/index.php/downloads/remote';});
    Ext.get('menu-button-contact').addListener('click', function(evt, el){window.location.href = '/index.php/contact';});        
});