<?php
require_once '../lib/Kendo/Autoload.php';
?>

<?php

$popupNotification = new \Kendo\UI\Notification('popupNotification');

echo $popupNotification->render();

$staticNotification = new \Kendo\UI\Notification('staticNotification');
$staticNotification->appendTo('#appendto');

echo $staticNotification->render();

?>

 <div class="demo-section k-content">
    <h4>Show notification</h4>
    <p>
        <button id="showPopupNotification" class="k-button">As a popup at bottom-right</button><br />
        <button id="showStaticNotification" class="k-button">Static in the panel below</button>
    </p>
    <div style="padding-top: 1em;">
        <h4>Hide notification</h4>
        <button id="hideAllNotifications" class="k-button">Hide All Notifications</button>
    </div>
</div>

<div id="appendto" class="demo-section k-content"></div>

<style>
    .demo-section {
        text-align: center;
        line-height: 4em;
    }
    .demo-section .k-button {
        width: 250px;
    }
</style>

<script>
$(document).ready(function() {
  var popupNotification = $("#popupNotification").data("kendoNotification");
  var staticNotification = $("#staticNotification").data("kendoNotification");

  $("#showPopupNotification").click(function(){
    var d = new Date();
    popupNotification.show(kendo.toString(d, 'HH:MM:ss.') + kendo.toString(d.getMilliseconds(), "000"), "error");
  });

  $("#showStaticNotification").click(function(){
    var d = new Date();
    staticNotification.show(kendo.toString(d, 'HH:MM:ss.') + kendo.toString(d.getMilliseconds(), "000"), "info");
    var container = $(staticNotification.options.appendTo);
    container.scrollTop(container[0].scrollHeight);
  });

  $("#hideAllNotifications").click(function(){
    popupNotification.hide();
    staticNotification.hide();
  });
});
</script>