@{
    ViewBag.Title = "Overview";
    Layout = "~/Views/Shared/_WidgetLayout.cshtml";
}

@section header
{
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $(":input[type='text'],:input[type='password'],textarea").wijtextbox();
            $("#select1").wijdropdown();
            $(":input[type='radio']").wijradio();
            $(":input[type='checkbox']").wijcheckbox();
            $("#wijmo-button").button();
            $("#wijmo-button").click(function () { return false; });
        });
    </script>
    <style type="text/css">
        .formdecorator label
        {
            display: block;
        }
        
        .formdecorator
        {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .formdecorator li
        {
            clear: both;
            margin-bottom: 1em;
        }
    </style>
}

            <!-- Begin demo markup -->
            <ul class="formdecorator">
                <li>
                    <h3>
                        Input
                    </h3>
                    <input id="textbox" type="text" />
                </li>
                <li>
                    <h3>
                        TextArea</h3>
                    <textarea id="area" rows="2" cols="50"></textarea>
                </li>
                <li>
                    <h3>
                        Dropdown with Optgroups</h3>
                    <select id="select1">
                        <optgroup label="A-G">
                            <option>A</option>
                            <option selected="selected">B</option>
                            <option>C</option>
                            <option>D</option>
                            <option>E</option>
                            <option>F</option>
                            <option>G</option>
                        </optgroup>
                        <optgroup label="H-M">
                            <option>H</option>
                            <option>I</option>
                            <option>J</option>
                            <option>K</option>
                            <option>L</option>
                            <option>M</option>
                        </optgroup>
                    </select>
                </li>
                <li>
                    <h3>
                        CheckBox</h3>
                    <input id="checkbox1" type="checkbox" /><label for="checkbox1">checkbox1</label>
                    <input id="checkbox2" type="checkbox" /><label for="checkbox2">checkbox2</label>
                    <input id="checkbox3" type="checkbox" /><label for="checkbox3">checkbox3</label>
                    <input id="checkbox4" type="checkbox" /><label for="checkbox4">checkbox4</label>
                </li>
                <li>
                    <h3 id="radiobutton">
                        Radio</h3>
                    <input type="radio" name="radiobutton1" id="radio1" /><label for="radio1">radio1</label>
                    <input type="radio" name="radiobutton1" id="radio2" /><label for="radio2">radio2</label>
                    <input type="radio" name="radiobutton1" id="radio3" /><label for="radio3">radio3</label>
                    <input type="radio" name="radiobutton1" id="radio4" /><label for="radio4">radio4</label>
                </li>
                <li>
                    <h3>
                        Button</h3>
                    <button id="wijmo-button">
                        Submit</button>
                </li>
            </ul>

    @section description
    {
        <p>
            The Wijmo Form Decorator widgets (wijradio, wijcheckbox, wijdropdown, wijtextbox)
            are used to decorate a standard HTML form elements. The Form Decorator widgets allow
            any form element to be styled uniformly in any browser.
        </p>
    }
