function loadRoutes(data, responseCode) {
    if (data.length == 0) {
        showMessage('There are no routes available to view.');
        map.innerHTML = '';
    }
    else {
        // get list of routes
        var xml = GXml.parse(data);

        var routes = xml.getElementsByTagName("route");

        // create the first option of the dropdown box
        var option = document.createElement('option');
        option.setAttribute('value', '0');
        option.innerHTML = 'Select Route...';
        routeSelect.appendChild(option);

        // iterate through the routes and load them into the dropdwon box. 
        for (i = 0; i < routes.length; i++) {
            var option = document.createElement('option');
            option.setAttribute('value', '?sessionID=' + routes[i].getAttribute("sessionID")
			                    + '&phoneNumber=' + routes[i].getAttribute("phoneNumber"));
            option.innerHTML = routes[i].getAttribute("phoneNumber") + "  " + routes[i].getAttribute("times");
            routeSelect.appendChild(option);
        }

        // need to reset this for firefox
        routeSelect.selectedIndex = 0;

        hideWait();
        showMessage('Please select a route below.');
    }

}

// this will get the map and route, the route is selected from the dropdown box
function getRouteForMap() {
    if (hasMap()) {
        showWait('Getting map...');
        var url = 'GetRouteForMap.aspx' + routeSelect.options[routeSelect.selectedIndex].value;
        GDownloadUrl(url, loadGPSLocations);
    }
    else {
        alert("Please select a route before trying to refresh map.");
    }
}

// check to see if we have a map loaded, don't want to autorefresh or delete without it
function hasMap() {
    if (routeSelect.selectedIndex == 0) { // means no map
        return false;
    }
    else {
        return true;
    }
}

function loadGPSLocations(data, responseCode) {
    if (data.length == 0) {
        showMessage('There is no tracking data to view.');
        map.innerHTML = '';
    }
    else {
        if (GBrowserIsCompatible()) {

            // create list of GPS data locations from our XML
            var xml = GXml.parse(data);

            // markers that we will display on Google map
            var markers = xml.getElementsByTagName("locations");

            // get rid of the wait gif
            hideWait();

            // create new map and add zoom control and type of map control
            var map = new GMap2(document.getElementById("map"));
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());

            var length = markers.length;

            // center map on last marker so we can see progress during refreshes
            map.setCenter(new GLatLng(parseFloat(markers[length - 1].getAttribute("latitude")),
	                                  parseFloat(markers[length - 1].getAttribute("longitude"))), zoomLevel);

            // interate through all our GPS data, create markers and add them to map
            for (var i = 0; i < length; i++) {
                var point = new GLatLng(parseFloat(markers[i].getAttribute("latitude")),
	                                    parseFloat(markers[i].getAttribute("longitude")));

                var marker = createMarker(i, length, point,
		                     markers[i].getAttribute("speed"),
		                     markers[i].getAttribute("direction"),
		                     markers[i].getAttribute("distance"),
		                     markers[i].getAttribute("locationMethod"),
		                     markers[i].getAttribute("gpsTime"),
		                     markers[i].getAttribute("phoneNumber"),
		                     markers[i].getAttribute("sessionID"),
		                     markers[i].getAttribute("accuracy"),
		                     markers[i].getAttribute("eventType"),
		                     markers[i].getAttribute("extraInfo"));

                // add markers to map
                map.addOverlay(marker);
            }
        }

        // show route name
        showMessage(routeSelect.options[routeSelect.selectedIndex].innerHTML);
    }
}

function createMarker(i, length, point, speed, direction, distance, locationMethod, gpsTime,
                      phoneNumber, sessionID, accuracy, eventType, extraInfo) {
    var icon = new GIcon();

    // make the most current marker red
    if (i == length - 1) {
        icon.image = "images/coolred_small.png";
    }
    else {
        icon.image = "images/coolblue_small.png";
    }

    icon.shadow = "images/coolshadow_small.png";
    icon.iconSize = new GSize(12, 20);
    icon.shadowSize = new GSize(22, 20);
    icon.iconAnchor = new GPoint(6, 20);
    icon.infoWindowAnchor = new GPoint(5, 1);

    var marker = new GMarker(point, icon);

    // this describes how we got our location data, either by satellite or by cell phone tower
    var lm = "";
    if (locationMethod == "8") {
        lm = "Cell Tower";
    } else if (locationMethod == "327681") {
        lm = "Satellite";
    } else {
        lm = locationMethod;
    }

    var str = "</td></tr>";

    // when a user clicks on last marker, let them know it's final one
    if (i == length - 1) {
        str = "</td></tr><tr><td align=left>&nbsp;</td><td><b>Final location</b></td></tr>";
    }

    // this creates the pop up bubble that displays info when a user clicks on a marker
    GEvent.addListener(marker, "click", function () {
        marker.openInfoWindowHtml(
        "<table border=0 style=\"font-size:95%;font-family:arial,helvetica,sans-serif;\">"
        + "<tr><td align=right>&nbsp;</td><td>&nbsp;</td><td rowspan=2 align=right>"
        + "<img src=images/" + getCompassImage(direction) + ".jpg alt= />"
        + str
        + "<tr><td align=right>Speed:</td><td>" + speed + " mph</td></tr>"
        + "<tr><td align=right>Distance:</td><td>" + distance + " mi</td><td>&nbsp;</td></tr>"
        + "<tr><td align=right>Time:</td><td colspan=2>" + gpsTime + "</td></tr>"
        + "<tr><td align=right>Method:</td><td>" + lm + "</td><td>&nbsp;</td></tr>"
        + "<tr><td align=right>Phone #:</td><td>" + phoneNumber + "</td><td>&nbsp;</td></tr>"
        + "<tr><td align=right>Session ID:</td><td>" + sessionID + "</td><td>&nbsp;</td></tr>"
        + "<tr><td align=right>Accuracy:</td><td>" + accuracy + " ft</td><td>&nbsp;</td></tr>"
        + "<tr><td align=right>Event Type:</td><td>" + eventType + "</td><td>&nbsp;</td></tr>"
        + "<tr><td align=right>Extra Info:</td><td>" + extraInfo + "</td><td>&nbsp;</td></tr>"

        + "</table>"
        );
    });

    return marker;
}

