function initCCTVbutton()
{
    var cctvBtnDiv = document.getElementById('cctvButton');
    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(cctvBtnDiv)
    cctvBtnDiv.title = 'Click to toggle cctv view';
    // Setup the click event listeners to toggle icon display
    cctvBtnDiv.addEventListener('click', function()
    {
        cctv_showing = !cctv_showing;
        // reveal or hide all the icons
        cctvLayer.forEach(function(feature)
        {
            cctvLayer.overrideStyle(feature,
            {
                visible: cctv_showing
            });
        });
        // Determine which button image to show
        if (cctv_showing)
        {
            pic = "images/btnDepressed_CCTV.png"
        }
        else
        {
            pic = "images/btnReady_CCTV.png"
        }
        document.getElementById('cctvBtnImg').src = pic;
    });
}
function makecctvIcon(nearVDS)
{
    var imgIcon = cctvIcon
    if ((typeof map.data.getFeatureById(nearVDS)) == "undefined")
    {
        imgIcon = cctvIconWhite;
    }
    return imgIcon
}
function loadCCTVlayer()
{
    var imgTag = '<IMG WIDTH="700" ONERROR=this.src="images/cctv_unavailable.jpg"  SRC="images/';
    cctv_infowindow = new google.maps.InfoWindow(); // initial the singleton
    cctvLayer = new google.maps.Data(); 
    cctvLayer.loadGeoJson(kCCTVfile); // load the features 
    // Define the clickable area on an icon (the default is too big)
    var clickRegion = {coords: [0,0,14,8], type: "rect"}  
    cctvLayer.setStyle(function(feature)
    {
        // return the StyleOptions
        return {
            icon: makecctvIcon(feature.getProperty("nearVDS")),
            shape: clickRegion,
            title: feature.getId() + " " +feature.getProperty('locationName'),
            visible: false  
        };
    });
    cctvLayer.addListener('click', function(event)
    {
        //console.log("cctv layer was clicked at " + event.feature.getId());
        cctvIndex = event.feature.getId();
        //console.log(this.title + " is looking for " + this.nearVDS);
        cctvLocation = event.feature.getProperty("locationName");
        nearVDS = map.data.getFeatureById(event.feature.getProperty("nearVDS"));
        currentColor = nearVDS.getProperty("color");
        // file name scheme
        // rte-id-velocity.jpg 
        // rte is route number, e.g., 055
        // id is 4-digit camera id, e.g., 0012
        // vel is traffic velocity: "freeflow", "slow", or "stopped"
        var imgDir = "CCTV/";
        var label = "-day-freeflow";
        if (currentColor == "red")
        {
            label = "-day-stopped";
        }
        if (currentColor == "yellow")
        {
            label = "-day-slow";
        }

        // Demo of video embed - only on highway 241 locations
        if (cctvIndex.startsWith("12-241"))
        {
            cctv_infowindow.setContent('<div style="font-weight:bold;font-family: monospace">' +  cctvIndex + "&nbsp;" + cctvLocation + "&nbsp;" + '<BR><video  autoplay loop><source src="images/TrafficFreeflow.ogv" type="video/ogg"></div>');
        }
        else 
        // image from fast or slow directories
        {
            cctv_infowindow.setContent('<div style="font-weight:bold;font-family: monospace">' +  cctvIndex + "&nbsp;" + cctvLocation + "&nbsp;" +label+ "<BR>" + imgTag + imgDir + cctvIndex + label +'.jpg">' + "</div>");
        }
        cctv_infowindow.setPosition(event.feature.getGeometry().get());
        cctv_infowindow.open(map);

    });
    cctvLayer.setMap(map);
}