var barHeight = 20; //pixels
// reportOptions variable comes from respective config file

var defaultFilterText = "type comma separated keys to filter the results";
// Array that stores objects for each element returned via rest
var chartsData = [];

var filterInputId = "filter-input";
var barchartDOMIdPrefix = "single-barchart_"; 

function initPage() {
	// function from generic.js, variable from config file
	initHeaderAndFilters(headerAndFilters);
	
	$("#content")
		.append(
			$("<div>")
				.attr("id", "friendlier-names-field")
				.append(
					$("<input>")
						.attr("id", "friendlier-names")
						.attr("type", "checkbox")
						.attr("disabled", true)
				)
				.append(
					$("<label>")
						.attr("for", "friendlier-names")
						.attr("title", "Check to Switch to Friedlier Names")
						.text("Friendlier Names")
				)	
		);
	
	if (reportOptions.hasFilterInput) {
		$("#content-description").append(
			$("<input />")
				.attr("id", filterInputId)
				.attr("type", "text")
				.val(defaultFilterText)
				.focus(function() {
					if($(this).val() == defaultFilterText)
						$(this).val("");
				})
				.blur(function() {
					if ($(this).val() == "")
						$(this).val(defaultFilterText);
				})
				.keyup(function() {
					if (chartsData)
						typewatch(drawCharts, 500);
				})
		);
	}
	
	if (reportOptions.hasFriendlierNames) {
		$("#friendlier-names").attr("disabled", false);
		$("#friendlier-names").prop("checked", true);
		$("#friendlier-names").click(function() {
			if (chartsData)
				typewatch(drawCharts, 500);
		});
	}
	
	if (reportOptions.description) {
		$("#content-description")
			.append(
				$("<div>")
					.addClass("description")
					.html(reportOptions.description)
			)
	}
	
	if (reportOptions.enableCSVExport) {
		$("#content-description")
			.append(
				$("<div>")
					.attr("id", "content-description-controls")
					.html(" ")
			)
	}
	
	$("#filter").click(function() {
		generateCharts();
	});
	
	generateCharts();
}

function generateCharts() {
	// get the social club header filtering parameter values, headerAndFilters.headerType comes from local conf
	var pValues = config.headerOptions[headerAndFilters.headerType].getParamValues();
	
	if (!pValues)
		return;
	
	if (reportOptions.multipleRequests) {
		var endpointsArray = reportOptions.multipleRequests(pValues);
		
		var req = new ReportRequest(null, "json", null, config.restHost + config.reportsQueryAsync);
		req.sendMultipleAsyncRequest(endpointsArray, drawCharts);
	}
	else {
		if (reportOptions.hasExtraRestParams) {
			$.each(reportOptions.hasExtraRestParams, function(i, paramObj) {
				var value;
				if (typeof paramObj.value === "function") {
					value = paramObj.value();
				}
				else
					value = paramObj.value;
				pValues.Pairs[paramObj.key] = value;
			});
		}
		
		var req = new ReportRequest(config.restHost + reportOptions.restEndpoint,
			"json",
			config.restHost + reportOptions.restEndpointAsync + pValues.ForceUrlSuffix,
			config.restHost + config.reportsQueryAsync);
		req.sendSingleAsyncRequest(pValues, drawCharts);
	}
	
} // end of generateCharts()

