﻿function loadMarkers(hash) {
    var bounds = new GLatLngBounds();
    var tinyRedIcon = new GIcon();
    tinyRedIcon.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
    tinyRedIcon.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    tinyRedIcon.iconSize = new GSize(12, 20);
    tinyRedIcon.shadowSize = new GSize(22, 20);
    tinyRedIcon.iconAnchor = new GPoint(6, 20);
    tinyRedIcon.infoWindowAnchor = new GPoint(5, 1);
    tinyRedMarkerOptions = { icon: tinyRedIcon };
    var tinyBlueIcon = new GIcon();
    tinyBlueIcon.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    tinyBlueIcon.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    tinyBlueIcon.iconSize = new GSize(12, 20);
    tinyBlueIcon.shadowSize = new GSize(22, 20);
    tinyBlueIcon.iconAnchor = new GPoint(6, 20);
    tinyBlueIcon.infoWindowAnchor = new GPoint(5, 1);
    tinyBlueMarkerOptions = { icon: tinyBlueIcon };
    GDownloadUrl("/MainMapData.aspx?Hash=" + hash, function (data, responseCode) {
        if (responseCode == 200) {
            var xml = GXml.parse(data);
            var markers = xml.documentElement.getElementsByTagName("marker");
            for (var i = 0; i < markers.length; i++) {
                var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                               parseFloat(markers[i].getAttribute("lng")));
                bounds.extend(point);
                var icon = markers[i].getAttribute("icon");
                if ((icon == '') || (icon == null) || (icon == 'big'))
                    var marker = new GMarker(point);
                else if ((icon == '') || (icon == null) || (icon == 'tinyBlue'))
                    var marker = new GMarker(point, tinyBlueMarkerOptions);
                else
                    var marker = new GMarker(point, tinyRedMarkerOptions);
                map.addOverlay(marker);
                var title = markers[i].getAttribute("title");
                var url = markers[i].getAttribute("url");
                var address = markers[i].getAttribute("address");
                var cityStatePostal = markers[i].getAttribute("cityStatePostal");
                var reviews = markers[i].getAttribute("reviews");
                var photos = markers[i].getAttribute("photos");
                var photoSrc = markers[i].getAttribute("photoSrc");
                var width = markers[i].getAttribute("width");
                var height = markers[i].getAttribute("height");
                var type = markers[i].getAttribute("type");
                switch (type) {
                    case 'category':
                    case 'location':
                        marker.html = '<div class="mapBubbleText">';
                        marker.html = marker.html + '<a class="mapBubbleHeader" href="' + url + '" target="_top">' + title + '</a><br />';
                        if ((address != '') && (address != null))
                            marker.html = marker.html + address + '<br />';
                        if ((cityStatePostal != '') && (cityStatePostal != null))
                            marker.html = marker.html + cityStatePostal + '<br />';
                        if ((reviews != '') && (reviews != null))
                            marker.html = marker.html + reviews + ' Reviews<br />';
                        if ((photos != '') && (photos != null))
                            marker.html = marker.html + photos + ' Photos<br />';
                        marker.html = marker.html + '<a href="' + url + '" target="_top">More Info...</a>';
                        marker.html = marker.html + '</div>';
                        break;
                    case 'photo':
                        marker.html = '<div class="mapBubbleText">';
                        marker.html = marker.html + '<span class="mapBubbleHeader">' + title + '</span><br />';
                        var adjustedHeight = 0;
                        if ((width != '') && (width != null) || (height != '') && (height != null)) {
                            var adjustedHeight = (200 / width) * height;
                            marker.html = marker.html + '<img height="' + adjustedHeight + '" width="200" src="' + photoSrc + '" /><br />';
                        }
                        else {
                            marker.html = marker.html + '<img width="200" src="' + photoSrc + '&Size=200" /><br />';
                        }
                        if ((url != '') && (url != null))
                            marker.html = marker.html + '<a href="' + url + '" target="_top">More Info...</a>';
                        marker.html = marker.html + '</div>';
                        break;
                }
                GEvent.addListener(marker, 'click', function () { this.openInfoWindowHtml(this.html); });
            }
            var zoom = map.getBoundsZoomLevel(bounds)
            map.setCenter(bounds.getCenter());
            map.setZoom(zoom);
            map.checkResize();
        } else if (responseCode == -1) {
            alert("Data request timed out. Please try later.");
        } else {
            alert("Request resulted in error. Check XML file is retrievable.");
        }
    });
}
