@{
    ViewBag.Title = "Home Page";
}

@using Kendo.Mvc.UI


<div class="row">
    <div class="col-md-1">
        <div class="signature-container">
            <div id="toolbar"></div>
            <div class="signature-wrapper">
                @(Html.Kendo().Signature()
                .Name("signature")
                .Maximizable(false)
                .HideLine(true))
            </div>
        </div>
    </div>
</div>

    <script>
        $(document).ready(function () {

            var signature = $("#signature").getKendoSignature();
            alert("hello");
            $("#toolbar").kendoToolBar({
                items: [
                    {
                        template: "<label>Brush:</label><input id='colorpicker'/>",
                        id: "brush",
                        overflow: "never"
                    },
                    {
                        type: "splitButton",
                        text: "Size",
                        id: "sizes",
                        overflow: "never",
                        menuButtons: [
                            { text: "Normal" },
                            { text: "Wide" }
                        ],
                        click: function (e) {
                            signature.setOptions({
                                strokeWidth: e.target.text() === "Wide" ? 3 : 1
                            });
                        }
                    },
                    {
                        template: "<label>Background:</label><input id='background'/>",
                        id: "bccolor",
                        overflow: "never"
                    }
                ]
            });


            $("#colorpicker").kendoColorPicker({
                view: "gradient",
                views: ["gradient", "palette"],
                value: "#000000",
                change: function (e) {
                    signature.setOptions({
                        color: e.value
                    });
                },
                buttons: false
            });
        })
    </script>

    <style>
        .signature-container {
            width: 750px;
        }

        .signature-wrapper {
            height: 270px;
        }

            .signature-wrapper .k-signature {
                width: 100%;
                height: 100%;
            }

        div.notes {
            font-style: italic;
            border-width: 1px;
            border-bottom-width: 0;
            border-style: solid;
            padding: 1em;
        }

        .k-signature, .notes {
            border-color: rgba(0, 0, 0, 0.08);
            border-width: 0 1px;
            border-radius: 0;
        }
    </style>