scroll clock code

var h1, h2, m1, m2, s1, s2;
window.addEvent('domready', function() {
 if ($('custom-scrollbar-css')) $('custom-scrollbar-css').dispose();
 //
 h1=new Digit();
 h2=new Digit();
 m1=new Digit();
 m1.pushRight();
 m2=new Digit();
 s1=new Digit();
 s1.pushRight();
 s2=new Digit();
 $('main').adopt(h1.getElement(), h2.getElement(), m1.getElement(), m2.getElement(), s1.getElement(), s2.getElement());
 showTime();
 setInterval('showTime()', 1000);
});
function showTime() {
 var now=new Date();
 h1.show(now.getHours()/10);
 h2.show(now.getHours());
 m1.show(now.getMinutes()/10);
 m2.show(now.getMinutes());
 s1.show(now.getSeconds()/10);
 s2.show(now.getSeconds());
}
var barDim=120;
var sbDim=18;
var Bar = new Class({
 initialize: function(dir) {
  this.dir = dir;
  var dim=dir=='v' ? barDim : (Browser.Engine.gecko ? barDim : barDim+sbDim);
  this.holder=new Element('div', {styles:{width:dir=='h' ? dim : sbDim, height:dir=='h' ? sbDim : dim, overflow:'auto', float:'left'}});
  this.content=new Element('div', {html:' '});
  this.activate(true, true);
  this.holder.adopt(this.content);
 },
 activate:function(b, now) {
  var side=this.dir=='h' ? 'width' : 'height';
  if (now) this.content.setStyle(side, b ? barDim+sbDim : barDim/2);
  else this.content.tween(side, b ? barDim*2 : barDim/2);
 },
 getElement:function() {
  return this.holder;
 }
});
var HBar = new Class({
 Extends: Bar,
 initialize: function(){
  this.parent('h');
  this.holder.setStyles({'margin-left': sbDim, 'margin-right': sbDim});
 }
});
var VBar = new Class({
 Extends: Bar,
 initialize: function(){
  this.parent('v'); 
 },
 pushRight:function() {
  this.holder.setStyle('margin-left', barDim);
 }
});
var Digit=new Class({
 initialize: function() {
  var holder=this.holder=new Element('div', {styles:{width: barDim+2*sbDim, float:'left', 'margin-right':20}});
  this.bars=[new HBar(), new VBar(), new VBar(), new HBar(), new VBar(), new VBar(), new HBar()];
  this.bars[2].pushRight();
  this.bars[5].pushRight();
  this.bars.each(function(it) {holder.adopt(it.getElement());});
  this.lights=[
   [1, 1, 1, 0, 1, 1, 1],//0
   [0, 0, 1, 0, 0, 1, 0],//1
   [1, 0, 1, 1, 1, 0, 1],//2
   [1, 0, 1, 1, 0, 1, 1],//3
   [0, 1, 1, 1, 0, 1, 0],//4
   [1, 1, 0, 1, 0, 1, 1],//5
   [1, 1, 0, 1, 1, 1, 1],//6
   [1, 0, 1, 0, 0, 1, 0],//7
   [1, 1, 1, 1, 1, 1, 1],//8
   [1, 1, 1, 1, 0, 1, 1] //9
  ];
 },
 show: function(n) {
  n=Math.floor(n);
  n=n%10;
  var light=this.lights[n];
  this.bars.each(function(it, index) {
   it.activate(light[index]==1);
  });
 },
 pushRight:function() {
  this.holder.setStyle('margin-left', '50px');
 },
 getElement:function() {
  return this.holder;
 }
});