//Layout of the server app.

// PANEL SIZE SETTINGS - SET IF LAYOUT IS GOING TO BE CHANGED  !!!!!
var leftPanelWidth = 320;
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)
    cpMap = new Ext.ContentPanel('Map_Panel', {title: ' Main Map', closable: false});
    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", function() { ResizeMap(true); });
    layout.on("regionexpanded", function() { ResizeMap(true); });
    layout.on("regioncollapsed", function() { ResizeMap(true); });

    // 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", function() { ResizeMap(true); }); 
    
    // attach the regionexpanded and regioncollapsed handlers here in 
    //  case expand/collapse is used programatically     
    innerCenterLayout.on("regionexpanded", function() { ResizeMap(true); });
    innerCenterLayout.on("regioncollapsed", function() { ResizeMap(true); });
    
    layout.endUpdate();    

}

//********************************************
// 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);
    }
}

// resize map container with option to resize map control itself
function ResizeMap(getNewMap)
{   
  
    if (getNewMap == undefined)
    { 
        getNewMap = true; 
    }
    if (getNewMap)
    {
        // trigger the SizeMap function 1/2 second (500 milliseconds) after event fires to avoid 
        // creating lots of resize callbacks as window is resized
        setTimeout("SizeMap("+getNewMap+")", 500); 
    }
    else 
    {
        SizeMap(false);  
    }
}
    
// Resizes the map to its Parent Element On Start up.
// The Parent element is dynamically created by the yahoo ext UI.
function SizeMap(getNewMap)
{

    var newMapWidth = 0;
    var newMapHeight = 0;
    
    // GET WIDTH AND HEIGHT IF Layout is already created.
    if (layout)
    {
        var mapArea  =  innerCenterLayout.getRegion('center').getEl();
        if (mapArea)
        {
            newMapWidth = getEl(mapArea.id).offsetWidth;
            newMapHeight = getEl(mapArea.id).offsetHeight;
        }
    }
    // figure out the width and Height if the layout is NOT yet created (onload)
    else
    {
         newMapWidth = document.body.clientWidth - leftPanelWidth;
         newMapHeight = document.body.clientHeight - headerHeight - menuToolBarHeight 
            - gridBelowMapHeight - mapPanelTabHeight - statusBarHeight;
    }

    var mapSizeObj = new Object();
    mapSizeObj.height = newMapHeight;
    mapSizeObj.width =  newMapWidth;

    // resize the menu and map-tool toolbars
    var menuBar = document.getElementById('menuBar');
    var toolBar = document.getElementById('navTools');
    menuBar.style.width = mapSizeObj.width + "px";
    toolBar.style.width = mapSizeObj.width + "px";
  
    if (getNewMap)
    {
        map.resize(mapSizeObj.width,mapSizeObj.height);
    }

    return mapSizeObj; 
}