(()=>{
    url_domain =(data)=> {
        let a = document.createElement('a');
        a.href = data;
        return a.hostname;
    };
    for (let script of document.getElementsByTagName('script')) {
        if (script.src.indexOf('messenger')>=0) {
            let url = script.src;
            window.messangerSrc = url_domain(url);
            break;
        }
    }
})();

class ChatMessenger {
    asyncLoadScripts (origin)  {
        this.loadCSS(`${origin}/messenger/css/messenger.css?cache=` + Date.now());
        this.loadCSS(`//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css`);
        console.log('origin', `${origin}js/mediasoup3/easy-mediasoup.bundle.min.js`);
        let files = [
            `//cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js`,
            '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js',
            '//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js',
            `${origin}js/mediasoup3/easy-mediasoup.bundle.min.js`,
            `${origin}js/mediasoup3/mediasSoup3.js`,
            `https://cdn.jsdelivr.net/npm/lsx-emojipicker@1.1.2/jquery.lsxemojipicker.min.js`,
            `https://cdn.jsdelivr.net/npm/hark@1.2.3/hark.bundle.js`
        ];
        if(!window.jQuery) {
            files.unshift('//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js');
        }
        let checkStateAndCall = (path, callback) => {
            let _success = false;
            return function () {
                if (!_success && (!this.readyState || (this.readyState === 'complete'))) {
                    _success = true;
                    callback();
                }
            };
        };

        let loadNext = () => { // chain element
            if (!files.length) {
                this.init();
                return;
            }
            let path = files.shift();
            let scriptElm = document.createElement('script');
            scriptElm.type = 'text/javascript';
            scriptElm.async = true;
            scriptElm.src = path;
            scriptElm.onload = scriptElm.onreadystatechange = checkStateAndCall(path, loadNext); // load next file in chain when
            let headElm = document.head || document.getElementsByTagName('head')[0];
            headElm.appendChild(scriptElm);
        };
        loadNext(); // start a chain
    };
    ago(date) {
        let plurial;
        let seconds = Math.floor((new Date() - date) / 1000);
        let interval = Math.floor(seconds / 31536000);
        if (interval > 0) {
            if (interval>1) {
                return eval(this.traductions.yearsAgo);
            } else {
                return eval(this.traductions.yearAgo);
            }
        }
        interval = Math.floor(seconds / 2592000);
        if (interval > 0) {
            if (interval>1) {
                return eval(this.traductions.monthsAgo);
            } else {
                return eval(this.traductions.monthAgo);
            }
        }
        interval = Math.floor(seconds / 86400);
        if (interval > 0) {
            if (interval>1) {
                return eval(this.traductions.daysAgo);
            } else {
                return eval(this.traductions.dayAgo);
            }
        }
        interval = Math.floor(seconds / 3600);
        if (interval > 0) {
            if (interval>1) {
                return eval(this.traductions.hoursAgo);
            } else {
                return eval(this.traductions.hourAgo);
            }
        }
        interval = Math.floor(seconds / 60);
        if (interval > 0) {
            if (interval>1) {
                return eval(this.traductions.minutesAgo);
            } else {
                return eval(this.traductions.minuteAgo);
            }

        }
        return 'now';
    };
    isEmpty  (obj){
        return Object.keys(obj).length === 0 && obj.constructor === Object;
    };
    getDateAgo  (date) {
        let res = new Date(date).getTime();
        return ago(res);
    };
    loadCSS  (src) {
        let head = document.getElementsByTagName('HEAD')[0];
        let link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = src;
        head.appendChild(link);
    };

    async getWebmasterid  (url) {
        let res =  await $.ajax({
            url: this.ajax,
            type: 'POST',
            data: {a:'getWebmasterid', url:url}
        });
        return parseInt(res);
    };

