joeconradt/gist:cc79504e663481f4ee75

## gistfile1.txt
<!DOCTYPE html>
<html>
<head>
	<title>Ogilvy</title>
	<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['geochart']}]}"></script>
	<script type="text/javascript">

	var TestData = {
		locationData: {
			"United States":{
				"total":"214",
				"alias":"US",
				"cities":{
					"Sheboygan":"10",
					"Milwaukee":"30",
					"Green Bay":"13",
				}
			},
			"Russia":{
				"total":"45",
				"alias":"RU",
				"cities": {
					"Moscow":"1000"
				}
			},
			"Italy":{
				"total":"5",
				"alias":"IT",
				"cities": {
					"Rome":"5"
				}
			},
			"Germany":{
				"total":"27",
				"alias":"DE",
				"cities": {
					"Berlin":"45",
					"Hamburg":"23",
					"Frankfurt":"39",
					"Munich":"14"
				},
			}
		}
	}

	google.setOnLoadCallback(googleCallback);

	function googleCallback() {
		MapEngine.initWorldMap();
	}

	var MapEngine = {

		locationRequestUrl: "/blocks/dashboard/get_location_data.php",
		locationData: null,
		countryData: null,
		cityData: null,
		geochart: null,
		options: null,
		mapDivId: "regions_div",

		/**
		 *
		 */
		initWorldMap: function(callback) {
			console.log("Method: initWorldMap");
			var self = this;
			// get location data from server
			self.requestLocationData(function(locationData) {
				self.locationData = locationData;
				var options = {
					colorAxis:{minValue:0,colors:["#EDBEBB", "#ee2e24"]},
					region:"world"
				};
				console.log(self);
				self.countryData = self.extractCountryData(locationData);
				self.drawRegionsMap(options, self.countryData);
			});
		},

		/**
		 *
		 */
		initCountryMap: function(country) {
			console.log("Method: initCountryMap");
			var self = this;
			// get location data from server
			self.requestLocationData(function(locationData) {
				self.locationData = locationData;
				var options = {
					displayMode:"markers",
					sizeAxis:{minSize:5,maxSize:20},
					colorAxis:{minValue:0,colors:["#EDBEBB", "#ee2e24"]},
					region:self.locationData[country].alias
				};
				console.log(self);
				self.cityData = self.extractCityData(locationData, country);
				self.drawRegionsMap(options, self.cityData);
			});
		},

		/**
		 * Get the location data from the server, packed together by country and city
		 */
		requestLocationData: function(callback) {
			console.log("Method: requestLocationData");
			// testing
			callback(TestData.locationData);
			return;
			$.getJSON(this.locationRequestUrl)
			.done(function(locationData) {
				callback(locationData);
			})
			.fail(function() {
				console.log("Failed to get location data");
			});
		},

		/**
		 * Draw Google geochart
		 */
		drawRegionsMap: function(options, locationData) {
			console.log("Method: drawRegionsMap");

			var self = this;
			var data = google.visualization.arrayToDataTable(locationData);

			self.geochart = new google.visualization.GeoChart(document.getElementById(self.mapDivId));

			google.visualization.events.addListener(self.geochart, 'select', function(e) {
				var selection = self.geochart.getSelection();
				var country = data.getValue(selection[0].row, 0);
				if(country) {
					self.initCountryMap(country);
				}
			});
			self.eraseMap();
			self.geochart.draw(data, options);
		},
		eraseMap: function() {
			var self = this;
			document.getElementById(self.mapDivId).innerHTML = "";
		},
		extractCountryData: function(locationData) {
			console.log("Method: extractCountryData");
			var data = [["Country", "Scores"]];
			for(var countryName in locationData) {
				data.push([countryName, parseInt(locationData[countryName].total)]);
			}
			return data;
		},
		extractCityData: function(locationData, country) {

			var data = [["City", "Scores"]];
			for(var cityName in locationData[country].cities) {
				data.push([cityName, parseInt(locationData[country].cities[cityName])]);
			}

			return data;
		}
	};

	</script>
