function pageLoad ()
{
    if (GBrowserIsCompatible()) 
    {
        _outageMap = new outageMap();
        
        _outageMap.initialize(document.getElementById("map"));
    }
}

//function disclaimerDecline()
//{
//    window.location = "http://www.clayelectric.com/";
//}

//function disclaimerAccept()
//{
//    if (GBrowserIsCompatible()) 
//    {
//        _outageMap = new outageMap();
//        
//        _outageMap.initialize(document.getElementById("map"));
//    }
//}

function outageMap ()
{   
    this.map;
    this.mapControl = null;
    this.dataControl = null;
    this.loadControl = null;
    this.disclaimerControl = null;

    this.polygons = new Array();
    this.grid = null;
    this.radar = null;
    this.overlay = new Array();
    this.overlaySelectedIndex = 0;
    this.dataPageSelectedIndex = 0;
    
    this.outageData = null;
    this.outageDataViewID = 0;
    
    this.requestOverlayFlag = 0;
    this.requestGridFlag    = 0;
    this.requestDataFlag    = 0;
    
    this.initialize = function (divMap)
    { 
        /* Initialize map. */
        this.map = new GMap2(divMap);
        this.map.setCenter(new GLatLng(29.656257,-82.032831), 9);
        //this.map.disableDragging();
        this.map.disableDoubleClickZoom();
        this.map.disableContinuousZoom();
        this.map.disableScrollWheelZoom();
        
        /* Add overlays. */
        /* Note: order matters, affects button order. */
        this.overlay.push(new mapOverlay('serviceArea', 'System-Wide', 10, 7));
        //this.overlay.push(new mapOverlay('district', 'District', 10, 6));
        this.overlay.push(new mapOverlay('county', 'County', 10, 5));
        //this.overlay.push(new mapOverlay('zip3', '3 Digit Zip', 10, 4));
        //this.overlay.push(new mapOverlay('zip5', '5 Digit Zip', 11, 2));
        
        /* Add controls. */
        this.mapControl = new mapControl (this);
        this.map.addControl(this.mapControl);
        
        this.dataControl = new dataControl (this);
        this.map.addControl(this.dataControl);
        
        this.loadControl = new loadControl (this);
        this.map.addControl(this.loadControl);
        
        /* Load default data. */
        this.mapControl.buttons.select (1);
    }
    
    this.overlayRequest = function (type)
    {            
        ClayElectricCooperative.OutageMap.Service.overlayRequest(type, this.serviceRequestSuccess, this.serviceRequestFailure);
    }
    
    this.displayOverlay = function (overlayIndex)
    {
        this.loadControl.show ();
        
        this.overlaySelectedIndex = overlayIndex;
        
        if (this.overlay[overlayIndex].data == null)
        {
            this.requestOverlayFlag = 1;
            
            if (this.grid == null)
            {
                this.refresh ();
            }         
            
            this.overlayRequest (this.overlay[overlayIndex].id);             
        }
        else if (this.requestOverlayFlag == 0 && this.requestGridFlag == 0 && this.requestDataFlag == 0)
        {
            for (var i = 0; i < this.polygons.length; i++)
            {
                GEvent.clearInstanceListeners(this.polygons[i][0]);
                this.map.removeOverlay(this.polygons[i][0]);
            }
            
            this.polygons = new Array();
            
            this.reset ();
            
            if (this.grid != null)
            {
                for (var i = 0; i < this.grid.length; i++)
                {
                    this.createPolygonGrid (i);
                }
            }
            
            var outageData = null;
            
            for (var i = 0; i < this.outageData.length; i++)
            {
                if (this.overlay[this.overlaySelectedIndex].typeID == this.outageData[i][0])
                {
                    outageData = this.outageData[i][1];
                }
            }
            
            var data;
            
            for (var i = 0; i < this.overlay[this.overlaySelectedIndex].data.length; i++)
            {
                data = null;
                
                for (var j = 0; j < outageData.length; j++)
                {
                    if (outageData[j][0] == this.overlay[this.overlaySelectedIndex].data[i][6])
                    {
                        data = outageData[j];
                    }
                }
                
                this.createPolygonOverlay (this.overlay[this.overlaySelectedIndex].data[i], data, this.overlay[this.overlaySelectedIndex].zoom);
            }
                        
            this.loadControl.hide ();
        }
    }
    
    this.zoom = function (x, y, zoom)
    {
        this.map.closeInfoWindow ();
        setTimeout("_outageMap.zoomAsync(" + x + ", " + y + ", " + zoom + ")",1);
    }
    
    this.zoomAsync = function (x, y, zoom)
    {        
        this.map.setZoom (zoom);
        this.map.panTo (new GLatLng (y,x));
        this.mapControl.reset.style.display = "block";
    }
    
    this.reset = function ()
    {
        this.map.closeInfoWindow ();
        this.mapControl.reset.style.display = "none";
        setTimeout("_outageMap.resetAsync()",1);
    }
    
    this.resetAsync = function ()
    {        
        this.map.setZoom(9);
        this.map.panTo(new GLatLng(29.656257,-82.032831));
    }
    
    this.outageDataRequest = function ()
    {       
        this.requestDataFlag = 1;
        ClayElectricCooperative.OutageMap.Service.outageDataRequest(this.serviceRequestSuccess, this.serviceRequestFailure);
    }
    
    this.refresh = function ()
    {
        this.requestGridFlag = 1;
        this.requestDataFlag = 1;
        
        this.overlayRequest ('grid');
        this.outageDataRequest ();
    }
    
    this.serviceRequestSuccess = function (result, userContext, methodName)
    {
        switch (methodName)
        {
            case 'overlayRequest':
                if (result[0] == 'grid')
                {
                    _outageMap.grid = result[2];
                    _outageMap.requestGridFlag = 0;
                    
                    if (this.requestOverlayFlag == 0 && this.requestDataFlag == 0)
                    {
                        _outageMap.displayOverlay (_outageMap.overlaySelectedIndex);
                    }
                }
                else
                {
                    _outageMap.overlay[_outageMap.overlaySelectedIndex].data = result[2];
                    _outageMap.overlay[_outageMap.overlaySelectedIndex].typeID = result[1];
                    _outageMap.requestOverlayFlag = 0;
                    
                    if (_outageMap.requestGridFlag == 0 && _outageMap.requestDataFlag == 0)
                    {
                        _outageMap.displayOverlay (_outageMap.overlaySelectedIndex);
                    }
                }
                break;
            case 'outageDataRequest':
                var slide = false;
                
                if (_outageMap.outageData == null)
                {
                    slide = true;
                }
                
                _outageMap.outageData = result;
                
                _outageMap.dataControl.newData ();
                
                _outageMap.requestDataFlag = 0;
                
                if (slide)
                {
                    setTimeout("_outageMap.dataControl.hide(1000)", 2400);
                }
                
                if (_outageMap.requestOverlayFlag == 0 && _outageMap.requestGridFlag == 0)
                {
                    _outageMap.displayOverlay (_outageMap.overlaySelectedIndex);
                }
                
                setTimeout("_outageMap.refresh ()", 300000);
                
                break;
            case 'outageDataRandom':
                alert(result + " outages were created.");
                _outageMap.refresh();
                break;
        }
    }
    
    this.serviceRequestFailure = function (error, userContext, methodName) 
    {
        if(error !== null) 
        {
            alert ("ERROR:\n\n" + error + "\n\n" + userContext + "\n\n" + methodName);
        }
        
        _outageMap.loadControl.hide ();
    }
    
    this.createPolygonGrid = function (i)
    {
        for (var j = 0; j < this.outageData[0][1].length; j++)
        {
            if (this.grid[i][3] == this.outageData[0][1][j][0])
            {
                var poly = gPolygon = new GPolygon.fromEncoded({polylines: [{color: "#000000",
                                                                  weight: 1,
                                                                  opacity: 1,
                                                                  points: this.grid[i][0],
                                                                  levels: this.grid[i][1],
                                                                  zoomFactor: 2, 
                                                                  numLevels: 18
                                                                }],
                                                                fill: true,
                                                                color: "#" + this.outageData[0][1][j][4],
                                                                opacity: 0.7, 
                                                                outline: true});
                             
                var _parent     = this;               
                var _percentOut = this.outageData[0][1][j][2];
                var _numberOut  = this.outageData[0][1][j][1];
                var _total      = this.outageData[0][1][j][3];
                var _color      = this.outageData[0][1][j][4];
                                                                
                var polyEvent = GEvent.addListener (gPolygon, "click", function (point)
                {
                    this.parent         = _parent;
                    this.percentOut     = _percentOut;
                    this.numberOut      = _numberOut;
                    this.total          = _total;
                    this.outageColor    = _color;
                    
                    var div = document.createElement ("div");
                    var table = document.createElement ("table");
                    var row;
                    var cell;
                    
                    table.cellpadding = 5;
                    table.cellspacing = 5;
                    table.border = 0;
                    row = table.insertRow (-1);
                    cell = row.insertCell (-1);
                    cell.width = 70;
                    cell.align = "left";
                    this.parent.styleSwatch (div, this.outageColor);
                    cell.appendChild (div);
                    cell = row.insertCell (-1);
                    cell.align = "center";
                    cell.valign = "middle";
                    
                    if (this.percentOut == 0) { this.percentOut = "&lt; 1"; }
                    
                    cell.innerHTML = "<b>" + this.numberOut + " out of " + this.total + " members<br>without power.</b>";
                    
                    div = document.createElement ("div");
                    div.appendChild (table);
                    
                    this.parent.map.openInfoWindowHtml (point, div.innerHTML);
                });
                
                this.polygons.push(new Array (poly, polyEvent));
                                                   
                this.map.addOverlay(gPolygon);
            }
        }
    }
    
    this.createPolygonOverlay = function (data, outageData, zoom)
    {
        var poly = gPolygon = new GPolygon.fromEncoded({polylines: [{color: "#0000FF",
                                                          weight: 2,
                                                          opacity: 0.8,
                                                          points: data[0],
                                                          levels: data[1],
                                                          zoomFactor: 2, 
                                                          numLevels: 18
                                                        }],
                                                        fill: false,
                                                        color: "#000000",
                                                        opacity: 0.0, 
                                                        outline: true});
              
        var _parent     = this;    
        if (outageData == null)
        {           
            var _percentOut = null;
            var _numberOut  = null;
            var _total      = null;
        }
        else
        {
            var _percentOut = outageData[2];
            var _numberOut  = outageData[1];
            var _total      = outageData[3];
        }
        var _name       = data[2];
        var _centerX    = data[3];
        var _centerY    = data[4];
        var _zoom       = zoom;
                                                        
        var polyEvent = GEvent.addListener (gPolygon, "click", function (point)
        {
            this.parent     = _parent;
            this.percentOut = _percentOut;
            this.numberOut  = _numberOut;
            this.total      = _total;
            this.name       = _name;
            this.centerX    = _centerX;
            this.centerY    = _centerY;
            this.zoom       = _zoom;            
            
            var div = document.createElement ("div");
            var divZoom = document.createElement ("div");
            var table = document.createElement ("table");
            var row;
            var cell;
            
            table.cellpadding = 5;
            table.cellspacing = 5;
            table.border = 0;
            row = table.insertRow (-1);
            cell = row.insertCell (-1);
            cell.align = "center";
            cell.innerHTML = "<font size=\"+1\">" + this.name + "</font>";
                
            if (this.percentOut == null)
            {
                row = table.insertRow (-1);
                cell = row.insertCell (-1);
                cell.align = "center";
                cell.innerHTML = "<strong>There are currently no<br>reported outages in<br>this area.</strong>";                
            }
            else
            {
                if (this.percentOut == 0)
                {
                    this.percentOut = "&lt; 1"
                }
                
                row = table.insertRow (-1);
                cell = row.insertCell (-1);
                cell.align = "center";
                cell.innerHTML = "<strong>" + this.numberOut + " out of " + this.total +  " members<br>without power.<br><br>" + this.percentOut + "% of members are affected.<br></strong>";
            }
            
            row = table.insertRow (-1);
            cell = row.insertCell (-1);
            cell.align = "center";
            
            divZoom.style.color             = "#FFFFFF";
            divZoom.style.backgroundColor   = "#0F2B8E";
            divZoom.style.font              = "11px Arial";
            divZoom.style.border            = "1px solid black";
            divZoom.style.padding           = "2px";
            divZoom.style.marginBottom      = "3px";
            divZoom.style.textAlign         = "center";
            divZoom.style.textTransform     = "uppercase";
            divZoom.style.width             = "75px";
            divZoom.innerHTML               = "Zoom In";
            divZoom.setAttribute("onclick", "_outageMap.zoom (" + this.centerX + ", " + this.centerY + ", " + this.zoom + ");");
                        
            cell.appendChild (divZoom);
                
            div.appendChild (table);      
                  
            this.parent.map.openInfoWindowHtml(point, div.innerHTML);
        });
                
        this.polygons.push(new Array (poly, polyEvent));
                                      
        this.map.addOverlay(gPolygon);
    }
    
    this.styleSwatch = function (div, color)
    {
        div.style.color             = "#000000";
        div.style.backgroundColor   = "#" + color;
        div.style.border            = "1px solid black";
        div.style.width             = "50px";
        div.style.height            = "50px";
    }
}

