userjs - showing hantena bookmark comment on the page

userjs - showing hantena bookmark comment on the page

// ==UserScript==
// @name           ShowHatenaBookmarkComment
// @namespace      userjs.phphp.net
// @description    build hatena bookmark comments
// @include        http://*
// ==/UserScript==

/* Original Script: Hatena Bookmark Comments Viewer
 *   <http://www.ne.jp/asahi/nanto/moon/>
 *   <http://worris.sakura.ne.jp/hbcview.html>
 *
 * Original Author: worris
 */

new 
function() {
	
	function HatenaBookmarkComment() {
		
		appendStyle(
			"#hbc-container {margin:0px; position:fixed; top:0px; right:0px; max-width: 25%; height:100%;"
				+ "overflow:auto; background-color: #DFDFDF; opacity: 0.9; font-size: 11pt;} "
			+ "#hbc-switch {color:#FFF; background-color: #000; height:100%;"
				+ "float:left; font-family: Ariel; font-size:10pt; margin:0px; padding: 0px;}"
			+ "#hbc-container ul {text-align:left; padding:10px; list-style:none;}"
			+ "#hbc-container li {margin: 10px; 0px;}");
		
		function renderContainer() {
			return '<div id="hbc-container">'
				+ '</div>';
		}
		
		function renderSwitch(st) {
			var arrow = (st == 'open') ? '&lt;&lt;' : '&gt;&gt;';
			return '<div id="hbc-switch">'+ arrow +'</div>';
		}
		
		function renderList() {
			return '<ul id="hbc-list" />';
		}
		
		function renderItem(obj) {
			return "<li>" + obj.user + ": " + obj.comment + "</li>";
		}
		
		function CommentTree(bookmarks) {
			
			var node = new function() {
				var list = text2dom(renderList());
				bookmarks.forEach(
					function(obj) {
						list.appendChild(text2dom(renderItem(obj)));
					}
				);
				return list;
			};
			
			this.hide = bind(function() {
				$('hbc-container').innerHTML = "";
				$('hbc-container').appendChild(text2dom(renderSwitch('open')));
				$('hbc-container', unsafeWindow).onclick = this.show;
			}, this);
			
			this.show = bind(function() {
				$('hbc-container').innerHTML = "";
				$('hbc-container').appendChild(text2dom(renderSwitch('hide')));
				$('hbc-container').appendChild(node);
				$('hbc-container', unsafeWindow).onclick = this.hide;
			}, this);			
		}
		
		function build(response) {
			if (response.status != 200 || response.responseText.length < 10) return;
			
			// response.responseText
			// {count:, url:, bookmarks: 
			// 		[timestamp:, comment:, user:, tags:]}
			var bms = eval(response.responseText).bookmarks.findAll(function(b) {
				return (b.comment.length > 0);
			});
			
			if (bms.length > 0) {
				document.body.appendChild(text2dom(renderContainer()));
				var ct = new CommentTree(bms);
				ct.hide();
			}
		};
		
		this.run = function() {
			// skip iframe
			if (window == window.parent && document.body && location.href == top.location.href) {
  				GM_xmlhttpRequest({
				    method: "GET",
				    url: "http://b.hatena.ne.jp/entry/json/" +
				         location.href.split("#")[0],
				    onload: build
				});
			}
		};
	}
	
	var hbc = new HatenaBookmarkComment();
	hbc.run();
	
	function bind(fn, obj) {
		return function() {
			fn.apply(obj);
		};
	};
	
	Array.prototype.forEach = function(fn) {
		for(var i = 0; i < this.length; i++) {
			fn(this[i]);
		}
		return this;
	};
	
	Array.prototype.findAll = function(fn) {
		var res = [];
		for(var i = 0; i < this.length; i++) {
			if(fn(this[i])) res.push(this[i]);
		}
		return res;
	};
	
	function $(id) {
		var w = arguments[1] || window;
		return w.document.getElementById(id);
	}
	
	function appendStyle(style) {
		var st = document.createElement('style');
		st.type = "text/css";
		st.innerHTML = style;
		document.getElementsByTagName('head')[0].appendChild(st);
	}
	
	function text2dom(text) {
		// var document = unsafeWindow.document;
		var div = document.createElement('div');
		div.innerHTML = text;
		return div.firstChild;
	}
};