<?php

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

?>

<div class="box">
    <h4>Animation Settings</h4>
    <ul class="options">
        <li>
            <input id="toggle" name="animation" type="radio" /> <label for="toggle">toggle animation</label>
        </li>
        <li>
            <input id="expand" name="animation" type="radio" checked="checked" /> <label for="expand">expand animation</label>
        </li>
        <li>
            <input id="opacity" type="checkbox" checked="checked" /> <label for="opacity">animate opacity</label>
        </li>
    </ul>
</div>

<div class="demo-section k-content">
    <h4>Conversation history</h4>
<?php
    $panelbar = new \Kendo\UI\PanelBar('panelbar');

    $today = new \Kendo\UI\PanelBarItem("Today");
    $today->expanded(true)
            ->addItem(
                new \Kendo\UI\PanelBarItem("Jane King"),
                new \Kendo\UI\PanelBarItem("Bob Fuller"),
                new \Kendo\UI\PanelBarItem("Lynda Kallahan"),
                new \Kendo\UI\PanelBarItem("Matt Sutnar")
            );
    $panelbar->addItem($today);

    $yesterday = new \Kendo\UI\PanelBarItem("Today");
    $yesterday
            ->addItem(
                new \Kendo\UI\PanelBarItem("Stewart "),
                new \Kendo\UI\PanelBarItem("Jane King"),
                new \Kendo\UI\PanelBarItem("Steven"),
                new \Kendo\UI\PanelBarItem("Ken Stone")
            );
    $panelbar->addItem($yesterday);

    $wednesday = new \Kendo\UI\PanelBarItem("Wednesday, February 01, 2012");
    $wednesday->addItem(
            new \Kendo\UI\PanelBarItem("Jane King"),
            new \Kendo\UI\PanelBarItem("Lynda Kallahan"),
            new \Kendo\UI\PanelBarItem("Todd "),
            new \Kendo\UI\PanelBarItem("Bob Fuller")
        );
    $panelbar->addItem($wednesday);

    $tuesday = new \Kendo\UI\PanelBarItem("Tuesday, January 31, 2012");
    $tuesday->addItem(
            new \Kendo\UI\PanelBarItem("Emily Davolio"),
            new \Kendo\UI\PanelBarItem("Matt Sutnar"),
            new \Kendo\UI\PanelBarItem("Bob Fuller"),
            new \Kendo\UI\PanelBarItem("Jenn Heinlein")
        );
    $panelbar->addItem($tuesday);

    $monday = new \Kendo\UI\PanelBarItem("Monday, January 30, 2012");
    $monday->addItem(
            new \Kendo\UI\PanelBarItem("Matt Sutnar"),
            new \Kendo\UI\PanelBarItem("Joshua"),
            new \Kendo\UI\PanelBarItem("Michael"),
            new \Kendo\UI\PanelBarItem("Jenn Heinlein")
        );
    $panelbar->addItem($monday);

    echo $panelbar->render();
?>
</div>
<script>
    $(document).ready(function() {
        var original = $("#panelbar").clone(true);
        original.find(".k-state-active").removeClass("k-state-active");

        $(".configuration input").change( function() {
            var panelBar = $("#panelbar"),
                clone = original.clone(true);

            panelBar.data("kendoPanelBar").collapse($("#panelbar .k-link"));

            panelBar.replaceWith(clone);

            initPanelBar();
        });

        var initPanelBar = function () {
            $("#panelbar").kendoPanelBar({ animation: { expand: { effects: getEffects()}} });
        };

        var getEffects = function () {
            return (($("#expand")[0].checked ? "expand:vertical " : "") +
                    ($("#opacity")[0].checked ? "fadeIn" : "")) || false;
        };
    });
</script>