var size = 500;
var aspect = 16/9;
var index = 0;
var dark_mode = false;
var prevent_close = false;
var save_list = false;
var hide_controls = false;

var list = [];

document.onload = function() {
	sizeChange(size);
	getDarkMode();
}

window.onload = function() {
	//sizeChange(size);
	getPreventClose();
	getSaveList();
	
	loadFollowingList();
}

window.onresize = function() {
	setDummySpacingSize();
}

function setCookie(cname, cvalue) {
	var exdays = 365;
	var d = new Date();
	d.setTime(d.getTime() + (exdays*24*60*60*1000));
	var expires = "expires="+ d.toUTCString();
	document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
	var name = cname + "=";
	var decodedCookie = decodeURIComponent(document.cookie);
	var ca = decodedCookie.split(';');
	for(var i = 0; i <ca.length; i++) {
		var c = ca[i];
		while (c.charAt(0) == ' ') {
			c = c.substring(1);
		}
		if (c.indexOf(name) == 0) {
		  return c.substring(name.length, c.length);
		}
	}
	return "";
}

function getPreventClose() {
	changePreventClose((getCookie("preventClose") ?? 0) == "1" ? true : false);
	document.getElementById("preventClose").checked = prevent_close;
}

function changePreventClose(value) {
	prevent_close = value;
	if (prevent_close) {
		window.onbeforeunload = function() {
			return "Are you sure to close?";
		}
	} else {
		window.onbeforeunload = function() {

		}
	}
	setCookie("preventClose", prevent_close ? 1 : 0);
}

function getSaveList() {
	save_list = (getCookie("saveList") ?? 0) == "1" ? true : false;
	if (save_list) reopenCodeList();
	document.getElementById("saveList").checked = save_list;
}

function changeSaveList(value) {
	save_list = value;
	if (save_list) {
		saveCodeList();
	} else {
		setCookie("codeList", "");
	}
	setCookie("saveList", save_list ? 1 : 0);
}

function reopenCodeList() {
	var textList = getCookie("codeList") ?? "";
	var array = textList.split(',');
	var length = array.length;
	if (textList == "") length = 0;
	for (var i = 0; i < length; i++) {
		processAdd(array[i]);
	}
}

function saveCodeList() {
	var code_list = list.map(item => item.code);
	var string_list = code_list.join(',');
	setCookie("codeList", string_list);
}


document.getElementById("url").onkeypress = function(e) {
	if (e.keyCode == 13) {
		add();
	}
}