// this chooses the proper image for our litte compass in the popup window
function getCompassImage(azimuth) {
    if ((azimuth >= 337 && azimuth <= 360) || (azimuth >= 0 && azimuth < 23))
        return "compassN";
    if (azimuth >= 23 && azimuth < 68)
        return "compassNE";
    if (azimuth >= 68 && azimuth < 113)
        return "compassE";
    if (azimuth >= 113 && azimuth < 158)
        return "compassSE";
    if (azimuth >= 158 && azimuth < 203)
        return "compassS";
    if (azimuth >= 203 && azimuth < 248)
        return "compassSW";
    if (azimuth >= 248 && azimuth < 293)
        return "compassW";
    if (azimuth >= 293 && azimuth < 337)
        return "compassNW";

    return "";
}

function deleteRoute() {
    if (hasMap()) {
        var answer = confirm("This will permanently delete this route\n from the database. Do you want to delete?")
        if (answer) {
            showWait('Deleting route...');
            var url = 'DeleteRoute.aspx' + routeSelect.options[routeSelect.selectedIndex].value;
            GDownloadUrl(url, deleteRouteResponse);
        }
        else {
            return false;
        }
    }
    else {
        alert("Please select a route before trying to delete.");
    }
}

function deleteRouteResponse(data, responseCode) {
    map.innerHTML = '';
    routeSelect.length = 0;
    GDownloadUrl('GetRoutes.aspx', loadRoutes);
}

// auto refresh the map. there are 3 transitions (shown below). transitions happen when a user
// selects an option in the auto refresh dropdown box. an interval is an amount of time in between
// refreshes of the map. for instance, auto refresh once a minute. in the method below, the 3 numbers
// in the code show where the 3 transitions are handled. setInterval turns on a timer that calls 
// the getRouteForMap() method every so many seconds based on the value of newInterval. 
// clearInterval turns off the timer. if newInterval is 5, then the value passed to setInterval is 
// 5000 milliseconds or 5 seconds. 
function autoRefresh() {
    /*
        1) going from off to any interval
        2) going from any interval to off
        3) going from one interval to another
    */

    if (hasMap()) {
        newInterval = refreshSelect.options[refreshSelect.selectedIndex].value;

        if (currentInterval > 0) { // currently running at an interval

            if (newInterval > 0) { // moving to another interval (3)
                clearInterval(intervalID);
                intervalID = setInterval("getRouteForMap();", newInterval * 1000);
                currentInterval = newInterval;
            }
            else { // we are turning off (2)
                clearInterval(intervalID);
                newInterval = 0;
                currentInterval = 0;
            }
        }
        else { // off and going to an interval (1)
            intervalID = setInterval("getRouteForMap();", newInterval * 1000);
            currentInterval = newInterval;
        }

        // show what auto refresh action was taken and after 5 seconds, display the route name again
        showMessage(refreshSelect.options[refreshSelect.selectedIndex].innerHTML);
        setTimeout('showRouteName();', 5000);
    }
    else {
        alert("Please select a route before trying to refresh map.");
        refreshSelect.selectedIndex = 0;
    }
}

function changeZoomLevel() {
    if (hasMap()) {
        zoomLevel = zoomLevelSelect.selectedIndex + 1;

        getRouteForMap();

        // show what zoom level action was taken and after 5 seconds, display the route name again
        showMessage(zoomLevelSelect.options[zoomLevelSelect.selectedIndex].innerHTML);
        setTimeout('showRouteName();', 5000);
    }
    else {
        alert("Please select a route before selecting zoom level.");
        zoomLevelSelect.selectedIndex = zoomLevel - 1;
    }
}

function showMessage(message) {
    messages.innerHTML = 'Gps Tracker: <b>' + message + '</b>';
}

function showRouteName() {
    showMessage(routeSelect.options[routeSelect.selectedIndex].innerHTML);
}

function showWait(theMessage) {
    map.innerHTML = '<img src="images/ajax-loader.gif"' +
                    'style="position:absolute;top:225px;left:325px;">';
    showMessage(theMessage);
}

function hideWait() {
    map.innerHTML = '';
    messages.innerHTML = 'Gps Tracker';
}