<?php

require_once '../lib/Kendo/Autoload.php';

?>

<div class="demo-section k-content">

<?php
    $panelbar = new \Kendo\UI\PanelBar('panelbar');

    $panelbar->expandMode("multiple");

    $salesforecasts = new \Kendo\UI\PanelBarItem("Sales Forecasts");
    $salesforecasts->addItem(
        new \Kendo\UI\PanelBarItem("Q1 Forecast"),
        new \Kendo\UI\PanelBarItem("Q2 Forecast"),
        new \Kendo\UI\PanelBarItem("Q3 Forecast"),
        new \Kendo\UI\PanelBarItem("Q4 Forecast")
    );

    $projects = new \Kendo\UI\PanelBarItem("Projects");
    $projects->addItem(
        new \Kendo\UI\PanelBarItem("New Business Plan"),
        $salesforecasts,
        new \Kendo\UI\PanelBarItem("Sales Reports")
    );
    $panelbar->addItem($projects);

    $programs = new \Kendo\UI\PanelBarItem("Programs");
    $programs->addItem(
        new \Kendo\UI\PanelBarItem("Monday"),
        new \Kendo\UI\PanelBarItem("Tuesday"),
        new \Kendo\UI\PanelBarItem("Wednesday"),
        new \Kendo\UI\PanelBarItem("Thursday"),
        new \Kendo\UI\PanelBarItem("Friday")
    );
    $panelbar->addItem($programs);

    $communication = new \Kendo\UI\PanelBarItem("Communication");
    $communication->enabled(false);
    $panelbar->addItem($communication);

    echo $panelbar->render();
?>

</div>
<div class="box">
    <div class="box-col">
        <h4>Focus</h4>
        <ul class="keyboard-legend">
            <li>
                <span class="button-preview">
                    <span class="key-button leftAlign wider">Alt</span>
                    +
                    <span class="key-button">w</span>
                </span>
                <span class="button-descr">
                    focuses the widget
                </span>
            </li>
        </ul>
    </div>
    <div class="box-col">
        <h4>Supported keys and user actions</h4>
        <ul class="keyboard-legend">
            <li>
                <span class="button-preview">
                    <span class="key-button wider leftAlign">up arrow</span>
                </span>
                <span class="button-descr">
                    highlights previous item
                </span>
            </li>
            <li>
                <span class="button-preview">
                    <span class="key-button wider leftAlign">left arrow</span>
                </span>
                <span class="button-descr">
                    highlights previous item
                </span>
            </li>
            <li>
                <span class="button-preview">
                    <span class="key-button wider leftAlign">down arrow</span>
                </span>
                <span class="button-descr">
                    highlights next item
                </span>
            </li>
            <li>
                <span class="button-preview">
                    <span class="key-button wider leftAlign">right arrow</span>
                </span>
                <span class="button-descr">
                    highlights next item
                </span>
            </li>
        </ul>
    </div>
    <div class="box-col">
        <h4>&nbsp;</h4>
        <ul class="keyboard-legend">
            <li>
                <span class="button-preview">
                    <span class="key-button">home</span>
                </span>
                <span class="button-descr">
                    selects first item in the list
                </span>
            </li>
            <li>
                <span class="button-preview">
                    <span class="key-button">end</span>
                </span>
                <span class="button-descr">
                    selects last item in the list
                </span>
            </li>
            <li>
                <span class="button-preview">
                    <span class="key-button wider rightAlign">enter</span>
                </span>
                <span class="button-descr">
                    selects highlighted item / toggles item's group
                </span>
            </li>
            <li>
                <span class="button-preview">
                    <span class="key-button widest">space</span>
                </span>
                <span class="button-descr">
                    selects highlighted item / toggles item's group
                </span>
            </li>
        </ul>
    </div>
</div>

<script>
    $(document.body).keydown(function (e) {
        if (e.altKey && e.keyCode == 87) {
            $("#panelbar").focus();
        }
    });
</script>