var __mapElemendId = "projectmap";

// A Rectangle is a simple overlay that outlines a lat/lng bounds on the
// map. It has a border of the given weight and color and can optionally
// have a semi-transparent background color.
function Rectangle(bounds, opt_weight, opt_color) {
  this.bounds_ = bounds;
  this.weight_ = opt_weight || 0;
  this.color_ = opt_color || "#888888";
}
Rectangle.prototype = new GOverlay();

// Creates the DIV representing this rectangle.
Rectangle.prototype.initialize = function(map) {
  // Create the DIV representing our rectangle
  var div = document.createElement("div");
  div.style.border = this.weight_ + "px solid " + this.color_;
  div.style.position = "absolute";

  // Our rectangle is flat against the map, so we add our selves to the
  // MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
  // below the marker shadows)
  map.getPane(G_MAP_MAP_PANE).appendChild(div);

  this.map_ = map;
  this.div_ = div;
  this.div = this.div_.appendChild(document.createElement("div"));
      this.div.style.position = "relative";
      this.div.style.width = "200px";
      this.div.style.height = "20px";
      this.div.style.left = "-100px";
      this.div.style.top = "-10px";
      this.div.style.textAlign = "center";
}

// Remove the main DIV from the map pane
Rectangle.prototype.remove = function() {
  this.div_.parentNode.removeChild(this.div_);
}

// Copy our data to a new Rectangle
Rectangle.prototype.copy = function() {
  return new Rectangle(this.bounds_, this.weight_, this.color_,
                       this.backgroundColor_, this.opacity_);
}

// Redraw the rectangle based on the current projection and zoom level
Rectangle.prototype.redraw = function(force) {
  // We only need to redraw if the coordinate system has changed
  if (!force) return;
  if (this.map_.getZoom() < 10) {
    this.div_.style.display = "none";
    return;
  }
  // Calculate the DIV coordinates of two opposite corners of our bounds to
  // get the size and position of our rectangle
  var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Now position our DIV based on the DIV coordinates of our bounds
  this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
  this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
  this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";
  this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";
  
  var fs = 100;
  fs = 100 - (20 * (13 - this.map_.getZoom()));
  if (fs <= 0) fs = 10;
  this.div_.style.fontSize = fs + "%";
  this.div_.style.display = "block";
}

function pascalCase(s)
{
    var parts = s.split(" "), len = parts.length;
    if (len == 1) return parts[0];
    var r = "";
    for (var i = 0; i < len; i++)
        r += parts[i].charAt(0).toUpperCase() + parts[i].substring(1);
    return r;
}

function initGoogleMaps()
{
    if (!GBrowserIsCompatible())
    {
        return;
    }

    var ew;
    var iconSizes = new Array(null, 21, 28, 33 , 44);
    var shadowSizes = new Array(null, 36, 44, 54 , 76);
    var iconAnchors = new Array(null, 12, 15, 18 , 25);
    var infoWindowAnchors = new Array(null, 12, 15, 18 , 25);

    function Icon(project)
    {
        var icon = new GIcon();
        icon.image = "/images/Stip_" + pascalCase(project.theme) + "_" + project.size + ".png";
        icon.shadow = "/images/Stip_Shadow_" + project.size + ".png";
        icon.iconSize = new GSize(iconSizes[project.size], iconSizes[project.size]);
        icon.shadowSize = new GSize(shadowSizes[project.size], shadowSizes[project.size]);
        icon.iconAnchor = new GPoint(iconAnchors[project.size], iconAnchors[project.size]);
        icon.infoWindowAnchor = new GPoint(infoWindowAnchors[project.size], infoWindowAnchors[project.size]);
        return icon;
    }

    function createMarker(point, project)
    {
        //var marker = new GMarker(point, new Icon(project));
        var marker = new GMarker(point, {icon: new Icon(project)});//, title: project.description
        marker.tooltipHtml = project.description;
        GEvent.addListener(marker, "mouseover", function()
            {
                //marker.openInfoWindowHtml(html);
                ew.openOnMarker(marker, "<span style=\"font-size: 70%;font-weight: bold;\">" + project.title + "</span>");
            }
        );
        GEvent.addListener(marker, "mouseout", function()
            {
                //map.closeInfoWindow();
                ew.hide();
            }
        );
        GEvent.addListener(marker, "click", function()
            {
                document.getElementById("pmprdetails").innerHTML = "<a class=\"pmprname\" href=\"" + project.hyperlink + "\">" + project.title + "</a><br /><p class=\"teaser\">" + project.subtitle + "</p><p>" + project.description + "</p>";
                document.getElementById("pmprhyperlink").href = project.hyperlink;
                document.getElementById("pmprhyperlink").innerText = "Link naar het project";
            }
        );
        return marker;
    }


    function addMarker(project)
    {
        geocoder.getLatLng(
            projecten[i].location,
            function(point)
            {
                geocoderLookupCount++;
                if (!point)
                {
                    //window.status += "straat " + project.location + " niet gevonden; ";
                    return;
                }
                // A point was found from the location information
                points[points.length] = point;
                var marker = createMarker(point, project);
                map.addOverlay(marker);
                
                // Comment the following line to enable auto-zoom
                return;
                // Each time a point is found, extend the bounds to include it
                bounds.extend(point);
                if (geocoderLookupCount != projecten.length)
                {
                    return;
                }
                // All points have been looked up
                // Now, determine the zoom level from the bounds
                map.setZoom(map.getBoundsZoomLevel(bounds));
                var clat = (bounds.getNorthEast().lat() + bounds.getSouthWest().lat()) / 2;
                var clng = (bounds.getNorthEast().lng() + bounds.getSouthWest().lng()) / 2;
                var adjust = Math.abs(bounds.getNorthEast().lng() - bounds.getSouthWest().lng()) > 180;
                if(adjust)
                {
                    clng += 180;
                }
                map.setCenter(new GLatLng(clat, clng));
            }
        );
    }

    var geocoderLookupCount = 0;
    var points = new Array();
    var bounds = new GLatLngBounds();
    var geocoder = new GClientGeocoder();
    // Initialize map
    var map = new GMap2(document.getElementById(__mapElemendId));
    window.projectmap = map;
    // It is necessary to make a setCenter call of some description before adding markers
    // At this point we dont know the real values
    map.setCenter(new GLatLng(52.787701, 6.894811), 12);
    // Allow user to pan/zoom the map
    map.addControl(new GLargeMapControl());
    //map.addControl(new GSmallMapControl());
    // Allow user to switch between Map and Satellite modes
    //map.addControl(new GMapTypeControl());
    // Allow user to zoom on double-click
    //map.enableDoubleClickZoom();
    
    map.enableContinuousZoom();
    //alert(map.continuousZoomEnabled());

    // Create an EWindow
    ew = new EWindow(map, E_STYLE_7);      
    map.addOverlay(ew);
    ew.initCenter = map.fromLatLngToDivPixel(map.getCenter());
    ew.center = map.fromLatLngToDivPixel(map.getCenter());

    // ========== Close the EWindow if theres a map click ==========
    GEvent.addListener(map, "mousedown", function(marker, point)
    {
        if (point)
        {
            ew.hide();
        }
    });

    GEvent.addListener(map, "moveend", function()
    {
        ew.center = map.fromLatLngToDivPixel(map.getCenter());
    });

    for (var i = 0; i < projecten.length; i++)
    {
        addMarker(projecten[i]);
    }
}

function window_onunload()
{
    GUnload();
}

window.onunload = window_onunload;