$(document).ready(function () {
    function initialize() {

        var testMap = document.getElementById("map");
        if (!testMap)
            return;

        var mapStyle = [
            { featureType: "water", elementType: "all", stylers: [{ visibility: "simplified" }, { lightness: 99}] },
            { featureType: "administrative.country", elementType: "labels", stylers: [{ visibility: "off"}] },
            { featureType: "administrative.province", elementType: "all", stylers: [{ visibility: "off"}] },
            { featureType: "landscape", elementType: "all", stylers: [{ visibility: "on" }, { hue: "#0008ff" }, { saturation: 34 }, { lightness: -4}] },
            { featureType: "road.highway", elementType: "labels", stylers: [{ visibility: "off"}] },
            { featureType: "administrative.province", elementType: "labels", stylers: [{ visibility: "off"}] },
            { featureType: "administrative.locality", elementType: "labels", stylers: [{ visibility: "off"}] },
            { featureType: "administrative.neighborhood", elementType: "labels", stylers: [{ visibility: "off"}] },
            { featureType: "administrative.land_parcel", elementType: "labels", stylers: [{ visibility: "off"}] },
            { featureType: "poi.park", elementType: "all", stylers: [{ hue: "#1100ff" }, { saturation: 0 }, { gamma: 2.51 }, { lightness: -11 }, { visibility: "off"}] },
            { featureType: "road.arterial", elementType: "all", stylers: [{ visibility: "off"}] },
            { featureType: "road.local", elementType: "all", stylers: [{ visibility: "off"}] },
            { featureType: "road", elementType: "all", stylers: [{ visibility: "off"}] },
            { featureType: "all", elementType: "all", stylers: [] },
            { featureType: "landscape.natural", elementType: "all", stylers: [{ visibility: "off"}] },
            { featureType: "administrative", elementType: "all", stylers: [{ visibility: "off"}] },
            { featureType: "poi", elementType: "all", stylers: [{ visibility: "off"}] },
            { featureType: "all", elementType: "all", stylers: [] },
            { featureType: "administrative.country", elementType: "geometry", stylers: [{ visibility: "on" }, { hue: "#0011ff" }, { lightness: 46 }, { saturation: 57}] }
        ];
        var myOptions = {
            zoom: 2,
            center: new google.maps.LatLng(22.000000, 20.000000),
            backgroundColor: "#ffffff",
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: false,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                position: google.maps.ControlPosition.BOTTOM
            },
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.SMALL,
                position: google.maps.ControlPosition.LEFT
            },
            scaleControl: false,
            scaleControlOptions: {
                position: google.maps.ControlPosition.BOTTOM
            }
        }

        var map = new google.maps.Map(document.getElementById("map"), myOptions);

        var styledMapOptions = {
            name: "Palsgaard style"
        }

        var palsgaardMap = new google.maps.StyledMapType(mapStyle, styledMapOptions);
        map.mapTypes.set('Palsgaardstyle', palsgaardMap);
        map.setMapTypeId('Palsgaardstyle');

        setMarkers(map, mapMarkers);
    };

    var iconShadow = new google.maps.MarkerImage('/images/iconShadow.png',
        new google.maps.Size(34, 32),
        new google.maps.Point(0, 0),
        new google.maps.Point(6, 32)
    );

    var infowindow = new google.maps.InfoWindow();

    function createMarker(map, latlng, label, html, icon, zindex) {
        var palIcon = icon;
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            shadow: iconShadow,
            icon: palIcon,
            title: label,
            zIndex: zindex
        });

        google.maps.event.addListener(marker, 'click', function () {
            infowindow.close();
            var contentString = '<table id="markerOverlay"><tr><td id="mapDetail" valign="top"></td><td id="mapInfo" valign="top"><div class="mapInfoContent"><h1 class="mapH1">' + label + '</h1>' + html + '</div></td></tr></table>';
            var detailMapDiv = document.createElement('div');
            detailMapDiv.style.width = '150px';
            detailMapDiv.style.height = '150px';
            // tilknytter det detaljeret kort til det store kort
            document.getElementById('map').appendChild(detailMapDiv);

            // Creating MapOptions for the overview map
            var overviewOpts = {
                zoom: 14,
                center: marker.getPosition(this),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true
            };

            var detailMap = new google.maps.Map(detailMapDiv, overviewOpts);

            // Create a marker that will show in the detail map
            var detailMarker = new google.maps.Marker({
                position: marker.getPosition(this),
                map: detailMap,
                shadow: iconShadow,
                icon: palIcon,
                clickable: false
            });

            // Check to see if an InfoWindow already exists
            if (!infowindow) {
                infoWindow = new google.maps.InfoWindow();
            }

            //Setting the content of the InfoWindow to the detail map
            //infowindow.setContent(detailMapDiv+"<div>"+contentString+"</div>");
            infowindow.setContent(contentString);
            //Opening the InfoWindow

            infowindow.open(map, this);

            // Tager det detaljerede kort og tilknytter infovinduet.
            document.getElementById('mapDetail').appendChild(detailMapDiv);
        });
    };

    function setMarkers(map, locations) {
        // Add markers to the map
        for (var i = 0; i < locations.length; i++) {
            var point = locations[i];
            var myLatLng = new google.maps.LatLng(point[1], point[2]);
            var marker = createMarker(map, myLatLng, point[0], point[5], point[4], point[3]);
        }
    };

    initialize();
});