Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = 'imgs/s.gif';
    
    var panel_menu = new Ext.Panel({
        baseCls: 'x-plain',
        id: 'panel_menu',
        width: '100%',
        html: '',
        height: 50     
    });
    
    var html_menu = '<table cellpadding="0" cellspacing="0" style="background: #004f39; width: 100%; height: 50px;font-family: helvetica; color: #FFF;"><tr>';
    html_menu += '<td id="btn_home" onclick="Javascript:loadContent(1);" onmouseover="switchClass(\'btn_home\', true)"  onmouseout="switchClass(\'btn_home\', false)" style="text-align: center; width:130px; cursor: pointer;">Home</td>';
    html_menu += '<td id="btn_why" onclick="Javascript:loadContent(2);" onmouseover="switchClass(\'btn_why\', true)"  onmouseout="switchClass(\'btn_why\', false)" style="text-align: center; width:130px; cursor: pointer;">Why Jeeves</td>';
    html_menu += '<td id="btn_ran" onclick="Javascript:loadContent(3);" onmouseover="switchClass(\'btn_ran\', true)"  onmouseout="switchClass(\'btn_ran\', false)" style="text-align: center; width:130px; cursor: pointer;">The Range</td>';
    html_menu += '<td id="btn_gal" onclick="Javascript:loadContent(7);" onmouseover="switchClass(\'btn_gal\', true)"  onmouseout="switchClass(\'btn_gal\', false)" style="text-align: center; width:130px; cursor: pointer;">Gallery</td>';
    html_menu += '<td id="btn_faq" onclick="Javascript:loadContent(4);" onmouseover="switchClass(\'btn_faq\', true)"  onmouseout="switchClass(\'btn_faq\', false)" style="text-align: center; width:130px; cursor: pointer;">Hydronic</td>';
    html_menu += '<td id="btn_news" onclick="Javascript:loadContent(5);" onmouseover="switchClass(\'btn_news\', true)"  onmouseout="switchClass(\'btn_news\', false)" style="text-align: center; width:150px; cursor: pointer;">News & Events</td>';
    html_menu += '<td id="btn_con" onclick="Javascript:loadContent(6);" onmouseover="switchClass(\'btn_con\', true)"  onmouseout="switchClass(\'btn_con\', false)" style="text-align: center; width:130px; cursor: pointer;">Contact Us</td></tr></table>';
    
    var panel_display = new Ext.Panel({
        html: '',
        id: 'panel_display',
        baseCls: 'x-plain',
        cls: 'main-display',       
        autoScroll: true,
        height: 460   
    });
    
    var panel_main = new Ext.Panel({
        renderTo: 'main',
        width: 820,
        frame: true,
        items: [panel_menu, panel_display]
    });    
    
    Ext.getCmp('panel_menu').body.update(html_menu);    
    loadContent(1);

});