// projects.js: Google Maps with project data

document.observe('dom:loaded', function() {
    if ($('minimap'))
        new AOMap('minimap');
    if ($('mainmap'))
        new AOMap('mainmap');
});

var AOMap = Class.create({
    // templates
    pointTpl: new Template('<div class="markertext"><h2>#{name}</h2><div><em><strong>#{date}</strong></em></div><div>#{description}</div><div><a href="#{url}">Lees verder</a></div></div>'),

    initialize: function(div)
    {
        this.mapDiv = div;
        // generate markers
        this.markers = new Hash();
        var markerData = $H($F('markerdata').evalJSON());
        markerData.each(function(m)
        {
            var icon = new GIcon();
            icon.image = m.value.marker;
            icon.iconSize = new GSize(parseInt(m.value.width), parseInt(m.value.height));
            var hotspot = new GPoint(parseInt(m.value.hotspotx), parseInt(m.value.hotspoty));
            icon.iconAnchor = hotspot;
            icon.infoWindowAnchor = hotspot;
            this.markers.set(m.key, icon);
        }.bind(this));
        // initialize Google map
        this.loadMap();
    },

    // load Google map
    loadMap: function()
    {
        if (GBrowserIsCompatible()) {
            document.observe('unload', GUnload, false);
            // coordinates
            var coords = $(this.mapDiv).getAttribute('center').split(',');
            var point = new GLatLng(parseFloat(coords[0]), parseFloat(coords[1]));
            // display map
            this.map = new GMap2($(this.mapDiv));
            // track current marker in map object
            this.map.currentMarker = null;
            if (this.mapDiv == 'minimap') {
                this.map.addMapType(G_PHYSICAL_MAP);
                this.map.setMapType(G_PHYSICAL_MAP);
                this.map.setCenter(point, 11);
            }
            else {
                this.map.addMapType(G_PHYSICAL_MAP);
                G_PHYSICAL_MAP.getMinimumResolution = function () { return 9 };
                G_PHYSICAL_MAP.getMaximumResolution = function () { return 15 };
                G_NORMAL_MAP.getMinimumResolution = function () { return 9 };
                G_NORMAL_MAP.getMaximumResolution = function () { return 15 };
                G_HYBRID_MAP.getMinimumResolution = function () { return 9 };
                G_HYBRID_MAP.getMaximumResolution = function () { return 15 };
                G_SATELLITE_MAP.getMinimumResolution = function () { return 9 };
                G_SATELLITE_MAP.getMaximumResolution = function () { return 15 };
                this.map.addControl(new GLargeMapControl3D());
                this.map.addControl(new GHierarchicalMapTypeControl());
                this.map.addControl(new GScaleControl());
//                this.map.enableScrollWheelZoom();
                this.map.setMapType(G_PHYSICAL_MAP);
                this.map.setCenter(point, 9);
            }

            // add markers
            var points = $F('mapdata').evalJSON();
            points.each(function(p)
            {
                if (this.mapDiv == 'minimap') {
                    var loc = new GLatLng(parseFloat(p.lat), parseFloat(p.lon));
                    var marker = new GMarker(loc, {icon: this.markers.get(p.pointtype), clickable: false});
                    this.map.addOverlay(marker);
                }
                else {
                    if (p.datatype == 'kml') {
                        var kmlData = new GGeoXml('http://www.atelieroverijssel.nl/' + p.kml + '?' + (new Date()).valueOf());
                        this.map.addOverlay(kmlData);
                    }
                    else {
                        var loc = new GLatLng(parseFloat(p.lat), parseFloat(p.lon));
                        var marker = new GMarker(loc, this.markers.get(p.pointtype));
                        this.map.addOverlay(marker);
//                        marker.bindInfoWindowHtml(this.pointTpl.evaluate(p), {maxWidth: 320});
                        GEvent.addListener(marker, 'click', function(m, loc) {
                            // also hide other overlays
                            this.map.closeInfoWindow();
                            if (this.map.currentMarker) {
                                this.map.removeOverlay(this.map.currentMarker.overlay);
                            }
                            if (!m.overlay) {
                                m.overlay = new CustomInfoWindow(m, this.pointTpl.evaluate(p));
                            }
                            this.map.currentMarker = m;
                            this.map.panTo(loc);
                            this.map.addOverlay(m.overlay);
                        }.bind(this, marker));
                    }
                }
            }.bind(this));
/*            GEvent.addListener(this.map, 'click', function(m) {
                if (m == null && this.map.currentMarker) {
                    this.map.removeOverlay(this.map.currentMarker.overlay);
                }
            }.bind(this));*/
        }
    }
});

// the code below is ugly, but we need to get it working before we can dress it up a little

// custom info window for markers
var CustomInfoWindow = function(marker, html) {
    this.marker = marker;
    this.html = html;
    this.offsetX = 21;
    this.offsetY = 150;
}
CustomInfoWindow.prototype = new GOverlay();
CustomInfoWindow.prototype.initialize = function(map) {
    var div = new Element('div', {'class': 'custominfo'}).update(this.html);
    div.insert({'top': '<a href="#" class="custominfoclose"></a>'});
    // offsets based on popup div dimensions
    div.setStyle({
        'position': 'absolute',
        'top': (map.fromLatLngToDivPixel(this.marker.getPoint()).y - this.offsetY) + 'px',
        'left': (map.fromLatLngToDivPixel(this.marker.getPoint()).x - this.offsetX) + 'px'
    });
    div.observe('click', function(e)
    {
        this.removeOverlay(this.currentMarker.overlay);
    }.bind(map));
    this.map = map;
    this.infoDiv = div;
    map.getPane(G_MAP_FLOAT_PANE).appendChild(div);
}
CustomInfoWindow.prototype.remove = function(){
    this.infoDiv.parentNode.removeChild(this.infoDiv);
}
CustomInfoWindow.prototype.redraw = function() {
    // must be defined to avoid display bugs
}