var widget = $('.widgetAvatar');
widget.css({'top': '200%', 'left': '200%'});

//====  Au clic sur une image de div.boxAvatars ====
$('.boxAvatars img').click(function (event) {
    //------------- Style + Animation
    var img = $(this),
        pos = img.offset(),
        widgetWidth = widget.width(),
        //widgetHeight = widget.height(),
        imgWidth = img.width(),
        imgHeight = img.height(),
        widgetCoord;

    $(this).addClass('withToolTip');
    widget.addClass('opened');

    //_______ Responsivité ________
    //ImgAvatars en bordure gauche
    if (pos.left < 45) {
        widgetCoord = {'top': (pos.top + imgHeight), 'left': (pos.left - 25)};
    }
    //ImgAvatars en bordure droite
    else if ($(window).width() - pos.left <= 150) {
        widgetCoord = {'top': (pos.top + imgHeight), 'left': (pos.left - imgWidth * 2 + 25)};
    }
    //Pour toutes les autres img
    else {
        widgetCoord = {'top': (pos.top + imgHeight), 'left': (pos.left + imgWidth / 2 - widgetWidth / 2)};
    }

    widget.css(widgetCoord);

    event.stopPropagation();
});


$(document).click(function (e) {
    /*if ($('.boxAvatars img').is($('.withToolTip'))){
        console.log('il y a une image avec la classe "withToolTip" dans le DOM');
    }*/
    if ($(e.target).is(widget) === false) {
        $(".boxAvatars img").removeClass("withToolTip");
        widget.removeClass('opened');
        widget.css({'top': '200%', 'left': '200%'});
    }
});








//====  Au clic sur Icônes dans WidgetAvatars ====
var btnSelect = $('.selectionAvatar'),
    btnDelete = $('.delAvatar'),
    idAdmin = $('#maCouleur').data('mon-id');

//---------- SÉLECTIONNER UN AVATAR
btnSelect.click(function (e) {
    var pathToImg = $('.withToolTip').attr('id');

    // Pour ne pas surcharger le cache
    e.preventDefault(e);

    $.ajax({
        url: "../../pages/comptes/selectionne_avatar.php",
        type: "POST",
        data: {id: idAdmin, pathToImg: pathToImg},
        dataType: 'html',
        success: function () {
            $('.header_top_centre_right .img_avatar').attr('src', '../../img/avatars/' +pathToImg);
        }
    })
});
//---------- End SÉLECTIONNER UN AVATAR


//---------- SUPPRIMER UN AVATAR
btnDelete.click(function (e) {
    var pathToImg = $('.withToolTip').attr('id'),
        srcAvatarHeader = $('.header_top_centre_right .img_avatar').attr('src');

    if (!('../../img/avatars/'+pathToImg === srcAvatarHeader)) {

        e.preventDefault(e);

        $.ajax({
            url: "../../pages/comptes/supprime_avatar.php",
            type: "POST",
            data: {id: idAdmin, pathToImg: pathToImg},
            dataType: 'html',
            success: window.location.reload()
        })
    } else {
        alert('Choisit un autre avatar pour supprimer celui-ci');
    }
});
//---------- End SUPPRIMER UN AVATAR