    constructor(myUser = {}, notification = {}, callBackAddUser = false, callBackRemoveUser = false, traductions={}) {
        this.traductions = {
            yourMessage:    "Your message",
            minuteAgo:      "`${interval} min ago.`",
            minutesAgo:     "`${interval} mins ago.`",
            hourAgo:        "`${interval} hour ago.`",
            hoursAgo:       "`${interval} hours ago.`",
            dayAgo:         "`${interval} day ago.`",
            daysAgo:        "`${interval} days ago.`",
            monthAgo:       "`${interval} month ago.`",
            monthsAgo:      "`${interval} months ago.`",
            yearAgo:        "`${interval} year ago.`",
            yearsAgo:       "`${interval} years ago.`",
        };
        this.traductions =  {   ...traductions,   ...this.traductions};
        if (!window.messangerSrc) {
            window.messangerSrc = 'html5-chat.com';
        }
        let origin = `//${window.messangerSrc}/`;
        if (myUser.ajax) {
            this.ajax = myUser.ajax;
        } else {
            this.ajax = origin + 'ajax.php';
        }
        if (!myUser.el) {
            myUser.el = 'button[data-userid], div[data-userid]';
        }
        if (!myUser.imagePath) {
            myUser.imagePath = '';
        }

        this.myUser = myUser;
        this.users = new Map();
        this.mutedUsers = new Map();
        this.container = 'messengerContainer';
        this.notification = notification;
        this.callBackAddUser = callBackAddUser;
        this.callBackRemoveUser = callBackRemoveUser;
        this.socket = {};
        this.asyncLoadScripts(origin);
    };
    pickRandomAvatar () {
        let rnd = Math.round(Math.random()*10) + 1;
        return `https://html5-chat.com/img/avatars/${rnd}.svg`;
    };

    async getConfig  (webmasterid) {
        let res =  await $.ajax({
            url: this.ajax,
            type: 'POST',
            data: {a:'getConfig', webmasterid:webmasterid}
        });
        return JSON.parse(res);
    };

    async getDefaultRoom  (webmasterid) {
        let res =  await $.ajax({
            url: this.ajax,
            type: 'POST',
            data: {a:'getDefaultRoom', webmasterid:webmasterid}
        });
        return JSON.parse(res);
    };
    getMuted () {
        $.post(this.ajax, {a:'getMutedUsersAsArray', webmasterid:this.myUser.webmasterid, userid:this.myUser.id}, (jsonMuted)=> {
            if (jsonMuted) {
                jsonMuted = JSON.parse(jsonMuted);
                jsonMuted.forEach((muted) => {
                    this.mutedUsers.set(muted.muteduserid, muted);
                    let temp = `#messengerNotificatorContent div.messengerNotificatorUserItem[data-userid=${muted.muteduserid}]`;
                    $(temp).addClass('muted');
                });
            }
            this.restoreWindows();
        });
    };
    getUsersWhoSentMeMessages  () {
        this.socket.emit('getUsersWhoSentMeMessages', (messages)=>{
            if (!messages) return;
            messages = JSON.parse(messages);
            messages.forEach((message) => {
                let extra = JSON.parse(message.extras);
                let id = parseInt(message.fromid);
                let status = (this.users.get(id))?'messengerOnline':'messengerOffline';
                let user = {id: id, username:extra.from, avatar:extra.avatar, status:status};
                this.addUser(user);
            });
        });
    };

    async promptForUsername (){
        return new Promise((resolve)=>{
            let template = `
        <div id="modalMessenger">
            <input type="text" id="messengerInput" placeholder="Enter your username">
        </div>`;
            jQuery('#messengerContainer').append(template);
            jQuery(document).on('keyup', '#messengerInput', (e) => {
                e.preventDefault();
                e.stopImmediatePropagation();
                let keyCode = e.keyCode || e.which;
                if (keyCode===13) {
                    let username = jQuery(e.currentTarget).val();
                    if (username) {
                        jQuery('#modalMessenger').remove();
                        resolve(username);
                    }
                }
            });
        });
    };

    filterUsers (username = '') {
        let filterOnline = $('#filterOnlineUsers').hasClass('onlineFilter');
        jQuery('#messengerNotificatorContent .messengerNotificatorUserItem').show();
        if (filterOnline) {
            let $els = $('div.messengerStatus.messengerOffline');
            $els.each((index, element)=> {
                $(element).parent().hide();
            });
        }
        if (!username) return;
        let temp = `#messengerNotificatorContent .messengerNotificatorUserItem:not([data-username*='${username}'])`;
        jQuery(temp).hide();
        console.log('filterOnline', filterOnline);
    };

