kentbrew/zero_lag_coinwidget_button.html

## zero_lag_coinwidget_button.html
<html>
<head>
<title>Zero-Lag Coinwidget Button</title>
</head>
<body>
<h1>Zero-Lag Coinwidget Button</h1>
<p><a class="donateButton">Support This Site with Bitcoin</a></p>
<p>If you're running a Tumblr blog or something else that has lots of content,
you may have already noticed that calls to coinwidget.com can be laggy and
block the page when donation counts are enabled. This isn't their fault, I
hasten to add: the nature of the blockchain makes writing a performant API
to get the total number of transactions ever made to an address very hard to
build.</p>
<p>On this page is a bit of inline JavaScript that renders buttons immediately,
calls coinwidget's API asynchronously, and renders counts when they show up. Images
are inlined as <code>data:</code> URIs, so they show up instantaneously.</p>
<p>To run this on your page, copy everything in the <code>&lt;script></code> tag and
paste it into any part of your page. Be sure to change my address to yours, unless of
course you want your contributions sent to my account. :)</p>
<script>
(function(w, d, a) {
  // got data? Render to all saved links
  var render = function () {
	// if the data is broken, substitute an empty object
	var data = w[a.var][a.obj] || {};
	// work through all links and heat 'em up
	for (var i = 0, n = v.length; i < n; i = i + 1) {
	  var t = v.pop();
	  if (a.count && data.count) {
	    t.innerHTML = t.innerHTML + '<span><i></i>' + data.count + '</span>';
	  }
    }
  }

  var go = function(el) {
	// find links
    var links = d.getElementsByTagName('A');
    for (var i = 0, n = links.length; i < n; i = i + 1) {
      if (links[i].className.match(a.baseClassName)) {
	    v.push(links[i]);
        links[i].href= a.currency + ':' + a.address;
      }
    }
    // get the donation count and amount for this address
    var s = d.createElement('SCRIPT');
    s.src = a.endpoint + a.obj + '_' + a.currency + '_' + a.address;
    s.onload = function () {
      render();
    }
    // fire the request
    d.body.appendChild(s);
  }

  // this is here so the script may live anywhere in the document
  // if you are serving it remotely, onload will have fired already
  // so just run go()

  if (typeof w.addEventListener !== 'undefined') {
    w.addEventListener('load', go, false);
  } else if (typeof w.attachEvent !== 'undefined') {
    w.attachEvent('onload', go);
  }

  // a place to store links
  var v = [];

  // make the CSS
  var css = d.createElement('STYLE');
  css.type = 'text/css';
  var rules = a.css.join('\n');
  rules = rules.replace(/%s/g, a.baseClassName);
  if (css.styleSheet) {
    css.styleSheet.cssText = rules;
  } else {
    css.appendChild(document.createTextNode(rules));
  }

  // do our absolute best not to block
  // should not wait for window.onload

  w.setTimeout(function () {
    d.head.appendChild(css);
  }, 10);

}(window, document, {
  'css': [
    'a.%s { position: relative; border: 1px solid #aaa; border-radius: 2px; box-shadow: 0 0 3px #aaa; color: #333; font-family: Verdana; text-shadow: 0 0 3px #fff; font-size: 10px; font-weight: bold; padding: 5px 5px 5px 23px; text-decoration: none; height: 32px; line-height: 32px; background: #eaeaee url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADZUlEQVR4AV2RyY8UBQNHXy1dVV3V1ftU9/RsIoNhBjLQyAhCEOKGMca7yIGQ4EkS/wDP3oxBE+PBgyZ6gqBwwpjoQMSEjIyDzPeJoDILs/UyvTDVXdW12fFEfMnv+HuXJ/AfPjmfOZwyjTPWQP6omUoWI1EKG9Xq6vpGdcZx3S+A33gC4eN30wAosZiuaeqHB8t73tm1e6eomCkIQiLXJQwj7O0u//v/787c/MKFtu29D/gAwgdnEwwV0/GEoX/z4kvHT6atPK1qnbWV9f7pMVJMIZuzGBwaRTHiLD9a5NuLVy4nNOUtoCedejlPXNc+Ovn6yVNmOs3C7B3u3p4nMkq4UoZ4dpT6xjrFwgBhLEZ2agorm55YuD2X6Hned9KbR4390yde/Xxo95Tw4NYsG7VtCuMHGBgeZ6A0Rr44gtPr9c8ShgZh1yG/sy9dXjq0VW1eFZOZ7NnxfdOiXd8mCGSy+UHShTF2TJbxew6bK/d5Zt/zqOYYK8triI0qUb1GebosBmF0TswVisfkhIFdrxDXTZK6SuWvO4Sex4OFWdbv3WDlzwXS2QE6LRsCj16jiZXJoOvxF2QjaRaQAiTBJ5E0EEQZX9IIAp/J8lHC0GPo6Uke/rFAe6tCM60iKXEyhSyqplhy5DvQeYwQBShqDDWZxI2pCIJIdXONRuURjXqdyelj9NoV1lbvMTgyBkhEYSSIj7caG3RtEqaOocsoMQHX6wHQblRJxDyalWUkSUY1c7S2O315hN+xse1uXa5XazOdWqWsanGcZrPfPiBl7UKWZfYcOILvuaRyRbaqG9yfv0lGBlOXWVpcwu52b0lvHNLWIjhXGh4RXdeha9usLq/SarfpeT6KpnP7xjX+nptB6NYZ7yfMWhbf//ATna5zXjo+Fas4diuZy+WP9IsgCyFOq4bj+jQbdXynS29rnVKpxFN7DzK0Zz+/zs7xy9z8V0EQXJBOTEkkzfj15aWlvYWhHRPZiedIpwf+FSV0BVVRGJ3Yx+jhVzB3lLk7d5NrVy79XLRSbycSmiudfs0ijAicjn158eFDzQ3kZ1OpnJwr5UkOj5AaHEYzk2yuLTJz8TOuX730dSZlnPb9sNUfwqfvWTxJXBWmHE84k8pkjutGohSEkdhqNGu1yuas53lfAj/yBP8AQgh17g6RTS4AAAAASUVORK5CYII=) 3px 50% no-repeat; }',
    'a.%s span { padding: 0 3px 0 10px; background-size: 45px 20px; background-position: 0 0; position: absolute; top: 0; margin-left: 2px; left: 100%; height: 20px; font: 10px Arial, Helvetica, sans-serif; line-height: 20px; }',
    'a.%s span i { background-position: 100% 0; position: absolute; top: 0; right: -2px; height: 20px; width: 2px; }',
    'a.%s span, a.%s span i { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAUCAYAAAAZb7T/AAAA7UlEQVRIx9WXPU6CQRCG14aWC3gFLuE1uAQlN0BC5R2o9gBmx8073MFE1A8SYiSRRv0KfuJ+xNdKEyFQzzzJ9E8mszvzhnAGIPUAoYVSTR+qchNjbJ0Unkykqyrfm82aFiilsKqmBO6uT3RYroD0VdeftEQphYC8HwnnnDuA1KvVGy0CCA9G4vZSNb0uly+0yj/pnHMbkPvFYk7L/EnHGFuAYDZ7pnUAYSB5oSrjqprSA4AwADJ4fHqgF36l2TSNP+n93p/0yN14uHyILr88t8vF7Rp3ezC5PU0PQ8ButzUVAlTTMJyPW9K3GLd+AMVtpnszgV7QAAAAAElFTkSuQmCC);'
  ],
  'endpoint': 'http://coinwidget.com/widget/lookup.php?data=',
  'var': 'COINWIDGETCOM_DATA',
  'currency': 'bitcoin',
  'obj': 'reply',
  'count': 'count',
  'amount': 'amount',
  'donate': 'donate',
  'baseClassName': 'donateButton',
  'address': '1E8KtmGHLZC2TmdcAyMnDCWpx398Na6ztn'
}));
</script>
</body>
</html>
	<html>
	<head>
	<title>Zero-Lag Coinwidget Button</title>
	</head>
	<body>
	<h1>Zero-Lag Coinwidget Button</h1>
	<p><a class="donateButton">Support This Site with Bitcoin</a></p>
	<p>If you're running a Tumblr blog or something else that has lots of content,
	you may have already noticed that calls to coinwidget.com can be laggy and
	block the page when donation counts are enabled. This isn't their fault, I
	hasten to add: the nature of the blockchain makes writing a performant API
	to get the total number of transactions ever made to an address very hard to
	build.</p>
	<p>On this page is a bit of inline JavaScript that renders buttons immediately,
	calls coinwidget's API asynchronously, and renders counts when they show up. Images
	are inlined as <code>data:</code> URIs, so they show up instantaneously.</p>
	<p>To run this on your page, copy everything in the <code><script></code> tag and
	paste it into any part of your page. Be sure to change my address to yours, unless of
	course you want your contributions sent to my account. :)</p>
	<script>
	(function(w, d, a) {
	// got data? Render to all saved links
	var render = function () {
	// if the data is broken, substitute an empty object
	var data = w[a.var][a.obj] \|\| {};
	// work through all links and heat 'em up
	for (var i = 0, n = v.length; i < n; i = i + 1) {
	var t = v.pop();
	if (a.count && data.count) {
	t.innerHTML = t.innerHTML + '<span><i></i>' + data.count + '</span>';
	}
	}
	}

	var go = function(el) {
	// find links
	var links = d.getElementsByTagName('A');
	for (var i = 0, n = links.length; i < n; i = i + 1) {
	if (links[i].className.match(a.baseClassName)) {
	v.push(links[i]);
	links[i].href= a.currency + ':' + a.address;
	}
	}
	// get the donation count and amount for this address
	var s = d.createElement('SCRIPT');
	s.src = a.endpoint + a.obj + '_' + a.currency + '_' + a.address;
	s.onload = function () {
	render();
	}
	// fire the request
	d.body.appendChild(s);
	}

	// this is here so the script may live anywhere in the document
	// if you are serving it remotely, onload will have fired already
	// so just run go()

	if (typeof w.addEventListener !== 'undefined') {
	w.addEventListener('load', go, false);
	} else if (typeof w.attachEvent !== 'undefined') {
	w.attachEvent('onload', go);
	}

	// a place to store links
	var v = [];

	// make the CSS
	var css = d.createElement('STYLE');
	css.type = 'text/css';
	var rules = a.css.join('\n');
	rules = rules.replace(/%s/g, a.baseClassName);
	if (css.styleSheet) {
	css.styleSheet.cssText = rules;
	} else {
	css.appendChild(document.createTextNode(rules));
	}

	// do our absolute best not to block
	// should not wait for window.onload

	w.setTimeout(function () {
	d.head.appendChild(css);
	}, 10);

	}(window, document, {
	'css': [
	'a.%s { position: relative; border: 1px solid #aaa; border-radius: 2px; box-shadow: 0 0 3px #aaa; color: #333; font-family: Verdana; text-shadow: 0 0 3px #fff; font-size: 10px; font-weight: bold; padding: 5px 5px 5px 23px; text-decoration: none; height: 32px; line-height: 32px; background: #eaeaee url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADZUlEQVR4AV2RyY8UBQNHXy1dVV3V1ftU9/RsIoNhBjLQyAhCEOKGMca7yIGQ4EkS/wDP3oxBE+PBgyZ6gqBwwpjoQMSEjIyDzPeJoDILs/UyvTDVXdW12fFEfMnv+HuXJ/AfPjmfOZwyjTPWQP6omUoWI1EKG9Xq6vpGdcZx3S+A33gC4eN30wAosZiuaeqHB8t73tm1e6eomCkIQiLXJQwj7O0u//v/787c/MKFtu29D/gAwgdnEwwV0/GEoX/z4kvHT6atPK1qnbWV9f7pMVJMIZuzGBwaRTHiLD9a5NuLVy4nNOUtoCedejlPXNc+Ovn6yVNmOs3C7B3u3p4nMkq4UoZ4dpT6xjrFwgBhLEZ2agorm55YuD2X6Hned9KbR4390yde/Xxo95Tw4NYsG7VtCuMHGBgeZ6A0Rr44gtPr9c8ShgZh1yG/sy9dXjq0VW1eFZOZ7NnxfdOiXd8mCGSy+UHShTF2TJbxew6bK/d5Zt/zqOYYK8triI0qUb1GebosBmF0TswVisfkhIFdrxDXTZK6SuWvO4Sex4OFWdbv3WDlzwXS2QE6LRsCj16jiZXJoOvxF2QjaRaQAiTBJ5E0EEQZX9IIAp/J8lHC0GPo6Uke/rFAe6tCM60iKXEyhSyqplhy5DvQeYwQBShqDDWZxI2pCIJIdXONRuURjXqdyelj9NoV1lbvMTgyBkhEYSSIj7caG3RtEqaOocsoMQHX6wHQblRJxDyalWUkSUY1c7S2O315hN+xse1uXa5XazOdWqWsanGcZrPfPiBl7UKWZfYcOILvuaRyRbaqG9yfv0lGBlOXWVpcwu52b0lvHNLWIjhXGh4RXdeha9usLq/SarfpeT6KpnP7xjX+nptB6NYZ7yfMWhbf//ATna5zXjo+Fas4diuZy+WP9IsgCyFOq4bj+jQbdXynS29rnVKpxFN7DzK0Zz+/zs7xy9z8V0EQXJBOTEkkzfj15aWlvYWhHRPZiedIpwf+FSV0BVVRGJ3Yx+jhVzB3lLk7d5NrVy79XLRSbycSmiudfs0ijAicjn158eFDzQ3kZ1OpnJwr5UkOj5AaHEYzk2yuLTJz8TOuX730dSZlnPb9sNUfwqfvWTxJXBWmHE84k8pkjutGohSEkdhqNGu1yuas53lfAj/yBP8AQgh17g6RTS4AAAAASUVORK5CYII=) 3px 50% no-repeat; }',
	'a.%s span { padding: 0 3px 0 10px; background-size: 45px 20px; background-position: 0 0; position: absolute; top: 0; margin-left: 2px; left: 100%; height: 20px; font: 10px Arial, Helvetica, sans-serif; line-height: 20px; }',
	'a.%s span i { background-position: 100% 0; position: absolute; top: 0; right: -2px; height: 20px; width: 2px; }',
	'a.%s span, a.%s span i { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAUCAYAAAAZb7T/AAAA7UlEQVRIx9WXPU6CQRCG14aWC3gFLuE1uAQlN0BC5R2o9gBmx8073MFE1A8SYiSRRv0KfuJ+xNdKEyFQzzzJ9E8mszvzhnAGIPUAoYVSTR+qchNjbJ0Unkykqyrfm82aFiilsKqmBO6uT3RYroD0VdeftEQphYC8HwnnnDuA1KvVGy0CCA9G4vZSNb0uly+0yj/pnHMbkPvFYk7L/EnHGFuAYDZ7pnUAYSB5oSrjqprSA4AwADJ4fHqgF36l2TSNP+n93p/0yN14uHyILr88t8vF7Rp3ezC5PU0PQ8ButzUVAlTTMJyPW9K3GLd+AMVtpnszgV7QAAAAAElFTkSuQmCC);'
	],
	'endpoint': 'http://coinwidget.com/widget/lookup.php?data=',
	'var': 'COINWIDGETCOM_DATA',
	'currency': 'bitcoin',
	'obj': 'reply',
	'count': 'count',
	'amount': 'amount',
	'donate': 'donate',
	'baseClassName': 'donateButton',
	'address': '1E8KtmGHLZC2TmdcAyMnDCWpx398Na6ztn'
	}));
	</script>
	</body>
	</html>