kyledinh/v4.html

## v4.html
<html lang="en">
<head>
    <meta charset="utf-8" />
	<title></title>
</head>
<body>

<h2><span id="countdown_clock"></span></h2>

<p>This is a countdown clock</p>

<script>
var Util = {};

Util.initAjax = function(uri, callback) {
   var ajax = new Util.ajaxRequest();
   ajax.onreadystatechange = function() {
      if (ajax.readyState == 4 && ajax.status == 200) {
         var jsondata = JSON.parse(ajax.responseText);
         if (callback) {
            callback(jsondata);
         }
      }
   }
   ajax.open("GET", uri, true);
   ajax.send(null);
};

Util.ajaxRequest = function() {
   var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
   if (window.ActiveXObject) { //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
      for (var i=0; i < activexmodes.length; i++) {
         try {
            return new ActiveXObject(activexmodes[i]);
         } catch(e) {
          //suppress error
         }
      }
   } else if (window.XMLHttpRequest) { // if Mozilla, Safari etc
      return new XMLHttpRequest();
   } else {
      return false;
   }
};

function Countdowner (id, timestamp) {
   this.target_date = timestamp || null; // new Date("Dec 25, 2021").getTime();
   this.id = id || "countdown_clock";
}

Countdowner.prototype.display = function (queue) {
   var dom_target = document.getElementById(this.id);

   if (queue === null || queue.length === 0) {
       dom_target.innerHTML = "Nothing in Queue";
       return null;
   }
   this.target_date = queue[0];

   var days, hours, minutes, seconds;

   // find the amount of "seconds" between now and target
   var current_date = new Date().getTime();
   var seconds_left = (this.target_date - current_date) / 1000;

   // do some time calculations
   days = parseInt(seconds_left / 86400);
   seconds_left = seconds_left % 86400;

   hours = parseInt(seconds_left / 3600);
   seconds_left = seconds_left % 3600;

   minutes = parseInt(seconds_left / 60);
   seconds = parseInt(seconds_left % 60);

   // format countdown string + set tag value
   dom_target.innerHTML = days + "d, " + hours + "h, "
   + minutes + "m, " + seconds + "s";
}


// TWO OBJECT to manage in Javascript
var queue = [new Date("Jan 1, 2015").getTime(),
	new Date("Oct 1, 2014").getTime(),
    new Date("Dec 13, 2014").getTime()];

var cd = new Countdowner("countdown_clock");


// Timers
setInterval(function () {
   cd.display(queue);
}, 1000);

setInterval(function () {
   Util.initAjax("someurl/somepath/some.json", function(payload) {
      queue = [];
      for (var i=0; i < payload.length; i++) {
         var obj = payload[i];
         queue.push(obj.timestamp);   // { name: "Bob", timestamp: 23456789, desc: "tweet 2" }
      }
   });
}, 60000); // every minute


</script>

</body>
</html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title></title>
	</head>
	<body>

	<h2><span id="countdown_clock"></span></h2>

	<p>This is a countdown clock</p>

	<script>
	var Util = {};

	Util.initAjax = function(uri, callback) {
	var ajax = new Util.ajaxRequest();
	ajax.onreadystatechange = function() {
	if (ajax.readyState == 4 && ajax.status == 200) {
	var jsondata = JSON.parse(ajax.responseText);
	if (callback) {
	callback(jsondata);
	}
	}
	}
	ajax.open("GET", uri, true);
	ajax.send(null);
	};

	Util.ajaxRequest = function() {
	var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"] //activeX versions to check for in IE
	if (window.ActiveXObject) { //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
	for (var i=0; i < activexmodes.length; i++) {
	try {
	return new ActiveXObject(activexmodes[i]);
	} catch(e) {
	//suppress error
	}
	}
	} else if (window.XMLHttpRequest) { // if Mozilla, Safari etc
	return new XMLHttpRequest();
	} else {
	return false;
	}
	};

	function Countdowner (id, timestamp) {
	this.target_date = timestamp \|\| null; // new Date("Dec 25, 2021").getTime();
	this.id = id \|\| "countdown_clock";
	}

	Countdowner.prototype.display = function (queue) {
	var dom_target = document.getElementById(this.id);

	if (queue === null \|\| queue.length === 0) {
	dom_target.innerHTML = "Nothing in Queue";
	return null;
	}
	this.target_date = queue[0];

	var days, hours, minutes, seconds;

	// find the amount of "seconds" between now and target
	var current_date = new Date().getTime();
	var seconds_left = (this.target_date - current_date) / 1000;

	// do some time calculations
	days = parseInt(seconds_left / 86400);
	seconds_left = seconds_left % 86400;

	hours = parseInt(seconds_left / 3600);
	seconds_left = seconds_left % 3600;

	minutes = parseInt(seconds_left / 60);
	seconds = parseInt(seconds_left % 60);

	// format countdown string + set tag value
	dom_target.innerHTML = days + "d, " + hours + "h, "
	+ minutes + "m, " + seconds + "s";
	}


	// TWO OBJECT to manage in Javascript
	var queue = [new Date("Jan 1, 2015").getTime(),
	new Date("Oct 1, 2014").getTime(),
	new Date("Dec 13, 2014").getTime()];

	var cd = new Countdowner("countdown_clock");


	// Timers
	setInterval(function () {
	cd.display(queue);
	}, 1000);

	setInterval(function () {
	Util.initAjax("someurl/somepath/some.json", function(payload) {
	queue = [];
	for (var i=0; i < payload.length; i++) {
	var obj = payload[i];
	queue.push(obj.timestamp); // { name: "Bob", timestamp: 23456789, desc: "tweet 2" }
	}
	});
	}, 60000); // every minute


	</script>

	</body>
	</html>