function add(input = null) {
	var url = document.getElementById("url").value;
	if (input != null) {
		url = input;
	}
	//var code = url.match(/(?<=v\=)[A-Za-z0-9_\-]*/);
	// var match = url.match(/v\=[A-Za-z0-9_\-]*/);
	// var code = "";
	// if (match == null) {
		// match = url.match(/be\/[A-Za-z0-9_\-]*/);
		// if (match == null) {
			
			// document.getElementById("error").innerHTML = "URL error";
			// setTimeout(function() {
				// document.getElementById("error").innerHTML = "";
			// }, 2000);
			// return;
		// }
	// }
	var code = "";
	if (url.match(/v\=([A-Za-z0-9_\-]+)/) != null) {
		code = url.match(/v\=([A-Za-z0-9_\-]+)/)[1];
		
	} else if (url.match(/be\/([A-Za-z0-9_\-]+)/) != null) {
		code = url.match(/be\/([A-Za-z0-9_\-]+)/)[1];
		
	} else if (url.match(/twitch\.tv\/([^?\/]+)/) != null && url.match(/twitch\.tv\/videos\//) == null) {
		code = "tc:" + url.match(/twitch\.tv\/([^?\/]+)/)[1];
		
	} else if (url.match(/twitch\.tv\/videos\/([^?\/]+)/) != null) {
		code = "tv:" + url.match(/twitch\.tv\/videos\/([^?\/]+)/)[1];
		
	} else {
		document.getElementById("error").innerHTML = "URL error";
		setTimeout(function() {
			document.getElementById("error").innerHTML = "";
		}, 2000);
		return;
	}
	//code = match[0].replace("v=", "");
	//code = code.replace("be/", "");
	
	processAdd(code);
}

function processAdd(code) {
	var div = document.createElement("DIV");
	div.className = "iframe_container";
	div.id = "con_" + index;
	
	var left_div = document.createElement("DIV");
	left_div.className = "left_div";
	
	var left_arrow = document.createElement("DIV");
	left_arrow.className = "left_arrow controls svg-btn";
	left_arrow.id = "leftArrow_" + index;
	left_div.appendChild(left_arrow);
	
	var right_arrow = document.createElement("DIV");
	right_arrow.className = "right_arrow controls svg-btn";
	right_arrow.id = "rightArrow_" + index;
	left_div.appendChild(right_arrow);
	
	var right_div = document.createElement("DIV");
	right_div.className = "right_div";
	
	var comment = document.createElement("DIV");
	if (code.match(/tv\:/) == null) {
		comment.className = "comment controls svg-btn";
		comment.id = "comment_" + index;
		right_div.appendChild(comment);
	}
	
	var reload = document.createElement("DIV");
	reload.className = "reload controls svg-btn";
	reload.id = "reload_" + index;
	//reload.classList.add("controls");
	right_div.appendChild(reload);
	
	var cross = document.createElement("DIV");
	cross.className = "cross controls svg-btn";
	//cross.src = "cross.png";
	cross.id = "cross_" + index;
	//cross.classList.add("controls");
	right_div.appendChild(cross);
	
	div.appendChild(left_div);
	div.appendChild(right_div);
	
	var br = document.createElement("BR");
	br.classList.add("controls");
	div.appendChild(br);
	
	var iframe = document.createElement("IFRAME");
	iframe.className = "iframe";
	iframe.id = "iframe_" + index;
	div.appendChild(iframe);
	
	if (code.match(/tc\:/)) {
		var temp = code.replace("tc:", "");
		iframe.src = `https://player.twitch.tv/?channel=${temp}&parent=` + window.location.hostname;
		iframe.style.width = size + "px";
		iframe.style.height = size/aspect + "px";
		iframe.allowfullscreen = false;
	} else if (code.match(/tv\:/)) {
		var temp = code.replace("tv:", "");
		iframe.src = `https://player.twitch.tv/?video=${temp}&parent=` + window.location.hostname;
		iframe.style.width = size + "px";
		iframe.style.height = size/aspect + "px";
		iframe.allowfullscreen = false;
	} else {
		iframe.src = "https://www.youtube.com/embed/" + code;
		iframe.style.width = size + "px";
		iframe.style.height = size/aspect + "px";
	}
	
	document.getElementById("main_container").appendChild(div);
	
	document.getElementById("url").value = "";
	
	list.push({id: index, code: code});
	if (save_list) saveCodeList();
	
	left_arrow.onclick = function() {
		var num = Number(this.id.split('_')[1]);
		var current = document.getElementById("con_" + num);
		var prev = current.previousElementSibling;
		if (prev != null) {
			document.getElementById("main_container").insertBefore(current, prev);
			var pos = list.findIndex(v => v.id === num);
			list.splice(pos-1, 0, list.splice(pos, 1)[0]);
			if (save_list) saveCodeList();
		}
		updateArrowState();
	}
	
	right_arrow.onclick = function() {
		var num = Number(this.id.split('_')[1]);
		var current = document.getElementById("con_" + num);
		var next = current.nextElementSibling;
		if (next != null) {
			document.getElementById("main_container").insertBefore(current, next.nextSibling);
			var pos = list.findIndex(v => v.id === num);
			list.splice(pos+1, 0, list.splice(pos, 1)[0]);
			if (save_list) saveCodeList();
		}
		updateArrowState();
	}
	
	comment.onclick = function() {
		var num = Number(this.id.split('_')[1]);
		var comment_url = "";
		if (code.match(/tc\:/)) {
			var temp = code.replace("tc:", "");
			comment_url = `https://www.twitch.tv/embed/${temp}/chat?parent=` + window.location.hostname;
		} else {
			comment_url = `https://www.youtube.com/live_chat?v=${code}&embed_domain=` + window.location.hostname;
		}
		var comment_iframe = document.getElementById("comment_iframe");
		if (comment_iframe.src != comment_url) {
			removeCommentSelected();
		}
		document.getElementById("comment_container").style.display = "block";
		document.getElementById("dummy_spacing").style.display = "block";
		
		setDummySpacingSize();
		
		comment_iframe.src = comment_url;
		div.classList.add("iframe_container_comment_selected");
		this.classList.add("comment_selected");
	}
	
	reload.onclick = function() {
		var num = Number(this.id.split('_')[1]);
		var target_iframe = document.getElementById("iframe_" + num);
		target_iframe.src = target_iframe.src;
	}
	
	cross.onclick = function() {
		var num = Number(this.id.split('_')[1]);
		document.getElementById("con_" + num).removeChild(document.getElementById("iframe_" + num));
		document.getElementById("main_container").removeChild(document.getElementById("con_" + num));

		//var pos = list.findIndex(v => v.id === num);
		list.splice(list.findIndex(v => v.id === num), 1);
		if (save_list) saveCodeList();
		updateArrowState();
	}
	
	setDarkMode();
	hideControls(hide_controls);
	updateArrowState();

	index++;
}

function updateArrowState() {
	var arrow_list = document.querySelectorAll(".left_arrow,.right_arrow");
	Array.prototype.forEach.call(arrow_list, function(item) {
		item.classList.remove("hidden");
	});
	
	var first = document.getElementById("main_container").firstElementChild;
	var first_id = Number(first.id.split('_')[1]);
	document.getElementById("leftArrow_" + first_id).classList.add("hidden");
	
	var last = document.getElementById("main_container").lastElementChild;
	var last_id = Number(last.id.split('_')[1]);
	document.getElementById("rightArrow_" + last_id).classList.add("hidden");
}

function sizeChange(value) {
	size = value;
	var list = document.getElementsByClassName("iframe");
	Array.prototype.forEach.call(list, function(item) {
		item.style.width = size + "px";
		item.style.height = size/aspect + "px";
	});
	document.getElementById("sizeSliderNum").value = size;
	document.getElementById("sizeSlider").value = size;
}

function closeComment() {
	document.getElementById("comment_container").style.display = "none";
	document.getElementById("dummy_spacing").style.display = "none";
	document.getElementById("comment_iframe").src = "";
	removeCommentSelected();
}
function removeCommentSelected() {
	var list1 = document.getElementsByClassName("iframe_container_comment_selected");
	var list2 = document.getElementsByClassName("comment_selected");
	Array.prototype.forEach.call(list1, function(item) {
		item.classList.remove("iframe_container_comment_selected");
	});
	Array.prototype.forEach.call(list2, function(item) {
		item.classList.remove("comment_selected");
	});
}

function setDummySpacingSize() {
	document.getElementById("dummy_spacing").style.height = document.getElementById("comment_div").clientHeight;
}

/*var mouse_down_status = false;
var mouseDownPos = {x: 0, y: 0};
document.body.addEventListener('mousedown', function(e) {
	mouse_down_status = true;
	mouseDownPos = {x: e.clientX, y: e.clientY};
});

document.body.addEventListener('mouseup', function(e) {
	mouse_down_status = false;
});

var mouse_over = "";
document.body.addEventListener('mousemove', function(e) {
	var container = document.getElementById("comment_container");
	var comment_div = document.getElementById("comment_div");
	var bounding = document.getElementById("comment_container_inner").getBoundingClientRect();
	if (bounding.width > 0) { //container is displaying
		var mouseX = e.clientX;
		var mouseY = e.clientY;
		var offset = 7; //border detect range / 2;
		
		if (mouseY > bounding.top && mouseY < bounding.bottom) {
			if (Math.abs(mouseX - bounding.left) < offset) {
				container.style.cursor = "w-resize";
				mouse_over = "comment_left";
			} else if (Math.abs(mouseX - bounding.right) < offset) {
				container.style.cursor = "e-resize";
				mouse_over = "comment_right";
			} else {
				container.style.cursor = "auto";
				if (!mouse_down_status) mouse_over = "";
			}
		} else {
			container.style.cursor = "auto";
			if (!mouse_down_status) mouse_over = "";
		}
		if (mouseX > bounding.left && mouseX < bounding.right) {
			if (Math.abs(mouseY - bounding.top) < offset) {
				container.style.cursor = "n-resize";
				mouse_over = "comment_top";
			} else {
				container.style.cursor = "auto";
				if (!mouse_down_status) mouse_over = "";
			}
		}
		
		if (mouse_down_status) {
			if (mouse_over == "comment_top") {
				comment_div.style.height = bounding.bottom - mouseY;
			}
		}
	}
});*/


function getDarkMode() {
	dark_mode = (getCookie("darkMode") ?? 0) == "1" ? true : false;
	setDarkMode();
}

function toggleDarkMode() {
	dark_mode = !dark_mode;
	setDarkMode();
	setCookie("darkMode", dark_mode ? 1 : 0);
}

function setDarkMode() {
	var container_list = document.getElementsByClassName("iframe_container");
	var input_list = document.getElementsByClassName("input"); 
	var svg_btn_list = document.getElementsByClassName("svg-btn"); 
	//var cross_list = document.getElementsByClassName("cross"); 
	var follow_list = document.getElementById("follow_list_container");
	if (dark_mode) {
		document.body.classList.add("body-dark");
		Array.prototype.forEach.call(container_list, function(item) {
			item.classList.add("container-dark");
		});
		Array.prototype.forEach.call(input_list, function(item) {
			item.classList.add("input-dark");
		});
		Array.prototype.forEach.call(svg_btn_list, function(item) {
			item.classList.add("svg-btn-dark");
		});
		/*Array.prototype.forEach.call(cross_list, function(item) {
			item.classList.add("cross-dark");
		});*/
		document.getElementById("dark-mode-btn").classList.add("dark-mode-btn");
		follow_list.classList.add("follow_list_container_dark");
	} else {
		document.body.classList.remove("body-dark");
		Array.prototype.forEach.call(container_list, function(item) {
			item.classList.remove("container-dark");
		});
		Array.prototype.forEach.call(input_list, function(item) {
			item.classList.remove("input-dark");
		});
		Array.prototype.forEach.call(svg_btn_list, function(item) {
			item.classList.remove("svg-btn-dark");
		});
		/*Array.prototype.forEach.call(cross_list, function(item) {
			item.classList.remove("cross-dark");
		});*/
		document.getElementById("dark-mode-btn").classList.remove("dark-mode-btn");
		follow_list.classList.remove("follow_list_container_dark");
	}
}

function hideControls(value) {
	hide_controls = value;
	var control_list = document.getElementsByClassName("controls");
	var container_list = document.getElementsByClassName("iframe_container");
	var title = document.getElementsByClassName("title")[0];
	if (hide_controls) {
		Array.prototype.forEach.call(control_list, function(item) {
			item.classList.add("hide");
		});
		Array.prototype.forEach.call(container_list, function(item) {
			item.classList.add("iframe_container_control_hide");
		});
		title.classList.add("title_minimize");
	} else {
		Array.prototype.forEach.call(control_list, function(item) {
			item.classList.remove("hide");
		});
		Array.prototype.forEach.call(container_list, function(item) {
			item.classList.remove("iframe_container_control_hide");
		});
		title.classList.remove("title_minimize");
	}
}


var pos = 0;
var frame_num = 40;
var fade_out_frame = 10;
var min_height = 40; //px
var max_height = 90; //vh
var FPS = 50;
var follow_list_open_status = 1;
//0: closed
//1: opened
//2: close fade out
//3: closing
//4: opening
//5: open fade in
document.getElementById("follow_list_header").onclick = function() {
	if (follow_list_open_status == 1) {
		followListClose();
	} else if (follow_list_open_status == 0) {
		followListOpen();
	}
}

function followListClose() {
	var min = min_height / window.innerHeight * 100;
	var rate = (max_height - min) / frame_num;
	
	var container = document.getElementById("follow_list_container");
	var content = document.getElementById("follow_list_content");
	var refresh_btn = document.getElementById("follow_list_refresh");
	
	if (follow_list_open_status == 1) {
		follow_list_open_status = 2;
		pos = 0;
		//document.getElementById("open_close_indicator").innerHTML = " ";
	}
	
	if (follow_list_open_status == 2 && pos < fade_out_frame) {
		content.style.opacity = 1 - pos * (1 / fade_out_frame);
		refresh_btn.style.opacity = 1 - pos * (1 / fade_out_frame);
		pos++;
		setTimeout(followListClose, 1000/FPS);
	} else if (follow_list_open_status == 2) {
		content.style.display = "none";
		refresh_btn.style.display = "none";
		pos = 0;
		follow_list_open_status = 3;
	}
	
	if (follow_list_open_status == 3 && pos < frame_num) {
		container.style.height = (max_height - pos * rate) + "vh";
		pos++;
		setTimeout(followListClose, 1000/FPS);
	} else if (follow_list_open_status == 3) {
		container.style.height = min_height;
		document.getElementById("follow_list_header").style.borderBottomWidth = "0px";
		document.getElementById("open_close_indicator").innerHTML = "˅";
		container.style.position = "absolute";
		follow_list_open_status = 0;
		pos = 0;
	}
}

function followListOpen() {
	var min = min_height / window.innerHeight * 100;
	var rate = (max_height - min) / frame_num;
	
	var container = document.getElementById("follow_list_container");
	var content = document.getElementById("follow_list_content");
	var refresh_btn = document.getElementById("follow_list_refresh");
	
	if (follow_list_open_status == 0) {
		follow_list_open_status = 4;
		pos = 0;
		container.style.position = "fixed";
		content.style.opacity = 0;
		content.style.display = "none";
		refresh_btn.style.opacity = 0;
		refresh_btn.style.display = "none";
		document.getElementById("follow_list_header").style.borderBottomWidth = "1px";
		//document.getElementById("open_close_indicator").innerHTML = " ";
	}
	
	if (follow_list_open_status == 4 && pos < frame_num) {
		container.style.height = (min + pos * rate) + "vh";
		pos++;
		setTimeout(followListOpen, 1000/FPS);
	} else if (follow_list_open_status == 4) {
		container.style.height = max_height + "vh";
		follow_list_open_status = 5;
		pos = 0;
		content.style.display = "block";
		refresh_btn.style.display = "block";
	}
	
	if (follow_list_open_status == 5 && pos < fade_out_frame) {
		content.style.opacity = pos * (1 / fade_out_frame);
		refresh_btn.style.opacity = pos * (1 / fade_out_frame);
		pos++;
		setTimeout(followListOpen, 1000/FPS);
	} else if (follow_list_open_status == 5) {
		content.style.opacity = 1;
		refresh_btn.style.opacity = 1;
		document.getElementById("open_close_indicator").innerHTML = "˄";
		pos = 0;
		follow_list_open_status = 1;
	}
}

//-------------

window.addEventListener("dragover", (event) => {onDragOver(event)}, false);
window.addEventListener("mouseup", forceCancelDrag);
document.getElementById("drop_area_outside").addEventListener("dragleave",  (event) => {cancelDrag(event)}, false);
document.getElementById("drop_area_outside").addEventListener("dragover",  (event) => {event.preventDefault();}, false);
document.getElementById("drop_area_outside").addEventListener("drop",  (event) => {event.preventDefault(); forceCancelDrag();}, false);

document.getElementById("drop_area").addEventListener("dragover", (event) => {onDragOver(event)}, false);
document.getElementById("drop_area").addEventListener("drop", (event) => {onDrop(event)}, false);

function onDragOver(ev) {
	ev = ev || event;
	ev.preventDefault();
	document.getElementById("drop_area_outside").style.display = "block";
}

function cancelDrag(ev) {
	if (ev.clientX <= 0 || ev.clientX >= window.innerWidth || ev.clientY <= 0 || ev.clientY >= window.innerHeight) {
		document.getElementById("drop_area_outside").style.display = "none";
	}
}

function forceCancelDrag() {
	document.getElementById("drop_area_outside").style.display = "none";
}

function onDrop(ev) {
	ev = ev || event;
	ev.preventDefault();
	document.getElementById("drop_area_outside").style.display = "none";
	
	var data = ev.dataTransfer.getData("text");
	add(data);
}