project0/reaction.html

## reaction.html
<html>
<head>
<title>DevOps Reaction</title>
<style type="text/css">
        body { background-color:#000; color:#fff }
        h1 { font-size:35pt }
</style>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>

var refresh_interval = 60000;
var blog_posts = [];
var api_url = getParameterByName("api")  || "//api.tumblr.com" ;
var api_key = getParameterByName("key")  || "fuiKNFp9vQFvjLNvx4sUwti4Yb5yGutBN4Xh10LXZhhRKjWlV4" ;
var blog = getParameterByName("blog")  || "devopsreactions.tumblr.com"

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

function get_posts(data, cb) {
  var link = api_url + "/v2/blog/" + blog + "/posts/text?";
  var data = data || {}
  data.api_key = api_key
  $.ajax({
    type: "GET",
    url: link,
    dataType: "jsonp",
    data: data
  }).done(cb);
}
function get_random_pic() {
  if (blog_posts.length != 0) {
    var re = /img.*?src=["'](.*?)["']/i;
    var index = Math.floor(Math.random() * blog_posts.length);
    var title = blog_posts[index].summary;
    var img = blog_posts[index].body.match(re);
    if (img == null || img[1] == null) {
      console.error(blog_posts[index].body);
      setTimeout(get_random_pic, 100);
    } else {
      console.debug(img[1]);
      $('#tumblr_img').on('load', function() {
          console.debug("image loaded correctly");
          $('#tumblr_img').off('load');
          $('#tumblr_img').off('error');
          setTimeout(get_random_pic, refresh_interval);
          $('#tumblr_title').html(title);
        })
        .on('error', function() {
          console.debug("error loading image");
          $('#tumblr_img').off('load');
          $('#tumblr_img').off('error');
          setTimeout(get_random_pic, 100);
        })
        .attr('src', img[1]);
    }
  } else {
    setTimeout(get_random_pic, 100);
  }
}

function fetch_page(page, offset) {
  get_posts({
    limit: offset,
    offset: (page * offset)
  }, (function(data) {
    blog_posts.push.apply(blog_posts, data.response.posts);
  }))
}

$(document).ready(function() {
  get_posts({
    limit: 1
  }, (function(data) {
    var count = data.response.total_posts;
    var offset = 20;
    var pages = Math.ceil(count / offset);
    for (i = 0; i <= pages; i++) {
      // fetch delayed other pages to avoid api request limit (zero division returns 0 ;-)
      setTimeout(fetch_page, i * 3000, i, offset);
    }
  }));
  get_random_pic();
});
</script>
</head>
<body>
<div id="tumblr">
  <h1 id=tumblr_title>Summary</h1>
  <img id="tumblr_img" src="" width="80%" border="0" style="border:0px" />
</div>
</body>
</html>
	<html>
	<head>
	<title>DevOps Reaction</title>
	<style type="text/css">
	body { background-color:#000; color:#fff }
	h1 { font-size:35pt }
	</style>
	<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
	<script>

	var refresh_interval = 60000;
	var blog_posts = [];
	var api_url = getParameterByName("api") \|\| "//api.tumblr.com" ;
	var api_key = getParameterByName("key") \|\| "fuiKNFp9vQFvjLNvx4sUwti4Yb5yGutBN4Xh10LXZhhRKjWlV4" ;
	var blog = getParameterByName("blog") \|\| "devopsreactions.tumblr.com"

	function getParameterByName(name, url) {
	if (!url) url = window.location.href;
	name = name.replace(/[\[\]]/g, "\\$&");
	var regex = new RegExp("[?&]" + name + "(=([^&#]*)\|&\|#\|$)"),
	results = regex.exec(url);
	if (!results) return null;
	if (!results[2]) return '';
	return decodeURIComponent(results[2].replace(/\+/g, " "));
	}

	function get_posts(data, cb) {
	var link = api_url + "/v2/blog/" + blog + "/posts/text?";
	var data = data \|\| {}
	data.api_key = api_key
	$.ajax({
	type: "GET",
	url: link,
	dataType: "jsonp",
	data: data
	}).done(cb);
	}
	function get_random_pic() {
	if (blog_posts.length != 0) {
	var re = /img.?src=["'](.?)["']/i;
	var index = Math.floor(Math.random() * blog_posts.length);
	var title = blog_posts[index].summary;
	var img = blog_posts[index].body.match(re);
	if (img == null \|\| img[1] == null) {
	console.error(blog_posts[index].body);
	setTimeout(get_random_pic, 100);
	} else {
	console.debug(img[1]);
	$('#tumblr_img').on('load', function() {
	console.debug("image loaded correctly");
	$('#tumblr_img').off('load');
	$('#tumblr_img').off('error');
	setTimeout(get_random_pic, refresh_interval);
	$('#tumblr_title').html(title);
	})
	.on('error', function() {
	console.debug("error loading image");
	$('#tumblr_img').off('load');
	$('#tumblr_img').off('error');
	setTimeout(get_random_pic, 100);
	})
	.attr('src', img[1]);
	}
	} else {
	setTimeout(get_random_pic, 100);
	}
	}

	function fetch_page(page, offset) {
	get_posts({
	limit: offset,
	offset: (page * offset)
	}, (function(data) {
	blog_posts.push.apply(blog_posts, data.response.posts);
	}))
	}

	$(document).ready(function() {
	get_posts({
	limit: 1
	}, (function(data) {
	var count = data.response.total_posts;
	var offset = 20;
	var pages = Math.ceil(count / offset);
	for (i = 0; i <= pages; i++) {
	// fetch delayed other pages to avoid api request limit (zero division returns 0 ;-)
	setTimeout(fetch_page, i * 3000, i, offset);
	}
	}));
	get_random_pic();
	});
	</script>
	</head>
	<body>
	<div id="tumblr">
	<h1 id=tumblr_title>Summary</h1>
	<img id="tumblr_img" src="" width="80%" border="0" style="border:0px" />
	</div>
	</body>
	</html>