function initHARbutton()
{
    var harBtnDiv = document.getElementById('harButton');
    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(harBtnDiv)
    harBtnDiv.title = 'Click to toggle har view';
    // Setup the click event listeners to toggle icon display
    harBtnDiv.addEventListener('click', function()
    {
        har_showing = !har_showing;
        // Determine which button image to show
        if (har_showing)
        {
            pic = "images/btnDepressed_HAR.png"
            // It's nice when icons become visible that the messages have been refreshed.
            loadAllharMessages();
        }
        else
        {
            pic = "images/btnReady_HAR.png"
        }
        document.getElementById('harBtnImg').src = pic;
        // reveal or hide all the icons
        harLayer.forEach(function(feature)
        {
            harLayer.overrideStyle(feature,
            {
                visible: har_showing
            });
        });
    });
}
function loadHARlayer()
{
    harLayer = new google.maps.Data();
    harLayer.setMap(map);
    harLayer.loadGeoJson(kHARfile);  
    harLayer.setStyle(function(feature)
    {
        // return the StyleOptions
        return {
            icon: iconHARactive,
            title: feature.getId()+ " " +feature.getProperty("location")+ " " 
                    + feature.getProperty("street"),
            visible: false
        };
    });
    
    harLayer.addListener('click', function(event)
    {
        var dialog = document.getElementById('har-dialog');
        // Note: If the dialog is already being displayed when someone else
        // updates the message, it won't be reflected in the dialog, until
        // you close and reopen it.
        dialog.style.display = 'block';
        harID = event.feature.getId();
        // Assign to the hidden field
        document.getElementById('harID').value = harID;
        showHARMessage(harID); // note: this is async
        document.getElementById('har-info-label').innerHTML = "HAR ID: " +
            harID + "   LOCATION: " + event.feature.getProperty("location")
            + "  " + event.feature.getProperty("street");
        // clear input fields
        document.getElementById('har-msgcontent1').value = "";
        document.getElementById('har-msgcontent1').focus();
        var span = document.getElementById('har-close');
            // When the user clicks on <span> (x), close the modal
        span.addEventListener('click',function()
        {
            handleDialogClose('har-dialog');
        });
    });
}

    function handleHARsubmit()
    {
        // recover the user's response
        var response1 = document.getElementById('har-msgcontent1').value.trim();

        var newMsg = response1;
        if (newMsg.length == 0)
        {
            alert("Nothing to Send ... input fields are empty.");
        }
        else
        {
            document.getElementById('har-msgdisplay1').value = response1;

            saveHARMessage(response1);
        }
    }

    function handleHARclear()
    {
        document.getElementById('har-msgdisplay1').value = "";
        saveMessage("");
    }

    // Save an updated har message to the file
    function saveHARMessage(outMessage)
    {
        // Fetch harID from hidden field where it was put when dialog opened.
        var harID = document.getElementById('harID').value;
        HARmessageDict[harID].har.message.phase1.Line1 = outMessage;

        // TODO Set icon to reflect message state
        if (outMessage == "")
        {
        }
        else
        {
        }
        //harLayer.overrideStyle(harLayer.getFeatureById(harID), currentIcon)
        // break the json string into lines for readability
        jsonstring = JSON.stringify(Object.values(HARmessageDict));
        outString = "{\"data\":" + jsonstring + "}";

        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "cgi-bin/saveHARmessage.py?msg=" + outString, true);
        xhttp.send();
        // Using POST might be a better idea ... haven't tried this yet
        //      var xhr = new XMLHttpRequest();
        //      xhr.open("POST", "/cgi-bin/saveMessage.py?", true);
        //      xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
        // send the collected data as JSON
        //      xhr.send(JSON.stringify(messageList));
    }

    // retrieve the current har message file
    function showHARMessage(harID)
    {
        loadAllharMessages();  // because someone else may have made a recent update
        // lookup the message for this har ID
        var message = HARmessageDict[harID].har.message;
        // show the message in the display
        document.getElementById('har-msgdisplay1').value = message.phase1.Line1.toUpperCase();

    }
    function loadAllharMessages()
    {
        loadJSON("har_messages.json", function(response)
        {
            // Parse JSON string into object
            messagejson = JSON.parse(response);
            // Add each message to a lookup dictionary 
            for (var i = 0; i < messagejson.data.length; i++)
            {
                var item = messagejson.data[i];
                HARmessageDict[item.har.index] = item;
                // TODO Set the appropriate icon on the har icon
                //  if there's currently no message
                if (item.har.message.phase1.Line1 == "")
                {
                }
                else
                {
                }
            }
        });
    }