$(document).ready(function(){

			$('#chat-message').on('keydown', function(e) {
    if (e.which == 13) {
        $("#btnSend").click();
    }

	});
});
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
	  var playerNewState = null;
	  var firstVideoUrl = null;
	  var playerFirstCurrenTime = 0;
	  var setFirstCurrent = false;
	  var playerIsReady = false;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '360',
		  width: '640',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange,
          },
		  playerVars: {
        'controls': 1,
		'autoplay' : 1
    }
        });

	  }
	  function onPlayerReady(event) {
		  console.log("11");
		  if(firstVideoUrl != null)
		  {
			let videoId = YouTubeGetID(firstVideoUrl);
			$('#player').css('display','block');
			player.loadVideoById(videoId);
		  }

		playerIsReady = true;

      }


	  function YouTubeGetID(url) {
		var ID = '';
		url = url.replace(/(>|<)/gi,'').split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
		if(url[2] !== undefined) {
			ID = url[2].split(/[^0-9a-z_\-]/i);
			ID = ID[0];
		}
		else {
			ID = url;
		}
		return ID;
	  }



      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {

			if(playerNewState != null)
			{


				if(playerNewState == "pause")
				{
					player.pauseVideo();

				}
				else
				{

					player.playVideo();

				}
				playerNewState = null;
			}
			if(setFirstCurrent == false)
			{
				console.warn("test1" + playerFirstCurrenTime);
				player.seekTo(playerFirstCurrenTime);
				setFirstCurrent = true;
			}

          	done = true;

		}




      }
      function stopVideo() {
        player.stopVideo();
      }


	function showMessage(messageHTML) {
		$('#chat-box').append(messageHTML);
	}
	function matchYoutubeUrl(url) {
		var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
		var matches = url.match(p);
		if(matches){
			return matches[1];
		}
		return false;
	}
	function parseMessage(message){





			var id = matchYoutubeUrl(message);
			if(id!=false){
				alert(id);
			}else{
				showMessage("<div class='chat-box-message'>"+message+"</div>");
			}


	}



	window.addEventListener('load', function(){
		var websocket = new WebSocket("ws://10.8.110.243:8090");
		websocket.onopen = function(event) {
			var messageJSON = {
				user_token: userToken,
			};
			websocket.send(JSON.stringify(messageJSON));
			showMessage("<div class='chat-connection-ack'>Connection établie</div>");
		}
		websocket.onmessage = function(event) {
			var Data = JSON.parse(event.data);
			//console.debug('data', Data);
			if(Data.message_type !== undefined && Data.message !== undefined)
			{
				console.warn(Data.message);
				//parseMessage(Data.message);
			}

			if('firstVideoUrl' in Data)
			{

				firstVideoUrl = Data.firstVideoUrl;
				console.warn("22");
				if(playerIsReady)
				{
					let videoId = YouTubeGetID(firstVideoUrl);
					$('#player').css('display','block');
					player.loadVideoById(videoId);
				}
			}
			if(Data.videoUrl)
			{
				let videoId = YouTubeGetID(Data.videoUrl);



				if(player !== undefined)
				{
					$('#player').css('display','block');
					player.loadVideoById(videoId);
				}
			}

			if('firstCurrentTime' in Data) {


				playerFirstCurrenTime = Data.firstCurrentTime;



			}

			if(Data.changePlayerState != undefined)
			{
				if(Data.changePlayerState == "pause")
				{
					player.pauseVideo();
				}
				if(Data.changePlayerState == "play")
				{
					player.playVideo();

				}
			}

			if(Data.changePlayerFirstState != undefined)
			{

				if(Data.changePlayerFirstState == "pause")
				{
					playerNewState = "pause";
				}
				else
				{
					playerNewState = "play";

				}
			}


            if(userIsAdmin == true)
            {
                if(Data.newCurrentTime) {
                    if (player.getCurrentTime() > 0) {
                        if(player.getCurrentTime() > Data.newCurrentTime)
                        {
                            if((player.getCurrentTime() - Data.newCurrentTime) > 1)
                            {
                                player.seekTo(Data.newCurrentTime);
                            }
                        }
                        else if(player.getCurrentTime() < Data.newCurrentTime)
                        {
                            if((Data.newCurrentTime - player.getCurrentTime()) > 1)
                            {
                                player.seekTo(Data.newCurrentTime);
                            }
                        }

                    }


                }
            }

		};

		websocket.onerror = function(event){
			showMessage("<div class='error'>Problem due to some Error</div>");
		};
		websocket.onclose = function(event){
			showMessage("<div class='chat-connection-ack'>Connexion fermée</div>");
		};

		$('#btnSend').click(function(event){
			$('#chat-user').attr("type","hidden");
			var messageJSON = {
				chat_message: $('#chat-message').val()
			};
			websocket.send(JSON.stringify(messageJSON));
			$('#chat-message').val('');
		});
		$('#btnSendurl').click(function(event){
			var messageJSON = {
				changeUrl: $('#video-url').val()
			};
			websocket.send(JSON.stringify(messageJSON));
		});
		$('#btnPause').click(function(event){
			var messageJSON = {
				changePlayerState: "pause"
			};
			websocket.send(JSON.stringify(messageJSON));
		});
		$('#btnPlay').click(function(event){
			var messageJSON = {
				changePlayerState: "play"
			};
			websocket.send(JSON.stringify(messageJSON));
		});
        if(userIsAdmin == true && playerIsReady)
        {
            (function(){
                var f = function() {
                    if (player.getCurrentTime() == 0) {
                        console.log("Aucune vidéo est en cours.");
                    } else {
                        //console.log(player.getCurrentTime());
                        var messageJSON = {
                            newCurrentTime: player.getCurrentTime()
                        };
                        websocket.send(JSON.stringify(messageJSON));
                    }
                };
                window.setInterval(f, 1000);
                f();
            })();
        }


	});