//Layout of the server app.

// PANEL SIZE SETTINGS - SET IF LAYOUT IS GOING TO BE CHANGED  !!!!!
var leftPanelWidth = 290;
var leftPanelMinWidth = 0;
var leftPanelMaxWidth = 800;

// --- The following vars are used to set initial height of map control.

// header/banner area of page
var headerHeight = 75;

// menuToolBarHeight is the height of the menu bar and tool bar COMBINED.  It must account
// for any padding/border in the DIVs containing the menu and toolbar
var menuToolBarHeight = 68;  
// For IE6 we must make the tool bar height slightly higher or else the bottom of the toolbar is clipped by map
if (navigator.userAgent.indexOf('MSIE 6') != -1) menuToolBarHeight = menuToolBarHeight + 5;

// initial height of the grid-below-map panel -- generally this is populated later and should
// not be visible on initial page load (ie, set to 0)
var gridBelowMapHeight = 0;

// if tabs are used in the center (map) panel, this value MUST be set to 26,
//  otherwise leave at 0.  Note this value is only used on initial page load.
// NOTE: It is not possible to check the number of tabs programmatically (tried that)
//   because this value must be set properly BEFORE the panels are loaded.
var mapPanelTabHeight = 0; // no tabs = 0; yes tabs = 26

// status bar height - should not need to be changed
var statusBarHeight = 23;

// --- various page-level objects associated with the Ext layout
var layout, cpMap, gridMainPanel;
var innerCenterLayout;

//********************************************
//Panel Design Object
//********************************************
function PageLayout() { }

//********************************************
// Load Method() - > Loads all the panels.
// This MUST be called after all the elemnts are writen to the browser.
//********************************************
PageLayout.prototype.Load = function()
{
   layout = new Ext.BorderLayout(document.forms[0], {
        north: {
            autoScroll: false,
            initialSize: headerHeight
        },
        west: {
            split:true,
            autoScroll: true,
            initialSize: leftPanelWidth,
            minSize: leftPanelMinWidth,
            maxSize: leftPanelMaxWidth,
            titlebar: true,
            collapsible: true,
            animate: true,
            tabPosition: 'top'
        },
        south: {
            initialSize: 25,
            titlebar: false
        },
        center: {
            tabPosition: 'bottom',
            fitToFrame: true
        }
    });

    // create an inner layout that will contain the map toolbars, map, 
    //   and (if used) grid-below-map - all in separate panels.  This layout will be nested
    //   in the 'center' layout of the overall page
    // NOTE: IMPORTANT - the fitContainer: true setting on the center panel is CRITICAL
    //   to the ESRI map control resizing properly - don't change this without very good reason!
    // NOTE: south panel is hidden on page load
    innerCenterLayout = new Ext.BorderLayout('northContainer', {
            north: {
                autoScroll: false,
                initialSize: menuToolBarHeight
            },
            center: {    
                tabPosition: 'bottom',
                fitContainer: true                
            },
            south : {
                initialSize: gridBelowMapHeight,
                split:true,
                autoScroll: true,
                fitToFrame: true,
                collapsible: true,
                hidden: true             
            }
            });     

    layout.beginUpdate();
   
    layout.add('north', new Ext.ContentPanel('header'));
    layout.add('south', new Ext.ContentPanel('south', {title: 'South'}));
    layout.add('west', new Ext.ContentPanel('tocContainer', {title: 'Layers', autoScroll:false}));
    layout.add('west', new Ext.ContentPanel('resultsContainer', {title: 'Identify Results'}));
      
    // Map Toolbars (menu and toolbar) Panel
    cpMapToolbars = new Ext.ContentPanel('Map_Toolbars_Panel', {title: 'Map Toolbar', closable: false});
    innerCenterLayout.add('north', cpMapToolbars);

    // Map Panel (this panel controls the sizing behavior of the ESRI map control)
    // NOTE: "fitToFrame: true" is REQUIRED for the current map resizing logic to function correctly
    cpMap = new Ext.ContentPanel('Map_Panel', { title: ' Main Map', closable: false, fitToFrame: true }); 
    innerCenterLayout.add('center', cpMap);
    
    // Add grid panel and grid itself below the map
    // NOTE: this is no longer done on page load, but later when grid data is ready
    //   to be displayed
    // gridMainPanel = new Ext.GridPanel(gridMain, {title: 'Tabular Data'});
    // innerCenterLayout.add('south', gridMainPanel); //use grid panel instead of contentPanel

    // Add nested map/grid layout panel in layout 'center'
    layout.add('center', new Ext.NestedLayoutPanel(innerCenterLayout, {title: ' Map View', closable: false}));  
    // next lines are for second tab in center (map) panel, if desired
    //layout.add('center', new Ext.ContentPanel('Center_Tab2_Panel', {title: ' Additional Tab', closable: false}));    
    //layout.getRegion('center').showPanel(0); // show map panel
    
    //show the left-most tab by default
    layout.getRegion('west').showPanel(0);

    // hook up resize events   
    layout.on("regionresized", handleOuterLayoutResized);
    layout.on("regionexpanded", handleOuterLayoutResized);
    layout.on("regioncollapsed", handleOuterLayoutResized);

    // we must also attach this resize event to the inner layout or else the map
    // does not "fill in" in all cases when the lower panel is made smaller.
    innerCenterLayout.on("regionresized", handleInnerLayoutResized); 
    
    // attach the regionexpanded and regioncollapsed handlers here in 
    //  case expand/collapse is used programatically     
    innerCenterLayout.on("regionexpanded", handleInnerLayoutResized);
    innerCenterLayout.on("regioncollapsed", handleInnerLayoutResized);
    
    layout.endUpdate();    

}

