<script type="text/javascript">
// <![CDATA[
var colour="#FF66B3"; // warna no
var clock_size=8; // Saiz jam..paling kecil no 4 paling besar..entah..haha

/****************************
*    Digital Clock Effect   *
*(c)2005-7 mf2fm web-design *
*  http://www.mf2fm.com/rv  *
* Tutorial by polskahackrew *
****************************/
var clok;
var cpos=0;
var newx=xmo=380;
var newy=ymo=280;
window.onload=function() { if (document.getElementById) {
  clok=document.createElement("div");
  clok.style.position="absolute";
  clok.appendChild(createDigit("dig0"));
  clok.appendChild(createDigit("dig1"));
  clok.appendChild(createColon());
  clok.appendChild(createDigit("dig2"));
  clok.appendChild(createDigit("dig3"));
  clok.appendChild(createColon("ms"));
  clok.appendChild(createDigit("dig4"));
  clok.appendChild(createDigit("dig5"));
  document.body.appendChild(clok);
  tick();
}}

var digit=new Array(247, 146, 221, 219, 186, 235, 239, 210, 255, 251);

function tick() {
  var now=new Date();
  var t=Math.floor(now.getTime()/500)%2;
  var i, j, k;
  var won=oo(now.getHours())+oo(now.getMinutes())+oo(now.getSeconds());
  for (i=0; i<6; i++) for (j=0; j<7; j++) {
    k=digit[won.substring(i, i+1)].toString(2).substring(j+1, j+2);
    document.getElementById("dig"+i+j).style.backgroundColor=(k==1)?colour:"transparent";
  }
  document.getElementById("mstop").style.backgroundColor=(t)?"transparent":colour;
  document.getElementById("msbot").style.backgroundColor=(t)?"transparent":colour;
  xmo+=Math.floor((newx-xmo)/4);
  clok.style.left=Math.round(xmo-(clock_size+2)*4)+"px";
  ymo+=Math.floor((newy-ymo)/4);
  clok.style.top=Math.round(ymo-clock_size*2.5)+"px";
  setTimeout("tick()", 40);
}

document.onmousemove=mouse;

function mouse(e) {
  newy=(e)?e.pageY:event.y+scro();
  newx=(e)?e.pageX:event.x;
}

function scro() {
  var scro=0;
  if (document.body.scrollTop) scro=document.body.scrollTop;
  else if (document.documentElement && document.documentElement.scrollTop) scro=document.documentElement.scrollTop;
  return (scro);
}

function oo(o) { return(((o<10)?"0"+o:o).toString()); }

function createDigit(id) {
  var odiv=createDiv(0, cpos, clock_size+clock_size+2, clock_size+2, false);
  cpos+=clock_size+4;
  odiv.appendChild(createDiv(0, 1, 2, clock_size, id+"0"));
  odiv.appendChild(createDiv(1, 0, clock_size, 2, id+"1"));
  odiv.appendChild(createDiv(1, clock_size, clock_size, 2, id+"2"));
  odiv.appendChild(createDiv(clock_size, 1, 2, clock_size, id+"3"));
  odiv.appendChild(createDiv(clock_size+1, 0, clock_size, 2, id+"4"));
  odiv.appendChild(createDiv(clock_size+1, clock_size, clock_size, 2, id+"5"));
  odiv.appendChild(createDiv(clock_size+clock_size, 1, 2, clock_size, id+"6"));
  return (odiv);
}

function createColon(id) {
  var odiv=createDiv(0, cpos, clock_size+clock_size+2, 2, false);
  cpos+=4;
  var dot1=createDiv(4, 0, 3, 2, (id)?id+"top":false);
  dot1.style.backgroundColor=colour;
  odiv.appendChild(dot1);
  var dot2=createDiv(clock_size+clock_size-5, 0, 3, 2, (id)?id+"bot":false);
  dot2.style.backgroundColor=colour;
  odiv.appendChild(dot2);
  return (odiv);
}

function createDiv(top, left, height, width, id) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.top=top+"px";
  div.style.left=left+"px";
  div.style.height=height+"px";
  div.style.width=width+"px";
  div.style.overflow="hidden";
  if (id) div.setAttribute("id", id);
  return (div);
}
// ]]>
</script>

<script type="text/javascript">
// <![CDATA[
var second_hand_colour="#ff0000"; // warna jarum saat
var minute_hand_colour="#0f0"; // warna jarum minit
var hour_hand_colour="#ff0"; // warna jarum jam
var facia_colour="#fff"; // warna no jam
var face_colour="#FFFFCC"; //warna background jam
var xoffset=65; // jarak horizotal mouse dan jam
var yoffset=65; // jarak vertikal mouse dan jam
var size=122; // saiz jam

