using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcExplorer.Models;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;

namespace MvcExplorer.Controllers
{
    public partial class FlexChartController : Controller
    {
        public ActionResult HitTest()
        {
            return View();
        }
    }
}

@using C1.Web.Mvc.Chart

@{
    ViewBag.Title = "SeriesBinding";
    List<Dot> cos = new List<Dot>();
    List<Dot> sin = new List<Dot>();
    for (int i = 0; i < 60; i++)
    {
        cos.Add(new Dot { X = i, Y = Math.Cos(0.12 * i) });
        sin.Add(new Dot { X = i, Y = Math.Sin(0.12 * i) });
    }
}

<div id="HitTest" style="height: 300px"></div>

@(Html.C1().FlexChart("#HitTest").ChartType(ChartType.LineSymbols).Series(sers =>
    {
        sers.Add("cos(x)").Bind("X", "Y", cos);
        sers.Add("sin(x)").Bind("X", "Y", sin);
    }))

<div style="height: 110px">
    <div id="info"></div>
</div>

@section Scripts{
<script type="text/javascript">
    c1.documentReady(function () {
        var chart = wijmo.Control.getControl("#HitTest"),
            formatHitInfo = function (hitInfo, pt) {
                var s = '<div>@(Resources.FlexChart.HitTest_ChartElement)' + wijmo.chart.ChartElement[hitInfo.chartElement] + '</div>';
                if (hitInfo.series) {
                    s += '<div>@(Resources.FlexChart.HitTest_SeriesName)' + hitInfo.series.name;
                    if (hitInfo.pointIndex !== null && hitInfo.pointIndex !== undefined) {
                        s += '<div>Point index: ' + hitInfo.pointIndex + '</div>';
                        s += '<div>Distance: ' + hitInfo.distance.toFixed(0) + '</div>';

                        if (hitInfo.chartElement == wijmo.chart.ChartElement.PlotArea) {
                            s += '<div>x: ' + pt.x.toFixed(2) + '</div>';
                            s += '<div>y: ' + pt.y.toFixed(2) + '</div>';
                        }
                    }
                }
                return s;
            };

        chart.hostElement.onmousemove = function (e) {
            var hit = chart.hitTest(e);
            var info = document.getElementById("info");
            info.innerHTML = formatHitInfo(hit, chart.pointToData(e));
        };
    });

</script>
}

@section Description{
    <h3>@Html.Raw(Resources.FlexChart.HitTest_HitTest)</h3>
    <p>@Html.Raw(Resources.FlexChart.HitTest_Text0)</p>
    <p>@Html.Raw(Resources.FlexChart.HitTest_Text1)</p>
    <p>@Html.Raw(Resources.FlexChart.HitTest_Text2)</p>
}