    addMessengerNotificator (){
        let template = `
            <div id="messengerNotificator">
                <div id="messengerNotificatorHeader">
                    <div id="filterOnlineUsers" title="Toggle All or online only users"></div>
                    <span>${this.traductions.users}</span>
                    <span id="messengerNotificatorCounter"></span>
                    <i class="fa fa-2x fa-caret-down"></i>
                    <button id="messengerExit"><i class="fa fa-sign-out" title="exit chat"></i></button>
                </div>
                <div id="genderFilterDiv"></div>
                
                <div style="display: flex;">
                    <input id="messengerNotificatorSearch" type="text" placeholder="${this.traductions.searchUsers}">
                    <button id="messengerClearSearch"><i class="fa fa-close"></i></button>
                </div>
                <div id="messengerNotificatorContent"></div>
                <div id="messengerNotificatorFooter"></div>
            </div>
        `;
        jQuery('#' + this.container).append(template);
        let $messengerNotificatorHeader = jQuery('#messengerNotificatorHeader');
        $messengerNotificatorHeader.on('mouseup', ()=> {
            $('#messengerNotificator').toggleClass('messengerNotificatorMinimized');
        });
        jQuery('#messengerClearSearch').on('mouseup', ()=> {
            $('#messengerNotificatorSearch').val('');
            this.filterUsers();
        });
        jQuery('#messengerNotificatorSearch').on('keyup', (e)=>{
            e.preventDefault();
            e.stopImmediatePropagation();
            let search = jQuery(e.currentTarget).val();
            this.filterUsers(search);
        });
        jQuery('#filterOnlineUsers').on('mouseup', (e)=> {
            e.preventDefault();
            e.stopImmediatePropagation();
            jQuery(e.currentTarget).toggleClass('onlineFilter');
            let search = jQuery(e.currentTarget).val();
            this.filterUsers(search);
        });
        jQuery('#messengerExit').on('mouseup', (e)=>{
            localStorage.removeItem('user');
            jQuery.each(localStorage, (key, data)=>{
                if (typeof key === 'string' && key.indexOf('messenger_')===0) {
                    localStorage.removeItem(key);
                }
            });
            window.location = this.config.quitUrl;
        });
    };

    async init ()  {
        let el = `<div id="${this.container}"></div>`;
		if (!jQuery(`#${this.container}`).length) {
			jQuery('body').append(el);
		}
        if (this.isEmpty(this.notification)) {
            this.addMessengerNotificator();
        }

        let localUser = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : false;
        if (!this.myUser.avatar) {
            this.myUser.avatar = this.pickRandomAvatar();
        }
        if (!this.myUser.username) {
            this.myUser.username = (localUser && localUser.username) ? localUser.username : await this.promptForUsername();
        }
        if (!this.myUser.id) {
            this.myUser.id = (localUser && localUser.id)? localUser.id :Date.now();
        }
        this.myUser.streamid = Date.now();
        localStorage.setItem('user', JSON.stringify(this.myUser));

        if (!this.myUser.webmasterid) {
            this.myUser.webmasterid = (localUser && localUser.webmasterid) ? localUser.webmasterid : await this.getWebmasterid(window.messangerSrc);
        }
        localStorage.setItem('user', JSON.stringify(this.myUser));
        console.log('init..', this.myUser);
        jQuery('button[data-userid]').addClass('messengerOffline');
        this.initEvents();
        setInterval(()=>{
            jQuery('#messengerContainer div.content div.messages span.timeAgo').each((index, element)=> {
                let date = jQuery(element).data('ago');
                let ago = this.ago(date);
                jQuery(element).text(ago);
            });
        }, 60000);
        this.config = await this.getConfig(this.myUser.webmasterid);
        this.myUser.room = await this.getDefaultRoom(this.myUser.webmasterid);
        this.connectToServer();
        this.getMuted();
    };


    getChat(userid){
        return jQuery(`#messengerContainer div.content[data-userid=${userid}]`);
    };

    updateElements (user) {
        //console.log('updateElements', user);
        jQuery(`button[data-userid=${user.id}]`).removeClass('messengerOffline').removeClass('messengerOnline').addClass(user.status);
        jQuery(`#messengerContainer div.header`).removeClass('messengerOffline').removeClass('messengerOnline').addClass(user.status);

    };
    updateUsersNumber () {
        jQuery('#messengerNotificatorCounter').text(this.users.size);
    };

