/* The Callout overlay is a map layer that shows areas of responsibility
   for each Cal Trans maintenance crew.  A marker in each region can
   be clicked to bring up an infoWindow showing the phone number for 
   the crew supervisor that can be used to "call the out" to an incident. 
    @author jdalbey 11/30/2019
*/
  
// the list of polygons to draw on the google map
var polygonList = [];
// a list of markers that provide a clickable label for the region
var markerList = []; 
 
// a list of infoWindows, one for each region
var infowindows = [];
// a list of crew contact info, one for each region
// each item contains supervisor name, region number, phone number
var crewcontact = {};

// Initialize the layer by showing a control button and drawing polygons
function initCalloutbutton()
{
    var calloutBtnDiv = document.getElementById('calloutButton');
    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(calloutBtnDiv)
    calloutBtnDiv.title = 'Click to toggle Callout Overlay';

    // Setup the click event listeners to toggle icon display
    calloutBtnDiv.addEventListener('click', function()
    {
        callout_showing = !callout_showing;
        // Determine which button image to show
        if (callout_showing)
        {
            pic = "images/btnDepressed_Callout.png"
            // It's nice when icons become visible that the messages have been refreshed.
            showCalloutLayer();
        }
        else
        {
            pic = "images/btnReady_Callout.png"
            hideCalloutLayer();
        }
        document.getElementById('calloutBtnImg').src = pic;

    });

    // Load the crew contact info from an external file
    loadJSON("data_layers/crewcontact.json", function(response)
    {
        // Parse JSON string into object
        contactjson = JSON.parse(response);
        // Add each contact to a lookup dictionary 
        for (var i = 0; i < contactjson.length; i++)
        {
            var item = contactjson[i];
            crewcontact[item.Region] = item;
        }
        // Go create the polygons (after JSON finishes loading)
        initPolygons();
    });

}
// Show the layer (the polygons and markers)
function showCalloutLayer()
{
    // Iterate over the polygons, showing each one and its marker
    for (var i = 0; i < polygonList.length; i++) 
    {
        polygonList[i].setMap(map);
        markerList[i].setVisible(true);
    }
}
// Hide the layer
function hideCalloutLayer()
{
    // Iterate over the polygons, hiding each one and its marker
    for (var i = 0; i < polygonList.length; i++) 
    {
        polygonList[i].setMap(null);
        markerList[i].setVisible(false);
        // force close any remaining open info windows.
        infowindows[i].close();
    }
}

