ウゴレターポップアップ(2)

はい、第２回です。前回から進化し、ウゴレターのリスト表示が整形してできます。さらに、既読のレターにはチェックが、未読のメールにはnewのアイコンがつきます。
ちなみに、アイコンはfamfamfamさんからお借りしました。base64なので、ほかの画像に置き換えることも可能です。
そして、クリックするとさらにAjaxでレターを読み込んで下に表示します。Ajax読み込みでも既読になるようなので、一安心。

もうかなり完成に近いですが、
・閉じるボタンをつける
・マウスを乗せた瞬間ではなく、数秒後にポップアップ
・デザインの見直し(影や、丸角)
というところでしょうか。
というか、最近のfirefoxやgooglechromeは-moz-とかをつけなくても影が使えるようになったんでしょうか。

とにかく、現状コード。ぐちょぐちょです。あと、テスト用データや、コメントアウトが残ってます。後で整理します。

var isLetterLoading = false;
function PopupLetter()
{
	if($e("id('hatena-user-info')/li[contains(concat(' ', @class, ' '), 'menu-ugoletter')]").snapshotLength == 0){ if(console)console.log("PopupLetter : オブジェクトが存在しません。5秒後再実行します。"); setTimeout(PopupLetter,5000);return; }
	var letterPopup = document.createElement("div")
	letterPopup.style.cssText = "visibility:hidden;position:absolute;top:0px;left:0px;width:300px;height:300px;background-color:white;border:black 3px double" ;
	document.body.appendChild(letterPopup);
	$e("id('hatena-user-info')/li[contains(concat(' ', @class, ' '), 'menu-ugoletter')]").snapshotItem(0).addEventListener("mouseover",
	function(e){
	 letterPopup.style.top = e.pageY + "px";
	 letterPopup.style.left = e.pageX + "px";
	 letterPopup.style.visibility = "visible";
	 if(isLetterLoading == false)
	 {
		 letterPopup.textContent = "Now Loading...";
		 var timeOutTimer = setTimeout(function(){ letterPopup.textContent = "タイムアウトしました。" ; isLetterLoading = false; }, 10000);
		 var xhr = new (Ten.XHR)("http://ugomemo.hatena.ne.jp/letters", null, function (xhr) {
		 clearTimeout(timeOutTimer);
		 var range = document.createRange();
		 var ele = document.evaluate("id('main')/ul/li/div",range.createContextualFragment(xhr.responseText),null,7,null);
		 letterPopup.innerHTML = "";
		 var div = document.createElement("div");
		 div.style.height = "100px";
		 div.style.overflow = "auto";
		 var ul = document.createElement("ul");
		 ul.style.textAlign = "left";
		 div.appendChild(ul);
		 for(i = 0 ; i < ele.snapshotLength ; i++)
		 {
			var link = document.evaluate("a",ele.snapshotItem(i),null,7,null).snapshotItem(0);

			var title = document.evaluate("div[@class='info']/div[@class='username']",ele.snapshotItem(i),null,7,null).snapshotItem(0).textContent;
			var a = document.createElement("a");
			a.textContent = title;
			a.href="javascript:;";
			linktest = link.href +";"+ i;
			(function()
			{
			var linkValue = link.href;
			a.addEventListener("click",function()
			{
				$id("letterPrev").textContent = "Now Loading..."
				var timeOutTimer = setTimeout(function(){ $id("letterPrev").textContent = "タイムアウトしました。" }, 10000);
				var xhr2 = new (Ten.XHR)(linkValue, null, function (xhr2) {
				 clearTimeout(timeOutTimer);
				 var range = document.createRange();
				 var ele = range.createContextualFragment(xhr2.responseText);
				 //var data = document.evaluate("id('main')",ele,null,7,null).snapshotItem(0);
				Hatena.Test = ele;
		//		$e("id('main')/div/div/span/div[@class='container']/div[@class='news-body']",ele,null,7,null).snapshotItem(0).style.cssText = "padding:0px";
				$id("letterPrev").innerHTML = document.evaluate("id('main')/div/div/span/div[@class='container']",ele,null,7,null).snapshotItem(0).innerHTML;
				}); 
			},false);

			})();
			 
			 
			//a.target = "letterPrev";
			var li = document.createElement("li");
			var img = document.createElement("img");
			img.src = (link.firstChild.src.indexOf("unread") == -1) ? "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABlklEQVR42tXP2y+CcRzH8e7QtRubi/4BNheS07I5Xlh7lEMO1SMhaTMjSqenPAwpezY3WUTK5rzUpplxqZBx7ZL5Jxw+1FaWwx7ceV9/X9/f98fh/LtavFUM4Wmwss19WbOXZLQHSqj35Kh3kQa2+YzEyxZmMNgN17UN9JkBikArKu1BI5tLlsAD+wrMX1GYu7KA3GiDkBZAMLyVnR7qjXCqVeGT3o+Y8CwziZNn4xbMxM3Jl8sp0VP+8N07VkfIClWYedCfaiHbLBhK4yUP078rw8ylCdOXRsj9LSiz1mRi1eFsnSp0ez8V1WM+boXUr35qXl0cErmLHH07nZi6MII+16NrXYJSS1kmTtTozstR7kuhO9Zg4WYSdNSAgaAC2pAS9ug4bOfj6PSJITDnPn/CqWp9R9z2AAFtWJn85/TFBKiYDlRUh/a1JghMmpdvcXqJ44hLuBvQs90BW2wM5rMRSL0ESoxqdpyq1uHj1jmFbydL0LoiAn+i7+c4VeHoDbfCzkexwfnII3lZbPNflljyZ/zbXgEHDcz+YDjlCgAAAABJRU5ErkJggg==" : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABNklEQVR42u2RP0uCURSHLw0tjRJ9g4amPkA01NLg4tBHqNGt2ooIe09FtPTHCKI2q6WpUgqaEip4ISGxKCErG1QoU9TMJ8/7opRzowcOv8u95/ndc+41ph2m24oFMjKQU62JmXmRubc+a3cpL57PmEzcncn01ax0HlQDiaFviYy7uea3xRtXNQpTzEJoGIXJp5015TxkE/B6CfF9WOmCkzEnFSZzC6s9mIKEi1QKqIne6oDnk6iRY6hgMVPfm4JkxM3DUXh/IikjKdOE7KALNgy+Sm4Hzxdwsw0fKcjdOyDpa3gMsyN2pGngqI7S0sGxDEZZ7HANH47q4+xBtQJbvVTno76/BgpqtHTQHNPegFO/W7NgcH6h8eKqXmtzXQ9US1Ir6y9oB/2WZ1lNfFYo+LvGtON/4gedlVB9mLzL5AAAAABJRU5ErkJggg==";
			li.appendChild(img);
			li.appendChild(a);
			ul.appendChild(li);
		 }
		 letterPopup.appendChild(div);
		 
		 
		 iframe = document.createElement("div");
		 iframe.src = "about:blank";
		 iframe.name = "letterPrev";
		 iframe.style.cssText = "width:300px;height:200px;text-align:left;";
		 iframe.id = "letterPrev";
		 letterPopup.appendChild(iframe);
		 //letterPopup.addEventListener("load",function(e){ e.  },false);
		 
		 
		 isLetterLoading = false;
		});
		isLetterLoading = true;
	}
	
	},false);