(function(){

var name    = 'firefox';
var sid     = '34705';
var url     = 'http://firefox.ring.hatena.ne.jp/';
var id      = 'hatena-ring-' + sid;
var mode    = 'thumbnail';
var hasLogo = true;

if (mode == 'thumbnail' && hasLogo) {
    var logoURL = 'http://ring.hatena.ne.jp/images/logo/f/firefox/firefox_s.png';
    CreateImageHTML(id, logoURL, url, name, sid);
    CreateWindowHTML();
} else if (mode == 'image' && hasLogo) {
    var logoURL = 'http://ring.hatena.ne.jp/images/logo/f/firefox/firefox.png';
    CreateImageHTML(id, logoURL, url, name, sid);
    CreateWindowHTML();
} else { 
    SetNoLogo(name, url, sid);
}

function CreateWindowHTML() {
    if (document.getElementById('hatena-ring-window')) return;
    var windowHTML = '';
    windowHTML += '<span style="position:relative;z-index:1000;">';
    windowHTML += '<span id="hatena-ring-window" style="position:absolute; visibility:hidden; z-index:1000;">';
    windowHTML += '</span></span>';
    document.write(windowHTML);
}

function CreateImageHTML(id, logoURL, url, name, sid) {
    var imageHTML = '';
    imageHTML += '<span id="' + id + '">';
    imageHTML += '<img src="' + logoURL + '" ';
    imageHTML += 'id="' + id + '-image" ';
    imageHTML += 'onclick="OnClickImage(this.id, \'' + url +'\', \'' + name + '\', \'' + sid + '\')"';
    imageHTML += 'style="cursor:pointer" alt="' + name + '">';
    imageHTML += '</span>';
    document.write(imageHTML);
}

function SetNoLogo(name, url, sid) {
    var html = '';
    html += '<table cellpadding="0" cellspacing="0" style="border:none;width:auto;margin:2px;padding:0px;border:1px solid #999">';
    html += '  <tr>';
    html += '   <td colspan="3" nowrap style="border:none;width:200px;background:#1841CE;padding:4px;font-size:12px">';
    html += '      <a href="' + url + '" style="color:white;text-decoration:none;font-weight:bold;font-family:MS ゴシック,sans-serif">';
    html += '        <img src="http://ring.hatena.ne.jp/images/icon_home.gif" style="vertical-align:middle;margin-right:5px;border:none;" alt="home">';
    html += 'Hatena Ring ' + name;
    html += '      </a>';
    html += '   </td>';
    html += '  </tr>';
    html += '<tr>';
    html += '<td style="border:none;white-space:nowrap;width:auto;padding:0;margin:0;font-size:10px;background:#FFF;font-family:MS ゴシック,sans-serif">';
    html += '  <a href="' + url + 'go?type=prev&sid=' + sid + '" target="_blank" style="display:block;padding:2px 5px;color:#000;text-decoration:none;">';
    html += '    <img src="http://ring.hatena.ne.jp/images/prev.gif" style="vertical-align:middle;margin:2px 3px 2px 0;border:none;padding:0;" alt="prev">';
    html += 'prev';
    html += '  </a>';
    html += '</td>';
    html += '<td style="border:none;white-space:nowrap;width:auto;padding:0;margin:0;font-size:10px;background:#FFF;font-family:MS ゴシック,sans-serif"';
    html += '    align="center">';
    html += '  <a href="' + url + 'go?type=random&sid=' + sid + '" target="_blank" style="display:block;padding:2px 5px;color:#000;text-decoration:none;">';
    html += '    <img src="http://ring.hatena.ne.jp/images/random.gif" style="vertical-align:middle;margin:2px 3px 2px 0;border:none;" alt="random">';
    html += 'random';
    html += '  </a>';
    html += '</td>';
    html += '<td style="border:none;white-space:nowrap;width:auto;padding:0;margin:0;font-size:10px;background:#FFF;font-family:MS ゴシック,sans-serif"';
    html += '    align="right">';
    html += '  <a href="' + url + 'go?type=next&sid=' + sid + '" target="_blank" style="display:block;padding:2px 5px;color:#000;text-decoration:none;">';
    html += '    <img src="http://ring.hatena.ne.jp/images/next.gif" style="vertical-align:middle;margin:2px 3px 2px 0;border:none;" alt="next">';
    html += 'next';
    html += '  </a>';
    html += '</td>';
    html += '</tr>';
    html += '</table>';
    document.write('<div id="hatena-ring-window-' + name + '" style="width:180px;">' + html + '</div>');
}

})();

var Util = {
    GetAbsoluteLeft : function(element) {
        var left = 0;
        for (var e = element; e; e = e.offsetParent) {
            left += e["offsetLeft"];
        }
        return left;
    },
    GetAbsoluteTop : function(element) {
        var top = 0;
        for (var e = element; e; e = e.offsetParent) {
            top += e["offsetTop"];
        }
        return top;
    }
};

