var xhttpList = [];

document.body.addEventListener('mousemove', function(e) {
	thumbnailDisplayPosition(e);
});

function ajaxLoad(url, func) {
	//var d = new Date();
	//var n;
	var xhttp = new XMLHttpRequest();
	xhttpList.push(xhttp);
	xhttp.onreadystatechange = function() {
		if (this.readyState == 4 && this.status == 200) {
			//var d = new Date();
			//console.log(d.getTime() - n);
			func(this.responseText);
		}
	};
	xhttp.open("GET", url, true);
	//n = d.getTime();
	xhttp.send();
}

function stopAllXHttpRequest() {
	for (var i = 0; i < xhttpList.length; i++) {
		xhttpList[i].abort();
	}
	xhttpList = [];
}

function loadFollowingList() {
	document.getElementById("follow_list_content").innerHTML = "";
	
	var edit_link_div = document.createElement("DIV");
	edit_link_div.id = "follow_list_edit";
	var edit_link = document.createElement("A");
	edit_link.href = "../main_frame.php?content=YoutubePlayerEdit";
	edit_link.target = "_blank";
	edit_link.innerHTML = "Edit channel list";
	edit_link.className = "follow_list_edit_a";
	edit_link_div.appendChild(edit_link);
	document.getElementById("follow_list_content").appendChild(edit_link_div);
	
	stopAllXHttpRequest();
	ajaxLoad("getFollowingList.php", completeLoadList);
}

function completeLoadList(value) {
	if (value == "") return;
	if (value == "NotLogin") {
		var please_login = document.createElement("DIV");
		please_login.className = "please_login";
				please_login.innerHTML = "Please <a href='../login.php?action=editFollowingList' target='_blank'>login</a> to use"
		document.getElementById("follow_list_content").appendChild(please_login);
		return;
	}
	var list = value.split(",");
	for (var i = 0; i < list.length; i++) {
		ajaxLoad("getDataStore.php?link=" + list[i], addFollowingItem);
	}
}

item_index = 0;
function addFollowingItem(value) {
	value = value.replaceAll("\\\\\\","\\");
	var json = JSON.parse(value);
	if (json.status == "") {
		return;
	}
	//not show live more than 1 day
	if (json.status != "LIVE" && Math.abs((json.startTime * 1000) - Date.now()) > 1000*60*60*24) {
		return;
	}
	
	var container = document.createElement("DIV");
	container.className = "following_item_container";
	container.id = "item_" + item_index;
	
	//icon
	var icon_name_frame = document.createElement("DIV");
	icon_name_frame.className = "icon_name_frame";
	var icon = document.createElement("IMG");
	icon.src = json.thumbnail + "=s45-c-k-c0x00ffffff-no-rj";
	icon.className = "icon_img";
	icon.id = "icon_" + json.videoId;
	icon_name_frame.appendChild(icon);
	
	//name
	var name = document.createElement("SPAN");
	name.className = "name_span";
	name.innerHTML = json.name;
	icon_name_frame.appendChild(name);
	
	container.appendChild(icon_name_frame);
	
	//title
	var title_container = document.createElement("DIV");
	title_container.className = "title_container";
	var title = document.createElement("SPAN");
	title.className = "video_title_span";
	title.innerHTML = json.title;
	title.style.animationDuration = (json.title.length / 5) + "s";
	title_container.appendChild(title);
	container.appendChild(title_container);
	
	if (json.status != "LIVE") {
		var time = document.createElement("SPAN");
		time.className = "video_time_span";
		time.innerHTML = outputTime(new Date(json.startTime * 1000));
		container.appendChild(time);
	}
	if (json.status == "LIVE") {
		container.classList.add("live_container");
		icon.classList.add("live_icon");
	}
	
	container.onclick = function() {
		processAdd(json.videoId);
	}
	
	icon.onmouseover = function() {
		document.getElementById('thumbnail_display_container').style.display = "block";
		document.getElementById("thumbnail_display").src = "https://img.youtube.com/vi/" + json.videoId + "/mqdefault.jpg";
	}
	
	icon.onmouseout = function() {
		document.getElementById('thumbnail_display_container').style.display = "none";
	}
	
	document.getElementById("follow_list_content").appendChild(container);

	item_index++;
	sortFollowingItem();
}

function sortFollowingItem() {
	var list = document.getElementsByClassName("following_item_container");
	var container = document.getElementById("follow_list_content");
	for (var i = 0; i < list.length-1; i++) {
		for (var j = 0; j < list.length-i-1; j++) {
			if (!list[j].classList.contains("live_container") && list[j+1].classList.contains("live_container")) {
				container.insertBefore(list[j+1], list[j]);
			}
			if (!list[j].classList.contains("live_container") && !list[j+1].classList.contains("live_container")) {
				var time1 = list[j].getElementsByClassName("video_time_span")[0].innerHTML;
				var time2 = list[j+1].getElementsByClassName("video_time_span")[0].innerHTML;
				if (new Date(time1) > new Date(time2)) {
					container.insertBefore(list[j+1], list[j]);
				}
			}
		}
	}
}

function outputTime(date) {
	var Y = date.getFullYear();
	var M = ((date.getMonth()+1) > 9 ? '' : '0') + (date.getMonth()+1);
	var D = (date.getDate() > 9 ? '' : '0') + date.getDate();
	var H = (date.getHours() > 9 ? '' : '0') + date.getHours();
	var m = (date.getMinutes() > 9 ? '' : '0') + date.getMinutes();
	var dateString = `${Y}-${M}-${D} ${H}:${m}`
	return dateString;
}

function thumbnailDisplayPosition(e) {
	var container = document.getElementById('thumbnail_display_container');
	var left = e.pageX;
	var top = e.pageY;
	//var offsetX = -container.clientWidth-10;
	var offsetX = -320 -10;
	var offsetY = 0;
	if (top + container.clientHeight > window.innerHeight - 10) {
		offsetY = -container.clientHeight
	}
	container.style.left = (left + offsetX) + 'px';
	container.style.top = (top + offsetY) + 'px';
}

/*function unicodeToChar(text) {
	return text.replace(/\\u[\dA-Fa-f]{4}/gi, 
		function (match) {
			return String.fromCharCode(parseInt(match.replace(/\\u/g, ''), 16));
		});
}*/

/*function test(value) {
	var json = JSON.parse(value);
	document.getElementById("follow_list_content").innerHTML += json.name + "<br>";
	document.getElementById("follow_list_content").innerHTML += "<img src='" + json.thumbnail + "'>";
}*/