var map = null;
var geocoder = null;
var points = [];
var center = null;
var zoom = null;
var sidebar = null;
var bounds = null;
var page = 1;
var address = null;
var latlong = null;

function LoadMap(latitude, longitude) {
    map = new GMap2(document.getElementById('map'));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    geocoder = new GClientGeocoder();
    sidebar = document.getElementById('sidebar');
    
    if (latitude != null && longitude != null) {
        center = new GLatLng(latitude, longitude);
    } 
    else {
        center = new GLatLng(40, -100);
    }
    map.setCenter(center,4);
}

function FindDistGivenLocation(where) {
    geocoder.getLatLng(where, function(latlng) {
        if (!latlng) {
            alert(address + ' not found');
        } else {
            address = where;
            latlong = latlng;
            page = 1;
            searchLocationsNear(latlng);
        }
    });

}

function clearMap() {
    map.clearOverlays();
    points = [];
    sidebar.innerHTML = "";
}

function searchLocationsNear(latlng) {
    clearMap();

    $.post("/Find/FindByLocation", { latitude: latlng.y, longitude: latlng.x, page: page
    }, function(dists) {
        if (dists.length == 0) {
            sidebar.innerHTML = 'No distributors found.';
            map.setCenter(new GLatLng(40, -100), 4);
            return;
        }
        else {
            $.each(dists, function(i, dist) {

                var marker = createMarker(dist.Lat, dist.Lon, dist, i);

                var sidebarEntry = createSidebarEntry(marker, dist, i);
                sidebar.appendChild(sidebarEntry);
                map.addOverlay(marker);
            });
            var sidebarMore = document.createElement('div');
            var sidebarMoreHTML = '<div style=\'margin-top: 20px; margin-left: 20px; font-size: 16px;\'><a href=\'javascript:getMore();\'>More Locations</a></div>';
            sidebarMore.innerHTML = sidebarMoreHTML;
            sidebar.appendChild(sidebarMore);

            bounds = new GLatLngBounds();
            for (var i = 0; i < points.length; i++) {
                bounds.extend(points[i]);
            }
            map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
            //zoomfit();
        }
    }, "json");
}

function zoomfit() {
    newzoom = getBoundsZoomLevel(bounds);
    newcenter = bounds.getCenter();
    map.setCenter(newcenter, newzoom);
}


function createMarker(latitude, longitude, dist, i) {
    var point = new GLatLng(parseFloat(latitude),
                              parseFloat(longitude));
    points.push(point);
    // Create our "tiny" marker icon
    var blueIcon = new GIcon(G_DEFAULT_ICON);
    blueIcon.image = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + (i + 1) + '|1b3c7a|ffffff';

    // Set up our GMarkerOptions object
    var markerOptions = { icon: blueIcon };

    var marker = new GMarker(point, markerOptions);
    var notes = '';
    if (dist.Notes != '') {
        notes = '<br /><br />' + dist.Notes;
    }
    var html = '<div style=\'width: 21px; margin-right: 10px;float:left;\'><img src=\'' + blueIcon.image + '\' alt=\'' + (i + 1) + '\' />' +
        '</div>' +
        '<div style=\'float: left;\'>' +
        '<b>' + dist.Name + '</b> <br/>' +
        dist.Address1 + '<br/>' +
        dist.City + ', ' + dist.State + ' ' + dist.Zip + '<br />' +
        notes + '<br />' +
        dist.Phone +
        '<br /><br /><strong>Distance from you: ' +
            dist.Distance.toFixed(1) + ' Miles</strong></div><div style=\'clear: both; height: 0px;\'></div>';
            
    GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
    });
    
    return marker;
}

function createSidebarEntry(marker, dist, i) {
    var div = document.createElement('div');
    var iconPath = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + (i + 1) + '|1b3c7a|ffffff';

    var html =  '<div style=\'padding: 5px 10px 5px 10px;\'><div style=\'width: 21px; margin-right: 10px;float:left;\'>' +
                '<img src=\'' + iconPath + '\' alt=\'' + (i + 1) + '\' />' +
                '</div>' +
                '<div style=\'float: left;\'>' +
                '<h3>' + dist.Name + '</h3>' +
                dist.Address1 + '<br />' +
                dist.City + ', ' + dist.State + ' ' + dist.Zip + 
                '<br />(' + dist.Distance.toFixed(1) + ' Miles)' +
                '</div><div style=\'clear: both; height: 0px;\'></div></div>';
    
    
    div.innerHTML = html;
    div.style.cursor = 'pointer';
    div.style.marginBottom = '5px';
  
    GEvent.addDomListener(div, 'click', function() {
        GEvent.trigger(marker, 'click');
    });
    GEvent.addDomListener(div, 'mouseover', function() {
        div.style.backgroundColor = '#6b8fc0';
        div.style.color = '#ffffff';
    });
    GEvent.addDomListener(div, 'mouseout', function() {
        div.style.backgroundColor = 'Transparent';
        div.style.color = '#000000';
    });
    return div;
}

function getMore() {
    page = page + 1;
    searchLocationsNear(latlong);
}