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()
        {
            hideElementById('har-dialog');
        });
    });
}

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

        var newMsg = response1.replace(/[;:",]/gi, "");  // remove semicolons from input

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

            saveHARMessage(newMsg);
        }
    }

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

    // 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;
        // Set icon to reflect message state
        if (outMessage == "")
        {
            currentIcon = {icon: iconHARidle};
        }
        else
        {
            currentIcon = {icon: iconHARactive};
        }
        harLayer.overrideStyle(harLayer.getFeatureById(harID), currentIcon)

        // Examine each message in the dict and convert to json format
        var lineOut = "";
        for (var id in HARmessageDict)
        {
            // convert and append to output string
            lineOut += JSON.stringify(HARmessageDict[id]) + ',\n';
        }
        // remove trailing comma
        lineOut = lineOut.substring(0,lineOut.length-2);
        outString = "{\"data\":[\n" + lineOut + "\n]}";

        // Using POST to send the data 
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "../cgi-bin/saveHARmessage.py", true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        // send the collected data as JSON
        xhr.send("msg="+outString);
    }

    // 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("../dynamicdata/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;
                // Set the appropriate icon on the har icon
                //  if there's currently no message
                if (item.har.message.phase1.Line1 == "")
                {
                    harLayer.overrideStyle(harLayer.getFeatureById(item.har.index), {icon: iconHARidle})
                }
                else
                {
                    harLayer.overrideStyle(harLayer.getFeatureById(item.har.index), {icon: iconHARactive})
                }   
            }
        });
    }