json-xml.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1"/>
<title>JS Experiment</title>
<script src="http://pics.mytrapster.com/yvonne-list.php?type=json" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
var Yvonne = (function () {
  function Yvonne(list, display) {
    this.list = list;
    this.display = display;
  }
  Yvonne.prototype.clearNode = function(node) {
    while(node.hasChildNodes()) {
      node.removeChild(node.firstChild);
    }
  };
  Yvonne.prototype.makeHtml = function(thumb, full) {
    var divA = document.createElement("div");
    var divB = document.createElement("div");
    var link = document.createElement("a");
    var image = document.createElement("img");
    divA.setAttribute("style", "text-align:center;width:100%;");
    divB.setAttribute("style", "margin:auto;");
    link.setAttribute("href", full);
    link.setAttribute("target", "_blank");
    image.setAttribute("src", thumb);
    image.setAttribute("style", "border:none;")
    link.appendChild(image);
    divB.appendChild(link);
    divA.appendChild(divB);
    return divA;
  };
  Yvonne.prototype.randomPic = function() {
    var rnd = Math.floor((Math.random()*this.list.length)+1);
    return this.list[rnd];
  };
  Yvonne.prototype.start = function() {
    url = this.randomPic();
    el = document.getElementById(this.display);
    this.clearNode(el);
    el.appendChild(this.makeHtml(url.thumb, url.full));
  };
  return Yvonne;
})();
// ]]>
</script>
</head>
<body>
<div id="content">One moment.</div>
<script type="text/javascript">
var y = new Yvonne(Trapster.pics, "content");
setInterval(function () { y.start(); }, 15000);
</script>
</body>
</html>