console.log('listing');
var performers = {};
if (typeof connectMS=='function') {
    connectMS(this.myuser.webrtc_server, this.myuser.id, {facingMode: 'user', width: 320, height: 240});
} else {

}

function getDistance(lat1, lon1, lat2, lon2, unit) {
    var radlat1 = Math.PI * lat1/180;
    var radlat2 = Math.PI * lat2/180;
    var radlon1 = Math.PI * lon1/180;
    var radlon2 = Math.PI * lon2/180;
    var theta = lon1-lon2
    var radtheta = Math.PI * theta/180
    var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta);
    dist = Math.acos(dist)
    dist = dist * 180/Math.PI;
    dist = dist * 60 * 1.1515;
    if (unit==='K') { dist = dist * 1.609344 }
    if (unit==='N') { dist = dist * 0.8684 }
    return dist
}

function hideVideo(username) {
    var temp = sprintf('webcam', username);
    var temp2 = `.performer[data-username='${username}'] img`;
    var idVideo = '#video'+username;
    var video = document.getElementById(idVideo);
    //video.stop();
    console.log(idVideo);
    var qVideo = $(idVideo);
    if (qVideo.length > 0) {
        qVideo.remove();
    } else {
        $(this).find('video').remove();
    }
}

if (showVideoOnRollOverListing) {
    function showVideo(event) {
        event.stopImmediatePropagation();
        var username = $(this).data('username');
        var performer = performers[username];
        if (performer && performer.isInPrivate) {
            return;
        }
        if (performer.isInSpy && !showVideoOnRollOverOnSpyChat) {
            return;
        }
        var idVideo = 'video'+username;
        if ($('#'+idVideo).length) {
            return;
        }
        //var el = sprintf("<div id='%s'></div>", idVideo);
        var el = `<video autoplay id='${idVideo}' muted playsinline width='320' height='240' style='position: absolute;margin-top:-275px;margin-left:-140px'></video>`;
        var temp = `.performer[data-username='${username}']` ;
        var temp2 = `.performer[data-username='${username}'] img`;
        $(temp).append(el);
        if(Hls.isSupported() && performer.webcam=='1') {
            var hls = new Hls();
            var video = document.getElementById(idVideo);
            var src = `https://live.desir-cam.com/m3u8/${username}.m3u8`;
            hls.attachMedia(video);
            hls.on(Hls.Events.MEDIA_ATTACHED, function () {
                hls.loadSource(src);
                hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
                    var playPromise = video.play();
                    if (playPromise !== undefined) {
                        playPromise.then(function() {
                            // Automatic playback started!
                        }).catch(function(error) {
                            // Automatic playback failed.
                            // Show a UI element to let the user manually start playback.
                        });
                    }
                });
            });

            hls.on(Hls.Events.ERROR, function (event, data) {
                console.log(data);
            });
        }
        if (performer.webcam>1) {
            console.log('streamid', performer.id);
            playStream(performer.id, `#${idVideo}`);
        }
        $('#webcam').data('username', username);
    }

    function showVideoMobile(event) {
        if ($(this).hasClass('js-mobile-redirect')) {
            redirectInRoom.call(this, event);
        } else {
            $(this).addClass('js-mobile-redirect');
            showVideo.call(this, event);
        }
    }

    function redirectInRoom() {
        var username = $(this).data('username');
        window.location = linkChat + username;
    }
    $(document).on('mouseenter', '.performer', showVideo);
    $(document).on('mouseleave', '.performer', function() {
        var username = $(this).data('username');
        hideVideo(username);
    });
}

var notifier = new Notifier(serverNode, getPerformers, performerAdded, performerRemoved, performerChanged);

