@using Kreta.Web.Helpers

<script id="infoTemplate" type="text/x-kendo-template">
    <div class="k-notification-wrap customNotification">
        <table>
            <tr>
                <td>
                    <span>#: message #</span>
                </td>
                <td>
                    <span class="k-icon k-group-delete"></span>
                </td>
                <td>
                    <a href="@Url.Action("Index", "Profil", new { area = "Adminisztracio" })">
                        <span class="k-icon k-i-custom"></span>
                    </a>
                </td>
                <td>
                    <span class="k-icon k-i-arrow-e" onclick="showTip();"></span>
                </td>
            </tr>
            @*<tr>
                <td colspan="3" class="customNotificationOption">Tovább a beállításokra</td>
            </tr>*@
        </table>
    </div>
</script>

<script>
    var orgininalWidth = 0;
    function onShow(e) {
        if (e.sender.getNotifications().length == 1) {
            if (orgininalWidth == 0) {
                orgininalWidth = e.element.width();
            }
    
            tippResize(e);

            $(window).resize(function () {
                tippResize(e);
            });
        }
    }

    function tippResize(e)
    {
        if (e.sender.getNotifications().length == 1) {
            var newWidth = $(window).width() * 0.8;
            if (e.element.width() > newWidth || e.element.width() < orgininalWidth) {
                e.element.width(newWidth);
                e.element.parent().css({ width: newWidth });
            }

            var element = e.element.parent(),
                eWidth = element.width(),
                eHeight = element.height(),
                wWidth = $(window).width(),
                wHeight = $(window).height(),
                newTop, newLeft;

            newLeft = Math.floor(wWidth / 2 - eWidth / 2);
            newTop = Math.floor(wHeight / 2 - eHeight / 2);

            e.element.parent().css({ left: newLeft, top: null, right: 100, bottom: 0 });
        }
    }

    var tipNum = -1;

    function showTip() {
        var tipp = $('#tippPopupNotification').data('kendoNotification');
        if (tipp) {
            tipp.hide();
            //tipp.getNotifications().parent().remove();

            tipp.setOptions({
                animation: {
                    open: {
                        effects: "slideIn:left"
                    },
                    close: {
                        effects: "slideIn:right",
                        reverse: true
                    }
                },
                autoHideAfter: 20000
            });

            var list = new Array();
            $('#tipList li').each(function () {
                list.push($(this).html());
            });

            if (tipNum == -1) {
                tipNum = Math.floor(Math.random() * list.length);
            }
            else {
                tipNum++;
                if (tipNum > list.length - 1) {
                    tipNum = 0;
                }
            }
            setTimeout(function () {
                tipp.show({
                    message: list[tipNum]
                }, 'info'); }, 200);
        }
    }
</script>

@Html.KretaNotification("tippPopupNotification", tip: true)