</head>
<body>
	<button onclick="MapEngine.initWorldMap()">Back to world</button>
	<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Ogilvy</title>
	<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['geochart']}]}"></script>
	<script type="text/javascript">

	var TestData = {
	locationData: {
	"United States":{
	"total":"214",
	"alias":"US",
	"cities":{
	"Sheboygan":"10",
	"Milwaukee":"30",
	"Green Bay":"13",
	}
	},
	"Russia":{
	"total":"45",
	"alias":"RU",
	"cities": {
	"Moscow":"1000"
	}
	},
	"Italy":{
	"total":"5",
	"alias":"IT",
	"cities": {
	"Rome":"5"
	}
	},
	"Germany":{
	"total":"27",
	"alias":"DE",
	"cities": {
	"Berlin":"45",
	"Hamburg":"23",
	"Frankfurt":"39",
	"Munich":"14"
	},
	}
	}
	}

	google.setOnLoadCallback(googleCallback);

	function googleCallback() {
	MapEngine.initWorldMap();
	}

	var MapEngine = {

	locationRequestUrl: "/blocks/dashboard/get_location_data.php",
	locationData: null,
	countryData: null,
	cityData: null,
	geochart: null,
	options: null,
	mapDivId: "regions_div",

	/**
	*
	*/
	initWorldMap: function(callback) {
	console.log("Method: initWorldMap");
	var self = this;
	// get location data from server
	self.requestLocationData(function(locationData) {
	self.locationData = locationData;
	var options = {
	colorAxis:{minValue:0,colors:["#EDBEBB", "#ee2e24"]},
	region:"world"
	};
	console.log(self);
	self.countryData = self.extractCountryData(locationData);
	self.drawRegionsMap(options, self.countryData);
	});
	},

	/**
	*
	*/
	initCountryMap: function(country) {
	console.log("Method: initCountryMap");
	var self = this;
	// get location data from server
	self.requestLocationData(function(locationData) {
	self.locationData = locationData;
	var options = {
	displayMode:"markers",
	sizeAxis:{minSize:5,maxSize:20},
	colorAxis:{minValue:0,colors:["#EDBEBB", "#ee2e24"]},
	region:self.locationData[country].alias
	};
	console.log(self);
	self.cityData = self.extractCityData(locationData, country);
	self.drawRegionsMap(options, self.cityData);
	});
	},

	/**
	* Get the location data from the server, packed together by country and city
	*/
	requestLocationData: function(callback) {
	console.log("Method: requestLocationData");
	// testing
	callback(TestData.locationData);
	return;
	$.getJSON(this.locationRequestUrl)
	.done(function(locationData) {
	callback(locationData);
	})
	.fail(function() {
	console.log("Failed to get location data");
	});
	},

	/**
	* Draw Google geochart
	*/
	drawRegionsMap: function(options, locationData) {
	console.log("Method: drawRegionsMap");

	var self = this;
	var data = google.visualization.arrayToDataTable(locationData);

	self.geochart = new google.visualization.GeoChart(document.getElementById(self.mapDivId));

	google.visualization.events.addListener(self.geochart, 'select', function(e) {
	var selection = self.geochart.getSelection();
	var country = data.getValue(selection[0].row, 0);
	if(country) {
	self.initCountryMap(country);
	}
	});
	self.eraseMap();
	self.geochart.draw(data, options);
	},
	eraseMap: function() {
	var self = this;
	document.getElementById(self.mapDivId).innerHTML = "";
	},
	extractCountryData: function(locationData) {
	console.log("Method: extractCountryData");
	var data = [["Country", "Scores"]];
	for(var countryName in locationData) {
	data.push([countryName, parseInt(locationData[countryName].total)]);
	}
	return data;
	},
	extractCityData: function(locationData, country) {

	var data = [["City", "Scores"]];
	for(var cityName in locationData[country].cities) {
	data.push([cityName, parseInt(locationData[country].cities[cityName])]);
	}

	return data;
	}
	};

	</script>
	</head>
	<body>
	<button onclick="MapEngine.initWorldMap()">Back to world</button>
	<div id="regions_div" style="width: 900px; height: 500px;"></div>
	</body>
	</html>