// Create a list of polygons and markers, one for each region
function initPolygons()
{
    // Define the LatLng coordinates for each polygon's path.
    // The variable names indicate the region number.
    var shape11 =
    [ {lng: -117.975311279296889, lat: 33.861008021639982}, 
    {lng: -117.952651977539077, lat: 33.847892766494965}, 
    {lng: -117.919006347656264, lat: 33.825364042768278}, 
    {lng: -117.89737701416017,  lat:33.806252750539684 },
    {lng: -117.88089752197267,  lat:33.790846512234154 },
    {lng: -117.863113397033885, lat: 33.775094261456935}, 
    {lng: -117.863388061523452, lat: 33.775152122972564}, 
    {lng: -117.841072082519545, lat: 33.750606041606453}, 
    {lng: -117.786998748779311, lat: 33.75988300332898 },
    {lng: -117.791461944580092, lat: 33.854379367213504},
    {lng: -117.814357280731215, lat: 33.891097778879868},
    {lng: -117.856521606445327, lat: 33.890937470812517}, 
    {lng: -117.883301550216871, lat: 33.910970083273227},
    {lng: -117.930404646322145, lat: 33.882270965115168}, 
    {lng: -117.974766882184127, lat: 33.860836964317699}
    ];
    var shape10 =
    [{lng: -117.747207654174431, lat: 33.920536243811434}, 
    {lng: -117.679229748900994, lat: 33.877221436507959}, 
    {lng: -117.615028393920525, lat: 33.805076310194131}, 
    {lng: -117.614822387695327, lat: 33.804826363491607},   
    {lng: -117.786955833435073, lat: 33.759847324630051},       
    {lng: -117.791461944580092, lat: 33.854379367213504},
    {lng: -117.814357280731215, lat: 33.891097778879868},
    {lng: -117.764339447021499, lat: 33.891222462723938}
    ];
    var shape12 =
    [{lng: -117.764339447021499, lat: 33.891222462723938}, 
    {lng: -117.856521606445327, lat: 33.890937470812517}, 
    {lng: -117.883301550216871, lat: 33.910970083273227},
    {lng: -117.930404646322145, lat: 33.882270965115168}, 
    {lng: -117.974766882184127, lat: 33.860836964317699}, 
    {lng: -118.008272570572444, lat: 33.878396884046268}, 
    {lng: -117.978057840373381, lat: 33.905120101626196}, 
    {lng: -117.976684549357756, lat: 33.946142303526379},     
    {lng: -117.785797098185881, lat: 33.948420735432244}, 
    {lng: -117.746932979207486, lat: 33.921139882742345}, 
    {lng: -117.761764526367202, lat: 33.894072329464144},
    ];	
    var shape20 =
    [{lng: -118.093414306640639, lat: 33.759454857961813}, 
     {lng: -118.117721563903629, lat: 33.742268427950371},
     {lng: -118.090530376648559, lat: 33.732750775701277}, 
     {lng: -118.042465191101655, lat: 33.689912112406454}, 
	 {lng: -118.021865836344674, lat: 33.670982564442461}, 
     {lng: -117.998451220337316, lat: 33.650978512026882}, 
	 {lng: -117.938095073914184, lat: 33.621039930103279 }, 
     {lng: -117.934249886311591, lat: 33.619021253954152}, 
     {lng: -117.929580684285639, lat: 33.623997562730807},
     {lng: -117.93033599853517, lat: 33.623482118738629}, 
     {lng: -117.989730834960952, lat: 33.730907010627263}, 
     {lat: 33.7580276912933, lng: -118.0422592163086}
    ];
    var shape21 =
    [{lng: -117.840900421142578, lat: 33.750606041606453}, 
    {lng: -117.839355468750014, lat: 33.727052323290899}, 
    {lng: -117.90836334228517, lat: 33.690067083222011}, 
    {lng: -117.914886474609375, lat: 33.658067007354418}, 
    {lng: -117.93033599853517, lat: 33.623482118738629}, 
    {lng: -117.989730834960952, lat: 33.730907010627263},    
    {lng: -118.042259216308594, lat: 33.7580276912933}, 
    {lng: -118.093414306640639, lat: 33.759454857961813}, 
    {lng: -118.096504211425795, lat: 33.782286292810255}, 
    {lng: -118.075389862060561, lat: 33.810103876801179}, 
    {lng: -118.028697967529311, lat: 33.809818614133711}, 
    {lng: -118.029041290283217, lat: 33.792273132272697}, 
    {lng: -118.011016845703139, lat: 33.792415792969067}, 
    {lng: -118.011016845703139, lat: 33.776150942519855}, 
    {lng: -117.921066284179702, lat: 33.775294812192321}, 
    {lng: -117.920894622802749, lat: 33.78114486556651}, 
    {lng: -117.869567871093764, lat: 33.780716826428275}
    ];
    var shape22 = 
    [
    {lng: -118.075561523437514, lat: 33.810175192319427}, 
    {lng: -118.028697967529311, lat: 33.809818614133711}, 
    {lng: -118.029041290283217, lat: 33.792273132272697}, 
    {lng: -118.011016845703139, lat: 33.792415792969067}, 
    {lng: -118.011016845703139, lat: 33.776150942519855}, 
    {lng: -117.921066284179702, lat: 33.775294812192321}, 
    {lng: -117.920894622802749, lat: 33.78114486556651}, 
    {lng: -117.869567871093764, lat: 33.780716826428275},
    {lng: -117.919006347656264, lat: 33.825364042768278},
    {lng: -117.974766882184127, lat: 33.860836964317699},
    {lng: -118.008132936665788, lat: 33.878581810221512},
    {lng: -118.071647646138445, lat: 33.81556612720675 }    
    ];
    var shape32 =
    [{lng: -117.896862030029311,  lat: 33.696065771651526}, 
    {lng:  -117.754074130207314, lat: 33.669902002904237}, 
    {lng:  -117.612934112548842, lat: 33.565857458017128}, 
    {lng:  -117.413120269775405, lat: 33.6593529542764 },
    {lng: -117.614822387695327, lat: 33.804826363491607},  
    {lng: -117.786955833435073, lat: 33.759847324630051},
    {lng: -117.840900421142578, lat: 33.750606041606453},
    {lng: -117.839355468750014, lat: 33.727052323290899}
    ];
    var shape31=
    [{ lat: 33.565857458017128, lng:-117.612891197204604},
    {lng:  -117.754074130207314, lat: 33.669902002904237},
    {lng: -117.896862030029311,  lat: 33.696065771651526}, 
    {lng: -117.90836334228517, lat: 33.690067083222011},
    {lng: -117.914886474609375, lat: 33.658067007354418}, 
    {lng: -117.93033599853517, lat: 33.623482118738629}, 
    {lng: -117.934455871582045, lat: 33.619479664847653},
	{lat: 33.607757123330948,  lng:-117.93067932128907}, 
	{lat: 33.604039887039541, lng:-117.913169860839858}, 
	{lat: 33.593173200549977, lng:-117.876434326171889}, 
	{lat: 33.592887216626245, lng:-117.760391235351577 }, 
	{lat: 33.543683878655926, lng:-117.673873901367202 }
    ];
    var shape30 = 
    [   { lat: 33.54325465646098, lng: -117.6735305786133 },
        { lat: 33.591528780040434, lng: -117.75961875915529 },
        { lat: 33.592887216626245, lng: -117.87643432617189 },
        { lat: 33.56642960408059, lng: -117.83231735229494 },
        { lat: 33.55055114384406, lng: -117.80845642089844 },
        { lat: 33.54096543541857, lng: -117.78442382812501 },
        { lat: 33.51363317754275, lng: -117.76021957397462 },
        { lat: 33.50690611436667, lng: -117.75112152099611 },
        { lat: 33.499033355121824, lng: -117.7459716796875 },
        { lat: 33.49216199827286, lng: -117.73773193359376 },
        { lat: 33.47269019266666, lng: -117.71713256835939 },
        { lat: 33.462379817843576, lng: -117.71163940429689 }, 
        { lat: 33.46008845688024, lng: -117.67868041992189 },
        { lat: 33.430008731182994, lng: -117.63336181640626 },
        { lat: 33.38959955347486, lng: -117.59696960449219 },
        { lat: 33.4520682165952, lng: -117.57843017578126 },
        { lat: 33.4520682165952, lng: -117.54890441894533 },
        { lat: 33.470971882039215, lng: -117.5090789794922 },
        { lat: 33.53681606773302, lng: -117.50976562500001 },
        { lat: 33.6593529542764, lng: -117.41294860839845 },
        { lat: 33.54325465646098, lng: -117.6735305786133 }
    ];

    // An array of records that describe the attributes for each shape.
    // polygon: the list of coordinates defining the shape
    // id: the identifier for the shape (the crew number)
    // color: color code to use for coloring the displayed polygon
    // infoLocation: the coordinates of the center marker for the shape
    // infoContent: the crew phone numbers to display in the infowindow
    var shapeList = [
    {
        polygon: shape12,
        id: '12',
        color: '#fec28c', // orange
        infoLocation: {
            lat: 33.9105, //33.93025735136521,
            lng: -117.9475  //-117.91213989257814
        },
        infoContent: crewcontact["12"].Supervisor + " " + crewcontact["12"].Phone
    }, 
    {
        polygon: shape11,
        id: '11',
        color: '#f9f385', // yellow
        infoLocation: {
            lat: 33.8600, //33.8247936182649,
            lng: -117.8545  //-117.85858154296876
        }, 
        infoContent: crewcontact["11"].Supervisor + " " + crewcontact["11"].Phone
    }, 
    {
        polygon: shape10,
        id: '10',
        color: '#cf7b71', // rust
        infoLocation: {
            lat: 33.82251188219802,
            lng: -117.69790649414064
        },
        infoContent: crewcontact["10"].Supervisor + " " + crewcontact["10"].Phone
    }, 
    {
        polygon: shape22,
        id: '22',
        color: '#aae2ef',  // light-blue
        infoLocation: {
            lat: 33.82251188219802,
            lng: -117.9986572265625
        },
        infoContent: crewcontact["22"].Supervisor + " " + crewcontact["22"].Phone
    }, 
    {
        polygon: shape21,
        id: '21',
        color: '#d9bedd', // purple
        infoLocation: {
            lat: 33.720913019358676,
            lng: -117.92999267578126
        }, 
        infoContent: crewcontact["21"].Supervisor + " " + crewcontact["21"].Phone
    }, 
    {
        polygon: shape20,
        id: '20',
        color: '#aebed7',  // blue-gray
        infoLocation: {
            lat: 33.723197462817026,
            lng: -118.03573608398439
        }, 
        infoContent: crewcontact["20"].Supervisor + " " + crewcontact["20"].Phone
    }, 
    {
        polygon: shape32,
        id: '32',
        color: '#c4d9ae',  // leaf-green
        infoLocation: {
            lat: 33.72205524868731,
            lng: -117.68829345703126
        },
        infoContent: crewcontact["32"].Supervisor + " " + crewcontact["32"].Phone
    }, 
    {
        polygon: shape31,
        id: '31',
        color: '#d7f885', // neon green
        infoLocation: {
            lat: 33.637489243170826,
            lng: -117.80364990234376
        },
        infoContent: crewcontact["31"].Supervisor + " " + crewcontact["31"].Phone
    }, 
    {
        polygon: shape30,
        id: '30',
        color: '#a4b082',  //olive
        infoLocation: {
            lat: 33.5397,  //33.4979,
            lng: -117.5805  //-117.5784
        },
        infoContent: crewcontact["30"].Supervisor + " " + crewcontact["30"].Phone
    }, 
    ];

    // Iterate over the shapes, creating a polygon for each one
    for (var i = 0; i < shapeList.length; i++) 
    {
        // Construct the polygon.
            polygonList[i] = new google.maps.Polygon({
            paths: shapeList[i].polygon,
            strokeColor: shapeList[i].color,
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: shapeList[i].color,
            fillOpacity: 0.5
        });

        // Construct the content of the info window for this region
        var contentString = '<div id="content">' +
            '<div id="siteNotice">' +
            '</div>' +
            '<h1 id="firstHeading" class="firstHeading">' + shapeList[i].id + '</h1>' +
            '<div id="bodyContent">' +
            '<p><b>' + shapeList[i].infoContent + '</p>' +
            '</div>' +
            '</div>';

        // Construct the info window for this region
        infowindows[i] = new google.maps.InfoWindow({
            content: contentString
        });

        // create the marker that will appear in the center of the region
        markerList[i] = new google.maps.Marker({
            position: shapeList[i].infoLocation, // where to place the marker
            map: map, // the map to be drawn on
            title: shapeList[i].id, // Maintenance Crew Number
            icon: 'images/region.png', // the marker image
            label: {
                text: shapeList[i].id,  // region label
                color: '#FFFFFF', // white for text
                fontSize: '16px'  // a readable size
            }
        });
        // Initially the marker is hidden
        markerList[i].setVisible(false);
    }; // end for

    // Construct the click listeners for each info window
    // it seems these can't be done in a loop because the loop index
    // isn't known when the click happens.
    markerList[0].addListener('click', function() {
        infowindows[0].open(map, markerList[0]);
    });
    markerList[1].addListener('click', function() {
        infowindows[1].open(map, markerList[1]);
    });
    markerList[2].addListener('click', function() {
        infowindows[2].open(map, markerList[2]);
    });
    markerList[3].addListener('click', function() {
        infowindows[3].open(map, markerList[3]);
    });
    markerList[4].addListener('click', function() {
        infowindows[4].open(map, markerList[4]);
    });
    markerList[5].addListener('click', function() {
        infowindows[5].open(map, markerList[5]);
    });
    markerList[6].addListener('click', function() {
        infowindows[6].open(map, markerList[6]);
    });
    markerList[7].addListener('click', function() {
        infowindows[7].open(map, markerList[7]);
    });
    markerList[8].addListener('click', function() {
        infowindows[8].open(map, markerList[8]);
    });
}