    connectToServer () {
        if (this.myUser.username.length>50) {
            return;
        }
        this.socket = io.connect(this.config.nodeMessenger, {
            'force new connection': true,
            transports: ['websocket'],
            secure: true,
            query: this.myUser
        });
        this.socket.on('connected', ()=> {
            console.log('Connected to server !');
            this.socket.emit('enterRoom', this.myUser);
            //connectMS(this.config.webrtcServerUrl, this.myUser.id, this.config.VIDEO_CONSTRAINTS);
            this.updateNotification();
        });
        this.socket.on('call1to1', (user)=> {
            if (this.mutedUsers.has(user.id)) {
                return;
            }
            let $chat = this.getChat(user.id);
            let message = `<strong>${user.username}</strong> requested a video call.`;
            this.serverMessage($chat, message, 'serverMessage');
            if (this.myUser.call1to1User) {
                return;
            }
            user.isCaller = true;
            this.myUser.call1to1User = user;
            this.displayCall1to1(user);

        });
        this.socket.on('call1to1Cancelled', (user)=> {
            this.closeMyWebcam();
            console.log(user);
        });

        this.socket.on('call1to1Accepted', (user)=> {
            jQuery('div.messengerWebcamContainer div#MessengerPhotoCallerContainer').hide();
            playStream(user.streamid, '#hisMessengerVideo');
            jQuery('#hisMessengerVideo').show();
            jQuery('#messengerMuteAudioBtn').removeClass('hiddenButton');
            jQuery('#messengerToggleWebcamBtn').addClass('hiddenButton');
        });

        this.socket.on('getUsers', (usersInRoom)=> {
            //console.log('getUsers', usersInRoom);
            for (let userid in usersInRoom) {
                let user = usersInRoom[userid];
                user.status = 'messengerOnline';
                this.addUser(user);
                if (this.callBackAddUser) {
                    this.callBackAddUser(user);
                }
                user.status = 'messengerOnline';
                this.updateElements(user);
            }
            this.getUsersWhoSentMeMessages();
        });

        this.socket.on('receiveMessenger', (fromUser, toUser, message, extras)=> {
            if (this.mutedUsers.has(parseInt(fromUser.id))) {
                return;
            }
            this.appendMessage(fromUser, toUser, message, extras);
            this.playMP3(this.config.soundPrivateMessageReceived);
        });

        this.socket.on('messengerWrites', (user)=> {
            let $e = jQuery(`#messengerContainer div.content[data-userid=${user.id}] span.isWrtiting`);
            if (!$e.hasClass('writesBlink')) {
                $e.addClass('writesBlink');
                setTimeout(()=> {
                    $e.removeClass('writesBlink');
                }, 4500);
            }
        });

        this.socket.on('addUser', (user)=> {
            if (this.callBackAddUser) {
                this.callBackAddUser(user);
            }
            user.status = 'messengerOnline';
            this.updateElements(user);
            this.addUser(user);
        });
        this.socket.on('removeUser', (user)=> {
            user.status = 'messengerOffline';
            this.updateElements(user);
            if (this.callBackRemoveUser) {
                this.callBackRemoveUser(user);
            }
            this.removeUser(user);
            if (this.myUser.call1to1User && this.myUser.call1to1User.id === user.id) {
                this.closeMyWebcam();
            }
        });
    };

    removeUser (user) {
        let el = `#messengerNotificatorContent div.messengerNotificatorUserItem[data-userid=${user.id}] div.messengerStatus`;
        jQuery(el).removeClass('messengerOnline').removeClass('messengerOffline').addClass('messengerOffline');
        this.updateUsersNumber();
        this.users.delete(parseInt(user.id));
    };

    addRandomUsers (num = 50) {
        for(let i=0;i<num;i++) {
            let rnd = Math.round(Math.random()*1000);
            this.addUser({id:rnd, username:`guest_${rnd}`})
        }
    };

    addUser (user) {
    	let genderEl = '' +
			`<div id="genderChecboxContainer${user.gender}">
				<label for="genderChecbox${user.gender}">${user.gender}</label>
				<input value="${user.gender}" checked type="checkbox" name="genderChecbox${user.gender}" id="genderChecbox${user.gender}">
			</div>`;
    	if (user.gender && user.gender!=='undefined' && jQuery(`#genderChecboxContainer${user.gender}`).length===0) {
			jQuery('#genderFilterDiv').append(genderEl);
		}

        let eluser = `#messengerNotificatorContent div.messengerNotificatorUserItem[data-userid=${user.id}]`;
        $(eluser).remove();
        let $messengerNotificatorContent = jQuery('#messengerNotificatorContent');
        if (!$messengerNotificatorContent.length) return;
        let title = (this.myUser.id===user.id)?"That's you !" : user.username;
        let profileEl = (user.profile)?`<a href="${user.profile}"><i class="fa fa-info-circle fa-2x"></i></a>`:'';
        let gender = (user.gender)?user.gender:'';
        let el = `
                <div title="${gender}" class="messengerNotificatorUserItem ${gender}" data-profile="${user.profile}" data-userid="${user.id}" data-username="${user.username}" data-avatar="${user.avatar}" title="${title}"> 
                    <div><img src="${this.myUser.imagePath}${user.avatar}" alt=""></div>
                    <div>${user.username}</div>
                    <div class="messengerStatus ${user.status}"></div>
                    <div class="profileUser" data-profile="${user.profile}">${profileEl}</div>
                </div>
                `;
        $messengerNotificatorContent.prepend(el);
        this.users.set(parseInt(user.id), user);
        this.updateUsersNumber();
		this.updateFilterGenders();
    };

