$(function () {

	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 baseUrl = "/umbraco/surface/Chart/ChartCurve";
	var $chart = $("#chart");
	var $chartError = $('#chart-error');

	$('#CurveId')
		.change(function () {
			$chartError.removeClass('text-danger').text('');

			//  this is the "Select CurveId" instruction
			if (this.selectedIndex === 0) {
				$chart.removeAttr('src');
				return;
			}

			var curveId = $("option:selected", this).text();

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

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

			$chart.attr('src', url);
		});

	$chart.load(function () {
		$chart.next('span.gly-spin').remove(); // remove spinner
	})
	.error(function () {
		$chart.next('span.gly-spin').remove(); // remove spinner
		if ($chart.attr('src') != undefined) {
			$chart.removeAttr('src');
			$chartError.addClass('text-danger').text('A problem was encountered loading this chart.');
		}
	});
});