var locations = {};
var map;
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = '';

// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
var totalcount = 0;
function load() {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(37.000000, -96.000000), 4);
    //map.setCenter(new GLatLng(0, 0), 0);
    var bounds = new GLatLngBounds();
    map.addControl(new GSmallMapControl());
    //map.addControl(new GMapTypeControl());
    //map.setMapType(G_SATELLITE_MAP);
    GDownloadUrl("http://www.judge.com/App_Master/markerdata.xml", function(data) {
        var xml = GXml.parse(data);
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            totalcount = totalcount + 1
            var name = markers[i].getAttribute("name");
            var shortname = markers[i].getAttribute("shortname");
            var addresstitle = markers[i].getAttribute("addresstitle");
            var address = markers[i].getAttribute("address");
            var address2 = markers[i].getAttribute("address2");
            var address3 = markers[i].getAttribute("address3");
            var phone = markers[i].getAttribute("phone");
            var tollfree = markers[i].getAttribute("tollfree");
            var fax = markers[i].getAttribute("fax");
            var email = markers[i].getAttribute("email");
            var type = markers[i].getAttribute("type");
            var img = markers[i].getAttribute("img");
            var latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                  parseFloat(markers[i].getAttribute("lng")));
            var store = { latlng: latlng, name: name, addresstitle: addresstitle, shortname: shortname, address: address, address2: address2, address3: address3, phone: phone, tollfree: tollfree, fax: fax, email: email, type: type, img: img };
            var latlngHash = (latlng.lat().toFixed(6) + "" + latlng.lng().toFixed(6));
            latlngHash = latlngHash.replace(".", "").replace(".", "").replace("-", "");
            if (locations[latlngHash] == null) {
                locations[latlngHash] = []
            }
            locations[latlngHash].push(store);
            //bounds.extend(latlng);
        }
        for (var latlngHash in locations) {
            var stores = locations[latlngHash];
            var hq_size = 33;
            var ofc_size = 20;
            var hq_color = "#336699";
            var ofc_color = "#336699";
            map.addOverlay(createMarker(stores, hq_size, ofc_size, hq_color, ofc_color));
            document.getElementById("side_bar").innerHTML = side_bar_html;
            // ===== determine the zoom level from the bounds =====
            //map.setZoom(map.getBoundsZoomLevel(bounds));

            // ===== determine the centre from the bounds ======
            //map.setCenter(bounds.getCenter());
        }
    });
    //use style below to overlay judge logo
    //var boundaries = new GLatLngBounds(new GLatLng(42.000000,-123.000000), new GLatLng(48.000000,-107.000000));
    //var logo = new GGroundOverlay("http://www.judge.com/new.net/images/judgelogo2009.gif", boundaries);
    //map.addOverlay(logo);
}

function createMarker(stores, hq_size, ofc_size, hq_color, ofc_color) {
    var store = stores[0];
    if (store.type == 'hq') {
        var newIcon = MapIconMaker.createMarkerIcon({ width: hq_size, height: hq_size, primaryColor: hq_color });
    }
    else {
        var newIcon = MapIconMaker.createMarkerIcon({ width: ofc_size, height: ofc_size, primaryColor: ofc_color });
    }
    var marker = new GMarker(store.latlng, { icon: newIcon, title: store.name });
    var html = "<table><tr><td valign='top' align='left' class='sidetext'>";
    var directions_address = store.address + ", " + store.address3;
    html = html + "<b>" + store.name + "</b><br/>";
    if (store.addresstitle != "") {
        html = html + store.addresstitle + "<br/>";
    }
    html = html + store.address + "<br/>";
    if (store.address2.length > 0) {
        html = html + store.address2 + "<br/>";
    }
    html = html + store.address3;
    html = html + "<br/>Phone: " + store.phone;
    if (store.tollfree != "") {
        html = html + "<br/>Toll Free: " + store.tollfree;
    }
    html = html + "<br/>Fax: " + store.fax;
    //html = html + "<br/><a href='mailto:" + store.email + "'>" + store.email + "</a><br/>";
    html = html + "<br/><b><a href='http://maps.google.com/maps?daddr=" + directions_address + "' target='_blank'>Directions</a></b>";
    html = html + "</td>";
    if (store.img.length > 0) {
        html = html + "<td valign='top'><img src='http://www.judge.com/images/office_images/" + store.img + "' border=0/></td>";
    }
    html = html + "</tr></table>";
    GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
    });
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    // add a line to the side_bar html
    if ((gmarkers.length - 1) == 0) { side_bar_html = side_bar_html + '<table align="left" border="0" cellspacing="0" cellpadding="2"><tr>' }
    if ((gmarkers.length - 1) % 8 == 0) {
        side_bar_html = side_bar_html + '<td valign="top" class="links_nounderline">'
    }
    side_bar_html += '<img src="http://www.judge.com/images/icons/arrow_small.gif" align="absmiddle"> <a href="javascript:myclick(' + (gmarkers.length - 1) + ')" title="' + store.name + '">' + store.shortname + '<\/a><br/>';
    if ((gmarkers.length - 1) % 8 == 7 || (gmarkers.length - 1) == totalcount) {
        side_bar_html = side_bar_html + '</td>'
        if ((gmarkers.length - 1) != totalcount) {
            side_bar_html = side_bar_html + '<td width="50"></td>'
        }
    }
    if (gmarkers.length - 1 == totalcount) { side_bar_html = side_bar_html + '</tr></table>' }
    return marker;
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
    GEvent.trigger(gmarkers[i], "click");
}