    messengerWindowDelete (userid) {
        localStorage.removeItem(`messenger_${userid}`);
    };

    messengerWindowSave (user) {
        let $chat = this.getChat(user.id);
        let top = $chat.css('top');
        let left = $chat.css('left');
        let data = {username:user.username, left:left, top:top, avatar:user.avatar};
        localStorage.setItem(`messenger_${user.id}`, JSON.stringify(data));
    };

    messengerWindowRestore (user) {
        let data = localStorage.getItem(`messenger_${user.id}`);
        if (data) {
            data = JSON.parse(data);
            let $chat = this.displayChat(user);
            $chat.css('left', data.left);
            $chat.css('top', data.top);
        }
    };

    restoreWindows () {
        jQuery.each(localStorage, (key, data)=>{
            if (typeof key === 'string') {
                let arr = key.split('messenger_');
                if (arr.length > 1) {
                    try {
                        data = JSON.parse(data);
                        let user = {id: arr[1], username: data.username, avatar:data.avatar};
                        this.messengerWindowRestore(user);
                    } catch(e) {
                    }
                }
            }
        });
    };

    sendMessenger (message, toUser, extras={}) {
        extras.time = Date.now();
        extras.from = this.myUser.username;
        extras.avatar = this.myUser.avatar;
        this.socket.emit('sendMessenger', this.myUser, toUser, message, extras);
    };
    call1to1HangOut () {
        this.socket.emit('call1to1Cancelled', this.myUser.call1to1User.id);
        this.closeMyWebcam();
    };
    closeMyWebcam () {
        unpublishOwnFeed('#myMessengerVideo');
        jQuery('.messengerWebcamContainer').remove();
        delete ChatHTML5.myUser.call1to1User;
    };

    displayCall1to1 (userWhoCalls)  {
        let classeWebcamBtn = (parseInt(this.myUser.id) === parseInt(userWhoCalls.id))?'hiddenButton':'';
        let template = `
        <div class="messengerWebcamContainer">
            <video id="myMessengerVideo" autoplay="" playsinline="" muted=""></video>
            <video id="hisMessengerVideo" autoplay="autoplay" playsinline="" controls></video>
            <div class="webcamHeader"><i class="fa fa-phone"></i>
                <span id="messengerCallingUsername">${this.myUser.call1to1User.username}</span>
            </div>
            <div id="MessengerPhotoCallerContainer">
                <img src="${this.myUser.imagePath}${this.myUser.call1to1User.avatar}" alt="${this.myUser.call1to1User.username}">
            </div>
            <div class="webcamFooter">
                <div><button id="messengerMuteAudioBtn" title="Mute/Unmute your micro" class="hiddenButton"><i class="fa fa-microphone fa-2x"></i></button></div>
                <div><button id="messengerHangoutBtn" title="Hang out call"><i class="fa fa-phone fa-2x"></i></button></div>
                <div><button id="messengerToggleWebcamBtn"  title="Answer the call" class="${classeWebcamBtn}"><i class="fa fa-video-camera fa-2x"></i></button></div>
            </div>
        </div>`;
        jQuery('#messengerContainer').append(template);
    };

    updateNotification  () {
        this.socket.emit('getCountMessengerUnread', (messageCount)=>{
            if (!messageCount) {
                messageCount = '';
            }
            let html = `
                <div id="messengerNotificationButton">
                    <i class="fa fa-comment"></i> <span>${messageCount}</span>
                </div>
            `;
            jQuery(this.notification.id).html(html);
        });
    };

    selectChat (user) {
        let $chat = this.getChat(user.id);
        if (!$chat.length) {
            $chat = this.displayChat(user);
        } else {
            $chat.find('input').focus();
        }
        return $chat;
    };

