KJGraph1.instance = new KJGraph1();
KJGraph2.instance = new KJGraph2();

jQuery(document).ready(function($) {

	//                             BAND MANAGER METRICS
	$("#bandManagerBandSelect").change(function() {
		// note: migrated from old function: get_band_manager_metrics()
		var band_id = $(this).val();
		if (band_id > 0) {
			$("#bandManagerWorkDiv").show();
		}
		else {
			$("#bandManagerWorkDiv").hide();
		}

		if (KJGraph1.instance.firstChange) {
			KJGraph1.instance.firstChange = false;
		}
		else {
			$(".chartdiv").hide();          // hides both graphs
		}

		$("#btn-graph1-prevpage").hide(); // hide pagination for graph1
		$("#btn-graph1-nextpage").hide(); // hide pagination for graph1

		// clear out autocomplete for graph1
		$("#bd-fanstats-groupby").val("any").trigger("change");
		$("#input-fanstats-location").val("");
	})
	.change(); // trigger a change event so that band data is loaded automatically



	// ----------- graph 1-----------

	// Set up bindings for graph 1
	$("#btn-graph1-fan-locations")       .click( function() { KJGraph1.instance.doGraph1();          $(this).blur(); } );
	$("#btn-graph1-nextpage")     .hide().click( function() { KJGraph1.instance.doGraph1_nextpage(); $(this).blur(); } );
	$("#btn-graph1-prevpage")     .hide().click( function() { KJGraph1.instance.doGraph1_prevpage(); $(this).blur(); } );


	// setup auto complete for location filtering (graph1)
	var completionCountries = null;
	var completionRegions   = null;
	$("#wrapper-location-input").hide();
	$("#bd-fanstats-groupby").change( getAutocompleteLocationsGraph1 ); // update auto complete locations when they change 'group-by'
	//$("#bd-fanstats-timespan").change(getAutocompleteLocationsGraph1 ); // update auto complete locations when they change 'timespan'

	function getAutocompleteLocationsGraph1() {

		var group_by   = $("#bd-fanstats-groupby").val();
		var myTimespan = $("#bd-fanstats-timespan").val();
		var bandID     = $("#bandManagerBandSelect").val();

		if (group_by == "any") {
			$("#wrapper-location-input").fadeOut(); // hide input
		}
		else {
			$("#wrapper-location-input").fadeIn();  // show input
		}

		$.get("/scripts/band_dashboard/get-autocomplete-locations.php", {
				band_id:  bandID,
				timespan: myTimespan
			},
			function(data) {
				try {
					var json = $.parseJSON(data);
					if (json.success) {
						completionCountries = json.data.country;
						completionRegions   = json.data.region;

						updateLocationInput();
					}

				} catch (err) { debugLog(err); }
			},
			'html'
		); // $.get
	}

	function updateLocationInput()
	{
		var group_by = $("#bd-fanstats-groupby").val();
		if (group_by != "any") {
			var whichData = null;
			if (group_by == "country") {
				whichData = completionCountries;
			} else {
				whichData = completionRegions;
			}

			if (updateLocationInput.firstrun == true) {

				updateLocationInput.firstrun = false;
				$("#input-fanstats-location").autocomplete(whichData, {
					minChars: 0,
					mustMatch: true
				});
			}
			else {
				// autmocompletion already initialized, just update the "data"
				$("#input-fanstats-location")
					.val("")                        // clear existing data
					.setOptions({data: whichData}); // add new data
			}
		}
	}
	updateLocationInput.firstrun = true;




	/////////////// Bindings for graph2 /////////////////

	$("#btn-graph2").click(function() { KJGraph2.instance.renderGraph2(); $(this).blur(); });


}); // end jquery ready block


function KJGraph1() {
	/**
	 * A flag to indicate if the graphs have been rendered for the first time.
	 * This has to be done when the tab is visible and active, otherwise the graphs
	 * won't properly render.
	 * var @boolean
	 */
	this.needsInit = true;

	this.firstChange = true;

	/**
	 * track the maximum y-axis value to help set the scale
	 */
	this.myMaxYaxis = -1;
}

function KJGraph2() { }

//////////////////////////Graph 1 ///////////////////////////


/**
 * Keep track of the highest fan count so we can
 * set the Y-axis scale accordingly
 */
KJGraph1.prototype.trackMax = function(pageNum, count) {
	try {
		var myInt = parseInt(count);
		if (pageNum == 1 && myInt > KJGraph1.instance.myMaxYaxis) {
			KJGraph1.instance.myMaxYaxis = Math.ceil(myInt * 1.2);
		}
	} catch (err) {
		debugLog(err);
	}
};

/**
 * Wrappers for Pagination:
 * reset the page counter and max-Y-axis
 */
KJGraph1.prototype.doGraph1 = function()          {
	KJGraph1.instance.myMaxYaxis = -1;
	KJGraph1.instance.renderGraph1(1); // the '1' tells it to start on first page of results
}
KJGraph1.prototype.doGraph1_nextpage = function() { KJGraph1.instance.renderGraph1(++pageTracker); };
KJGraph1.prototype.doGraph1_prevpage = function() { KJGraph1.instance.renderGraph1(--pageTracker); };

/**
 * handle request for fan-location data graph
 */