/****************************************************************************
*   Map Overlay:                                                            *
*                                                                           *
*                                                                           *
*                                                                           *
*                                                                           *
*****************************************************************************/

function mapOverlay (id, name, zoom, typeID)
{
    this.id             = id;
    this.typeID         = typeID;
    this.data           = null; 
    this.dataOutage     = null;
    this.name           = name;
    this.zoom           = zoom;
    this.controlButton  = null;
    this.dataButton     = null;
    this.dataPage       = null;
}

/****************************************************************************
*   Map Control: This is the control bar to the right of the map and        *
*                contains the CEC logo, overlay controls, zomm reset and    *
*                map outage key.                                            *
*                                                                           *
*                                                                           *
*****************************************************************************/

mapControl.prototype = new GControl();

function mapControl(parent)
{
    this.parent     = parent
    this.container  = null;
    this.logo       = null;
    this.buttons    = null;
    this.key        = null;
    this.reset      = null;
    
    this.initialize = function () 
    {
        var logoImage;
    
        this.container = document.createElement ("div");
        
        this.logo = document.createElement ("div");
        this.style (this.logo);
        logoImage = document.createElement("img");
        logoImage.src = "images/cCEC.gif";
        logoImage.width = "75";
        logoImage.height = "35";       
        
        logoImage.onclick = function ()
        {
            if (_outageMap.radar == null)
            {
                var boundaries = new GLatLngBounds(new GLatLng(28.184148108742,-84.2022046314586), new GLatLng(32.7755024788596,-79.193454409513));
                _outageMap.radar = new GGroundOverlay("http://radar.weather.gov/ridge/RadarImg/N0Z/JAX_N0Z_0.gif", boundaries);
                _outageMap.map.addOverlay(_outageMap.radar);
            }
            else
            {  
                _outageMap.map.removeOverlay(_outageMap.radar);
                _outageMap.radar = null;
            }
        }
        
        this.logo.appendChild (logoImage);
        this.container.appendChild (this.logo);
        
        this.buttons = new mapControlButtons (this);
        
        for (var i = 0; i < this.parent.overlay.length; i++)
        {
            this.buttons.add (this.parent.overlay[i], i);
        }
        
        this.key = document.createElement ("div");
        this.style (this.key);
        this.key.appendChild (this.createKeyTable ());
        this.container.appendChild (this.key);
        
        this.reset = document.createElement ("div");
        this.styleReset (this.reset);
        this.reset.innerHTML = "Reset";
        this.reset.onclick = function ()
        {
           _outageMap.reset ();
        };
        this.container.appendChild (this.reset);
        
        parent.map.getContainer().appendChild(this.container);
        
        return this.container;
    }
    
    function mapControlButtons (parent)
    {
        this.parent     = parent;
        this.buttons    = new Array();
        
        this.add = function (overlay, overlayIndex)
        {
            overlay.controlButton = document.createElement("div")
            
            overlay.controlButton.innerHTML = overlay.name;
                    
            this.style (overlay.controlButton);
            
            var _overlayIndex   = overlayIndex
            
            overlay.controlButton.onclick = function ()
            {             
                this.overlayIndex   = _overlayIndex;
                
                _outageMap.mapControl.buttons.select (overlayIndex);
            }
            
            this.parent.container.appendChild(overlay.controlButton);
        }
        
        this.select = function (overlayIndex)
        {
            _outageMap.displayOverlay(overlayIndex);
                
            _outageMap.dataControl.select (overlayIndex);
            
            for (var i = 0; i < _outageMap.overlay.length; i++)
            {
                if (i == overlayIndex)
                {
                    this.styleSelected (_outageMap.overlay[i].controlButton);
                }
                else
                {
                    this.style (_outageMap.overlay[i].controlButton);
                }
            }
        }
        
        this.style = function (div)
        {
            div.style.cursor            = "pointer";
            parent.style (div);
        }
        
        this.styleSelected = function (div)
        {
            div.style.color             = "#FFFFFF";
            div.style.backgroundColor   = "#0F2B8E";
        }
    }
    
    this.createKeyTable = function ()
    {
        var tableKey    = document.createElement("table");
        var table       = document.createElement("table");
        var row;
        var cell;
        var div;
        var row2;
        var cell2;
        
        table.style.cursor = "default";
        table.cellPadding = "0";
        table.cellSpacing = "4";
        
        row = tableKey.insertRow (-1);
        cell = row.insertCell (-1);
        
        cell.innerHTML = "<b>Members</b>";
        
        row = tableKey.insertRow (-1);
        cell = row.insertCell (-1);
        
        table = this.createKeyTableRow ('#CC0000', '1001', '&lt;', '', table);
        table = this.createKeyTableRow ('#FF9900', '301', '-', '1000', table);
        table = this.createKeyTableRow ('#FFCC00', '101', '-', '300', table);
        table = this.createKeyTableRow ('#FFFF00', '31', '-', '100', table);
        table = this.createKeyTableRow ('#99CC00', '11', '-', '30', table);
        table = this.createKeyTableRow ('#009933', '4', '-', '10', table);
        table = this.createKeyTableRow ('#3366CC', '1', '-', '3', table);
        
        row2 = table.insertRow (-1);
       
        cell2 = row2.insertCell (-1);
        cell2.style.font = "8px Arial";
        cell2.colSpan = 4;
        cell2.align = "center";
        cell2.innerHTML = "<hr align=\"center\" size=\"1\" width=\"80%\" />";
        
        row2 = table.insertRow (-1);
        
        cell2 = row2.insertCell (-1);
        div = document.createElement("div");
        this.styleKeySwatch(div, "");
       
        cell2.appendChild(div);
       
        cell2 = row2.insertCell (-1);
        cell2.style.font = "8px Arial";
        cell2.colSpan = 3;
        cell.align = "center";
        cell2.innerHTML = "approx. 4 sq miles";
        
        cell.appendChild (table);
        
        return tableKey;
    }
    
    this.createKeyTableRow = function (color, max, symbol, min, table)
    {
        var row;
        var cell;
        var div;
        
        row = table.insertRow (-1);
        
        cell = row.insertCell (-1);
        div = document.createElement("div");
        this.styleKeySwatch(div, color);
        //div.ondblclick = function ()
        //{
        //    alert ("Creating random outages...\n\nPress OK to continue.");
        //    setTimeout("ClayElectricCooperative.OutageMap.Service.outageDataRandom(_outageMap.serviceRequestSuccess, _outageMap.serviceRequestFailure)",1); 
        //}
        cell.appendChild(div);
       
        cell = row.insertCell (-1);
        cell.style.font = "8px Arial";
        cell.innerHTML = max;
        
        cell = row.insertCell (-1);
        cell.style.font = "8px Arial";
        cell.innerHTML = symbol;
        
        cell = row.insertCell (-1);
        cell.style.font = "8px Arial";
        cell.innerHTML = min;
        
        return table;
    }

    this.getDefaultPosition = function() 
    {
        return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(4, 4));
    }

    this.style = function (div)
    {
        div.style.color             = "#000000";
        div.style.backgroundColor   = "#f8f0cb";
        div.style.font              = "11px Arial";
        div.style.border            = "1px solid black";
        div.style.padding           = "2px";
        div.style.marginBottom      = "3px";
        div.style.textAlign         = "center";
        div.style.textTransform     = "uppercase";
        div.style.width             = "75px";
    }
    
    this.styleKeySwatch = function (div, color)
    {
        div.style.color             = "#000000";
        div.style.backgroundColor   = color;
        div.style.border            = "1px solid black";
        div.style.width             = "10px";
        div.style.height            = "10px";
    }
    
    this.styleReset = function (div)
    {
        this.style (div)
        div.style.cursor = "pointer";
        div.style.color = "#FFFFFF";
        div.style.backgroundColor = "#0F9111";
        div.style.display = "none";
    }
}

