var that = this;
if (params.fusion) {
	var loadingElement = "<div class='mapsLoading' style='position: absolute; left: 45%; top: 5%; background: #fff; border: 1px solid #000; padding: 5px;'>Loading...</div>";
	elem.append(loadingElement)

	that.fusionRequest(params.fusion.states, 'name, geometry', null);

	google.maps.event.addListener(that.map, 'zoom_changed', function() {
		elem.append(loadingElement)

		var zoomValue = this.getZoom();
		var mapCenter = this.getCenter();

		for (var key in that.polygons) {
			that.polygons[key].setMap(null);
			delete(that.polygons[key]);
		}

		if (zoomValue > 7 && zoomValue < 11) {
			that.fusionRequest(
					params.fusion.cities,
					'name, geometry',
					'WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + mapCenter.lat() + ',' + mapCenter.lng() + '), 100000))'
			);
		} else if (zoomValue <= 7) {
			that.fusionRequest(params.fusion.states, 'name, geometry', null);
		} else if (zoomValue >= 11) {
			that.fusionRequest(
					params.fusion.zip,
					'ZIP, geometry',
					'WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + mapCenter.lat() + ',' + mapCenter.lng() + '), 100000))'
			);
		}
	});

	google.maps.event.addListener(that.map, 'dragend', function() {
		var zoomValue = this.getZoom();
		var mapCenter = this.getCenter();
		var key;

		if (zoomValue > 7 && zoomValue < 10) {
			elem.append(loadingElement)

			for (key in that.polygons) {
				that.polygons[key].setMap(null);
				delete(that.polygons[key]);
			}

			that.fusionRequest(
					params.fusion.cities,
					'name, geometry',
					'WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + mapCenter.lat() + ',' + mapCenter.lng() + '), 100000))'
			);
		} else if (zoomValue >= 10) {
			elem.append(loadingElement)

			for (key in that.polygons) {
				that.polygons[key].setMap(null);
				delete(that.polygons[key]);
			}

			that.fusionRequest(
					params.fusion.zip,
					'ZIP, geometry',
					'WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + mapCenter.lat() + ',' + mapCenter.lng() + '), 100000))'
			);
		}
	});
}



fusionRequest: function(table, select, clause) {
	"use strict";

	$("script.fusionApi").remove();

	var self = this;
	var polygons = this.polygons;
	var colors = ['#00FF00'];
	var script = document.createElement('script');
	script.className = "fusionApi";
	var baseApiUrl = 'https://www.googleapis.com/fusiontables/v1/query?' +
			'key=%your_key_here%' +
			'&callback=drawMap';
	var url = [baseApiUrl];
	url.push('&sql=');
	var query = 'SELECT ' + select + ' FROM ' + table;
	if (clause) {
		query += ' ' + clause;
	}
	var encodedQuery = encodeURIComponent(query);
	url.push(encodedQuery);
	script.src = url.join('');
	var body = document.getElementsByTagName('body')[0];
	body.appendChild(script);

}


window.drawMap = function(data) {
	var rows = data['rows'];
	for (var i in rows) {
		var newCoordinates = [];
		var geometries = rows[i][1]['geometries'];
		if (geometries) {
			for (var j in geometries) {
				newCoordinates.push(constructNewCoordinates(geometries[j]));
			}
		} else {
			newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
		}
		var element = new google.maps.Polygon({
			paths: newCoordinates,
			strokeColor: "#000000",
			strokeOpacity: 0.4,
			strokeWeight: 1,
			fillColor: colors[0],
			fillOpacity: 0.3
		});

		google.maps.event.addListener(element, 'mouseover', function() {
			this.setOptions({fillOpacity: 1});
		});

		google.maps.event.addListener(element, 'mouseout', function() {
			this.setOptions({fillOpacity: 0.3});
		});

		self.onPolyClick(element, rows, i);
		polygons.push(element);
		element.setMap(self.map);
	}
	self.element.find(".mapsLoading").remove();
};

window.constructNewCoordinates = function(polygon) {
	var newCoordinates = [];
	var coordinates = polygon['coordinates'][0];
	for (var i in coordinates) {
		newCoordinates.push(new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
	}
	return newCoordinates;
};