Update Charting to use fancybox

WebCms/Views/Chart/Index.cshtml

@@ -1,23 +1,42 @@
 @using ClientDependency.Core.Mvc
 @model LeafWeb.WebCms.Models.ChartViewModel
 @{
-    var selectText = "Select CurveId";
     Html.RequiresCss("~/Content/glyphicon_animate.css");
     Html.RequiresJs("~/scripts/Chart.js");
-}
 
+    Html.RequiresCss("~/Content/jquery.fancybox.min.css");
+    Html.RequiresJs("~/scripts/jquery.fancybox.min.js");
+}
 <div class="row">
-    <div class="col-sm-4">
-        <div>Identifier: <strong>@Model.LeafInputIdentifier</strong>
+    <div class="col-md-6 col-md-offset-3">
+        <div class="panel panel-success">
+            <div class="panel-heading">
+                Identifier: <strong>@Model.LeafInputIdentifier</strong>
+            </div>
+            <div class="panel text-center">
+                @foreach (var cId in Model.AvailableCurveId)
+                {
+                    <p>
+                        <a href="@Url.Action("ChartCurve", new {leafInputId = Model.LeafInputId, curveId = cId})"
+                           data-fancybox
+                           data-options='{"buttons" : ["zoom", "download", "close"]}'
+                           class="btn btn-default">
+                            <i class="glyphicon glyphicon-picture"></i>
+                            @cId Chart
+                        </a>
+                    </p>
+                }
+            </div>
         </div>
     </div>
-    <div class="col-sm-8">
-        <span>CurveId:</span>
-        @Html.DropDownList("CurveId", new SelectList(Model.AvailableCurveId, Model.CurveId), selectText)
-    </div>
 </div>
 
-<img id="chart"/>
+@section Scripts {
+    <script type="text/javascript">
+    </script>
+}
+
+@*<img id="chart" />
 <span class="help-block">
     <span id="chart-error"></span>
-</span>
+</span>*@