using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using System.Collections.Generic;
using System.Web.Mvc;

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

        public ActionResult GetMenuItems([C1JsonRequest]CollectionViewRequest<MenuItemInfo> requestData)
        {
            return this.C1Json(CollectionViewHelper.Read(requestData, new MenuItemInfo[] {
          new MenuItemInfo()
          {
            Header = "File",
            Items = new List<MenuItemInfo>()
            {
              new MenuItemInfo() { Header = "Save" },
              new MenuItemInfo() { Header = "Open" }
            }
          },
          new MenuItemInfo()
          {
            Header = "Edit",
            Items = new List<MenuItemInfo>()
            {
              new MenuItemInfo() { Header = "Search" },
              new MenuItemInfo() { Header = "Replace" }
            }
          },
        }));
        }
    }

    public class MenuItemInfo
    {
        public string Header { get; set; }
        public List<MenuItemInfo> Items { get; set; }
    }
}

@section Scripts{
<script type="text/javascript">
    function changeOpenOnhover() {
        var menu = wijmo.Control.getControl("#hierMenu");
        var checkbox = document.getElementById("showOnHover");
        menu.openOnHover = checkbox.checked;
    }

    function changeCloseOnLeave() {
        var menu = wijmo.Control.getControl("#hierMenu");
        var checkbox = document.getElementById("closeOnLeave");
        menu.closeOnLeave = checkbox.checked;
    }

    function changeShowDropDownButton() {
        var menu = wijmo.Control.getControl("#hierMenu");
        var checkbox = document.getElementById("showButton");
        menu.showDropDownButton = checkbox.checked;
    }

     function changeSubItems() {
        var menu = wijmo.Control.getControl("#hierMenu");
        var checkbox = document.getElementById("showSubItems");
        menu.subItemsPath = checkbox.checked ? "Items" : null;
    }

    function itemClicked(sender) {
        alert('You\'ve selected option ' + sender.text + ' from the menu!');
    }

    
</script>
}
<div>

    @(Html.C1().CollectionViewService().Bind("GetMenuItems").Id("mn"))
    @(Html.C1().Menu().Id("hierMenu").ItemsSourceId("mn")
        .Header("Hierachial Menu").HeaderPath("Header").ShowDropDownButton(false)
        .OpenOnHover(true)
        .CloseOnLeave(true)
        .OnClientItemClicked("itemClicked")
        .SubItemsPath("Items")
    )

</div>
<div>
    <p></p>
    @Html.Raw(Resources.Menu.Customize_OpenOnhover)&nbsp;<input id="showOnHover" type="checkbox" checked="checked" onchange="changeOpenOnhover()" /><br />
    @Html.Raw(Resources.Menu.Customize_CloseOnLeave)&nbsp;<input id="closeOnLeave" type="checkbox" checked="checked" onchange="changeCloseOnLeave()" /><br />
    @Html.Raw(Resources.Menu.Customize_ShowButton)&nbsp;<input id="showButton" type="checkbox" onchange="changeShowDropDownButton()" /><br />
    @Html.Raw(Resources.Menu.Customize_ShowSubItems)&nbsp;<input id="showSubItems" type="checkbox" checked="checked" onchange="changeSubItems()" /><br />
</div>

@section Description{
    @Html.Raw(Resources.Menu.Customize_Description)
}