/* Plugin to insert proximity search module onto a page.
 * Expects a DOM element that is parent to the proximity search field
 */

(function($) {
    $.fn.proximitySearch = function(settings) {
    	if (!this.length) {
    		return;
    	}
        if (!$(this).children('input')) {
            return;
        } else {
            var proximityInput = $(this).children('input')[0];
        }
        
    	settings = jQuery.extend({
    		min: 0,
    		max: 20,
    	    step: 0.5,
    	    unit: 'mile',
    		units: 'miles',
    		preText: 'within ', // text to display before value and unit(s)
            postText: '',     // text to display after value and unit(s)
    		helpText: 'Drag slider to expand/shrink search area. Click and drag map to move search area.'
    	}, settings);
    
    	//setup elements and hide inputs
    	$(this).append('<div id="proximity-search-map"><!-- Google Map --></div>')
               .append('<span class="proximity-search-help-text">' + settings.helpText + '</span>')
               .append('<div id="proximity-search-slider"></div>')
               .append('<div class="proximity-search-slider-values">' + settings.preText + '<span id="proximity-search-radius-val">0</span> <span id="proximity-search-radius-unit">' + settings.units + '</span></div>');
        var proximityMap = initMap($(this).children('#proximity-search-map')[0]);
        // Create a slider for the radius of the circle
        $(this).children('#proximity-search-slider').slider({
            min: settings.min,
            max: settings.max,
            step: settings.step,
            slide:function(e,ui){
              updateText(ui.value, settings.units, settings.unit);
              redrawCircle(proximityMap);
            }
        });
        //Initialize slider and events
        GEvent.addListener(proximityMap, "move", function(){
                redrawCircle(proximityMap);
        });
        // Setup slider if data already exists
        var proximityData = $(proximityInput).val();
        if (proximityData) {
            var prxArray = proximityData.split(',');
            var radius = prxArray[2];
            proximityMap.setCenter(new GLatLng(prxArray[0], prxArray[1]));
            $('#proximity-search-slider').slider('value', radius);
            // jQuery trigger not working for slider
            updateText(radius, settings.units, settings.unit);
            redrawCircle(proximityMap);
       }

    };

    function updateText(value, units, unit) {
        if (value == 1) {
            units = unit;                
        }
        $('#proximity-search-radius-val').text(value);
        $('#proximity-search-radius-unit').text(units);
    };

    function redrawCircle(proximityMap) {
        // Remove existing circle, redraw, and set hidden input
        proximityMap.clearOverlays();
        var radius = $('#proximity-search-radius-val').text();
        if (radius == 0) {
            $('#id_proximity').val('');
            return;
        }
        var circle = new CircleOverlay(proximityMap.getCenter(), radius, '#0055ff', 2, 0.7, '#0055ff', 0.3);
        proximityMap.addOverlay(circle);
        var newZoom = proximityMap.getBoundsZoomLevel(circle.polygon.getBounds());
        if (newZoom < proximityMap.getZoom()) {
            proximityMap.setZoom(newZoom);
        }
        var shortLat = proximityMap.getCenter().lat().toFixed(3);
        var shortLng = proximityMap.getCenter().lng().toFixed(3);
        $('#id_proximity').val(shortLat + ',' + shortLng + ',' + radius);
    };
    

})(jQuery); 

function proximityShowHide(initial) {
    /* Show/hide the proximity search based on the state of a #proximity-enable checkbox.
     * When initial is true, check if there is data in the #id_proximity input and hide the
     * #proximity-search element if it is empty
     */
    if (initial=="initial" && $('#id_proximity').val()) {
        $('#proximity-enable').attr('checked', 'checked');
    }
    if ($('#proximity-enable').is(':checked')) {
       $('#id_proximity').attr('name', 'proximity');
       $('#proximity-search').show();
    } else {
        $('#proximity-search').hide();
        $('#id_proximity').attr('name', 'proximity_disabled');
    }
}