<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<table style="width: 100%">
    <tr>
        <td  style="vertical-align:top;">
            <% 
                Ajax.Dna().TreeView("treeview1")
                     .HtmlAttributes(new { style = "width:300px;height:280px;border:1px solid #cccccc;padding:5px;overflow:auto;" })
                    .ExpandedLevel(0)
                               .Items(items =>
                               {
                                   items.Add("Accordion", "#", Url.Content("~/webshared/home/images/dj_icons/icon_accordion.gif"))
                                           .Items(subItems =>
                                           {
                                               subItems.Add("Core feature", "#", Url.Content("~/content/images/icon_normal.gif"));
                                               subItems.Add("Autosize mode", "#", Url.Content("~/content/images/icon_normal.gif"));
                                               subItems.Add("Collapsible sections", "#", Url.Content("~/content/images/icon_normal.gif"));
                                               subItems.Add("Customize icons", "#", Url.Content("~/content/images/icon_normal.gif"));
                                               subItems.Add("NavView", "#", Url.Content("~/content/images/icon_normal.gif"))
                                                             .Items(navItems =>
                                                             {
                                                                 navItems.Add("NavView Features", "#", Url.Content("~/content/images/icon_normal.gif"));
                                                                 navItems.Add("Client side event handling", "#", Url.Content("~/content/images/icon_normal.gif"));
                                                                 navItems.Add("Post back & Server events", "#", Url.Content("~/content/images/icon_normal.gif"));
                                                                 navItems.Add("Programmatic NavView creation", "#", Url.Content("~/content/images/icon_normal.gif"));
                                                             });
                                           });
                                   items.Add("DatePicker", "#", Url.Content("~/webshared/home/images/dj_icons/icon_datepicker.gif"))
                                          .Items(subItems =>
                                          {
                                              subItems.Add("Core feature", "#", Url.Content("~/content/images/icon_normal.gif"));
                                              subItems.Add("Format date", "#", Url.Content("~/content/images/icon_normal.gif"));
                                              subItems.Add("Restrict date range", "#", Url.Content("~/content/images/icon_normal.gif"));
                                              subItems.Add("Localize calendar", "#", Url.Content("~/content/images/icon_normal.gif"));
                                              subItems.Add("Populate alternate field", "#", Url.Content("~/content/images/icon_normal.gif"));
                                              subItems.Add("Display modes", "#", Url.Content("~/content/images/icon_normal.gif"));
                                              subItems.Add("Display button bar", "#", Url.Content("~/content/images/icon_normal.gif"));
                                              subItems.Add("Display multiple months", "#", Url.Content("~/content/images/icon_normal.gif"));
                                          });
                                   items.Add("AutoComplete", "#", Url.Content("~/webshared/home/images/dj_icons/icon_autoComplete.gif"))
                                           .Items(subItems =>
                                           {
                                               subItems.Add("Default feature", "#", Url.Content("~/content/images/fav.gif"));
                                               subItems.Add("Remote data source", "#", Url.Content("~/content/images/fav.gif"));
                                               subItems.Add("Remote data with caching", "#", Url.Content("~/content/images/fav.gif"));
                                               subItems.Add("Scrollable results", "#", Url.Content("~/content/images/ok.gif"));
                                               subItems.Add("Multiple & remote", "#", Url.Content("~/content/images/ok.gif"));
                                           });
                               })
                               .Render();
            %>
        </td>
        <td  style="vertical-align:top;">
        <% Ajax.Dna().CollapsablePanel()
               .Title("Animation Options")
               .Body(() => {
               %>
               <dl>
                <dt>Effects </dt>
                <dd>
                    <span style="margin-right: 5px; width: 80px;">Show effects:</span><% var showEffect=jQueryEffects.Blind;
                                            Ajax.Dna().ComboBox()
                                                .DropDownStyle(DropdownStyles.DropdownList)
                                                .Select("Blind")
                                                .Options(opts => {
                                                    opts.OnItemSelected = "$(\"#treeview1\").dtree(\"option\",\"showEffect\",$(this).val().toLocaleLowerCase());";
                                                })
                                                .Bind(showEffect)
                                                .Render(); %>
                </dd>
                <dd style="margin-top:5px;">
                    <span style="margin-right: 5px; width: 80px;">Hide effects:</span><% var hideEffect=jQueryEffects.Blind;
                                            Ajax.Dna().ComboBox()
                                                .DropDownStyle(DropdownStyles.DropdownList)
                                                .Select("Blind")
                                                .Options(opts => {
                                                    opts.OnItemSelected = "$(\"#treeview1\").dtree(\"option\",\"hideEffect\",$(this).val().toLocaleLowerCase());";
                                                })
                                                .Bind(hideEffect)
                                                .Render(); %>
                </dd>
                <dd style="margin-top:5px;">
                    <span style="margin-right: 5px; width: 80px;">Duration:<label id="dispValue">100</label>ms</span>
                    <% Ajax.Dna().Slider()
                           .HtmlAttributes(new { style = "margin-top:5px;" })
                           .Maximum(3000)
                           .Minimum(100)
                           .Value(100)
                           .FillTextTo("dispValue")
                           .Options(opts =>
                           {
                               opts.OnStopSliding = "$(\"#treeview1\").dtree(\"option\",\"duration\",ui.value);";
                           })
                           .Render(); %>
                </dd>
            </dl>
               <%
               })
               .Render();
                %>
        </td>
    </tr>
</table>