<?php

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

$dialog = new \Kendo\UI\Dialog('dialog');
$skipAction = new \Kendo\UI\DialogAction();
$skipAction->text("Skip this version");

$remindAction = new \Kendo\UI\DialogAction();
$remindAction->text("Remind me later");

$intallAction = new \Kendo\UI\DialogAction();
$intallAction->text("Install update")
             ->primary(true);

$dialog->title('Software Update')
       ->width('400px')
       ->closable(false)
       ->modal(false)
       ->initOpen("onInitOpen")
       ->open(onOpen)
       ->show(onShow)
       ->hide(onHide)
       ->close(onClose)
       ->addAction($skipAction, $remindAction, $intallAction)
       ->content('<p>A new version of <strong>Kendo UI</strong> is available. Would you like to download and install it now?<p>');

echo $dialog->render();
?>

<div class="box hidden-on-narrow">
    <h4>Console log</h4>
    <div class="console"></div>
</div>
<span id="show" style="display:none" class="k-button hidden-on-narrow">Click here to open the window.</span>

<div class="responsive-message"></div>

<script>
    var dialog = $("#dialog");
    var show = $("#show");

    function onInitOpen(e) {
        kendoConsole.log("event :: initOpen");
    }

    function onOpen(e) {
        kendoConsole.log("event :: open");
    }

    function onShow(e) {
        kendoConsole.log("event :: show");
    }

    function onHide(e) {
        kendoConsole.log("event :: hide");
    }

    function onClose(e) {
        show.fadeIn();
        kendoConsole.log("event :: close");
    }

    show.click(function () {
        dialog.data("kendoDialog").open();
        show.fadeOut();
    });
</script>

<style>
    #example {
        min-height: 370px;
    }

        #example .box {
            margin: 0;
        }

    #show {
        text-align: center;
        position: absolute;
        white-space: nowrap;
        padding: 1em;
        cursor: pointer;
        margin-top: 30px;
    }
</style>