comment1.js

var comments = {};
var comment_url = window.document.getElementById("commentdl_ret").getElementsByTagName("input");
var xhr = new XMLHttpRequest();
xhr.onload = function(){
	var elements = new DOMParser().parseFromString(xhr.responseText,"application/xml").firstChild.getElementsByTagName("c");
	for(var i=0;i<elements.length;i++){
		var key = Math.floor(parseInt(elements[i].getAttribute("p").split(",")[0], 36)/10);
		comments[key] = elements[i].innerHTML;
	};
	for(key1 in comments)console.log(key1,comments[key1]);
};
xhr.open("GET","http://himado.in/?group_id="+comment_url[1].value+"&mode=comment&key="+comment_url[3].value,true);
xhr.send();


var player = window.document.getElementById("player");
var video = window.document.getElementById("myVideo");

var element = window.document.createElement("div");
element.id = "telop";
var telop = player.appendChild(element);

for(var i=0; i<100; i+=10){
	var element = window.document.createElement("div");
	element.style.top = i + "%";
	element.style.left = "100%";
	telop.appendChild(element);
}

player.style.overflow = "hidden";

var element = window.document.createElement("style");
element.type = "text/css";
element.innerHTML = "#telop > div{position:absolute; font-size:300%; color:white; z-index:3147483647;}";
player.appendChild(element);

var elements = telop.getElementsByTagName("div");



video.addEventListener("timeupdate", function(){
		var current_time = Math.floor(video.currentTime*10);
		for(var time=current_time-1;time<=current_time;time++){
			if(comments[time])
				for(var i=0; i<10; i++)
					if(elements[i].innerHTML == ""){
							elements[i].innerHTML = "<nobr>"+comments[time]+"</nobr>";
							move(i,comments[time].length)
							break;
					}
		}
}, true);

video.addEventListener("pause", function(){
	for(var i=0; i<10; i++)
		elements[i].innerHTML = "";
}, false);

function move(j,len){
	var count = setInterval(function(){
		var x = parseInt(elements[j].style.left);
		elements[j].style.left = (x - 1) + "%";
		if(x <= 0-len*4){
			elements[j].innerHTML = "";
			elements[j].style.left = "100%";
			clearInterval(count);
		}
	}, 50);
}