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

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

@using System.Drawing

<p>
    <img id="image1" src="@Href("~/Content/images/room.png")" />
</p>

@section Scripts{
    <style>
        .invalid-tooltip {
            background-color: red;
            color: yellow;
            opacity: 0.9;
            border-color: lightcoral;
        }
    </style>

    <script>
        var _invalidTooltip;
        c1.documentReady(function () {
            _invalidTooltip = new wijmo.Tooltip();
            _invalidTooltip.cssClass = 'invalid-tooltip';
            _invalidTooltip.position = 11;
            window.addEventListener('resize', function () {
                if (_invalidTooltip.isVisible) {
                    _invalidTooltip.hide();
                    onInvalidInput();
                }
            });
        })

        function onInvalidInput(input, e) {
            e && (e.cancel = true);
            _invalidTooltip.show("#invalidInput", "@Html.Raw(Resources.InputColor.Index_Text2)");
        }

        function onValueChanged(input, e) {
            _invalidTooltip && _invalidTooltip.hide();
            changeColor(input, e);
        }

        function changeColor(sender, e) {
            document.getElementById("image1").style.backgroundColor = sender.value;
        }
    </script>
}

<div> 
    <label>@Html.Raw(Resources.InputColor.Index_Text0)</label>
    @(Html.C1().InputColor()
        .Id("invalidInput")
        .Value(Color.White)
        .ClickAction(ClickAction.Toggle)
        .OnClientInvalidInput("onInvalidInput")
        .OnClientValueChanged("onValueChanged")
    )
</div>

@section Description{
    @Html.Raw(Resources.InputColor.Index_Text1)
}