Event.observe(window, 'load', load, false);

function load() {
    if (GBrowserIsCompatible()) {
        rgm                     = new GMap2($('rmap'));
        rbIcon                  = new GIcon();
        rbIcon.image            = '/template/img/marker.png';
        rbIcon.shadow           = '/template/img/marker-shadow.png';
        rbIcon.iconSize         = new GSize(13, 21);
        rbIcon.shadowSize       = new GSize(30, 21);
        rbIcon.iconAnchor       = new GPoint(13, 21);
        rbIcon.infoWindowAnchor = new GPoint(7, 8);
        rbIcon.infoShadowAnchor = new GPoint(18, 25);

        rgm.addControl(new GSmallZoomControl());
        rgm.addControl(new GMapTypeControl());
        rgm.addControl(new GScaleControl());
        rgm.enableDoubleClickZoom();
        rgm.setCenter(new GLatLng(Number($F('clt')), Number($F('cln'))), Number($F('z')));

        GEvent.addListener(rgm, 'dragend', function() {layMarkers();});
        GEvent.addListener(rgm, 'zoomend', function() {layMarkers();});
        GEvent.addListener(rgm, 'dblclick', function() {setTimeout('layMarkers()', 500);});
        GEvent.addListener(rgm, 'infowindowclose', function() {rgm.returnToSavedPosition()});

        layMarkers();
    }
}

function addCommas(nStr) {
    nStr    += '';
    var x    = nStr.split('.');
    var x1   = x[0];
    var x2   = x.length > 1 ? '.' + x[1] : '';
    var rgx  = /(\d+)(\d{3})/;

    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }

    return x1 + x2;
}

function createPropertyMarker(p, id, address, city, zip, price, beds, baths, sqFt) {
    var m   = new GMarker(p, rbIcon);
    m.id    = id;

    GEvent.addListener(m, 'click', function() {
        rgm.savePosition();
        m.openInfoWindowHtml(
            buildPropertyPopup(id, address, city, zip, price, beds, baths, sqFt),
            {maxWidth : 200}
        );
    });

    return m;
}

function buildPropertyPopup(id, address, city, zip, price, beds, baths, sqFt) {
    var breaks  = 0;
    var markup  = '<div class="propPop rental">';
    markup     += '<h4>' + address + '</h4>';
    markup     += '<h5>' + city + ', WA ' + zip + '</h5>';
    markup     += '<a href="/find-a-home/home-rentals/listing/' + id + '?so=a&amp;city=Tacoma"><img src="/data/img/rentals/' + id + '-popup.jpg" alt="" /></a>';
    markup     += '<dl>';
    
    if ('?' != price) {
        markup += '<dt>Price:</dt><dd>$' + addCommas(Math.round(price)) + '</dd>';
    } else {
        breaks++;
    }

    if ('?' != beds) {
        markup += '<dt>Bedrooms:</dt><dd>' + beds + '</dd>';
    } else {
        breaks++;
    }

    if ('?' != baths) {
        markup += '<dt>Bathrooms:</dt><dd>';

        switch (baths - Math.floor(baths)) {
            case 0.75:
                markup += Math.floor(baths) + '&#190;';
                break;
            case 0.5:
                markup += Math.floor(baths) + '&#189;';
                break;
            case 0.25:
                markup += Math.floor(baths) + '&#188;';
                break;
            default:
                markup += Math.round(baths);
        }

        markup += '</dd>';
    } else {
        breaks++;
    }

    if ('?' != sqFt) {
        markup += '<dt>Sq. Ft.:</dt><dd>' + addCommas(Math.round(sqFt)) + '</dd>';
    } else {
        breaks++;
    }

    markup += '</dl>';
    
    for (var i = 0; i < breaks; i++) { markup += '<br />'; }
    
    markup += '<div class="details"><a href="/find-a-home/home-rentals/listing/' + id + '?so=a&amp;city=Tacoma">more details</a></div>';
    markup += '</div>';

    return markup;
}

function layMarkers() {
    var ne      = rgm.getBounds().getNorthEast();
    var sw      = rgm.getBounds().getSouthWest();
    var lngPad  = (ne.lng() - sw.lng()) * 0.1;
    var latPad  = (ne.lat() - sw.lat()) * 0.1;
    var maxLat  = ne.lat() - latPad;
    var maxLng  = ne.lng() - lngPad;
    var minLat  = sw.lat() + latPad;
    var minLng  = sw.lng() + lngPad;
    var request = '/find-a-home/home-rentals/xml?n=50&t=&mxlt=' + maxLat + '&mxln=' + maxLng + '&mnlt=' + minLat + '&mnln=' + minLng + '&bt=&bd=&mnp=&mxp=&sf=&pets=&smk=';

    rgm.savePosition();
    rgm.clearOverlays();

    new Ajax.Request(request, {
        method: 'get',
        onSuccess: function(transport) {
            var root            = transport.responseXML.getElementsByTagName('response')[0];
            var status          = root.getElementsByTagName('status')[0];
            var statusCode      = status.getElementsByTagName('code')[0].firstChild.nodeValue;
            var statusMessage   = status.getElementsByTagName('message')[0].firstChild.nodeValue;

            if (200 == statusCode) {
                var properties = root.getElementsByTagName('property');

                for (i = 0; i < properties.length; i++) {
                    var p = properties[i];

                    rgm.addOverlay(createPropertyMarker(
                        new GLatLng(
                            p.getElementsByTagName('lat')[0].firstChild.nodeValue,
                            p.getElementsByTagName('long')[0].firstChild.nodeValue
                        ),
                        p.getAttribute('id'),
                        p.getElementsByTagName('street')[0].firstChild.nodeValue,
                        p.getElementsByTagName('city')[0].firstChild.nodeValue,
                        p.getElementsByTagName('zip')[0].firstChild.nodeValue,
                        p.getElementsByTagName('price')[0].firstChild.nodeValue,
                        p.getElementsByTagName('beds')[0].firstChild.nodeValue,
                        p.getElementsByTagName('baths')[0].firstChild.nodeValue,
                        p.getElementsByTagName('squareFootage')[0].firstChild.nodeValue
                    ));
                }
            } else {
                window.alert(statusMessage);
            }
        },
        onFailure: function() {
            alert('An error has occurred.')
        }
    });

    $('z').value    = rgm.getZoom();
    $('clt').value  = rgm.getCenter().lat();
    $('cln').value  = rgm.getCenter().lng();
}