$(function () {

	var baseUrl = "/umbraco/surface/Chart/ChartCurve";
	var $chart = $("#chart");
	var $chartError = $('#chart-error');
	var $curveIdElem = $('#CurveId');

	var getUrlParameter = function (sParam) {
		var sPageUrl = decodeURIComponent(window.location.search.substring(1)),
			sUrlVariables = sPageUrl.split('&'),
			sParameterName,
			i;

		for (i = 0; i < sUrlVariables.length; i++) {
			sParameterName = sUrlVariables[i].split('=');

			if (sParameterName[0] === sParam) {
				return sParameterName[1] === undefined ? true : sParameterName[1];
			}
		}
	};

	var addSpinner = function () {
		$chart.after('<span class="glyphicon glyphicon-refresh gly-spin" style="font-size: 3em"></span>');
	}

	var removeSpinner = function () {
		$chart.next('span.gly-spin').remove(); // remove spinner
	};

	var curveIdChangeAjax = function () {
		$chartError.html('');

		//  this is the "Select CurveId" instruction
		if (this.selectedIndex === 0) {
			$chart.removeAttr('src');
			return;
		}
		var curveId = $("option:selected", this).text();

		addSpinner();

		var leafInputId = getUrlParameter("leafInputId");
		var url = baseUrl + "?leafInputId=" + leafInputId + "&curveId=" + curveId;

		$.ajax({
			url: url,
			type: 'GET',
			contentType: "image/png",
			success: function (data) {
				$chart.attr('src', "data:image/png;base64," + data);
				removeSpinner();
			},
			error: function(jqXHR, textStatus, errorThrown) {
				removeSpinner();
				$chart.removeAttr('src');
				var html = '<h3 class="text-danger">A problem was encountered loading this chart.</h3>';
				if (errorThrown != undefined) {
					html += "<h4>Detail:</h4><pre>" + errorThrown + "</pre>";
				}
				$chartError.html(html);
			}
		});
	};

	$curveIdElem.change(curveIdChangeAjax);
});