// Init google map.
var map = null;
var _markers = null;
var _marker = null;
var _totalMarkers = 0;
var _markersArray = [];
var _markersArrayNr = 0;
var _timer = null;
var _types = new Array(9, 27, 22, 32, 18, 3);
var _mrkNr = 0;

/// Initializes the GoogleMap.
function initGoogleMap() {
    if (GBrowserIsCompatible()) {
        // Sets the map.
        map = new GMap2($get("mapContainer"));

        // Add controls to the map. 
        map.addControl(new GLargeMapControl3D());
        map.addControl(new GMapTypeControl());
        map.addControl(new legendaControl());
        map.enableScrollWheelZoom();
        map.setMapType(G_SATELLITE_MAP);

        // Centers the map to the desired position.
        map.setCenter(new GLatLng(52.059666, 4.9981278), 9);

        // Show waterlinieborder on the map.
        showBelvedereBorder(map);

        // Retrieve the markers.    
        retrieveMarkers();
    }
}

function retrieveMarkers() {
    // Gets the XML document compilated on the PHP server.
    GDownloadUrl("/handlers/GoogleMapsMarkerHandler.ashx?strFile=objectMap", function(data, responseCode) {
        // Check response code.
        if (responseCode == 200) {
            // Get XML data.
            var xml = GXml.parse(data);

            // Get list from XML document.
            _markers = xml.documentElement.getElementsByTagName("object");        
        
            // creates the checkboxes.
            createCheckBoxes();

            // create markers.
            createMarker();
        } else if(responseCode == -1) {
            alert("Data request timed out. Please try later.");
        } else { 
            alert("Request resulted in error. Check XML file is retrievable.");
        }
    });    
}
/// Creates the checkboxes which are used for toggling the object types.
function createCheckBoxes() {
    var legendaArray = [];
    var legendaNr = 0;
    var k = 0;

    if (_markers != null) {
        // checks whether or not a type is present on the map.
        // should it be present, add it to the array of types.
        for (var ii = 0; ii < _types.length; ii++) {
            for (var i = 0; i < _markers.length; i++) {
                if (_types[ii] == _markers[i].getElementsByTagName("objectTypeId")[0].firstChild.data) {
                    // adds ObjectTypeID and ObjectType-name to the array.
                    legendaArray[k] = (_markers[i].getElementsByTagName("objectTypeId")[0].firstChild.data + "/" + _markers[i].getElementsByTagName("objectTypeOmschrijving")[0].firstChild.data);
                    k++;
                    break;
                }
            }
        }
        // Creates the ability to toggle object whithout a primary type. (overig)
        for (var j = 0; j < _markers.length; j++) {
            for (var jj = 0; jj < _types.length; jj++) {
                if (_types[jj] != _markers[j].getElementsByTagName("objectTypeId")[0].firstChild.data) {
                    legendaArray[k] = ("-1/Overig");
                    break;
                }
            }
        }

        // Sort array.
        //legendaArray.sort();

        // Create checkboxes.
        for (var i = 0; i < legendaArray.length; i++) {
            var chars = legendaArray[i].split("/");
            createCheckBox(chars[1], chars[0]);
        }
    }
}
/// Create a check legendaBox.
function createCheckBox(objectTypeOmschrijving, objectTypeId) {
    // Placeholder for the legenda.
    var legendaBox = $get("legendaBox");

    try {
        var cb = document.createElement("<input name=\"marker\" id=\"lgd_" + objectTypeId + "\" type=\"checkbox\" onclick=\"toggleLegenda(this.checked, this.id)\" style=\"margin-right:5px;\" checked>");
    } catch (e) {
        var cb = document.createElement("input");
        cb.type = "checkbox";
        cb.id = "lgd_" + objectTypeId;
        cb.setAttribute("onclick", "toggleLegenda(this.checked, this.id)");
        cb.checked = true;
    }

    var text = document.createTextNode(objectTypeOmschrijving);
    var br = document.createElement("br");

    // Set the checkbox.
    legendaBox.appendChild(cb);
    legendaBox.appendChild(text);
    legendaBox.appendChild(br);
}
/// Toggle legenda.
function toggleLegenda(checked, id) {
	if (id.indexOf("lgd_") == 0) {
        // choosen checkbox (type).
        var lgdId = id.replace("lgd_", "");
        // reset the marker.
        _marker = null;
        var hasPrimaryType = false;

        //  make sure the markerset is not empty.
        if (_markers != null) {
            // Checks whether or not the current marker should be shown or hidden.
            for (var i = 0; i < _markers.length; i++) {
                // -1 stand for all non-primary types.
                if (lgdId == -1) {
                    hasPrimaryType = false;
                    for (var jj = 0; jj < _types.length; jj++) {
                        // Loop trhough all types, should it have a primary type stop the loop.
                        if (_types[jj] == _markers[i].getElementsByTagName("objectTypeId")[0].firstChild.data) {
                            hasPrimaryType = true;
                            break;
                        }
                    }
                    // If the marker has no primary type.
                    if (hasPrimaryType == false)
                        _marker = _markers[i];
                } else if (_markers[i].getElementsByTagName("objectTypeId")[0].firstChild.data == lgdId) {
                    _marker = _markers[i];
                }

                // Add or remove markers.        
                if (checked && _marker != null) {
                    addMarkers();
                } else if (_marker != null) {
                    removeMarkers();
                }
            }
        }
    }
}
/// Remove the markers.
function removeMarkers() {
    // Remove markers based on the selected lgdId.
    if (_marker != null) {
        for (var i = 0; i < _markersArray.length; i++) {
            if (_markersArray[i][0] == _marker.getElementsByTagName("objectId")[0].firstChild.data) {
                map.removeOverlay(_markersArray[i][1]);
            }
        }
    }
}
/// Add the markers.
function addMarkers() {
    // Add markers based on the selected lgdId.
    if (_marker != null) {
        for (var i = 0; i < _markersArray.length; i++) {
            if (_markersArray[i][0] == _marker.getElementsByTagName("objectId")[0].firstChild.data) {
                map.addOverlay(_markersArray[i][1]);
            }
        }
    }
}
/// Create the marker.
function createMarker() {
    // Set reference to list.
    _marker = _markers[_mrkNr];

    if (!isIgnorable(_marker)) {        
        // set lat, lon and type.
        var lat = _marker.getElementsByTagName("lat")[0].firstChild.data;
        var lon = _marker.getElementsByTagName("lon")[0].firstChild.data;
        var type = _marker.getElementsByTagName("objectTypeId")[0].firstChild.data;

        if (parseFloat(lat) > 0 && parseFloat(lon) > 0) {
            // Create point.
            var point = new GLatLng(parseFloat(lat), parseFloat(lon));

            // Create Icon.
            var icon = new GIcon();
            if (type == 9) { icon.image = 'http://www.hollandsewaterlinie.nl/_images/googleMaps/orange_MarkerF.png'; }
            else if (type == 27) { icon.image = 'http://www.hollandsewaterlinie.nl/_images/googleMaps/paleblue_MarkerS.png'; }
            else if (type == 22) { icon.image = 'http://www.hollandsewaterlinie.nl/_images/googleMaps/green_MarkerL.png'; }
            else if (type == 32) { icon.image = 'http://www.hollandsewaterlinie.nl/_images/googleMaps/blue_MarkerV.png'; }
            else if (type == 18) { icon.image = 'http://www.hollandsewaterlinie.nl/_images/googleMaps/pink_MarkerK.png'; }
            else if (type == 3) { icon.image = 'http://www.hollandsewaterlinie.nl/_images/googleMaps/yellow_MarkerB.png'; }
            else { icon.image = 'http://www.hollandsewaterlinie.nl/_images/googleMaps/marker.png'; }

            // Positioning of the icon.
            icon.iconAnchor = new GPoint(14, 25);
            icon.infoWindowAnchor = new GPoint(14, 14);

			// Size of the icon.
			if (type == 9) { new GSize(32, 30); }
			else if (type == 27) { new GSize(38, 21); }
			else if (type == 22) { new GSize(30, 21); }
            else if (type == 32) { new GSize(41, 34); }
            else if (type == 18) { new GSize(34, 37); }
            else if (type == 3) { new GSize(34, 26); }
            else { new GSize(24, 29); }

            // Set an image if available.
                if (_marker.getElementsByTagName("beeldId")[0].firstChild.data != '0')
                    var beeld = '<img height=100 src="http://kennisloket.waterliniekennis.nl/PHP_JPEG_Metadata_Toolkit/get_ps_thumb.php?filename=../media/beeldenbank/beelden/' + _marker.getElementsByTagName("beeldId")[0].firstChild.data + '.jpg" />';                
                else
                    var beeld = '&nbsp;';
			
			// Content of the marker.
            //var html = '<html><table class="gmInfoWindowTable"><tr><td><table><tr><td><strong>' + _marker.getElementsByTagName("naam")[0].firstChild.data + '</strong></td></tr><tr><td><table><tr><td><a href="/pages/detail-objecten-op-kaart.aspx?id=' + _marker.getElementsByTagName("objectId")[0].firstChild.data + '">Meer Info</a></td></tr><tr><td>Type: ' + _marker.getElementsByTagName("objectTypeOmschrijving")[0].firstChild.data + '</td></tr><tr><td>Gemeente: ' + _marker.getElementsByTagName("gemeente")[0].firstChild.data + '</td></tr></table></td><td><img height=100 src="' + 'http://kennisloket.waterliniekennis.nl/PHP_JPEG_Metadata_Toolkit/get_ps_thumb.php?filename=../media/beeldenbank/beelden/' + _marker.getElementsByTagName("beeldId")[0].firstChild.data + '.jpg" /></td></tr></table></html>';
            var html = '<table class="gmInfoWindowTable" border="0" cellspacing="0" cellpadding="5"><tr><td colspan="2" height="30"><a href="/pages/detail-objecten-op-kaart.aspx?id=' + _marker.getElementsByTagName("objectId")[0].firstChild.data + '"><strong>' + _marker.getElementsByTagName("naam")[0].firstChild.data + '&nbsp;&gt;&gt;</strong></a></td></tr><tr><td><p><!-- Type: -->' + _marker.getElementsByTagName("objectTypeOmschrijving")[0].firstChild.data + '</p><p><!-- Gemeente: -->' + _marker.getElementsByTagName("gemeente")[0].firstChild.data + '</p></td><td>' + beeld + '</td></tr></table>';
			var tooltip = _marker.getElementsByTagName("naam")[0].firstChild.data;

            // Add marker to _map.
            var marker = new GMarker(point, icon);
            GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(html);
            });
            GEvent.addListener(marker, 'mouseover', function() {
                marker.openToolTip(tooltip);
            });
            GEvent.addListener(marker, 'mouseout', function() {
                marker.closeToolTip();
            });

            // Init and fill array.
            _markersArray[_markersArrayNr] = new Array(2);
            _markersArray[_markersArrayNr][0] = _markers[_mrkNr].getElementsByTagName("objectId")[0].firstChild.data;
            _markersArray[_markersArrayNr][1] = marker;
            _markersArrayNr++;

            // Add marker to map.
            map.addOverlay(marker);
        }

        _mrkNr++;

        if (_mrkNr < _markers.length) {
            // Should there be any trouble with the markers, this timeout could be set.
            //setTimeout('createMarker()', 25);
            createMarker();
        }
    }
}
/// FF 3.0 Whitespace in the DOM issue functions.
/// https://developer.mozilla.org/en/Whitespace_in_the_DOM
function isAllWhitespace(nod) {
    // Use ECMA-262 Edition 3 String and RegExp features.
    return !(/[^\t\n\r ]/.test(nod.data));
}
// Check if node is a comment or text node.
function isIgnorable(nod) {
    var isWhite = isAllWhitespace(nod);
    
    return (nod.nodeType == 8) || // A comment node
         ((nod.nodeType == 3) && isAllWhitespace(nod)); // a text node, all ws.
}
/// Initiate legenda control.
function legendaControl() { };
legendaControl.prototype = new GControl();
legendaControl.prototype.initialize = function(map) {
    // Get legenda control
    var legendaCtrl = $get("legendaControl");

    // Get legenda button.
    var legendaBtn = document.createElement("div");
    legendaBtn.id = "legendaControlButton";
    legendaBtn.title = "Vink type objecten aan/uit";

    // Create element container.
    var legendaCtrlContainer = document.createElement("div");
    legendaCtrlContainer.id = "legendaControlContainer";

    // Create element with text.
    var legendaCtrlText = document.createElement("div");
    legendaCtrlText.id = "legendaControlText";

    // Append text element to container.
    legendaCtrlContainer.appendChild(document.createTextNode("filter"));

    // Append container and text.
    legendaBtn.appendChild(legendaCtrlContainer);
    legendaBtn.appendChild(legendaCtrlText);

    // Register Event handlers.
    legendaCtrl.onmouseover = showlegendabox;
    legendaCtrl.onmouseout = closelegendabox;

    // Insert the button just after legendaControl div.
    legendaCtrl.insertBefore(legendaBtn, $get("legendaBox"));

    // Remove the whole div from its location and reinsert it to the _map
    map.getContainer().appendChild(legendaCtrl);

    // Return the control.
    return legendaCtrl;
}
/// Position legenda control.
legendaControl.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(325, 30));
}
/// Show legendaBox with legendas.
function showlegendabox() {
    // clear time out.
    if (window._timer)
        clearTimeout(_timer);

    // Get legendaBox and set display to block.
    $get("legendaBox").style.display = "block";
}
/// Close legenda legendaBox.
function closelegendabox() {
    // Get legendabox.
    var legendaBox = $get("legendaBox");

    // Set display none.
    _timer = window.setTimeout(function() {
        legendaBox.style.display = "none";
    }, 400);
}

Sys.Application.add_load(initGoogleMap);