// Implements double-buffering, by using two identical canvas DIVs at the same
// location, drawing to the invisible background DIV whenever the animation is
// updated, and then switching the z-indices of these DIVs, so that the
// updated background DIV becomes visible and the outdated foreground DIV is
// hidden.

// Array of DIV references (for faster access)
var g_aDiv = [document.getElementById("cnv1"), document.getElementById("cnv2")];

// Array of jsGraphics objects related to each of these DIVs
var g_aJg = [new jsGraphics(g_aDiv[0]), new jsGraphics(g_aDiv[1])];

// Index of DIV to be redrawn and to become the foreground DIV
var g_i = 0;

g_aJg[0].setStroke(2);
g_aJg[1].setStroke(2);

function AnimArc(time) {

      var size = 180;

      // Analog clock
      var cenx = Math.round(size/2.)-1;
      var ceny = Math.round(size/2.)-1;
      var rad = Math.min(Math.round(size/2.),Math.round(size/2.))-3;

      var jg;
    
      // Reference to current jsGraphics object (for faster access)
      jg = g_aJg[g_i];

      // Repaint the background DIV
      //hAng = ((iAng-(iAng%3600))/3600)*6*5 +90;
      //mAng = ((iAng%3600)/60)*6 +90;
      //sAng = ((iAng%3600)%60)*6 +90;
      //hAng %=360;
      //mAng %=360;
      //sAng %=360;
      s = (time%3600)%60;//datetime.getSeconds();
      m = (time%3600-((time%3600)%60))/60;//datetime.getMinutes();
      h = (time-(time%3600))/3600;//datetime.getHours() % 12;

      jg.setColor("#000000"); //jg.setColor("#cfc9de"); //jg.setColor("#808080"); //jg.setColor("#0000FF");

      // Draw the second pointer.
      sr = (s/60)*2*Math.PI-.5*Math.PI; 
      sx = Math.round((rad*0.7)*Math.cos(sr)+cenx);
      sy = Math.round((rad*0.7)*Math.sin(sr)+ceny);
      csx = Math.round(3*Math.cos(sr)+cenx);
      csy = Math.round(3*Math.sin(sr)+ceny);
      jg.drawLine(csx,csy, sx, sy, shcolor);
      //gc.circle(sx, sy, 2, shcolor);

      // Draw the minute hand.
      mr=(m/60+s/3600)*2*Math.PI-.5*Math.PI; 
      cmx = Math.round(3*Math.cos(mr)+cenx);
      cmy = Math.round(3*Math.sin(mr)+ceny);
      mx = Math.round((rad*0.7)*Math.cos(mr)+cenx);
      my = Math.round((rad*0.7)*Math.sin(mr)+ceny);
      jg.drawLine(cmx, cmy - 1, mx, my, mhcolor);
      jg.drawLine(cmx - 1, cmy, mx, my, mhcolor);

      // Draw the hour hand.
      hr=(h/12+m/720)*2*Math.PI-.5*Math.PI; 
      chx = Math.round(3*Math.cos(hr)+cenx);
      chy = Math.round(3*Math.sin(hr)+ceny);
      hx = Math.round((rad*0.5)*Math.cos(hr)+cenx);
      hy = Math.round((rad*0.5)*Math.sin(hr)+ceny);
      jg.drawLine(chx, chy - 1, hx, hy, hhcolor);
      jg.drawLine(chx - 1, chy, hx, hy, hhcolor);

      jg.paint();
    
      // Show background DIV, hide hitherto foreground DIV, by switching their
      // z-indices
      g_aDiv[g_i].style.zIndex = 1;
      // Switch index of active DIV
      g_i ^= 1;
      g_aDiv[g_i].style.zIndex = 0;
      // Clear outdated DIV (which is from now on in the background)
      g_aJg[g_i].clear();

      window.setTimeout("AnimArc(" + (time + 1) + ");", 1000);
}

function times (offsetMinutes) {
      var date=new Date();
      var month=date.getMonth();
      if (month>2 && month<=9) 
            offsetMinutes=offsetMinutes+120;
      else
            offsetMinutes=offsetMinutes+60;
      var time=(date.getTime()+((date.getTimezoneOffset()+offsetMinutes)*60*1000))/1000;
      return time;
}

AnimArc(times(120));