/**
* index.js
*/

// a global variable for the google map
var map;
// Constant for map center location in District 12
var centerPoint = {
    lat: 33.693385,
    lng: -117.798937
};

// Initial map zoom
var initZoom = 11;
// Dot colors used in traffic model to indicate free-flowing, slowed, and stopped traffic
// and their associated zvalues so slower traffic dots are more visible.
// white means a disabled spot
var colorZvalues = {
    "white": 5,
    "lime": 10,
    "yellow": 20,
    "red": 30
};
// Constant name of initial (static) highways file used once at startup
var kVDSStartupFile = "highways_startup.json";
//var circle = google.maps.SymbolPath.CIRCLE;

// Build a solid colored icon to use instead of the classic pin
function dotSymbol(color)
{
    var circle = google.maps.SymbolPath.CIRCLE;
    var diamond = 'M -1,0 0,-1 1,0 0,1 z';
    return {
        path: circle,
        scale: 5,
        strokeColor: "black", // the border color
        strokeWeight: 1, // the border thickness
        fillColor: color,
        fillOpacity: 1.0
    };
}
/*var myCircleIcon = {
        path: circle,
        scale: 5,
        strokeColor: "black", // the border color
        strokeWeight: 1, // the border thickness
        fillColor: "lime",
        fillOpacity: 1.0
    };
*/
function initMap()
{
    // Declare the map and where it belongs on the page
    map = new google.maps.Map(document.getElementById('mapdiv'),
    {
        zoom: initZoom,
        center: centerPoint,
        styles: night_mode,
        mapTypeControl: false,
        streetViewControl: false
    });
    loadMarkers();
    loadCCTV();
    map.data.addListener('click', function(event)
    {
//        console.log("map data layer was clicked");
        alert("hey");
    });
}

function loadMap()
{
    map.data.loadGeoJson(kVDSStartupFile);

    // Style the map data by applying the desired properties to each feature (marker)
    // The function will be called every time a feature's properties are updated.
    map.data.setStyle(function(feature)
    {
        // Get the postmile id 
        var name = feature.getId();
        // Get the desired color value
        var ptColor = feature.getProperty("color");
        var street = feature.getProperty("street");
        // Build the marker
        //var iconSymbol = dotSymbol(ptColor);
        // return the StyleOptions
        return {
            icon: dotSymbol(ptColor),
            title: name + " @" + street, // set rollover text
            // set zIndex for slowed traffic to a higher value so they overlap
            zIndex: colorZvalues[ptColor]
        };
    });
}

var vds_info;
var vdsList = [];

function loadMarkers()
{
        loadJSON(kVDSStartupFile, function(response)
        {
            // Parse JSON string into object
            vds_info = JSON.parse(response);
            // Process each new marker 
            for (var idx in vds_info.features)
            { 
                var vds_item = vds_info.features[idx];
                var name = vds_item.id;
                var currLat = Number(vds_item.geometry.coordinates[1]);
                var currLong = Number(vds_item.geometry.coordinates[0]);
                //console.log(currLong, currLat);
                vdsList[name] = new google.maps.Marker(
                {
                    position:
                    {
                        lat: currLat,
                        lng: currLong
                    },
                    map: map,
                    icon: 
                    {
                        url: 'images/circle-12.png', 
                        anchor: new google.maps.Point(6, 6)
                    },
                    title: name
                });
                vdsList[name].setVisible(true);
            }
        });
}
    var cctvIcon = "images/CPTMSImages/icon_cctvCyan.png";

function loadCCTV()
{
    cctvLayer = new google.maps.Data();
    cctv_infowindow = new google.maps.InfoWindow();
    console.log("building cctvlayer");
    cctvLayer.loadGeoJson("cctv_locations_D12.gjson");
    cctvLayer.setStyle(function(feature)
    {
        // return the StyleOptions
        return {
            icon: dotSymbol("yellow"),
            visible: false  
        };
    });
    cctvLayer.addListener('click', function(event)
    {
        console.log("cctv layer was clicked at " + event.feature.getId());
        cctv_infowindow.setContent("Hello World");
        cctv_infowindow.setPosition(centerPoint);
        cctv_infowindow.open(map);
    });
    cctvLayer.setMap(map);


    map.addListener('zoom_changed', function()
    {
        cctvLayer.forEach(function(feature)
        {
            cctvLayer.overrideStyle(feature,
            {
                visible: true
            });
        });
    });
}