<ul id="sbmlist">
  <li class="add">
    <a id="add_hatena" target="_blank" title="はてなブックマークに追加">
      <img src="hatena.favicon.gif" id="icon_hatena">
    </a>
  </li>
  <li class="counter">
    <a id="text_hatena" target="_blank"> </a>
  </li>
  <li class="add">
    <a id="add_delicious" target="_blank" title="Save this bookmark">
      <img src="delicious.small.gif" id="icon_delicious">
    </a>
  </li>
  <li class="counter">
    <a id="text_delicious" target="_blank"> </a>
  </li>
</ul>

#sbmlist{
  display:table;
  margin:5px 3px;
  list-style-type:none;
  height:18px;
  min-width:8em;
}
#sbmlist li{
  display:table-cell;
  vertical-align:middle;
}
#sbmlist li.counter{
  min-width:2.5em;
  text-align:center;
  padding:0 3px 0 0;
}

function SBM(service){
  this.text = document.getElementById('text_' + service.id);
  this.icon = document.getElementById('icon_' + service.id);
  this.add = document.getElementById('add_' + service.id);
  this.api_get = service.api_get;
  this.api_link = service.api_link;
  this.api_add = service.api_add;
  this.responceFilter = service.responceFilter;
  this._cache = {};
}
SBM.prototype = {
  request:function _sbm_request(only_request){
    var self = this, xhr = new XMLHttpRequest();
    var api_url = this.replace(this.api_get);
    xhr.open('GET', api_url, true);
    xhr.onload = function(){
      var count = self.responceFilter(xhr.responseText);
      self._cache[self.url] = {count:count};
      if (!only_request) self.update(count);
    };
    xhr.send();
  },
  set:function _sbm_set(url, force_request, only_request){
    if (!only_request) {
      this.text.textContent = '-';
    }
    this.url = url;
    this.encoded_url = encodeURIComponent(url);
    if ((force_request || only_request) || !this._cache[url]) {
      this.request(only_request);
    } else {
      this.update(this._cache[url].count);
    }
  },
  update:function _sbm_update(count){
    this.text.textContent = count;
    this.text.href = this.replace(this.api_link);
    this.add.href = this.replace(this.api_add);
  },
  replace:function _sbm_replace(str){
    var self = this;
    return str.replace(/#\{([^}]+)\}/g, function(_, _$){
      return self[_$] || '';
    });
  }
};

var Services = [
  {
    id:'hatena',
    api_get:'http://b.hatena.ne.jp/entry.count?url=#{encoded_url}',
    api_link:'http://b.hatena.ne.jp/entry/#{url}',
    api_add:'http://b.hatena.ne.jp/add?&url=#{encoded_url}',
    responceFilter:function(text){
      if (/\D/.test(text)) {
        return '';
      } else {
        return text;
      }
    }
  },
  {
    id:'delicious',
    api_get:'http://badges.del.icio.us/feeds/json/url/blogbadge?url=#{encoded_url}',
    api_link:'http://delicious.com/url/#{hash}',
    api_add:'http://delicious.com/save?v=5&jump=close&url=#{encoded_url}',
    responceFilter:function(text){
      try {
        var r = JSON.parse(text);
        if (r.length === 0) {
          return '';
        }
        this.hash = r[0].hash;
        return r[0].total_posts;
      } catch (e) {
        console.error(e);
        return '';
      }
    }
  }
];
var services = Services.map(function(service, i){
  return new SBM(service);
});