@model LeafWeb.Web.ViewModels.Chart.ChartViewModel
@{
    ViewBag.Title = "Chart";
    var selectText = "Select CurveId";
}
<h1>@ViewBag.Title</h1>
<h3>Identifier: <strong>@Model.LeafInputIdentifier</strong></h3>

@Html.DropDownList("CurveId", new SelectList(Model.AvailableCurveId, Model.CurveId), selectText)

<img id="chart"/>
<span class="help-block">
    <span id="chart-error"></span>
</span>

@section Scripts
{
    <script type="text/javascript">
        $(function () {
            $('#CurveId')
                .change(function () {
                    $('#chart-error').removeClass('text-danger').text('');
                    var $chart = $("#chart");
                    $chart.removeAttr('src');

                    var curveId = $("option:selected", this).text();
                    if (curveId === "@Html.Raw(selectText)") {
                        return;
                    }
                    var $spinner = $(this).after('<i class="fa fa-spinner fa-spin"></i>').next('i');
                    var url =
                        "@Html.Raw(Url.Action("ChartCurve", new {leafInputId = Model.LeafInputId, curveId="curveId"}))";
                    url = url.replace("=curveId", "=" + curveId);
                    $chart.load(function () {
                            $spinner.remove();
                        })
                        .error(function () {
                            $chart.removeAttr('src');
                            $spinner.remove();
                            $('#chart-error').addClass('text-danger').text('A problem was encountered loading this chart.');
                        })
                        .attr('src', url);
                });
        });
    </script>
}