    serverMessage ($chat, message, classe='serverMessage'){
        let now = Date.now();
        let ago = this.ago(now);
        let el = `<div class="message ${classe}">
                        <div class="messageUsername"><span class="timeAgo" data-ago="${now}">${ago}</span></div>
                        <div class="messageBubble">${message}</div>
                </div>
        `;
        let $messages = $chat.find('.messages');
        $messages.append(el);
        let objDiv = $messages[0];
        if (objDiv) {
            objDiv.scrollTop = objDiv.scrollHeight;
        }
    };

    appendMessage (fromUser, toUser, message, extras='')  {
        //console.log('appendMessage', fromUser, toUser, message, extras);
        let classe = 'messageOther';
        let $chat;
        if (fromUser.id === this.myUser.id) {
            $chat = this.getChat(toUser.id);
            classe = 'messageMine';
        } else {
            let exists = this.getChat(fromUser.id).length;
            $chat = this.selectChat(fromUser);
            if (!exists){
                return;
            }
        }
        if (!$chat.length) return;
        let ago = this.ago(extras.time);
        let el = `<div class="message ${classe}">
                        <div class="messageUsername"><span>${fromUser.username}</span><span class="timeAgo" data-ago="${extras.time}">${ago}</span></div>
                        <div class="messageBubble">${message}</div>
                </div>
        `;
        let $messages = $chat.find('.messages');
        $messages.append(el);
        let objDiv = $messages[0];
        if (objDiv) {
            objDiv.scrollTop = objDiv.scrollHeight;
        }
    };

	updateFilterGenders() {
		jQuery('#genderFilterDiv input').each(function(i, el) {
			let genre = $(el).val();
			let $checkBox = jQuery(`#genderChecbox${genre}`);
			if ($checkBox.prop('checked')) {
				$(`#messengerNotificatorContent div.${genre}`).show();
			} else {
				$(`#messengerNotificatorContent div.${genre}`).hide();
			}
		});

	}

    displayChat (user)  {
        user.id = parseInt(user.id);
        let headerClass = (this.users.get(user.id) && this.users.get(user.id).status ==='messengerOnline') ?'messengerOnline':'messengerOffline';
        let mutedClass = (this.mutedUsers.get(user.id)) ?'muted':'';
        let username = (user.profile!=="undefined")?`<a href="${user.profile}">${user.username}</a>`:user.username;
        let template = `
        <div class="content" data-userid="${user.id}" data-username="${user.username}">
            <div class="header ${headerClass}">
                <div><img class="messengerAvatar" src="${this.myUser.imagePath}${user.avatar}" alt="${user.username}">
                <strong>${username}</strong>
                <span class="isWrtiting">is writing</span>
                </div>
                <button class="muteUserBtn ${mutedClass}" title="Click to mute/unmute user"><i class="fa fa-check"></i></button>
                <button class="webcamBtn"><i class="fa fa-video-camera"></i></button>
                <button class="closeBtn"><i class="fa fa-close "></i></button>
            </div>
            <div class="messages">    
            </div>
            <form class="footer" onsubmit="return false;">
                <input type="text" data-userid="${user.id}" placeholder="${this.traductions.yourMessage}">
                <button type="button" class="messengerEmojiBtn">😀</button>
                <button type="button" class="clearMessengerBtn"><i class="fa fa-eraser"></i></button>
            </form>            
        </div>
        `;
        jQuery('#messengerContainer').append(template);
        jQuery(`div[data-userid=${user.id}]`).draggable({
            containment: 'parent',
            stack: 'div',
            handle: 'div.header',
            stop: ( e, ui )=> {
                console.log(ui.position.left, ui.position.top);
                this.messengerWindowSave(user);
            }
        });
        let $chat = this.getChat(user.id);
        this.messengerWindowSave(user);
        $chat.find('input').focus();
        $chat.find('.messengerEmojiBtn').lsxEmojiPicker({
            onSelect:(emoji)=>{
                let input = $(event.currentTarget).parents('form.footer').find('input')[0];
                const value = input.value;
                const start = input.selectionStart;
                const end = input.selectionEnd;
                let textToInsert = emoji.value.replace('&#','0');
                input.value = value.slice(0, start) + String.fromCodePoint(textToInsert) + value.slice(end);
                // update cursor to be at the end of insertion
                input.selectionStart = input.selectionEnd = start + textToInsert.length;
                input.focus();
            }
        });

        // get History
        if (this.mutedUsers.has(parseInt(user.id))) {
            return false;
        }
        this.socket.emit('getMessengerMessages', user.id,  (messages)=>{
            messages = JSON.parse(messages);
            messages = messages.reverse();
            messages.forEach((message) => {
                let extras = JSON.parse(message.extras);
                if (parseInt(message.fromid) === parseInt(this.myUser.id)) {
                    let user = {id:message.toid, username:extras.from, avatar:extras.avatar};
                    this.appendMessage(this.myUser, user, message.message, extras);
                } else {
                    let user = {id:message.fromid, username:extras.from, avatar:extras.avatar};
                    this.appendMessage(user, this.myUser, message.message, extras);
                }
            })
        });
        this.updateNotification();
        return $chat;
    };