function IsSafari() {
    return window.navigator.appVersion.indexOf('Safari') != -1;
}

function SetWindow(targetDiv, where) {
    var placeX, placeY;

    // Safariだと spanのコンテナはウィンドウが正しく表示できない 
    if (IsSafari()) {
        placeX = -50;
        placeY = -50;
    } else {
        placeX = 0;
        placeY = 0;
    }
    targetDiv.style.left = placeX + "px";
    targetDiv.style.top  = placeY + "px";
}

function CloseWindow (id) {
    var ringWindow = document.getElementById(id);
    ringWindow.style.visibility = "hidden";
}

function OnClickImage(id, url, name, sid) {
    var ringWindow = document.getElementById('hatena-ring-window');
    if(ringWindow.style.visibility == 'hidden') {
        OpenWindow(id, url, name, sid);
    } else {
        CloseWindow('hatena-ring-window');
    }
}

function OpenWindow(id, url, name, sid)  {
    var img = document.getElementById(id);
    var html = '';
    html += '<div class="hatena-ring" style="text-align:center;margin-top:0px;border:1px solid #666;width:_180px;background: #1841CE;z-index:2000">';
    html += '<div class="hatena-ring-title" style="background: #1841CE;padding:0;margin:0;text-align:left;">';
    html += '<table cellpadding="0" cellspacing="2" style="border:none;width:auto;margin:2px;padding:0px;">';
    html += '  <tr>';
    html += '   <td nowrap style="border:none;font-size:12px;width:auto;font-family:MS ゴシック,sans-serif">';
    html += '     <a href="' + url + '" style="color:white;text-decoration:none;font-weight:bold;">';
    html += '       <img src="http://ring.hatena.ne.jp/images/icon_home.gif" style="vertical-align:middle;margin-right:5px;border:none;" alt="home">';
    html += 'Hatena Ring ' + name;
    html += '     </a>';
    html += '   </td>';
    html += '   <td align="right" style="border:none;text-align:right;font-size:12px;width:auto;">';
    html += '     <a href="" onclick="CloseWindow(\'hatena-ring-window\'); return false;">';
    html += '     <img src="http://ring.hatena.ne.jp/images/close.gif" alt="close" title="close" style="margin:0 3px;border:none;">'
    html += '     </a>';
    html += '   </td>';
    html += '  </tr>';
    html += '</table>';
    html += '</div>';
    html += '<div class="hatena-ring-content" style="text-align:center;background:#FFF;">';
    html += '<table cellpadding="0" cellspacing="0" style="border:none;width:auto;padding:0;margin:0;">';
    html += '<tr>';
    html += '  <td style="border:none;white-space:nowrap;width:auto;padding:0;margin:0;font-size:10px;font-family:MS ゴシック,sans-serif">';
    html += '    <a href="' + url + 'go?type=prev&sid=' + sid + '" target="_blank" style="display:block;padding:2px 5px;color:#000;text-decoration:none;">';
    html += '      <img src="http://ring.hatena.ne.jp/images/prev.gif" style="vertical-align:middle;margin:2px 3px 2px 0;border:none;padding:0;text-decoration:none;" alt="prev">';
    html += 'prev';
    html += '    </a>';
    html += '  </td>';
    html += '  <td style="border:none;white-space:nowrap;width:auto;padding:0;margin:0;font-size:10px;font-family:MS ゴシック,sans-serif" align="center">';
    html += '    <a href="' + url + 'go?type=random&sid=' + sid + '" target="_blank" style="display:block;padding:2px 5px;color:#000;text-decoration:none;">';
    html += '      <img src="http://ring.hatena.ne.jp/images/random.gif" style="vertical-align:middle;margin:2px 3px 2px 0;border:none;text-decoration:none;" alt="random">';
    html += 'random';
    html += '    </a>';
    html += '  </td>';
    html += '  <td style="border:none;white-space:nowrap;width:auto;padding:0;margin:0;font-size:10px;font-family:MS ゴシック,sans-serif" align="right">';
    html += '    <a href="' + url + 'go?type=next&sid=' + sid + '" target="_blank" style="display:block;padding:2px 5px;color:#000;text-decoration:none;text-decoration:none;">';
    html += '      <img src="http://ring.hatena.ne.jp/images/next.gif" style="vertical-align:middle;margin:2px 3px 2px 0;border:none;" alt="next">';
    html += 'next';
    html += '    </a>';
    html += '  </td>';
    html += '</tr>';
    html += '</table>';
    html += '</div>';
    html += '</div>';
    var ringWindow = document.getElementById("hatena-ring-window");
    ringWindow.innerHTML = html;
    SetWindow(ringWindow, img);
    ringWindow.style.visibility = "visible";
    return true;
}