var demographicCharting = (function() {
	
	var latitude = null;
	var longitude = null;
	var isLoaded = false;
	var id = null;
	
	var tooltips = [
		'Total number of people in the area in 2016.', // Population in 2016
		'The total number of private dwellings in the area.', // Total private dwellings		
		'The total area of the property in square kilometeres.', // Land area (square km)
		'The average number of people in a household. A household is a grouping of people living together in a common space.', // Average Household Size
		'The combined gross income of all the members of a household who are 15 years and older. Individuals do not have to be related to be considered members of the same household.', // Average Household Income
		'The total number of households in the area. A household is a grouping of people living together in a common space.', // Number of Households
		'The total number of the people in the area who are 15 years and older and are not part of the labour force. Includes those looking for work, seniors, and students.' // Not in the Labour Force
	];
	
	var units = [
	     ['', ''],
	     ['', ''],
	     ['<span class="nowrap">', ' km<sup>2</sup></span>'],
	     ['', ''],
	     ['$', ''],
	     ['', ''],
	     ['', '']
	];
	
	var chartColours = [
        '#7ECDE6',
        '#5B801C',
        '#BF76A4',
        '#FFCB47',
        '#5B6967',
        '#FF7457',
        '#8EA3A0',
        '#84F09D',
        '#9E5A4F',
        '#7E81E7',
        '#E3C488',
        '#5394F4',
        '#FFAAAA',
        '#da4554'
   ];
	
	function init(id, lat, long) {
		this.id = id;
		this.latitude = lat;
		this.longitude = long;
	}
	
	function loaded() {
		return isLoaded;
	}
	
	function load() {
		$('#demographics').addClass('loading');
	
		if(this.latitude == null || this.longitude == null) {
			alert('Can not display demographic charts: location not set.');
			return;
		}

	    $.ajax({
	    	method: 'GET',
	    	url: listingSite.getIsMobileApp() ? '/XposurePublic/Demographics' : 'Demographics',
	    	data: {
	    		latitude: this.latitude,
	    		longitude: this.longitude,
	    		id: this.id 
	    	},
	    	dataType: 'json'
	    })
    	.done(function(json) {
    		createTables(json.general);
    		drawCharts(json);
    		$('#demographics').removeClass('loading');
    	})
    	.fail(function() {
    		$('#demographics').removeClass('loading');
    		alert('Failed to load demographic charts.');
    	});

	    isLoaded = true;
	}
	
	function createTables(generalData) {
		
		var $demographicsDiv = $('#demographics-container');
		var $table = $('#demographicsTable');
		
		var numRows = Math.ceil(generalData.length / 2);
		var numCols = 2;
		var dataIndex = 0;
		
		for(var i = 0; i < numRows; i++) {
			var $row = $('<tr>');
			
			for(var j = 0; j < numCols; j++) {
				if(dataIndex < generalData.length) {
					// currently don't include Average Household Size (dataIndex=3)
					if(dataIndex == 3) {
						j--;
					}
					else {
						var $td = $('<td>')
						.addClass('key')
						.appendTo($row);
						
						var $keyDiv = $('<div>')
						.addClass('keyContent')
						.addClass('hoverable')
						.html(generalData[dataIndex].key)
						.appendTo($td);
									
						var $tooltip = $('<span>')
						.addClass('tooltip')
						.html(tooltips[dataIndex])
						.appendTo($keyDiv);
						
						$td = $('<td>')
						.addClass('value')
						.html(units[dataIndex][0] + generalData[dataIndex].value + units[dataIndex][1])
						.appendTo($row);
					}
					dataIndex++;
				}
			}
			$table.append($row);
		}
		
		$demographicsDiv.append($table);
	}
	
	
	function drawCharts(data) {

		var dataList = getDataList(data);
		
		var $demographicsDiv = $('#demographics-container');
		
		$.each(dataList, function(index, element) {
			var labels = [];
			var percentages = [];
			var labelsWithPercent = [];
			var data = [];
			var dataTotal = 0;
			
			var $chartDiv = $('<div>')
			.addClass('chartDiv')
			.appendTo($demographicsDiv);
			
			var $chartTitle = $('<div>')
			.addClass('chartTitle')
			.addClass('hoverable')
			.html(element.name)
			.appendTo($chartDiv);
			
			var $chartLegend = $('<div>')
			.addClass('chartLegend')
			.appendTo($chartDiv);
			
			var $chartCanvas = $('<canvas>')
			.addClass('chartCanvas')
			.appendTo($chartDiv);
			
			$chartCanvas.get(0).height = 250;
			
			var $chartTooltip = $('<span>')
			.addClass('tooltip')
			.html(element.description)
			.appendTo($chartTitle);
			
			$.each(element.data, function(index, element) {
				var intVal = parseInt(element.value);
				dataTotal += intVal;
				data.push(intVal);
			});
				
			$.each(element.data, function(index, element) {
				var percentage = Math.round((element.value / dataTotal) * 100);
				percentages.push(percentage);
				labels.push(element.key);
				labelsWithPercent.push(element.key + ' (' + percentage + '%)');
			});
							
			
			var newChart = new Chart($chartCanvas, {
			    type: 'pie',
			    data: {
			        labels: labelsWithPercent,
			        datasets: [{
			            label: element.name,
			            data: data,
			            backgroundColor: chartColours,
			            borderWidth: 1
			        }]
			    },
				options: {
					responsive: false,
					tooltips: {
						callbacks: {
							label: function(tooltipItem, data) {
								var allData = data.datasets[tooltipItem.datasetIndex].data;
								var tooltipData = allData[tooltipItem.index];
								return labels[tooltipItem.index] + ': ' + tooltipData + ' (' + percentages[tooltipItem.index] + '%)';
							}
						}
				    },
				    legend: {
				    	display: false
				    },
			        legendCallback: function(chart) {
			        	var $legendList = $('<ul>');
			        	
						for (var i = 0; i < chart.data.datasets[0].data.length; i++) {
							var $legendItem = $('<li>')
							.addClass('demographics-legend-item')
							.data('index', i)
							.appendTo($legendList);
							
							// legend color
							$('<span>')
							.addClass('demographics-legend-color')
							.css('background-color', chart.data.datasets[0].backgroundColor[i])
							.appendTo($legendItem);
							
							// legend label
							$('<span>')
							.addClass('demographics-legend-label')
							.text(chart.data.labels[i])
							.appendTo($legendItem);
						}
						return $legendList;
			        }
			    }
			});
			
			$chartLegend.append(newChart.generateLegend());
			
			$chartLegend.find('.demographics-legend-item').click(function() {
				var $legendItem = $(this);
				var dataIndex = $legendItem.data('index');
				
				var $legendLabel = $legendItem.find('.demographics-legend-label');
				$legendLabel.toggleClass('strikethrough');
				
				newChart.getDatasetMeta(0).data[dataIndex].hidden = $legendLabel.hasClass('strikethrough');
				newChart.update();
			});
		});
		
		if(!Modernizr.touchevents){
			$('#demographics').niceScroll({autohidemode: false});
		}
	}
	
	/*
	 * Controls inclusion/exclusion of categories and controls display order
	 */
	function getDataList(data) {
		return [
			data.age,
			data.construction,
			data.education,
			data.employment,
			//data.gender,
			data.income,
			data.maritalStatus,
			data.motherTongue,
			data.ownership,
			//data.workLocation,
			//data.workTransportation,
			data.occupiedDwellings,
			data.householdSize,
			data.ageImmigration,
			data.citizenship
		];
	}
	
	var demographicChartingObject = {
		init : init,
		load : load,
		loaded : loaded
	};
	
	return demographicChartingObject;
	
})();