function drawCharts(data) {
	if (data)  {
		if (reportOptions.processFunction)
			chartsData = reportOptions.processFunction(data);
		else
			chartsData = data;
	}
	
	if (chartsData.length == 0) {
		//cleanGraph("single-barchart");
		// clean all the previous charts
		$("#content-body").find(".barchart").remove()
		Sexy.alert(config.noDataText);
	}
	
	var filterText = $("#" + filterInputId).val();
	if (filterText == defaultFilterText)
		filterText = "";
	
	var groups = reportOptions.chartGroups.getGroups(chartsData);

	if (groups.length >= 2) {
		// clean all the previous charts for many groups 
		$("#content-body").find("fieldset.barchart").remove();
	}
		
	$.each(groups, function(gindex, group) {
		var groupName = reportOptions.chartGroups.getGroupName(group);
		var groupValues = reportOptions.chartGroups.getGroupValues(group);
		
		//Add the graph elements if they don't exist
		if (!$("#" + barchartDOMIdPrefix + gindex).length) {
			$("#content-body")
				.append(
					$("<div>")
						.attr("id", barchartDOMIdPrefix + gindex)
						.addClass("barchart")
				)
			if (groupName)
				$("#" + barchartDOMIdPrefix + gindex)
					.append(
						$("<legend>")
							.addClass("barchart-title")
							.html(groupName)
				)
			initSvg(barchartDOMIdPrefix + gindex);
		}
		else {
			if (groupName)
				$("#" + barchartDOMIdPrefix + gindex + " legend").html(groupName);
		}
				
		var filterKeys = (filterText) ? filterText.split(",").map(function(d) {return (d.trim()); }) : "";
		var filterReg = (filterKeys) ? (filterKeys.join(".*") + "|" + filterKeys.reverse().join(".*")) : "";
		
		//console.log(filterReg);
		var re = new RegExp(filterReg, "i");
		
		// create an array that will store the filtered chart data
		var datum = [];
		
		var csvColumns = [" "];
		var csvRows = [];
		
		// Loop for each defined bar
		$.each(reportOptions.bars, function(i, bar) {
			var filteredArray = [];
			
			// loop to each element's data
			$.each(groupValues, function(j, groupValue) {
				// match the name with the input filter text
				//console.log(filterText + " : " +  bar.getName(groupValue) + " : " + re.test(bar.getName(groupValue)))
				
				if (re.test(bar.getName(groupValue))) {
					// for each chart type, populate its array with the predefined functions over the data 
					filteredArray.push({Name: bar.getName(groupValue, j),
									Value: bar.getValue(groupValue),
									Object: bar.getObject(groupValue),
					});
					
				}
				
			});
			
			datum.push(
				{
					key: bar.title,
					values: filteredArray,
					color: bar.colour,
				}
			);
			
			$.each(filteredArray, function(i, arrayItem) {
				if (!csvRows[i]) {
					csvRows[i] = [];
					csvRows[i][0] = arrayItem.Name;
				}
				csvRows[i][csvColumns.length] = arrayItem.Value;
			});
			
			csvColumns.push(bar.title);
		
		}); // End of each reportOptions.bars
		
		// all the elements will have the same length so selecting the first one 
		if (datum[0].values.length < 1) { 
			//console.log("Nothing matched for '" + filterText + "'");
			return;
		}
		
		var cssHeight = (barHeight*reportOptions.bars.length) * (datum[0].values.length + 2); // pixels
		
		// Originally content-height = 100% - 85 
		var contentBodyHeight = $("#content").height() - $("#content-description").height() - 65;
		
		if ((cssHeight < contentBodyHeight) && (groups.length == 1)) {
			$("#" + barchartDOMIdPrefix + gindex).css("height", contentBodyHeight - 30);
			$("#" + barchartDOMIdPrefix + gindex + "svg").css("height", contentBodyHeight - 30);
		}
		else {
			$("#" + barchartDOMIdPrefix + gindex).css("height", cssHeight);
			$("#" + barchartDOMIdPrefix + gindex + "svg").css("height", cssHeight);
		}
		
		$("#content-body").css("height", contentBodyHeight);
		
		if (reportOptions.enableCSVExport) {
			var csvFrameID = "single-barchart-frame";
			
			$("#" + csvFrameID).remove();
				
			addCSVButton(reportOptions.enableCSVExport, 
					csvFrameID, 
					function() {
						exportToCSV(csvColumns, csvRows, csvFrameID, getCSVFilename()); 
					});
			
			$("#" + csvFrameID).addClass("csv-right");
		}
		
		if (reportOptions.enablePNGExport)
			addExportPngButton(reportOptions.enablePNGExport);
			
		nv.addGraph(function() {
			var chart = nv.models.multiBarHorizontalChart()
				.x(function(d) { return d.Name })
				.y(function(d) { return d.Value })
				.margin({top: 20, right: 30, bottom: 50, left: reportOptions.chartLeftMargin})
				.showValues(true)
				.tooltips(true)
				.showControls(false)
				.showLegend((reportOptions.bars.length>1) ? true : false);
				
			chart.tooltipContent(reportOptions.tooltipContent);
				
			chart.yAxis
				.axisLabel(reportOptions.units)			
			if (reportOptions.yTickFormat)
				chart.yAxis.tickFormat(reportOptions.yTickFormat);
			else
				chart.yAxis.tickFormat(d3.format(".2f"));
			
			var svg = d3.select("#" + barchartDOMIdPrefix + gindex + " svg")
			
			svg.datum(datum)
				.transition()
					.duration(config.transitionDuration)
				.call(chart);
			
			svg.selectAll("g.nv-bar text")
				.attr("fill", "#000000")
				.attr("stroke", "none")
				.attr("stroke-width", "0")
				.style("font-size", "smaller")
			
			
			svg.selectAll("g.nv-axis path")
				.attr("stroke", "#000000")
				.attr("stroke-width", "1")			
			
			nv.utils.windowResize(chart.update);
			
			return chart;
		}); // End of addGraph
		
		
	})
			
}