var markers = [];
var html = [];

var poly = [];
var line = null;
var mapOpen = false;

$(document).ready(function() {
    if ($("#vendors_map_canvas").length > 0) {

        $('#mapSearch').click(function() {
            //$("#vendors_map_canvas").toggle();

            mapOpen = $("#hiddenVendorMapValues input[id$='mapShowing']").val();
            if (mapOpen == "false") {
                showMap();
            }
            else {
                hideMap();
            }
            return false;
        });

        showOnMap();
    }
});

function showMap() {
    $("#vendors_map_canvas").show();
    $(".vendors_map_legend").show();
    $("#hiddenVendorMapValues input[id$='mapShowing']").val(true);
    $("#mapSearch").html("<strong>Hide Map</strong>");
}

function hideMap() {
    $(".vendors_map_legend").hide();
    $("#vendors_map_canvas").hide();
    $("#hiddenVendorMapValues input[id$='mapShowing']").val(false);
    $("#mapSearch").html("<strong>Show Map</strong>");
}

function orderOfComplimentary(marker, b) {
    return 1;
}
function orderOfFeatured(marker, b) {
    return 2;
}
function orderOfGraphic(marker, b) {
    return 3;
} 

function showOnMap() {

    var map = new GMap2(document.getElementById('vendors_map_canvas'), { size: new GSize(675, 500) });

    var pt = new GLatLng(44.565795, -123.271837);

    var icons = [];
    icons["green"] = new GIcon(G_DEFAULT_ICON);
    icons["green"].image = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|879838|000000";

    icons["red"] = new GIcon(G_DEFAULT_ICON);
    icons["red"].image = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|CE3D1E|000000";

    icons["yellow"] = new GIcon(G_DEFAULT_ICON);
    icons["yellow"].image = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|FAC60E|000000";

    icons["orange"] = new GIcon(G_DEFAULT_ICON);
    icons["orange"].image = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|F28102|000000";

    var bounds = new GLatLngBounds();

    var center_lat = $("#hiddenVendorMapValues input[id$='mapLatVendor']").val();
    var center_lng = $("#hiddenVendorMapValues input[id$='mapLngVendor']").val();
    var within_miles = $("#hiddenVendorMapValues input[id$='mapWithinVendor']").val();
    if (center_lat.length > 2 && center_lng.length > 2) {
        pt = new GLatLng(center_lat, center_lng);
        drawCircle(map, pt, within_miles, 40, bounds);
    }
    
    map.setUIToDefault();
    map.disableScrollWheelZoom();
    map.setCenter(pt, 13);

    if ($('div.basiclisting').length > 0) {
        $('div.basiclisting').each(function(index) {

            var id = $(this).attr("id");
            var lat = $(this).attr("lat");
            var lng = $(this).attr("lng");
            var show = $(this).attr("show");

            // Check for map data
            if (lat.length > 1 && lng.length > 1 && show == "True") {

                var titletext = $(this).html();
                var text = $(this).children("h3").children("div").html();
                
                var pt = new GLatLng(lat, lng);
                bounds.extend(pt);

                marker = new GMarker(pt, { zIndexProcess: orderOfComplimentary, title: text, icon: icons["red"] });

                markers.push(marker);

                map.addOverlay(marker);

                html.push(titletext);
            }
        });
    }

    if ($('div.featured').length > 0) {

        $('div.featured').each(function(index) {

            var id = $(this).attr("id");
            var lat = $(this).attr("lat");
            var lng = $(this).attr("lng");
            var show = $(this).attr("show");

            // Check for map data
            if (lat.length > 1 && lng.length > 1 && show == "True") {

                var titletext = $(this).html();
                var text = $(this).children("h3").children("a").html();

                var pt = new GLatLng(lat, lng);
                bounds.extend(pt);

                marker = new GMarker(pt, { zIndexProcess: orderOfFeatured, title: text, icon: icons["green"] });
                
                markers.push(marker);

                map.addOverlay(marker);

                html.push(titletext);
            }
        });
    }

    if ($('div.graphic').length > 0) {
        $('div.graphic').each(function(index) {

            var id = $(this).attr("id");
            var lat = $(this).attr("lat");
            var lng = $(this).attr("lng");
            var show = $(this).attr("show");

            // Check for map data
            if (lat.length > 1 && lng.length > 1 && show == "True") {

                var titletext = $(this).html();
                var text = $(this).children("h3").children("a").html();

                var pt = new GLatLng(lat, lng);
                bounds.extend(pt);

                marker = new GMarker(pt, { zIndexProcess: orderOfGraphic, title: text, icon: icons["yellow"] });

                markers.push(marker);

                map.addOverlay(marker);
                
                html.push(titletext);
            }
        });
    }

    // Add click event to each marker
    $(markers).each(function(i, marker) {
        GEvent.addListener(marker, "click", function() {
            map.panTo(marker.getLatLng());
            marker.openInfoWindowHtml(html[i]);
        });
    });
    
    map.setZoom(map.getBoundsZoomLevel(bounds));
    map.setCenter(bounds.getCenter());

    mapOpen = $("#hiddenVendorMapValues input[id$='mapShowing']").val();
    if (mapOpen == "true") {
        showMap();
    }
    else {
        hideMap();
    }
}

// Draw a circle on map around center (radius in miles)
// Modified by Jeremy Schneider based on http://maps.huge.info/dragcircle2.htm
function drawCircle(map, center, radius, numPoints, bounds) {
    poly = [];
    var lat = center.lat();
    var lng = center.lng();
    var d2r = Math.PI / 180;                // degrees to radians
    var r2d = 180 / Math.PI;                // radians to degrees
    var Clat = (radius / 3963) * r2d;      //  using 3963 as earth's radius
    var Clng = Clat / Math.cos(lat * d2r);

    //Add each point in the circle
    for (var i = 0; i < numPoints; i++) {
        var theta = Math.PI * (i / (numPoints / 2));
        Cx = lng + (Clng * Math.cos(theta));
        Cy = lat + (Clat * Math.sin(theta));
        poly.push(new GLatLng(Cy, Cx));
        bounds.extend(poly[i]);
    }

    //Remove the old line if it exists
    if (line) {
        map.removeOverlay(line);
    }

    //Add the first point to complete the circle
    poly.push(poly[0]);

    //Create a line with teh points from poly, red, 3 pixels wide, 80% opaque
    line = new GPolyline(poly, '#FF0000', 3, 0.8);
    //line = new GPolygon(poly, '#FF0000', 3, 0.8, '#00FF00', 0.1);

    map.addOverlay(line);
}