window.addEvent('domready', function() {

    var latlng = new google.maps.LatLng(52.5, 4.9);
    var markersOverlay = [];
    var infowindow = null;
    var myOptions = {
        zoom: 7,
        streetViewControl: true,
        center: latlng,
        scrollwheel: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map( $('locationSearchGoogleMaps'), myOptions);

    //set search events
    if ( $( 'searchLocations' ) ) {
        $( 'searchLocations' ).addEvent( 'click', function( searchElement ){
            //do ajax request
            var myRequest = new Request( {
                url: '/Request/html/location/searchForLocations.html',
                method: 'post',
                data: $('locationForm'),
                onRequest: function() {
                    $( 'locationSearchPreloader' ).setStyle( 'display', 'block' );
                },
                onSuccess:  function( response ) {
                    jsonData = JSON.decode( response );
                    $( 'locationSearchPreloader' ).setStyle( 'display', 'none' );
                    $( 'locationSearchResults' ).set( 'html', jsonData.locations );

                    //remove old markers
                    if ( markersOverlay != '' ) {
                        for ( j = 0; j < markersOverlay.length; j++ ) {
                            if ( markersOverlay[j] ) {
                                markersOverlay[j].setMap(null);
                            }
                        }
                        markersOverlay.length = 0;
                    }

                    //add new markers
                    for ( var i = 0; i < jsonData.maps.length; i++ ) {
                        if ( jsonData.maps[i].location_longitude && jsonData.maps[i].location_longitude ) {

                            if ( jsonData.maps[i].location_companyname )
                                var textContent = "<div style='height: 150px; color: #000;'><strong>" + jsonData.maps[i].location_companyname + "</strong><br />";
                            else
                                var textContent = "<div style='height: 150px; color: #000;'><strong>" + jsonData.maps[i].location_date + "</strong> <small>van " + jsonData.maps[i].location_time_start + " tot " + jsonData.maps[i].location_time_end + "</small><br />";

                            var textContent = textContent + jsonData.maps[i].location_street + " " + jsonData.maps[i].location_street_number + jsonData.maps[i].location_street_number_add + "<br />";
                            var textContent = textContent + jsonData.maps[i].location_zipcode + " " + jsonData.maps[i].location_city + "<br />";
                            if ( jsonData.maps[i].location_email )
                                var textContent = textContent + "E-mail: <a href='mailto: " + jsonData.maps[i].location_email + "'>" + jsonData.maps[i].location_email + "</a><br />";
                            if ( jsonData.maps[i].location_website )
                                var textContent = textContent + "Website: <a href='" + jsonData.maps[i].location_website + "'>" + jsonData.maps[i].location_website + "</a><br />";
                            if ( jsonData.maps[i].location_phone )
                                var textContent = textContent + "Telefoon: " + jsonData.maps[i].location_phone + "<br />";
                            if ( jsonData.maps[i].location_fax )
                                var textContent = textContent + "Fax: " + jsonData.maps[i].location_fax + "<br />";
                            if ( jsonData.maps[i].location_mobile )
                                var textContent = textContent + "Mobiel: " + jsonData.maps[i].location_mobile + "<br />";
                            if ( jsonData.maps[i].location_description )
                                var textContent = textContent + "<br />" + jsonData.maps[i].location_description;

                            var location = new google.maps.LatLng( jsonData.maps[i].location_latitude, jsonData.maps[i].location_longitude );
                            var image = new google.maps.MarkerImage(
                                '/templates/default/images/gmaps-calendar-marker.png',
                                new google.maps.Size( 25, 32 ),
                                new google.maps.Point( 0, 0 ),
                                new google.maps.Point( 13, 32 )
                            );
                            var image2 = new google.maps.MarkerImage(
                                '/templates/default/images/gmaps-locate-marker.png',
                                new google.maps.Size( 25, 32 ),
                                new google.maps.Point( 0, 0 ),
                                new google.maps.Point( 13, 32 )
                            );
                                
                            if ( jsonData.maps[i].location_datafeed == 'calendar' ) {
                                var marker = new google.maps.Marker({
                                    position: location,
                                    icon: image,
                                    map: map,
                                    html: textContent
                                });
                            } else {
                                var marker = new google.maps.Marker({
                                    position: location,
                                    icon: image2,
                                    map: map,
                                    html: textContent
                                });
                            }
                            markersOverlay.push(marker);

                            var infowindow = new google.maps.InfoWindow({
                                content: "handler"
                            });

                            google.maps.event.addListener( marker, 'click', function() {
                                infowindow.setContent( this.html );
                                infowindow.open( map, this );
                            });
                        }
                    }

                    //add click events to the list
                    $$( '.locationElement' ).each( function( element, index ) {
                        element.addEvent( 'click', function( object ) {
                            google.maps.event.trigger(markersOverlay[index], "click");
                            object.stop();
                        });
                    });
                }
            }).send();

            if ( searchElement )
                searchElement.stop();
        });
    }

    //load all locations
    if ( $( 'searchLocations' ) ) {
        $( 'searchLocations' ).fireEvent( 'click' );
    }

});