var map;
var latlng;
var marker;
var markers = [];
var infowindow;
var infowindows = [];
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var controlmarkers = new Boolean(false);
var button;

function changeFilter() {
    $('button').parent('.gmnoprint').css({
        'z-index': '',
        'width': '20px'
    });
    $('button').parent().css({ 'filter': '', 'background': 'url(http://maps.gstatic.com/intl/nl_ALL/mapfiles/markerTransparent.png)' });
}

function createMarkerButtons() {
    var button_style = 'width:20px;height:34px;overflow:hidden;border:none;cursor:pointer;position:absolute;background:url(http://maps.gstatic.com/intl/nl_ALL/mapfiles/markerTransparent.png);padding:1px;';
    $('div[title][class="gmnoprint"]').each(function() {
        button = document.createElement('button');
        button.setAttribute('style', button_style);
        button.style.cssText = button_style;
        $(this).append(button);
        $(button).click(function(event) { event.preventDefault(); });
        if ($(this).attr('log')) {
            $(this).style.filter = '';
            $(this).style.background = 'url(http://maps.gstatic.com/intl/nl_ALL/mapfiles/markerTransparent.png)';
        }
    });
    changeFocus();
}

function createControlButtons() {
    var button_style = 'width:20px;height:20px;border:none;cursor:pointer;position:absolute;background:url(http://maps.gstatic.com/intl/nl_ALL/mapfiles/markerTransparent.png);padding:1px;';
    $('div[title][class!="gmnoprint"]').each(function() {
        if ($(this).height() != '169' && $(this).height() != '12') {
            button = document.createElement('button');
            button.setAttribute('style', button_style);
            button.style.cssText = button_style;
            $(this).append(button);
            $(button).click(function(event) { event.preventDefault(); });
            if ($(this).attr('log')) {
                $(this).style.filter = '';
                $(this).style.background = 'url(http://maps.gstatic.com/intl/nl_ALL/mapfiles/markerTransparent.png)';
            }
        }
    });
}

function changeFocus() {
    // set focus for firefox not possible without href
    $('area[title]').each(
		function() {
		    if (!$(this).is('[href]')) {
		        $(this).attr('href', 'javascript:void(0)');
		    }
		});

    // Firefox and Google Chrome focus on markers in area
    $('area').parents('.gmnoprint').children('img').attr('src', 'http://maps.gstatic.com/intl/nl_ALL/mapfiles/markerTransparent.png');
    $('area').focus(function() {
        $(this).parents('.gmnoprint').css({
            'outline': '1px dotted #000000',
            'opacity': '1'
        });
    });
    $('area').blur(function() {
        $(this).parents('.gmnoprint').css({
            'outline': 'none',
            'opacity': '0.01'
        });
    });
    changeFilter();
}

function createMarker(point, map, titel, contentstring) {
    infowindow = new google.maps.InfoWindow({
        content: contentstring
    });
    marker = new google.maps.Marker({
        position: point,
        map: map,
        title: titel
    });

    markers.push(marker);
    infowindows.push(infowindow);

    google.maps.event.addListener(marker, "click", function() {
        infowindow.setContent(contentstring);
        infowindow.open(map, this);
        $('img').css('z-index', '');
        $('.location').parent().css('overflow', 'hidden');
        $('.route-sluiten').click(function(e) {
            $('button').parent('.gmnoprint').css('z-index', '');
            $('button').parent().css({ 'filter': '', 'background': 'url(http://maps.gstatic.com/intl/nl_ALL/mapfiles/markerTransparent.png)' });
            e.preventDefault();
            infowindow.close();
        });
        $('#createDirections').click(function(event) { event.preventDefault(); });
        $('input.route_from').keypress(function(e) {
            if (e.which == 13) {
                showDirections();
            };
        });
    });
}