function getPerformers(performers) {
    $('#listPerformers').empty();
    if (showAllModelsInListing) {
        $.post('ajax.php', {action:'getAllPerformers'}, function(performersDB) {
            performersDB = JSON.parse(performersDB);

            //DB performers
            for (var username in performersDB) {
                performerAdded(performersDB[username], false);
            }
            // online
            for (var username in performers) {
                performerRemoved(performers[username]);
                performerAdded(performers[username], true);
            }
        });
        return;
    }

    for (var username in performers) {
        performerAdded(performers[username], true);
    }
    $('.statusOnline').each(function(){
        $(this).css('opacity','1');
    });
}
function performerAdded(performer, isOnline) {
    //console.log('performer', performer);
    if (performer.isHiddenInListing=='1' )  {
        console.log('isHiddenInListing');
        return;
    }

    performerRemoved(performer);
    var username = performer.username;
    var webcam = performer.webcam;
    var temp = `#listPerformers [data-username='${performer.username}']`;
    performers[username] = performer;

    var src = `upload/thumb/${performer.username}.jpg"`;
    var icon = 'fa-eye';
    if (showVideoOnRollOverListing) {
        icon = 'fa-spinner fa-spin';
    }
    var statusClass = 'statusOnline';
    if (!isOnline) {
        statusClass = 'statusOffline'
    }
    var img = performer.avatar!='' ? performer.avatar : 'thumb.png';
    var src = `../../maj/upload/compte/${img}`;
    var srcTechno = (performer.webrtc=='1')?'/cam/img/webrtc.svg':'/cam/img/mp4.svg';
    //console.log(performer.username, src);

    var element = `
	<div title='Entrer pour chatter' class='performer enterChat ${statusClass}' data-username='${username}' data-webcam='${performer.webcam}'>
		<div class='avatarListing enterChat' style='display:inline-block; width:320px; height:240px;background-image: url(${src});background-size: cover; '></div>
		<div class='smallDescription'>${performer.username}
		    <div class='cameraDiv'></div>
		    <img class='technoImage' src='${srcTechno}' alt='techno'>
		</div>
		<div class='enterChatDiv'>
		<div style='height: 130px;'><div class='outerCircle'></div><div class='innerCircle'></div>
		    <div class='icon'>
			    <img class='logo-spin' src='/maj/phototheque/photos/charte/Desir_logo_2014.png'/>
		    </div>
		</div>
		<span></span></div>
	</div>`;

    if (isOnline && performer.webcam)  {
        $('#listPerformers').prepend(element);
        $(element).find('.performer').addClass('performer-visible');
        $('.statusOffline').css('opacity', '0.2');

    } else {
        $('#listPerformers').append(element);
        $(element).find('.performer').addClass('performer-visible');
        $('.statusOffline').css('opacity', '0.2');
    }

    updatePerformerView(performer.username, performer.webcam, performer.isInPrivate, performer.isInSpy, isOnline);
    //sortPerformers();
}

function updatePerformerView(username, webcam, isInPrivate, isInSpy, isOnline) {
    var tempCamera = `.enterChat[data-username='${username}'] .cameraDiv`;
    $(tempCamera).show();
    performers[username].webcam = webcam;
    performers[username].isInPrivate = isInPrivate;
    performers[username].isInSpy = isInSpy;
    performers[username].isOnline = isOnline;

    $(`.enterChat[data-username='${username}'] .enterChatDiv span`).text(`Entrer sur le chat de ${username}`);

    var temp = `.enterChat[data-username='${username}']`;
    $(temp).removeClass('disabled');

    //console.log(performers[username]);

    var status = traductions.Online;
    if (!isOnline) status = traductions.Offline;
    if (isOnline && !webcam) status = traductions.OnlineNoWebcam;
    if (isInPrivate) status = traductions.IsInPrivate;
    if (isInSpy) status = traductions.IsInSpy;

    $(tempCamera).html(`<i class="fa fa-video-camera"></i> ${status}`);

    if (isInPrivate || !webcam) {
        $(temp).addClass('disabled');
        hideVideo(username);
        //$(tempCamera).hide();
    }
    if (isInSpy) {
        hideVideo(username);
        $(temp).removeClass('disabled');
        $(`.enterChat[data-username='${username}'] .enterChatDiv span`).text(`Espionner le chat de ${username}`);
    }
}

function performerRemoved(performer) {
    delete (performers[performer.username]);
    var temp = `#listPerformers [data-username='${performer.username}']`;
    $(temp).remove();
    if (showAllModelsInListing) {
    }
}

function performerChanged(performer) {
    performerRemoved(performer);
    performerAdded(performer, true);
}


function sortPerformers() {
    $('.performer').sortElements(function(a, b) {
        return ($(a).attr('data-webcam')) < ($(b).attr('data-webcam')) ? 1 : -1;
    });
}

$(document).on('mousedown', '.enterChat', function(){
    var guest = (myuserRegisteredDate=='');
    var username = $(this).data('username');
    var performer = performers[username];

    if (performer && performer.guestAllowed!='1' && guest ) {
        bootbox.alert(`Désolé, mais ${username} ne souhaite plus des utilisateurs anonymes.<br><br>
            <a href='/inscription_gratuite-8.html'>Inscrivez vous ici gratuitement.</a> Ou 
            <a href='/'>connectez vous</a>`);
    } else {
        window.location = linkChat + username;
    }
});