PA Locator

locator.js

window.PA = window.PA || {};

PA.locator = {

	sampleJson:  [{"first_name":"Vance","last_name":"Nitzsche","degrees":null,"credential":"Award Winner","medical_school":'Mizzou',"primary_specialty":"Internal Medicine","secondary_specialty":null,"residency":"Johns Hopkins","practice":{"name":"Laudantiumearum","phone_number":null,"office_hours":null,"external_url":null,"address":{"city":"Boulder","lat":null,"long":null,"state":"CO","street":"1539 Pearl","zip_code":"80302"}}},{"first_name":"Vance","last_name":"Nitzsche","degrees":null,"credential":"Award Winner","medical_school":'Mizzou',"primary_specialty":"Internal Medicine","secondary_specialty":null,"residency":"Johns Hopkins","practice":{"name":"Laudantiumearum","phone_number":null,"office_hours":null,"external_url":null,"address":{"city":"Boulder","lat":null,"long":null,"state":"CO","street":"4930 Meredith","zip_code":"80303"}}}],
	emptyJson: [],
	
	resultsPoints: [],
	
	// main search function, fires on submit
	search: function(e) {
		var $form = $(e.target),
			query = $form.serialize(),
			self = this;
		self.searchTerm = $form.find('input[name=name]').val();
		if(self.validate($form)) {
			self.showSearching();
			$.ajax({
				data: $('form.locator').serialize(),
				dataType: 'jsonp',
				type: 'get',
				url: $('form.locator').attr('action'),
				success: function(data, textStatus, jqXHR) {
					self.parseResults(data);
				},
				error: function() {
					self.showError();
				}
			});
		}  else {
			self.throwValidationError();
		}
		return false;
	},

	// validate the form
	validate: function(form) {;
		var valid = true;
		$(form).find('input[type=text]').each(function() {
			if(!$(this).val()) {
				valid = false;
			}
		});
		return valid;
	},
	
	// helper for inserting results into the page
	showResults: function(html, callback) {
		var self = this;
		this.results.fadeOut('fast', function() {
			$(this).html(html).fadeIn('fast', function() {
				if(callback && typeof callback == "function") {
					callback();
				}
			});
		});
	},
	
	// show searching
	showSearching: function() {
		this.showResults("<h3>Searching&hellip;</h3>");
	},
	
	
	// throw a validation error
	throwValidationError: function() {
		this.showResults("<h3>To perform a search, please enter some text in the box above.</h3>");
	},
	
	// show no results message
	showNoResults: function() {
		this.showResults("<h3>Sorry, no results found for &ldquo;"+this.searchTerm+"&rdquo;</h3>");
	},
	
	// show connection error
	showError: function() {
		this.showResults("<h3>Sorry, there was a problem during your search, please try again.</h3>");
	},
	
	// parse result data from api
	parseResults: function(data) {
		if(data.length > 0) {
			var $header = $('<h3>'+data.length+' Results for &ldquo;'+this.searchTerm+'&rdquo;</h3>'),
				$results = $('<ul class="locator-results"></ul>');
			for(var i = 0, len = data.length; i < len; i++) {
				$results.append(this.generateResult(data[i], i+1));
			}
			var $map = this.getMap();
			this.showResults($header.add($map).add($results), $.proxy(this.initializeMap, this));
		} else {
			this.showNoResults();
		}
	},
	
	// generate result entry
	generateResult: function(data, index) {
		var template = $('script.result-template').html();
		if(typeof index == "number") {
			data = $.extend(data, {index: index});
		}
		
		html = Mustache.to_html(template, data);
		
		this.codeAddress(data, index);
		
		return html;
	},
	

	// generate the base map
	getMap: function() {
		return this.map = $('<div class="locator" id="map"></div>');
	},
	
	// initialize map
	initializeMap: function() {
		var latlng = new google.maps.LatLng(40.018802, -105.275362),
		myOptions = {
			zoom: 8,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		this.googleMap = new google.maps.Map(this.map[0], myOptions);
		google.maps.event.trigger(this.googleMap, 'resize');
		this.plotResults();
		this.setZoom();
	},
	
	// initialize geocoder
	initGeocoder: function() {
		this.geocoder = new google.maps.Geocoder();
	},
	
	// geocode an address
	codeAddress: function(data, index) {
		var self = this,
			address = data.practice.address.street + ' ' + data.practice.address.city + ' ' + data.practice.address.state;
		this.geocoder.geocode({ 'address': address}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				data = $.extend(data, {location: results[0].geometry.location});
				self.resultsPoints.push(data);
			} else {
		
			}
		});
	},
	
	// plot results on the map
	plotResults: function() {
		for(var i = 0, len = this.resultsPoints.length; i < len; i++) {
			var template = $('script.marker-template').html(),
				html = Mustache.to_html(template, this.resultsPoints[i]);
				this.resultsPoints[i].infowindow = new google.maps.InfoWindow({
					content: html
				});
				this.resultsPoints[i].marker = new google.maps.Marker({
					position: this.resultsPoints[i].location, 
					map: this.googleMap,
					title: this.resultsPoints[i].practice.name,
					index: i,
					icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld='+(i+1)+'|fe796e|000000'
				});
			
			google.maps.event.addListener(PA.locator.resultsPoints[i].marker, 'click', function() {
				PA.locator.resultsPoints[this.index].infowindow.open(PA.locator.googleMap,PA.locator.resultsPoints[this.index].marker);
			});
			
		}
	},
	
	// set zoom level
	setZoom: function() {
		var bounds = new google.maps.LatLngBounds();
		for(var i = 0, len = this.resultsPoints.length; i < len; i++) {
			bounds.extend(this.resultsPoints[i].location);
		}
		this.googleMap.fitBounds(bounds);
	},
	
	// initializer
	init: function() {
		this.results = $('div.locator-results');
		this.initGeocoder();
		$('form.locator').bind('submit', $.proxy(this.search, this));
	}
	
};