var HatenaBookmarkCommentReader = {
    id: 'HatenaBookmarkCommentReaderBlock',
    main: function(){
        var HBCRElement = document.getElementById(HatenaBookmarkCommentReader.id);
        if( HBCRElement )
            HatenaBookmarkCommentReader.clean(HBCRElement);
        else
            HatenaBookmarkCommentReader.request();
    },
    clean: function(){
        var element = arguments[0]
            || document.getElementById(HatenaBookmarkCommentReader.id);
        element.parentNode.removeChild( element );
    },
    request: function(){
        var uri = 'http://b.hatena.ne.jp/entry/json/'
            + '?url=' + encodeURIComponent(location.href)
            + '&callback=HatenaBookmarkCommentReader.callback';
//         var uri = 'http://aql.osx.cc/jsonpp/proxy/HatenaBookmarkCommentReader.callback:'
//             + 'http://b.hatena.ne.jp/entry/json/' + location.href;

        var script = document.createElement('script');
        script.src = uri;
        script.type = 'text/javascript';
        script.charset = 'utf-8';
        script.id = HatenaBookmarkCommentReader.id;

        document.getElementsByTagName('body')[0].appendChild(script);
    },
    callback: function(json){
        var script = document.getElementById(HatenaBookmarkCommentReader.id);
        if ( script ) HatenaBookmarkCommentReader.clean(script)

        if ( json != null )
            HatenaBookmarkCommentReader.createBlock(
                HatenaBookmarkCommentReader.createComments(json)
            );
        else
            HatenaBookmarkCommentReader.createBlock(
                'NOT FOUND : This page has not been bookmarked yet.'
            );
    },
    createBlock: function(content){
        var body = document.getElementsByTagName('body')[0];
        var block = document.createElement('div');

        block.id = HatenaBookmarkCommentReader.id;
        var block_style = block.style;
        block_style.color = 'black'
        block_style.backgroundColor = 'white';
        block_style.fontSize = 'smaller';
        block_style.textAlign = 'left';
        block_style.padding = '0.5em 1em';
        block_style.margin = '0em 1em 1em 0em';
        block_style.zIndex = '100';
        block_style.position = 'absolute';
        block_style.top = '1em';
        block_style.left = '1em';
        block_style.border = '1px solid #666666';
        block_style.opacity = '0.9';

        // for Win IE
        block_style.filter = 'Alpha(opacity=90)';

        if ( typeof content == 'object' )
            block.appendChild(content);
        else
            block.appendChild(document.createTextNode(content));

        body.appendChild(block);
    },
    createComments: function(json){
        var div = document.createElement('div');

        var info = document.createElement('div');
        var info_style = info.style;
        info_style.padding = '1em';

        var img = document.createElement('img');
        img.src = json.screenshot;
        img.title = json.title;
        img.alt = json.title;
        img.width = 120;
        img.height = 90;
        img.style.border = '1px solid #999999';
        img.style.margin = '0em 0em 1em 1em'
        img.style.cssFloat = 'right';
        // img.style.styleFloat = 'right';
        img.onclick = function(){HatenaBookmarkCommentReader.clean();};
        info.appendChild(img);

        var infoTitle = document.createElement('div');
        var infoTitleElement = document.createElement('strong');
        infoTitleElement.appendChild(document.createTextNode(json.title));
        infoTitle.appendChild(infoTitleElement);
        info.appendChild(infoTitle);

        var infoBookmark = document.createElement('div');
        infoBookmark.style.textAlign = 'right';
        infoBookmark.style.padding = '0.5em 0em';

        var infoCount = document.createElement('span');
        infoCount.style.padding = '0em 0.5em';
        infoCount.appendChild(
            document.createTextNode(
                json.bookmarks.length + ( json.bookmarks.length > 1 ? ' users' : ' user' )
            ));
        infoBookmark.appendChild(infoCount);

        var infoPage = document.createElement('a');
        infoPage.href = json.entry_url;
        var infoPageIcon = document.createElement('img');
        infoPageIcon.src = 'http://b.hatena.ne.jp/images/entry.gif';
        infoPageIcon.alt = 'Hatena Bookmark entry page';
        infoPageIcon.title = 'Hatena Bookmark entry page';
        infoPageIcon.style.verticalAlign = 'text-bottom';
        infoPageIcon.style.border = '0px';
        infoPage.appendChild(infoPageIcon);
        infoBookmark.appendChild(infoPage);

        info.appendChild(infoBookmark);

        div.appendChild(info);

        var ul = document.createElement('ul');
        var ul_style = ul.style;
        ul_style.listStyleType = 'none';
        ul_style.padding = '0.5em 1em';
        ul_style.clear = 'right';
        ul_style.borderWidth = '1px 0px 0px 0px';
        ul_style.borderStyle = 'solid';
        ul_style.borderColor = '#999999';

        for ( var i = 0; i < json.bookmarks.length; i++ ) {
            var li = document.createElement('li');

            if( json.bookmarks[i].comment == '') continue;

            json.bookmarks[i].timestamp.match(/^(\d{4})\/(\d{2})\/(\d{2})/);
            var ymd = RegExp.$1 + RegExp.$2 + RegExp.$3;

            json.bookmarks[i].user.match(/^(.{2})/);
            var usericon = 'http://www.hatena.ne.jp/users/'
                + RegExp.$1 + '/' + json.bookmarks[i].user + '/profile_s.gif';

            var html = '<img src="' + usericon + '" alt="" title="" style="vertical-align:middle;">';
            html += ' <a'
                + ' href="http://b.hatena.ne.jp/' + json.bookmarks[i].user
                + '/' + ymd + '#bookmark-' + json.eid  + '"'
                + ' title="' + json.bookmarks[i].user
                + ' - '
                + json.bookmarks[i].timestamp
                + '"'
                + '>'
                + json.bookmarks[i].user
                + '</a>';

            if( json.bookmarks[i].tags.length ) {
                html += '&nbsp;';
                for ( var j = 0; j < json.bookmarks[i].tags.length; j++ ){
                    html += '['
                        + '<a href="http://b.hatena.ne.jp/'
                        + json.bookmarks[i].user + '/' + json.bookmarks[i].tags[j]
                        + '/">'
                        + json.bookmarks[i].tags[j]
                        + '</a>'
                        + ']';
                }
            }

            if( json.bookmarks[i].comment ) {
                html += '&nbsp;' + json.bookmarks[i].comment;
            }

            li.innerHTML = html;
            ul.appendChild(li);
        }

        div.appendChild(ul);
        return div;
    }
};

HatenaBookmarkCommentReader.main();