var myObj = 0;
var button = document.getElementById("button");
var result = document.getElementById('result');
var emoji = document.querySelectorAll(".emoji-item");
var canvasIcon = document.querySelector(".draw img");
var canvasBar = document.querySelector(".canvas");
var main = document.querySelector("main");
var loadingFirst = true;
for (var i = 0; i < emoji.length; i++) {
	emoji[i].onclick = function(){
		var xmlhttp = new XMLHttpRequest();  
		

		xmlhttp.open("POST", "http://students.a-level.com.ua:10012");
		xmlhttp.onreadystatechange = function(){
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				console.log(xmlhttp.responseText);
			}
		}
		xmlhttp.send(JSON.stringify({ func: 'addMessage', nick: "p", message: this.getAttribute("src")}))
		
	}
}

var cansvasIsVisible = false;
canvasIcon.onclick = function(){
	if(!cansvasIsVisible){
		canvasBar.style.visibility = "visible";
		cansvasIsVisible = true;
		main.style.marginLeft = "39%";
	}
	else{
		canvasBar.style.visibility = "hidden";
		cansvasIsVisible = false;
		main.style.margin = "0 auto";
	}
	
}

//
button.onclick = function(){
	var xmlhttp = new XMLHttpRequest();  
	var myNick = document.getElementById('input1').value;
	var myMessage = document.getElementById('input2').value;

	xmlhttp.open("POST", "http://students.a-level.com.ua:10012");
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			console.log(xmlhttp.responseText);
		}
	}
	xmlhttp.send(JSON.stringify({ func: 'addMessage', nick: myNick, message: myMessage}))
	
}

//

setInterval(function(){
	
	var xmlhttp = new XMLHttpRequest(); 
	xmlhttp.open("POST", "http://students.a-level.com.ua:10012");
	//xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
	xmlhttp.onreadystatechange = function(){
		if(xmlhttp.readyState == 3 && loadingFirst){
			loadingFirst = false;
			
			for (var i = 0; i < document.querySelectorAll(".loading").length; i++) {
				document.querySelectorAll(".loading")[i].remove();
			}
			debugger;
			var loading = document.createElement("img");
			loading.className = "loading";
			loading.setAttribute("src","img/ajax-loader.gif");
			result.appendChild(loading);
		}
		if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
			for (var i = 0; i < document.querySelectorAll(".loading").length; i++) {
				document.querySelectorAll(".loading")[i].remove();
			}
				
				var obj = JSON.parse(xmlhttp.responseText).data;
				
				var resObj = Object.keys(obj);
				myObj += obj.length;
				for (var i = 0; i < obj.length; i++) {
					
					if(typeof obj[i].message != "object" && obj[i].message && obj[i].message.indexOf('youtube') > -1){
						var iframe = document.createElement("iframe");
						var str = "https://www.youtube.com/embed/";
						
						var index1 = obj[i].message.indexOf('=') + 1;
						var span = document.createElement("span");
						if(obj[i].message.indexOf('&') > -1){
							var index2 = obj[i].message.indexOf('&');
							str2 = obj[i].message.slice(index1,index2);
						}
						else{
							str2 = obj[i].message.slice(index1);
						}
						var div = document.createElement("div");
						iframe.setAttribute("src",str + str2);
						iframe.style.width = "85%";
						iframe.style.height = "350px";
						span.innerHTML = obj[i].nick;
						div.appendChild(span); 
						div.appendChild(iframe);  
						result.appendChild(div);
						 
					}	
					else if(typeof obj[i].message != "object" && obj[i].message && /(https?:\/\/.*\.(?:png|jpg))/i.test(obj[i].message)){ // obj[i].message.indexOf('.jpg') > -1
						var img = document.createElement("img");
						img.setAttribute("src",obj[i].message);
						img.setAttribute("style","width: 85%");
						var div = document.createElement("div");
						var span = document.createElement("span");
						span.innerHTML = obj[i].nick;
						div.appendChild(span);
						div.appendChild(img);
						result.appendChild(div);

					}
					else if(typeof obj[i].message != "object" && obj[i].message && obj[i].message.indexOf('.gif') > -1){
						var div = document.createElement("div");
						result.innerHTML += "<div><span>" +  obj[i].nick + "</span><br><img src='"+obj[i].message+"' alt='' />  </div><br>";  
						

					}
					else{
						result.innerHTML += "<div><span>" + obj[i].nick + "</span><br> "+ obj[i].message + '</div>';  
					}
					 
				}
				
			
			
		}
	}
	
	xmlhttp.send(JSON.stringify({ func: 'getMessages', messageId: myObj}));


}
,3000);