var map = null;
var mgr = null;
var markers = {};
var spotlight = null;

function mapload(divMap, params, data) 
{
    if (GBrowserIsCompatible()) 
    {
        map = new GMap2(divMap);
        map.addControl(new GMapTypeControl());
        map.addControl(new GSmallMapControl());
        
        var center = new GLatLng(
            parseFloat(params[0]),  // latitude
            parseFloat(params[1])); // longitude
        var radius = parseInt(params[2]);
        
        if (radius > 0 && params[3].toLowerCase() == "true")
        {
            GEvent.addListener(map, "zoomend", function (oldZoom, newZoom)
            {
                if (spotlight != null)
                {
                    map.removeOverlay(spotlight);
                }

                if (newZoom >= 3)
                {
                    var alpha = 0.20;
                    var color = '#000';
                    var weight = 1024;
                    var circlePoints = [];
                    
                    var edge = new GLatLng(center.lat() + (radius / 111), center.lng());
                    
                    // for some reason, this doesn't work when declared at global scope
                    var normalProj = G_NORMAL_MAP.getProjection();
                    var centerPt = normalProj.fromLatLngToPixel(center, newZoom);
                    var radiusPt = normalProj.fromLatLngToPixel(edge, newZoom);
                    var radiusPixels = Math.abs(radiusPt.y - centerPt.y) + (weight / 2);
                    
                    for (var a = 0; a <= 360; a += 10)
                    {
                        var p = new GPoint(
                            centerPt.x + radiusPixels * Math.cos(a * (Math.PI / 180)),
                            centerPt.y + radiusPixels * Math.sin(a * (Math.PI / 180)));
                            
                        circlePoints.push(normalProj.fromPixelToLatLng(p, newZoom));
                    }
                    
                    spotlight = new GPolyline(circlePoints, color, weight, alpha);
                    
                    map.addOverlay(spotlight);
                }
            });
        }
        else
        {
            //map.addControl(new GOverviewMapControl());
            map.addControl(new GScaleControl());
        }
        
        // approximate bounds based on average of 111km per degree of latitude
        var offset = radius > 0 ? radius / 111 : 0.01;
        var bounds = new GLatLngBounds(
            new GLatLng(center.lat() - offset, center.lng() - offset),
            new GLatLng(center.lat() + offset, center.lng() + offset));
        var zoom = map.getBoundsZoomLevel(bounds);
        
        map.setCenter(center, zoom); 
        
        mgr = new GMarkerManager(map);

        if (data != null && data.length > 0)
        {
            var haulsToPlot = data.split("!sep!");
            
            // extract data
            for(var i = 0; i < haulsToPlot.length; i = i + 15)
            {
                var haul = {};
                haul.link = haulsToPlot[i + 0];
                haul.company = haulsToPlot[i + 1];
                haul.pickup = haulsToPlot[i + 2];
                haul.image = haulsToPlot[i + 3];
                haul.logo = haulsToPlot[i + 4];
                haul.source = haulsToPlot[i + 5];
                haul.target = haulsToPlot[i + 6];
                haul.type = haulsToPlot[i + 7];
                haul.details = haulsToPlot[i + 8];
                haul.usdot = haulsToPlot[i + 9];
                haul.mcno = haulsToPlot[i + 10];
                haul.status = haulsToPlot[i + 11];
                var point = new GLatLng(
                    haulsToPlot[i + 12],  // latitude
                    haulsToPlot[i + 13]); // longitude
                var template = haulsToPlot[i + 14];
                
                var marker = markers[point.toUrlValue()];
                
                if (marker == null)
                {
                    var icon = new GIcon();

                    if (template == "load" || template == "truck")
                    {
                        icon.image = "/images/maps/map-icon-" + template + ".png";
                        icon.iconSize = new GSize(30, 22);
                        icon.iconAnchor = new GPoint(10, 10);
                        icon.infoWindowAnchor = new GPoint(10, 10);
                    }
                    else
                    {
                        icon.image = "http://maps.google.com/mapfiles/marker.png";
                        icon.shadow = "http://maps.google.com/mapfiles/shadow50.png";
                        icon.iconSize = new GSize(12, 20);
                        icon.shadowSize = new GSize(22, 20);
                        icon.iconAnchor = new GPoint(6, 20);
                        icon.infoWindowAnchor = new GPoint(5, 1);
                    }
                        
                    marker = new GMarker(point, icon);
                    marker.hauls = [];
                    marker.index = 0;
                    markers[point.toUrlValue()] = marker;
                    mgr.addMarker(marker, 3);
                    
                    GEvent.addListener(marker, "click", marker.showInfoWindow);
                }
                
                marker.hauls.push(haul);
            }
        }
        
        window.setTimeout(function() { map.setCenter(center, zoom); }, 0);
    }
}

