//Goal
//  Provides functions to enhance supporters register and edit forms.

//Requires:
//  mootools.V1.00.js


//Add a map to each ".address" (form) element. The map
//is in sync with the address's ".longitude" and ".latitude"
//elements. A marker shows them as a point on the map and
//map-click set their values.
function onFormLoad()
{
    if (GBrowserIsCompatible())
    {
        var addressCpt = 0;
        var geoCoder = new GClientGeocoder();
                
        $ES('.address').forEach(function(addressElement)
        {
            var longitudeElement = addressElement.getElement('.longitude');
            var latitudeElement = addressElement.getElement('.latitude');
            var streetElement = addressElement.getElement('.street');
            var numberElement = addressElement.getElement('.number');
            var zipcodeElement = addressElement.getElement('.zipcode');
            var cityElement = addressElement.getElement('.city');
            
            //Create an new div with a GMap in it
            var mapElement = new Element('div'); 
            mapElement.id = 'map' + (addressElement.id ? addressElement.id : ++addressCpt);
            mapElement.style.height = addressElement.offsetHeight + 'px';
            mapElement.style.width = "50%";
            mapElement.style.cssFloat = "right";
            mapElement.style.styleFloat = "right";
            mapElement.injectBefore(addressElement);
            var map = new GMap2(mapElement);
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
            
            //If both elements have a value, center to map, with a zoom factor of 15
            //And create a marker for this address element.
            if(longitudeElement.value && latitudeElement.value)
            {
                var point = new GLatLng(latitudeElement.value, longitudeElement.value);
                map.setCenter(point, 15);
                addressElement.marker = new GMarker(point);
                map.addOverlay(addressElement.marker);
            }
            else
            //Else, center the map to the default position (currently hardcoded)
                map.setCenter(new GLatLng(50.75, 4.5), 8);
            
            GEvent.addListener(map, "click", function(marker, point) {
                if (marker) {
                    point = marker.getPoint();
                } else {
                    if(!addressElement.marker)
                    {
                        addressElement.marker = new GMarker(point)
                        map.addOverlay(addressElement.marker);
                    }
                    else
                        addressElement.marker.setPoint(point);
                }
                longitudeElement.value = point.lng();
                latitudeElement.value = point.lat();
                map.panTo(point);
            });
            
            //When lat/long values chaned in the form (if both elements have values)
            // - Create a marker the the address element if it doesn't already exist.
            // - Set this marker position to the values from the elements.
            // - Pan the map to this marker.
            onLatLngChange = function(){
                if(longitudeElement.value && latitudeElement.value)
                {
                    var point = new GLatLng(latitudeElement.value, longitudeElement.value);
                        if(!addressElement.marker)
                        {
                            addressElement.marker = new GMarker(point)
                            map.addOverlay(addressElement.marker);
                        }
                        else
                        addressElement.marker.setPoint(point);
                     map.setCenter(point, 15);
                     map.panTo(point);
                }
                
            };
            
            longitudeElement.addEvent('change', onLatLngChange);
            latitudeElement.addEvent('change', onLatLngChange);

            onAddressChange = function(){
              var address = streetElement.getValue() + ' ' + numberElement.getValue() + ', ' + zipcodeElement.getValue() + ' ' + cityElement.getValue();
              geoCoder.getLatLng(address, function(point){
                if(point)
                {
                  longitudeElement.value = point.lng();
                  latitudeElement.value = point.lat();
                  latitudeElement.fireEvent('change');
                }
              });
            };
                        
            streetElement.addEvent('change', onAddressChange);
            numberElement.addEvent('change', onAddressChange);
            zipcodeElement.addEvent('change', onAddressChange);
            cityElement.addEvent('change', onAddressChange);
        });
    }    
}