function showDirections() {
    jQuery("#directions").show();
    jQuery("#directions").html("");
    directionsDisplay.setMap(map);

    var request = {
        origin: jQuery("#route_from").val(),
        destination: 'Anthonie van Leeuwenhoekstraat 18, Oud-Beijerland',
        language: 'nl',
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
        else if (status == google.maps.DirectionsStatus.ZERO_RESULTS) {
            alert("Geen resultaten");
        }
        else if (status == google.maps.DirectionsStatus.NOT_FOUND) {
            alert("Vertrek of Bestemming niet gevonden");
        }
        else {
            alert("Er is een onbekende fout opgetreden");
        }

    });
    setTimeout('createMarkerButtons();', 2000);
}

function hideDirections() {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setVisible(true);
    }
    directionsDisplay.setMap(null);
    jQuery("#directions").hide();
    jQuery("#hidedirections").hide();
    map.setCenter(new google.maps.LatLng(51.828803, 4.438519));
    map.setZoom(13);
    setTimeout('createMarkerButtons();', 2000);
}

function onGDirectionsLoad() {
    for (var i = 0; i < markers.length; i++) {
        infowindows[i].close();
        markers[i].setVisible(false);
    }
    jQuery("#hidedirections").show();
    $('#hidedirections').click(function(event) { event.preventDefault(); });
}

function changemaptype(state) {
    if (state == 0) {
        map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
    }
    else if (state == 1) {
        map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
    }
    else if (state == 2) {
        map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
    }
    else if (state == 3) {
        map.setMapTypeId(google.maps.MapTypeId.HYBRID);
    }
}

function initMap() {
    // set google maps options
	var myLatlng = new google.maps.LatLng(51.828484, 4.438477); // map center position
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        navigationControl: true,
        scaleControl: false,
        mapTypeControl: false, // custom maptype control used
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }

    map = new google.maps.Map($("#locations")[0], myOptions);

    // listeren for keyboard funtionality
    google.maps.event.addDomListener(map, 'tilesloaded', function() {
        if (controlmarkers == false) {
            setTimeout('createControlButtons();', 2000);
            setTimeout('createMarkerButtons();', 2000);
            setTimeout('changeFocus();', 2000);
            controlmarkers = true;
        }
    });

    // listener to set focus on markers (IE only)
    google.maps.event.addDomListener(map, 'idle', function() {
        changeFilter();
    });

    // show direction on the map (initiate new map)
    directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel($("#directions")[0]);
    google.maps.event.addListener(directionsDisplay, 'directions_changed', onGDirectionsLoad);

    // trigger function to hide directions
    $("#hidedirections").live("click", hideDirections);

    // add custom maptype dropdown
    $('#locations').prepend('<select name="DropDownListMaptype" id="DropDownListMaptype" class="DropDownListMaptype" onchange="changemaptype(this.selectedIndex)"><option value="Kaart">Kaart</option><option value="Satelliet">Satelliet</option><option value="Terrein">Terrein</option><option value="Hybrid">Hybrid</option></select>');

    // create markers
    latlng = new google.maps.LatLng(51.828484, 4.438477);
    var titel = "Communited"

    //var id = $("div:first", this).attr("id");
    //id = id.replace("location_", "")
    //var contentString = '<div class="location"><div><strong>' + titel + '</strong><a href="Contact/Routebeschrijving/page.aspx/1103" class="route-sluiten">Sluiten</a></div><div><label for="route_from">Uw adres</label></div><div><input type="text" class="field" name="route_from" id="route_from" /><input class="submit" id="createDirections" type="submit" value="Plan route" onclick="showDirections()"/></div>';
    var contentString = '<div class="location"><div><h3>' + titel + '</h3><a href="#" class="route-sluiten">Sluiten</a></div><div><p>A. van Leeuwenhoekstraat 18<br/>3261LT  Oud-Beijerland</p></div><div><label for="route_from"><h3>Uw adres</h3></label></div><div><input type="text" class="route_from field" name="route_from" id="route_from" /><input class="submit" id="createDirections" type="button" value="Plan route" onclick="showDirections()"/></div>';
    createMarker(latlng, map, titel, contentString);    
    };