GMarker.prototype.showInfoWindow = function()
{
    var haul = this.hauls[this.index];
    var html = "";
    var tabs = [];
    
    var navBar = "<div style='float:top;padding-bottom:1em;'>";
    navBar += "<img alt='previous' src='../Images/maps/left.jpg'"
    navBar += " style='cursor:pointer;padding-right:0.75em;'"
    navBar += " onclick='markers[\"" + this.getPoint().toUrlValue() + "\"].showPrev();'";
    navBar += " />";
    navBar += "<img alt='next' src='../Images/maps/right.jpg'"
    navBar += " style='cursor:pointer;padding-right:0.75em;'"
    navBar += " onclick='markers[\"" + this.getPoint().toUrlValue() + "\"].showNext();'";
    navBar += " />";
    navBar += "<span>";
    navBar += "Posting <b>" + (this.index + 1) + "</b>"
    navBar += " of <b>" + this.hauls.length + "</b>";
    navBar += " from <b>" + haul.source + "</b>.";
    navBar += "</span>";
    navBar += "</div>"
    
    var linkHtml = "<div style='padding-top:1em;'>";
    linkHtml += "<a target='_blank'";
    linkHtml += " href='" + haul.link + "'";
    linkHtml += " title='View this posting in a new window.'";
    linkHtml += ">Full Screen Details</a>";
    linkHtml += "</div>";
    
    html = "<div style='font-family:Verdana;font-size:8pt;text-align:left;'>";
    html += navBar;
    html += "<div style='float:left;'>";
    html += "<img alt='" + haul.target + "'";
    html += " src='" + haul.image + "'";
    html += " style='height:100px;width:150px;'";
    html += " />";
    html += "</div>";
    html += "<div style='float:left;padding-top:0.5em;padding-left:1em;width:20em;'>";
    html += "<div style='font-weight:bold;'>" + haul.target + "</div>";
    html += "<div style='color:red;font-weight:bold;'>" + haul.status + "<br/></div>";
    html += "<div>";
    html += "<span style='float:left;width:3.5em;'>Type:</span>";
    html += "<span style='font-weight:bold;'>" + haul.type + "</span>";
    html += "</div>";
    html += "<div>";
    html += "<span style='float:left;width:3.5em;'>Date:</span>";
    html += "<span style='font-weight:bold;'>" + haul.pickup + "</span>";
    html += "</div>";
    html += linkHtml;
    html += "</div>";
    html += "</div>";
    tabs.push(new GInfoWindowTab("Posting", html));

    html = "<div style='font-family:Verdana;font-size:8pt;text-align:left;'>";
    html += navBar;
    html += "<span style='float:left;'>";
    html += "<img alt='" + haul.company + "'";
    html += " src='" + haul.logo + "'";
    html += " style='height:100px;width:150px;'";
    html += " />";
    html += "</span>";
    html += "<div style='float:left;padding-top:0.5em;padding-left:1em;width:20em;'>";
    html += "<div style='font-weight:bold;padding-bottom:1em;'>" + haul.company + "</div>"
    html += haul.usdot.length == 0 ? "<br/>" :
        ("<div><span style='float:left;width:4.5em;'>US DOT</span>" +
        "<span style='font-weight:bold;'>#" + haul.usdot + "</span></div>");
    html += haul.mcno.length == 0 ? "<br/>" :
        ("<div><span style='float:left;width:4.5em;'>US MC</span>" +
        "<span style='font-weight:bold;'>#" + haul.mcno + "</span></div>");
    html += linkHtml;
    html += "</div>";
    html += "</div>";
    tabs.push(new GInfoWindowTab("Company", html));

    if (haul.details != null && haul.details.length > 0)
    {
        html = "<div style='font-family:Verdana;font-size:8pt;text-align:left;'>";
        html += navBar;
        html += "<div style='height:5.5em;text-align:justify;width:35em;'>"
        html += haul.details.replace(/\n/g, "<br/>");
        html += "</div>";
        html += "<div style='text-align:center;'>";
        html += linkHtml;
        html += "</div>";
        html += "</div>";
        
        tabs.push(new GInfoWindowTab("Details", html));
    }
    
    this.openInfoWindowTabsHtml(tabs);
}

GMarker.prototype.showPrev = function()
{
    this.index--;
    
    if (this.index < 0)
    {
        this.index = 0;
    }
    
    this.showInfoWindow();
}

GMarker.prototype.showNext = function()
{
    this.index++;
        
    if (this.index >= this.hauls.length)
    {
        this.index = this.hauls.length - 1;
    }
    
    this.showInfoWindow();
}