    displayMenuMessages (messages)  {
        if (!messages.length){
            return;
        }
        let menuItems = '';
        messages.forEach((message) => {
            let extra = JSON.parse(message.extras);
            let classeBall = (this.users.get(parseInt(message.fromid)))?'online':'';
            let menuItem = `
                <div class="menuMessengerItem" data-id="${message.fromid}" data-username="${extra.from}" data-avatar="${extra.avatar}"> 
                    <div>
                        <img src="${this.myUser.imagePath}${extra.avatar}" alt=""><strong>${extra.from}</strong>
                    </div>
                    <div class="ago">${this.ago(extra.time)}</div>
                    <div class="menuMessengerBall ${classeBall}"></div>
                    <div class="messengerMenuMessage">${message.message}</div>
                </div>
            `;
            menuItems+=menuItem;
        });
        let el = `
            <div class="menuMessenger">
                <div class="headerMenuMessenger">Unread: <strong>${messages.length}</strong></div>
               ${menuItems}
            </div>
        `;
        this.removeMenu();
        let $notificationElementId = jQuery(this.notification.id);
        $notificationElementId.remove('.menu');
        $notificationElementId.append(el);
    };

    removeMenu ()  {
        jQuery(`${this.notification.id} .menuMessenger`).remove();
    };

    playMP3 (mp3file, loop=false) {
        if (!mp3file) {
            return;
        }
        try {
            let soundMP3 = new Audio();
            if (soundMP3.paused) {
                soundMP3.src = mp3file;
                soundMP3.loop = loop;
                try {
                    soundMP3.play().catch(function() {
                    });
                } catch(e) {
                    console.log('error playsound', mp3file);
                }
            }
        } catch(e) {
            console.log('error playsound', mp3file);
        }
    };