/****************************************************************************
*   Load Control: This is the control that appears in the center of the     *
*                 map when a request is being made to the web service.      *
*                                                                           *
*                                                                           *
*                                                                           *
*****************************************************************************/   

loadControl.prototype = new GControl();

function loadControl (parent)
{
    this.parent     = parent
    this.container  = null;
    
    this.initialize = function () 
    {
        var table = document.createElement ("table");
        var row;
        var cell;
        var image = document.createElement ("img");
        
        this.container = document.createElement ("div");
        
        this.styleContainer (this.container);
        
        table.cellspacing = 0;
        table.cellpadding = 0;
        table.border = 0;
        
        row = table.insertRow (-1);
        cell = row.insertCell (-1);
        cell.align = "center";
        cell.valign = "middle";
        cell.height = 25;
        cell.innerHTML = "<b>Requesting data...<b>";
        
        row = table.insertRow (-1);
        cell = row.insertCell (-1);
        cell.align = "center";
        cell.valign = "middle";
        cell.appendChild (image);
        image.src = "images/progressBar.gif";
        
        this.container.appendChild (table);        
        
        parent.map.getContainer().appendChild(this.container);
        
        return this.container;
    }
    
    this.show = function ()
    {
        this.container.style.display = "block";
    }
    
    this.hide = function ()
    {
        this.container.style.display = "none";
    }
    
    this.getDefaultPosition = function() 
    {
        return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(300, 225));
    }

    this.style = function (div)
    {
        div.style.color             = "#000000";
        div.style.backgroundColor   = "#f8f0cb";
        div.style.font              = "11px Arial";
        div.style.border            = "1px solid black";
        div.style.padding           = "2px";
        div.style.marginBottom      = "3px";
        div.style.textTransform     = "uppercase";
    }
    
    this.styleContainer = function (div)
    {
        this.style (div);
        
        div.style.textAlign         = "center";
        div.style.width             = "200px";
        div.style.height            = "50px";
        div.style.display           = "none";
    }
}