KJGraph1.prototype.renderGraph1 = function(pageTracker) {

	if (pageTracker < 1) { pageTracker = 1; }

	var myTimespan = $("#bd-fanstats-timespan").val();
	var bandID     = $("#bandManagerBandSelect").val();

	if (myTimespan == "") {
		jAlert("Please select a time span");
	} else if ( bandID > 0 ) {
		var $graph_wrapper = $("#bd-location-graph-wrapper");

		// clear out old graphs, if any,
		// and add back an empty div where the new chart will go
		$graph_wrapper.empty();
		var $chartDiv1 = $('<div id="chartdiv1" class="chartdiv"></div>');
		$chartDiv1.appendTo( $graph_wrapper );

		// initialize empty chartdiv with a 'loading' message
		$chartDiv1.html('<div style="padding:20px; text-align:center;">...Loading...</div>');

		$.get("/scripts/band_dashboard/graph1-fan-locations.php", {
				band_id:  bandID,
				timespan: myTimespan,
				group_by: $("#bd-fanstats-groupby").val(),
				location: $("#input-fanstats-location").val(),
				page:     pageTracker
			},
			function(data) {

				// Build new data set
				var lines   = [];
				var xLabels = [];
				try {
					var json = $.parseJSON(data);
					var label = null;
					var location = null;
					$.each(json.data, function(i, fandata) {
						location = fandata.city;
						if (fandata.state != null && fandata.state != "") {
							location += ", " + fandata.state;
						}
						label = location;
						lines.push(fandata.fancount);
						xLabels.push(label);

						KJGraph1.instance.trackMax(pageTracker, fandata.fancount);
					});

					// Whether to show "Prev" button
					if (pageTracker > 1) { $("#btn-graph1-prevpage").fadeIn();  }
					else {                 $("#btn-graph1-prevpage").fadeOut(); }

					// Whether to show "next" button
					if (json.lastpage == true) { $("#btn-graph1-nextpage").fadeOut(); }
					else {                       $("#btn-graph1-nextpage").fadeIn();  }
				}
				catch (err) {
					debugLog(err);
				}

				$("#chartdiv1").empty(); // clear out "loading" message

				if (lines.length <= 0) {
					$("<p style='text-align:center; padding:20px;'>No data to graph!</p>").appendTo($("#chartdiv1"));
				}
				else {
					// run jqplot to graph our new data
					plot1 = $.jqplot('chartdiv1', [lines], {
						legend:{show:true, location:'ne'},
						title:'Fan Locations (page: '+pageTracker+')',
						seriesDefaults: {
							renderer: $.jqplot.BarRenderer,
							rendererOptions: { barWidth: 50 }
					    },
					    series:[
							    {label:'Number of Fans'}
						],
					    axes:{
					        xaxis:{
								renderer:$.jqplot.CategoryAxisRenderer,
								rendererOptions: { tickRenderer:$.jqplot.CanvasAxisTickRenderer },
								tickOptions:{
					                formatString:'%s',
					                fontSize:'8pt',
					                fontFamily:'Tahoma',
					                angle:30
					            },
								ticks: xLabels
					        },
					        yaxis:{
								min: 0,
								max: KJGraph1.instance.myMaxYaxis
							}
					    },
					    cursor: {
						    showTooltip: false
					    }
					}); // end jqplot
				}
			},
			'html'
		);
	}
	else {
		//debugLog("no band selected for graph1");
	}
}; // end renderGraph1




/////////////// Graph 2 (fan and song play totals, by date) /////////////////
KJGraph2.prototype.renderGraph2 = function() {
	// clear out old graphs, if any,
	// and add back an empty div where the new chart will go
	$("#chartdiv2").remove();
	var $graph_wrapper = $("#bd-graph2-wrapper");
	$graph_wrapper.html(
			'<div id="chartdiv2" class="chartdiv">'+
				'<div style="padding:20px; text-align:center;">...Loading...</div>'+
			'</div>');

	var myTimespan = $("#bd-timespan2").val();
	var bandID     = $("#bandManagerBandSelect").val();
	var graphType  = $("#graph2-type").val(); // 'new' or 'total'

	if (bandID)
	{
		$.get("/scripts/band_dashboard/graph2-fan-song-totals.php", {
				band_id:    bandID,
				timespan:   myTimespan,
				graph_type: graphType
			},
			function(data) {

				// Build new data set
				var fanPoints   = [];
				var songPoints  = [];

				try {
					var json = $.parseJSON(data);
					$.each(json.data.fanstats, function(i, row) {
						fanPoints.push([row.fandate, parseInt(row.fancount)]);
					});

					$.each(json.data.songstats, function(i, row) {
						songPoints.push([row.listen_date, row.playcount]);
					});

					$("#chartdiv2").empty(); // clear out "loading" message

					if (fanPoints.length <= 0 && songPoints.length <= 0) {
						$("<p style='text-align:center; padding:20px;'>No data to graph!</p>").appendTo($("#chartdiv2"));
					}
					else {
						plot2 = $.jqplot('chartdiv2', [fanPoints, songPoints], {
							title:'Fan and Song Totals',
							legend:{ show:true, location: 'nw' },
							axesDefaults:{pad:1.3},
							axes:{
								xaxis:{
									renderer:$.jqplot.DateAxisRenderer,
	//								rendererOptions: { tickRenderer:$.jqplot.CanvasAxisTickRenderer },
									tickOptions:{
						                formatString:'%b %#d, %Y',
						                fontSize:'8pt',
						                fontFamily:'Tahoma',
						                angle:-30
						            },
									min: json.data.min_date
								}
							},
							seriesDefaults: {
								showMarker: false,
								edgeTolerance: 5,
								pointLabels: false
							},
						    series:[
						        {label: 'Fan Stats' },
						        {label: "Song Plays" },
						        //{markerOptions:{style:'circle'}},
						        //{lineWidth:5, markerOptions:{style:'filledSquare', size:14}}
						    ],
						    cursor: {
							    showTooltip: false
						    }
						}); // end $.jqplot()
					}

				} catch(err) { debugLog(err); }
			},
			'html'
		); // end $.get()
	}
	else {
		//debugLog("no band selected for graph2");
	}
}; // end renderGraph2()