    initEvents () {
        let $messengerContainer = jQuery('#messengerContainer');
        $messengerContainer.on('mousedown', 'button.closeBtn', (e) => {
            e.stopImmediatePropagation();
            let $chat = jQuery(e.currentTarget).closest('.content');
            let userid = $chat.data('userid');
            this.messengerWindowDelete(userid);
            $chat.remove();
        });

        $messengerContainer.on('mouseup', 'button.clearMessengerBtn', (e) => {
            let message = `Are you sure you want to clear this chat ? <button data-answer="yes">Yes</button>  <button data-answer="no">No</button>`;
            let $chat = jQuery(e.currentTarget).closest('.content');
            this.serverMessage($chat, message);
        });

        $messengerContainer.on('mouseup', 'button[data-answer]', (e) => {
            e.stopImmediatePropagation();
            let answer = ($(e.currentTarget).data('answer')==='yes');
            let $chat = jQuery(e.currentTarget).closest('.content');
            $(e.currentTarget).parent().parent().remove();
            if (answer) {
                let userid = $chat.data('userid');
                console.log('userid', userid);
                $chat.find('div.messages').empty();
                this.socket.emit('deleteMessengerMessages', userid);
            }
        });

        $messengerContainer.on('mouseup', 'button.muteUserBtn', (e) => {
            e.stopImmediatePropagation();
            $(e.currentTarget).toggleClass('muted');
            let $el = jQuery(e.currentTarget).closest('[data-userid]');
            let muteduserid = $el.data('userid');
            let username = $el.data('username');
            let val = !this.mutedUsers.has(muteduserid);
            this.socket.emit('messengerMute', muteduserid, val);
            let $chat = this.getChat(muteduserid);
            let message;
            if (val) {
                message = sprintf(this.traductions['userHasBeenMutedBanned'], username);
                this.mutedUsers.set(muteduserid, {id:muteduserid, username:username});
            } else {
				message = sprintf(this.traductions['userHasBeenUnmutedUnbanned'], username);
                this.mutedUsers.delete(muteduserid);
            }
            $(`#messengerNotificatorContent div.messengerNotificatorUserItem[data-userid=${muteduserid}]`).toggleClass('muted');
            this.serverMessage($chat, message);
        });

        $messengerContainer.on('mouseup', 'button.webcamBtn', (e) => {
            e.stopImmediatePropagation();
            let id = jQuery(e.currentTarget).closest('[data-userid]').data('userid');
            let user = this.users.get(parseInt(id));
            if (!user) return;
            user.isCaller = false;
            this.myUser.call1to1User = user;
            this.displayCall1to1(this.myUser);
            publishOwnFeed('#myMessengerVideo', this.myUser.streamid);
        });



		jQuery(document).on('change', '#genderFilterDiv input', (e)=> {
			this.updateFilterGenders();
		});

        jQuery(document).on('mouseup', ()=>{
            this.removeMenu();
        });
        jQuery(document).on('mouseup', 'div.menuMessenger .menuMessengerItem', (e)=> {
            e.stopImmediatePropagation();
            e.stopImmediatePropagation();
            let $e = jQuery(e.currentTarget);
            let user = {id:$e.data('id'), username:$e.data('username'), avatar:$e.data('avatar'), profile:$e.data('profile')};
            this.removeMenu();
            this.displayChat(user);
        });

        jQuery(document).on('getMyStreamId', ()=> {
            console.log('call1to1', this.myUser.call1to1User.id);
            if(this.myUser.call1to1User.isCaller) {
                this.socket.emit('call1to1Accepted', this.myUser.call1to1User.id);
            } else {
                this.socket.emit('call1to1', this.myUser.call1to1User.id);
            }
        });

        $messengerContainer.on('keyup', 'form.footer input', (e) => {
            e.preventDefault();
            e.stopImmediatePropagation();
            let keyCode = e.keyCode || e.which;
            if (!this.myUser.isWriting) {
                console.log('isWriting !!!');
                this.myUser.isWriting = true;
                let userid = jQuery(e.constructor).find('[data-userid]').data('userid');
                this.socket.emit('messengerWrites', userid);
                setTimeout(()=> {
                    this.myUser.isWriting = false;
                }, 5000);
            }
            if (keyCode === 13) {
                let message = jQuery(e.currentTarget).val();
                if (!message) return;
                jQuery(e.currentTarget).val('');
                let $content = jQuery(e.currentTarget).closest('.content');
                let id = $content.data('userid');
                let username = $content.data('username');
                let avatar = $content.data('avatar');
                let user = {id:id, username:username, avatar:avatar};
                this.sendMessenger(message, user);
            }
        });
        jQuery(document).on('mousedown', this.myUser.el, (e) => {
            e.stopImmediatePropagation();
            let $e = jQuery(e.currentTarget);
            let userid = $e.data('userid');
            let username = $e.data('username');
            let avatar = $e.data('avatar');
            let profile = $e.data('profile');
            if (parseInt(userid)===parseInt(ChatHTML5.myUser.id)) return;
            let user = {id:userid, username:username, avatar:avatar, profile:profile};
            this.selectChat(user);
        });
        jQuery(document).on('mouseup', 'button#messengerHangoutBtn', () => {
            this.call1to1HangOut();
        });
        jQuery(document).on('mouseup', 'button#messengerMuteAudioBtn', (e) => {
            let $e = jQuery(e.currentTarget);
            $e.toggleClass('muted');
            mute('#myMessengerVideo', $e.hasClass('muted'));
        });
        jQuery(document).on('mouseup', 'button#messengerToggleWebcamBtn', () => {
            //this.socket.emit('call1to1Accepted', this.myUser.call1to1User.id);
            publishOwnFeed('#myMessengerVideo', this.myUser.streamid);
        });

        jQuery(document).on('getMyStreamId', ()=> {
            ChatHTML5.myUser.webcam = true;
            //ChatHTML5.cameraStatus(false);
        });
        let $notificationElementId = jQuery(this.notification.id);
        if ($notificationElementId.length) {
            jQuery(document).on('mouseup', this.notification.id, ()=>{
                this.socket.emit('getMessengerUnread', (messages)=>{
                    messages = JSON.parse(messages);
                    console.log('getMessengerMessages', messages);
                    this.displayMenuMessages(messages);
                });
            })
        }
    };
}var ChatHTML5 = new ChatMessenger();