function handleOuterLayoutResized()
{
    //alert('handleOuterLayoutResized');
    refreshMapWithDelay(500);
    fitToolbarsToPanelWithDelay(600)
}

function handleWindowResized() 
{
    // same action needed as when outer layout is resized
    handleOuterLayoutResized();
}

function handleInnerLayoutResized()
{
    // same action needed as when outer layout is resized
    handleOuterLayoutResized();
}

function fitToolbarsToPanelWithDelay(ms)
{
    // default to 500ms if delay not specified
    if (!ms) ms = 500;
    setTimeout("fitToolbarsToPanel()", ms);        
}

function fitToolbarsToPanel()
{
    // resize the menu and map-tool toolbars

    var mapPanel = $get("Map_Panel");
    if (mapPanel)
	{
        var menuBar = $get("menuBar");
        var toolBar = $get("navTools");
        //alert('width: ' + mapPanel.style.width);
        menuBar.style.width = mapPanel.style.width;
        toolBar.style.width = mapPanel.style.width;
    }
}

function refreshMapWithDelay(ms) 
{
    // default to 500ms if delay not specified
    if (!ms) ms = 500;
    setTimeout("refreshMap()", ms);
}

function refreshMap() 
{
    var map = $find('Map1');
    map.refresh();
}   
   
//********************************************
// Show Tab Method()
//********************************************
PageLayout.prototype.ShowSideTab = function(tabDivId)
{
    var sideTab = document.getElementById(tabDivId);
    if (!sideTab)
    { 
        displayMessageJS("Error", "ERROR:\n\nCannot show tab, invalid Tab Div ID" + "[" + tabDivId + "]");
        return;
    }
    if (sideTab.style.visibility != "visible"){
        layout.getRegion('west').showPanel(tabDivId);
    }
}

function setInitialMapContainerSize() 
{

    var width = document.body.clientWidth - leftPanelWidth;
    var height = document.body.clientHeight - headerHeight - menuToolBarHeight
            - gridBelowMapHeight - mapPanelTabHeight - statusBarHeight;

    var mapContainer = document.getElementById("Map_Panel");
    if (mapContainer) 
    {
        mapContainer.style.width = width + "px";
        mapContainer.style.height = height + "px";
    }

}