function shakeBell(element) {

    if (element.hasClass("bell-shake")) {
        if (element.hasClass("bell-shaking")) {
            element.removeClass("bell-shaking");
        }
        else {
            element.addClass("bell-shaking");
        }
    }
}

function loadNotifications() {
    $.ajax({
        url: "/API/" + IdNotifModuleItem + "/ListeNotifInBell",
        type: "GET",
        success: function (data) {

            if (data != null && data.content != null) {
                showModal($(".bell").data("notifications-title"), data.content);
            }
        },
        error: function () {
            $(".error").text(MsgErreurInconnu);
        }
    });
}

function loadNotificationContent(notificationId, element) {
    $.ajax({
        url: "/API/" + IdNotifModuleItem + "/ContentNotif",
        type: "GET",
        data: { notificationId: notificationId, },
        dataType: "json",
        contentType: "application/json",
        success: function (data) {

            if (data != null && data.ContentNotif != null) {
                $(element).find(".panel-body").html(data.ContentNotif.Content);
            }

            element.find(".notification-spinner").hide();
            element.find(".notification-delete").show();
        },
        error: function () {
            $(".error").text(MsgErreurInconnu);
        }
    });
}

function deleteNotification(notificationId, element, inPopIn) {
    $.ajax({
        url: "/API/" + IdNotifModuleItem + "/DeleteNotif",
        type: "GET",
        data: { notificationId: notificationId, },
        dataType: "json",
        contentType: "application/json",
        success: function (data) {
            if (data != null && data.status == "OK") {

                var parent = $(element).parent();

                $(element).remove();

                if (inPopIn === true) {
                    $('.carousel-indicators').find('.active').remove();
                    $('.carousel-indicators').find('li').first().addClass('active');
                    $('.carousel-inner').find('.item').first().addClass('active');
                }

                //Ferme automatiquement la modal si toutes les notifications sont supprimées ...
                if (!parent.find(".panel").length) {
                    hideModal();
                }
            }
        },
        error: function () {
            $(".error").text(MsgErreurInconnu);
        }
    });
}

$(document).ready(function () {

    $("#lnkShowNotifInBell").on('click', function () {
        loadNotifications();
    });

    $('body').on('click', '.notification-delete', function () {
        var element = $(this).closest('.panel');
        deleteNotification(element.attr("id"), element, false);
    });
    $('body').on('click', '.notification-delete-popin', function () {
        var element = $(this).closest('.panel');
        deleteNotification(element.attr("id"), element, true);
    });

    $('body').on('click', '.notification-read, .notification-unread', function () {
        var element = $(this).closest('.panel');

        element.find(".notification-delete").hide();
        element.find(".notification-spinner").show();

        loadNotificationContent(element.attr("id"), element);

        if ($(this).hasClass("notification-unread")) {
            $(this).removeClass("notification-unread");
            $(this).addClass("notification-read");
        }

        $(this).unbind("click");
    });

    $('#NotifPopinModal').modal('show');


    // la div du module Notification, a laquelle on appliquera le style .stickyNotif
    var elDivheadbandDown = ($(".headbandDown"));
    var elDivheadbandHigh = ($(".headbandHigh"));
    // l'article contenant l'intégralité du module Notification. Pas de style à appliquer.
    var elArticleheadbandDown = elDivheadbandDown.parent();
    var elArticleheadbandHigh = elDivheadbandHigh.parent();
    // la row complète qui accueil le module Notification. On lui appliquera le style .stickyRow
    var elRowheadbandDown = elArticleheadbandDown.parent();
    var elRowheadbandHigh = elArticleheadbandHigh.parent();
    // on applique d'abord le style de la row, qui la rend stycky, et permet de cliquer au travers.
    elRowheadbandDown.addClass("stickyRowBottom");
    elRowheadbandHigh.addClass("stickyRowTop");
    // on applique le style de la div, qui gère la couleur, et réactive le clic pour le bouton suivant.
    elDivheadbandDown.addClass("stickyNotif");
    elDivheadbandHigh.addClass("stickyNotif");    

    $(".notification-spinner").hide();
});

window.setInterval(function () { $(".bell-alert").each(function () { shakeBell($(this)); }); }, 5000);
window.setInterval(function () { $(".bell-warning").each(function () { shakeBell($(this)); }); }, 15000);
window.setInterval(function () { $(".bell-success, .bell-information").each(function () { shakeBell($(this)); }); }, 30000);


/* MODAL */
function showModal(title, content) {
    $("#masterModal .modal-title").html(title);
    $("#masterModal .modal-body").html(content);
    $('#masterModal').modal('show');
};
function hideModal() {
    $('#masterModal').modal('hide');
    $("#masterModal .modal-title").html('');
    $("#masterModal .modal-body").html('');
};;