﻿var map;

function loadGMap(areaid) {

    var params = '';
    if (areaid != 0)
        params = '&CityMetroId=' + areaid;

    var d = new Date();

    $.get('/includes/PropertyMap.aspx?time=' + d.getTime() + params, function(data) {

        var data2 = GXml.parse(data);
        var centerlat = $(data2).find('Properties').attr('CenterLat');
        var centerlng = $(data2).find('Properties').attr('CenterLng');

        if (centerlat != null && centerlng != null)
            map.setCenter(new GLatLng(centerlat, centerlng));

        $(data2).find('Property').each(function() {
            var property = $(this);
            name = property.attr("PropertyName");
            lat = property.attr("Latitude");
            lng = property.attr("Longitude");
            img = "<img width=\"80\" src=\"/assets/property/" + property.attr("FlashMapImage") + "\" />";
            address = property.attr("Address");
            city = property.attr("City");
            state = property.attr("State");
            zip = property.attr("Zip");
            url = property.attr("Url");
            var directions = address + ' ' + city + ' ' + state;
            directions = directions.replace(/ /g, "%20").replace(/", "/, " ");

            directions = "http://maps.google.com/maps?f=q&hl=en&q=" + directions + "&om=1"
            if (lat != '' && lng != '') {
                var html = '';
                html = '<table border=0 cellpadding=0 cellspacing=0><td>' + img + '</td><td style=\"padding-left: 5px;\">' + name + '<br />' + city + ', ' + state + ' ' + zip + '<br /><a href="' + url + '" target=\"_blank\">View Site</a> | <a href=' + directions + ' target=\"_blank\">Directions</a></td></table>'

                marker = createMarker(new GLatLng(lat, lng), html, new GIcon(G_DEFAULT_ICON));
                map.addOverlay(marker);
            }
        });
    });
}


$(document).ready(function() {
    map = new GMap2($("#map").get(0), { mapTypes: [G_PHYSICAL_MAP] });
    var myCenter = new GLatLng(42.063024, -88.294373);
    map.setCenter(myCenter);
    map.setZoom(9);
    map.addControl(new GLargeMapControl());

    var name, lat, lng, img, address, city, state, zip, url;
    var markers = [];
    loadGMap(0);

    var maptabs = $('.tabWidget > ul').tabs().bind('tabsshow', function(event, ui) {
        if ($(this).data("selected.tabs") == 1) {
            if (window.location.toString().indexOf("#XY/Chicago%20Metropolitan%20Area", 0) >= 0) {
                map.setCenter(new GLatLng(42.063024, -88.294373));
            }
            else if (window.location.toString().indexOf("#XY/Minneapolis%20Metropolitan%20Area", 0) >= 0) {
                map.setCenter(new GLatLng(44.95968, -93.317871));
            }
            map.checkResize();
        }
    });

    if (window.location.toString().indexOf("#XY/Minneapolis%20Metropolitan%20Area") > -1)
        doToggle('mn');
    else
        doToggle('il');
});

function doToggle(state) {
    var btnIl = document.getElementById("btnIl");
    var btnMn = document.getElementById("btnMn");

    if (state == 'il') {
        btnIl.src = '/images/main/il-on.gif';
        btnIl.onmouseout = function(ev) { change_src(btnIl, '/images/main/il-on.gif'); };
        btnMn.src = '/images/main/mn.gif';
        btnMn.onmouseout = function(ev) { change_src(btnMn, '/images/main/mn.gif'); };
        $("#divChicago").fadeIn(300);
        $("#divMinneapolis").hide();
        map.setCenter(new GLatLng(42.063024, -88.294373));
    } else {
        btnIl.src = '/images/main/il.gif';
        btnIl.onmouseout = function(ev) { change_src(btnIl, '/images/main/il.gif'); };
        btnMn.src = '/images/main/mn-on.gif';
        btnMn.onmouseout = function(ev) { change_src(btnMn, '/images/main/mn-on.gif'); };
        $("#divMinneapolis").fadeIn(300);
        $("#divChicago").hide();
        map.setCenter(new GLatLng(44.95968, -93.317871));
    }
}

function change_src(btn, img) { btn.src = img; }

function createMarker(point, html, icon) {
    var marker = new GMarker(point, icon);
    GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(html);
    });
    return marker;
}
