using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

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

@section Styles{
    <style>
        .custom-gauge.wj-gauge .wj-face path {
            fill: #f8f8f8;
            stroke: none;
        }

        .custom-gauge.wj-gauge .wj-pointer path {
            fill: #404040;
            stroke: none;
        }

        .custom-gauge.wj-gauge circle.wj-pointer {
            fill: #404040;
            stroke: none;
            transform-origin: center center 0px;
            transform: scale(1);
            transition: transform .5s;
        }

        .custom-gauge.wj-gauge.wj-state-focused circle.wj-pointer {
            fill: red;
            stroke: black;
            transform: scale(1.3);
            transition: transform 1s, fill 0.5s, stroke 0.5s;
        }
    </style>
}

@section Scripts{
<script>
    var boundValue, valueInput, radialGauge;
    c1.documentReady(function () {
        boundValue = 0;
        getEles();
    });

    function getEles() {
        valueInput = wijmo.Control.getControl('#valueInput');
        radialGauge = wijmo.Control.getControl('#radialGauge');
    }

    function setValue(sender) {
        if (boundValue != sender.value) {
            boundValue = sender.value;
            radialGauge.value = valueInput.value = boundValue;
        }
    }
</script>
    }

@(Html.C1().InputNumber().Id("valueInput").Format("n0,").Value(0).Step(1000).Min(0)
    .Max(64000).OnClientValueChanged("setValue"))
<br />
<div class="row" style="width:100%;">
    <div class="col-md-6">
        @(Html.C1().RadialGauge().Id("radialGauge").CssStyles(new Dictionary<string, string> { { "width", "100%" }, { "height", "150px" }, { "padding", "10px" } })
            .ThumbSize(10).HasShadow(false).Value(0).Format("n0,").Min(0).Max(64000).Step(1000).IsReadOnly(false).OnClientValueChanged("setValue")
            .Face(face => face.Thickness(0.08))
            .Pointer(pointer => pointer.Thickness(0.08))
        )
    </div>
    <div class="col-md-6">
        <div style="position:relative;height:200px">
            @for (var rpt = 1; rpt < 4; rpt++)
            {
                @(Html.C1().RadialGauge().CssStyles(new Dictionary<string, string> { { "position", "absolute" }, { "left", "0" }, { "width", "100%" }, { "height", "200px" }, { "padding", (rpt * 20 + "px") } })
                .ThumbSize(10).HasShadow(false).ShowText(ShowText.None).StartAngle(0).SweepAngle(270).AutoScale(false).Value(10 - 2 * rpt)
                .Min(0).Max(10).IsReadOnly(false)
                .Face(face => face.Thickness(0.08))
                .Pointer(pointer => pointer.Thickness(0.08))
                )
            }
        </div>
    </div>
</div>

@section Description{
    @Html.Raw(Resources.RadialGauge.Scaling_Text0)
}