//<![CDATA[
$(document).ready( function()
{
    loadProviders($(".JSVariable > input").val());
});

var map = null;
var geocoder = null;

function loadProviders(strAllInfo)
{
    var arrAllInfo = strAllInfo.split("~");
    
    var strAddress = arrAllInfo[0];
    var strNames = arrAllInfo[1];
    var strWeb = arrAllInfo[2];
    var strPhone = arrAllInfo[3];
    var strImages = arrAllInfo[4];
    
    var arrAddress = strAddress.split("|");
    var arrNames = strNames.split("|");
    var arrWebSites = strWeb.split("|");
    var arrPhone = strPhone.split("|");
    var arrImages = strImages.split("|");
    
    if (GBrowserIsCompatible()) 
    {
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(41, -92.28815625), 12);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        geocoder = new GClientGeocoder();
        
        //add address markers
        for (var i=0; i < arrAddress.length - 1; i++)
        {
            //Get the geocode information for each featured provider
            showAddress(arrAddress[i], arrNames[i], arrWebSites[i], arrPhone[i], arrImages[i], i);
        }
    }
    
    geocoder.getLatLng(String(arrAddress[0]), function(point) { map.setCenter(point) });  
}

function createMarker(point, strAddress, strNames, strWebSites, strPhone, strImages, i) 
{  
    //Create the marker and its properties
    var baseIcon = new GIcon();
    baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    baseIcon.iconSize = new GSize(20, 34);
    baseIcon.shadowSize = new GSize(37, 34);
    baseIcon.iconAnchor = new GPoint(9, 34);
    baseIcon.infoWindowAnchor = new GPoint(9, 2);
    baseIcon.infoShadowAnchor = new GPoint(18, 25);

    // Create a lettered icon for this point using our icon class from above
    var intMarkerName = 1 + i;
    var icon = new GIcon(baseIcon);
    
    //Set marker image 
    icon.image = "../images/numberedmarkers/marker" + String(intMarkerName) + ".png";
    var marker = new GMarker(point, icon);
    
    //Watch for click to redisplay the information
    GEvent.addListener(marker, "click", function() 
    {
        marker.openInfoWindowHtml("<strong>" + strNames + "</strong><br />" + strAddress + "<br />" + strPhone + "<br />"
                        + '<a href="http://' + strWebSites + '" title="View ' + strWebSites +'" target="_blank">' + strWebSites + '</a>');
    });
    return marker;
}

function showAddress(strAddress, strNames, strWebSites, strPhone, strImages, i) 
{
    //Get geocoded info from the http request at google
    if (geocoder) 
    {
        geocoder.getLatLng(strAddress, function(point) 
        {
            //Center map
            map.setCenter(point, 14);
            
            //Create marker and place it
            var marker = createMarker(point, strAddress, strNames, strWebSites, strPhone, strImages, i);
            map.addOverlay(marker);
            if(i == 0)
            {
                marker.openInfoWindowHtml("<strong>" + strNames + "</strong><br />" + strAddress + "<br />" + strPhone + "<br />"
                    + '<a href="http://' + strWebSites + '" title="View ' + strWebSites +'" target="_blank">' + strWebSites + '</a>');
            }
        });
    }
}    
//]]>