imjoshdean · December 23, 2015 11:39
diff --git a/gistfile1.txt b/gistfile1.txt
 https://gist.github.com/imjoshdean/6624051

 <html>
 <head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript" src="http://canjs.com/release/latest/can.jquery.js"></script>
 </head>
 <body>
 <ul class='tabs'>
 	<li><a href='#cdt'>CDT</a></li>
 	<li><a href='#pdt'>PDT</a></li>
 </ul>
 <div id="cdt"></div>
 <div id="pdt"></div>
 <script type="text/ejs" id="timeEJS">
 	<h1><%= format(timer, difference) %></h1>
 </script>
 <script>

 var timer = new can.Observe({
 	time: Date.now()
 });

 (function() {
 	timer.attr('time', Date.now());

 	setTimeout(arguments.callee, 1000);
 })();
 can.EJS.Helpers.prototype.format = function(timer, difference) {
 	var date = new Date(timer.attr('time'));
 	date.setHours(date.getHours() + difference);
 	return date.toString();
 };

 var Clock = can.Control.extend({ 
 	defaults: {
 		difference: 0,
 		template: 'timeEJS'	
 	}
 }, {
 	init: function(el, ev) {
 		this.element.html(can.view(this.options.template, {
 			timer: this.options.timer,
 			difference: this.options.difference
 		}))
 	}
 })



 new Clock('#cdt', { timer: timer });
 new Clock('#pdt', { timer: timer, difference: -2 });

 var Tabs = can.Control.extend({
 	},{ 
 	init: function(el, options) {
 		this.element.find('a').each($.proxy(function(i, el) {
 			var href = $(el).attr('href'),
 				$div = $(href);

 			if(i == 0) {
 				this.active = $div;
 			}
 			else {
 				$div.hide();	
 			}
 		}, this));
 	},
 	'a click': function(el, ev) {
 		var href = $(el).attr('href'),
 			$div = $(href);

 		this.active.hide();
 		this.active = $div.show();

 	}
 })

 new Tabs('.tabs');


 </script>
 </body>
 </html>
	https://gist.github.com/imjoshdean/6624051

	<html>
	<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://canjs.com/release/latest/can.jquery.js"></script>
	</head>
	<body>
	<ul class='tabs'>
	<li><a href='#cdt'>CDT</a></li>
	<li><a href='#pdt'>PDT</a></li>
	</ul>
	<div id="cdt"></div>
	<div id="pdt"></div>
	<script type="text/ejs" id="timeEJS">
	<h1><%= format(timer, difference) %></h1>
	</script>
	<script>

	var timer = new can.Observe({
	time: Date.now()
	});

	(function() {
	timer.attr('time', Date.now());

	setTimeout(arguments.callee, 1000);
	})();
	can.EJS.Helpers.prototype.format = function(timer, difference) {
	var date = new Date(timer.attr('time'));
	date.setHours(date.getHours() + difference);
	return date.toString();
	};

	var Clock = can.Control.extend({
	defaults: {
	difference: 0,
	template: 'timeEJS'
	}
	}, {
	init: function(el, ev) {
	this.element.html(can.view(this.options.template, {
	timer: this.options.timer,
	difference: this.options.difference
	}))
	}
	})



	new Clock('#cdt', { timer: timer });
	new Clock('#pdt', { timer: timer, difference: -2 });

	var Tabs = can.Control.extend({
	},{
	init: function(el, options) {
	this.element.find('a').each($.proxy(function(i, el) {
	var href = $(el).attr('href'),
	$div = $(href);

	if(i == 0) {
	this.active = $div;
	}
	else {
	$div.hide();
	}
	}, this));
	},
	'a click': function(el, ev) {
	var href = $(el).attr('href'),
	$div = $(href);

	this.active.hide();
	this.active = $div.show();

	}
	})

	new Tabs('.tabs');


	</script>
	</body>
	</html>