/****************************************************************************
*   Data Control: This is the control bar at the bottom of the map and      *
*                 contains the current outage data.                         *
*                                                                           *
*                                                                           *
*                                                                           *
*****************************************************************************/

dataControl.prototype = new GControl();

function dataControl(parent)
{
    this.parent     = parent
    this.container  = null;
    this.buttons    = null;
    this.slide      = null;
    this.show       = null;    
    this.hide       = null;
    this.pageHolder = null;
    this.state      = 1;
    
    this.initialize = function () 
    {
        var button;
        
        this.container = document.createElement ("div");
        
        this.styleContainer (this.container); 
        
        for (var i = 0; i < this.parent.overlay.length; i++)
        {
            this.createPage (i);            
            
            button = this.parent.overlay[i].dataButton
            
            button.style.position = "absolute";
            button.style.left = (i * 90 + 5) + "px";
            button.style.bottom = "172px";
            button.style.zIndex = "6";
            this.container.appendChild(button);
        }
        
        this.slide = document.createElement ("div");        
        this.styleButton (this.slide, false);        
        this.slide.innerHTML = "hide";
        this.slide.style.position = "absolute";
        this.slide.style.right = "5px";
        this.slide.style.bottom = "172px";
        this.slide.style.zIndex = "6";
        this.container.appendChild(this.slide);
        
        var _parent = this;
        
        this.slide.onclick = function ()
        {
            this.parent = _parent;
            this.parent.hide (100);      
        }
       
        var div = document.createElement ("div");         
        
        this.pageHolder = div;
        
        this.pageHolder.style.position  = "absolute";
        this.pageHolder.style.left      = "5px";
        this.pageHolder.style.bottom    = "5px";
        this.pageHolder.style.width     = "724px";
        this.pageHolder.style.height    = "162px";
        this.pageHolder.style.zIndex    = "5";
        this.pageHolder.style.cursor    = "defualt";
        this.pageHolder.style.border    = "none";
        this.pageHolder.style.overflow  = "auto";
        
        this.container.appendChild(div);
        
        this.parent.map.getContainer().appendChild(this.container);
        
        return this.container;
    }
    
    this.select = function (index)
    {
        this.parent.dataPageSelectedIndex = index;
        
        this.pageHolder.innerHTML = "";
        
        for (var i = 0; i < _outageMap.overlay.length; i++)
        {
            if (i == index)
            {
                this.styleButton (this.parent.overlay[i].dataButton, true);
            }
            else
            {
                this.styleButton (this.parent.overlay[i].dataButton, false);
            }
        }
        
        if (this.state == 1)
        {
            this.pageHolder.innerHTML = this.parent.overlay[index].dataPage.innerHTML;
        }
    }
    
    this.show = function (speed)
    {
        dataControlSlide (200, speed);
        
        this.slide.style.display = "none"; 
        
        var _parent = this;
        this.slide.onclick = function ()
        {
            this.parent = _parent;
            this.parent.hide (100);      
        }
        
        this.state = 1;
    }
    
    this.showContent = function ()
    {
        for (var i = 0; i < this.parent.overlay.length; i++)
        {
            this.parent.overlay[i].dataButton.style.display = "block";
        }
        
        this.slide.innerHTML = "hide";     
        this.slide.style.right = "5px";
        this.slide.style.bottom = "172px";
        this.slide.style.display = "block"; 
        
        this.pageHolder.innerHTML = this.parent.overlay[this.parent.dataPageSelectedIndex].dataPage.innerHTML;
    }
    
    this.hide = function (speed)
    {
        dataControlSlide (26, speed);
        
        this.slide.style.display = "none";
        
        var _parent = this;
        this.slide.onclick = function ()
        {
            this.parent = _parent;
            this.parent.show (100);
        }
        
        for (var i = 0; i < this.parent.overlay.length; i++)
        {
            this.parent.overlay[i].dataButton.style.display = "none";
        }
        
        this.pageHolder.innerHTML = "";
        
        this.state = 0;
    }
    
    this.hideContent = function ()
    {       
        this.slide.style.right = "5px";
        this.slide.style.bottom = "0px";     
        this.slide.innerHTML = "show";
        this.slide.style.display = "block";
    }
    
    this.createPage = function (index)
    {
        var div;
        
        div = document.createElement ("div");
        
        this.styleButton (div, false);
        
        div.innerHTML = this.parent.overlay[index].name;
        
        var _index   = index;
        var _parent  = this;
        
        div.onclick = function ()
        {
            this.parent  = _parent;
            this.index   = index;
            
            this.parent.select (this.index);            
        }
        
        this.parent.overlay[index].dataButton = div;
        
        div = document.createElement ("div");
        
        this.stylePage (div);
        
        div.innerHTML = "<br><b>Loading outage data...</b>";
        
        this.parent.overlay[index].dataPage = div;
    }
    
    this.newData = function ()
    {
        var page;
        var table;
        var row;
        var cell;
        
        for (var i = 0; i < this.parent.overlay.length; i++)
        {
            for (var j = 0; j < this.parent.outageData.length; j++)
            {
                if (this.parent.overlay[i].typeID == this.parent.outageData[j][0])
                {
                    page = this.parent.overlay[i].dataPage;
                    
                    if (this.parent.outageData[i][1].length < 1)
                    {
                        page.innerHTML = "<br><center><b>There are currently no outages.</b></center>";
                    }
                    else
                    {
                        table = document.createElement ("table");
                        row = table.insertRow (-1);
                        cell = row.insertCell (-1);
                        if (this.parent.overlay[i].typeID == 7)
                        {
                            cell.innerHTML = "";
                        }
                        else
                        {
                            cell.innerHTML = "<b>" + this.parent.overlay[i].name + "</b>";
                        }                
                        cell.width = 150;
                        cell.align = "left";
                        cell = row.insertCell (-1);
                        cell.align = "center";
                        cell.innerHTML = "<b>Total number<br>of members</b>";
                        cell.width = 175;
                        cell = row.insertCell (-1);
                        cell.align = "center";
                        cell.innerHTML = "<b>Number of members<br>without power</b>";
                        cell.width = 175;
                        cell = row.insertCell (-1);
                        cell.align = "center";
                        cell.innerHTML = "<b>Percent of<br>members affected</b>";
                        cell.width = 175;
                        
                        for (var k = 0; k < this.parent.outageData[j][1].length; k++)
                        {
                            row = table.insertRow (-1);
                            cell = row.insertCell (-1);
                            cell.align = "left";
                            cell.innerHTML = this.parent.outageData[j][1][k][4];
                            cell = row.insertCell (-1);
                            cell.align = "center";
                            cell.innerHTML = this.parent.outageData[j][1][k][3];
                            cell = row.insertCell (-1);
                            cell.align = "center";
                            cell.innerHTML = this.parent.outageData[j][1][k][1];
                            cell = row.insertCell (-1);
                            cell.align = "center";
                            if (cell.innerHTML = this.parent.outageData[j][1][k][2] == 0)
                            {
                                cell.innerHTML = "&lt; 1 %";
                            }
                            else
                            {
                                cell.innerHTML = this.parent.outageData[j][1][k][2] + " %";
                            }
                        }
                        
                        page.innerHTML = "";
                        
                        page.appendChild (table);
                    }
                }
            }      
        }
        
        if (this.state == 1)
        {
            this.pageHolder.innerHTML = this.parent.overlay[this.parent.dataPageSelectedIndex].dataPage.innerHTML;
        }
    }
    
    this.getDefaultPosition = function() 
    {
        return new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(4, 1));
    }

    this.style = function (div)
    {
        div.style.color             = "#000000";
        div.style.backgroundColor   = "#f8f0cb";
        div.style.font              = "11px Arial";
        div.style.border            = "1px solid black";
        div.style.padding           = "2px";
        div.style.marginBottom      = "3px";
        div.style.textTransform     = "uppercase";
    }
    
    this.styleContainer = function (div)
    {
        this.style (div);
        
        div.style.textAlign         = "center";
        div.style.width             = "730px";
        div.style.height            = "200px";        
        div.style.padding           = "0px";        
        div.style.marginBottom      = "0px";
    }
    
    this.stylePage = function (div)
    {   
        div.style.width     = "722px";
        div.style.height    = "165px";
        div.style.cursor    = "defualt";
        div.style.border    = "none";
        div.style.overflow  = "auto";
    }
    
    this.styleButton = function (div, selected)
    {
        this.style (div);
        
        if (selected)
        {
            div.style.backgroundColor = "#0F9111";
        }
        else
        {
            div.style.backgroundColor = "#0F2B8E";
        }
        
        div.style.textAlign         = "center";
        div.style.border            = "1px solid black";
        div.style.width             = "75px";
        div.style.color             = "#FFFFFF";
        div.style.cursor            = "pointer";
    }
}

function dataControlSlide(end, millisec) 
{
	var speed = Math.round(millisec / 100);
	var timer = 0;
	var object = _outageMap.dataControl.container;
	var height = object.offsetHeight - 6;
	
    if(height > end) 
	{
		for(i = height; i >= end; i--) 
		{
			setTimeout("dataControlHeight(" + i + ")",(timer * speed));
			timer++;
		}
		setTimeout("_outageMap.dataControl.hideContent()",(timer * speed));
	} 
	else if(height < end) 
	{
		for(i = height; i <= end; i++)
		{
			setTimeout("dataControlHeight(" + i + ")",(timer * speed));
			timer++;
		}
		setTimeout("_outageMap.dataControl.showContent()",(timer * speed));
	}
}

function dataControlHeight(height) 
{
	var object = _outageMap.dataControl.container.style;
	object.height = height + "px";
}