/****************************
*    Analogue Clock Effect  *
* (c)2006 mf2fm web-design  *
*  http://www.mf2fm.com/rv  *
* Tutorial by polskahackrew *
****************************/
var facia=String.fromCharCode(9660)+" 1 2 "+String.fromCharCode(9668)+" 4 5 "+String.fromCharCode(9650)+" 7 8 "+String.fromCharCode(9658)+" 10 11"; // characters to use for face, starting at '12' position
var clok;
var newx=xmo=400;
var newy=ymo=300;
window.onload=function() { if (document.getElementById) {
  var i, j, k;
  clok=document.createElement("div");
  clok.style.position="absolute";
  if (face_colour!="transparent") for (i=0; i<size; i++) {
      j=createDiv(false, face_colour);
      if (document.all) j.style.filter="Alpha(Opacity=50)";
      else j.style.opacity=0.5;
      k=size*Math.sqrt(i/size-Math.pow(i/size, 2));
      j.style.left=size/2-k+"px";
      j.style.top=i+"px";
      j.style.height="1px";
      j.style.width=k*2+"px";
      clok.appendChild(j);
  }
  for (i=1; i<size/4; i++) {
      j=createDiv("sec"+i, second_hand_colour);
      j.style.height="2px";
      j.style.width="2px";
      clok.appendChild(j);
  }
  for (i=1; i<size/4; i++) {
      j=createDiv("min"+i, minute_hand_colour);
      j.style.height="3px";
      j.style.width="3px";
      clok.appendChild(j);
  }
  for (i=0; i<size/6; i++) {
      j=createDiv("hour"+i, hour_hand_colour);
      j.style.height="4px";
      j.style.width="4px";
      if (!i) j.style.top=j.style.left=size/2-2+"px";
      clok.appendChild(j);
  }
  facia=facia.split(" ");
  for (i=0; i<12; i++) {
      j=createDiv(false, "transparent");
      j.style.color=facia_colour;
      j.style.font="bold 10pt monospace";
      j.style.overflow="visible";
      j.appendChild(document.createTextNode(facia[i]));
      j.style.top=size/2-7-size/2*Math.cos(i*Math.PI/6)+"px";
      j.style.left=size/2-5+size/2*Math.sin(i*Math.PI/6)+"px";
      clok.appendChild(j);
  }
  document.body.appendChild(clok);
  tick();
  tock();
}}


function tick() {
  var i, j;
  var now=new Date();
  var sec=(now.getSeconds()+(now.getMilliseconds()%1000)/1000)*Math.PI/30;
  for (i=1; i<size/4; i++) {
      j=document.getElementById("sec"+i).style;
      j.left=size/2+2*i*Math.sin(sec)-1+"px";
      j.top=size/2-2*i*Math.cos(sec)-1+"px";
  }
  xmo+=Math.floor((newx-xmo)/4);
  clok.style.left=xmo+"px";
  ymo+=Math.floor((newy-ymo)/4);
  clok.style.top=ymo+"px";
  setTimeout("tick()", 40);
}

function tock() {
  var i, j;
  var now=new Date();
  var min=(now.getMinutes()+now.getSeconds()/60)*Math.PI/30;
  var hrs=(now.getHours()+now.getMinutes()/60)*Math.PI/6
  for (i=1; i<size/4; i++) {
      j=document.getElementById("min"+i).style;
      j.left=size/2+2*i*Math.sin(min)-1.5+"px";
      j.top=size/2-2*i*Math.cos(min)-1.5+"px";
  }
  for (i=1; i<size/6; i++) {
      j=document.getElementById("hour"+i).style;
      j.left=size/2+2*i*Math.sin(hrs)-2+"px";
      j.top=size/2-2*i*Math.cos(hrs)-2+"px";
  }
  setTimeout("tock()", 999);
}
document.onmousemove=mouse;

function mouse(e) {
  newy=yoffset-size/2+((e)?e.pageY:event.y+scro());
  newx=xoffset-size/2+((e)?e.pageX:event.x);
}

function scro() {
  var scro=0;
  if (document.body.scrollTop) scro=document.body.scrollTop;
  else if (document.documentElement && document.documentElement.scrollTop) scro=document.documentElement.scrollTop;
  return (scro);
}

function createDiv(id, bg) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.overflow="hidden";
  div.style.backgroundColor=bg;
  if (id) div.setAttribute("id", id);
  return (div);
}
// ]]>
</script>