// ожидаем загрузку
window.onload = function(){

clock('canvas',0);
  setInterval(function(){clock('canvas',1);}, 200);

clock('canvas1',1);
  setInterval(function(){clock('canvas1',1);}, 200);

clock('canvas2',2);
  setInterval(function(){clock('canvas2',-1);}, 200);

clock('canvas4',4);
  setInterval(function(){clock('canvas4',2);}, 200);

clock('canvas5',5);
  setInterval(function(){clock('canvas5',-1);}, 200);
  clock('canvas3',0);
  setInterval(function(){clock('canvas3',0);}, 200);

clock('canvas6',6);
  setInterval(function(){clock('canvas6',2);}, 200);
setInterval(function(){cur_sec++;},1000);

clock('canvas7',7);
  setInterval(function(){clock('canvas7',3);}, 200);
setInterval(function(){cur_sec++;},1000);

}
//var cur_sec = 0;
//var now = new Date();
//var sec = now.getSeconds();
//var min = now.getMinutes();
//var hr = now.getHours();
//alert(hr);
var cur_sec = 0;
//var now = new Date();
//cur_sec = now.getMilliseconds()/1000;
//cur_sec = now.getSeconds()+now.getMinutes()*60+now.getHours()*60*60;

var i = 1;
//
function clock(id,gmt) {
  // получаем текущие дату и время
  //var now = new Date();
  //var sec = now.getSeconds();
  //var min = now.getMinutes();
  //var hr = now.getHours();

  var sec = nowsec+cur_sec%60;
  var min = nowmin+Math.floor(cur_sec/60)%60;
  var hr =  nowhour+gmt+Math.floor(cur_sec/3600)%60;  
  

  // получаем контекст canvas
  var ctx = document
  .getElementById(id)
  .getContext("2d");

  // сохраняем состояние
  ctx.save();
  // инициализируем холст
  ctx.clearRect(0,0,80,80);
  // рисуя в точке 0,0 фактически
  // рисуем в точке 40,40
  ctx.translate(40,40);
  // при рисовании линии в 100px
  // фактически рисуем линию в 40px
  ctx.scale(0.4,0.4);
  // начинаем вращать с 12:00
  ctx.rotate(-Math.PI/2);
  // инициализируем свойства рисунка
  // контуры рисуем черным
  ctx.strokeStyle = "black";
  // заливка тоже черная
  ctx.fillStyle = "black";
  // ширина линии 8px
  ctx.lineWidth = 2;
  // будем рисовать по кругу
  ctx.lineCap = "round";

  // начинаем рисовать часовые метки
  // сохраняем предыдущее состояние
  ctx.save();
  ctx.beginPath();

  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // ставим ширину линии 5px
  ctx.lineWidth = 6;
  ctx.beginPath();

  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // начинаем рисовать часовую стрелку
  // вращаем холст на текущую позицию
  ctx.rotate((Math.PI/6)*hr +
             (Math.PI/360)*min +
             (Math.PI/21600)*sec);
  // устанавливаем ширину часовую стрелку
  ctx.lineWidth = 2;
  ctx.beginPath();
  // сдвигаем курсор несколько назад
  // стобы было похоже на стрелку
  ctx.moveTo(3,0);
  // рисуем линию почти до часовых меток
  ctx.lineTo(70,0);
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // начинаем рисовать минутную стрелку
  // вращаем холст на текущую позицию
  ctx.rotate((Math.PI/30)*min +
             (Math.PI/1800)*sec);
  // ширина линии 2px
  ctx.lineWidth = 1;
  ctx.beginPath();
  // двигаем курсор
  ctx.moveTo(3,0);
  // рисуем линию
  ctx.lineTo(80,0);
  ctx.stroke();
  ctx.restore();

  // сохраняем состояние
  ctx.save();
  // начинаем рисовать секундную стрелку
  // вращаем холст на текущую позицию
  ctx.rotate(sec * Math.PI/30);
  // контур и заливка красного цвета
  ctx.strokeStyle = "#D40000";
  ctx.fillStyle = "#D40000";
  // ширина линии секундной
  ctx.lineWidth = 2;
  ctx.beginPath();
  // двигаем курсор
  ctx.moveTo(3,0);
  // рисуем линию
  ctx.lineTo(83,0);
  ctx.stroke();
  ctx.restore();
  // сохраняем состояние


  ctx.save();
  // сохраняем состояние
  ctx.restore();
  // рисуем внешнюю окружность
  // шириной 14px
  ctx.lineWidth = 1;
  // синим цветом
  ctx.strokeStyle = "#000";
  ctx.beginPath();
  // рисуем окружность, отступающую
 // от центра на 4px
  ctx.arc(0,0,4,0,Math.PI*2,true);  
  ctx.stroke();

  // начинаем рисовать часовые метки
  // сохраняем предыдущее состояние
  ctx.save();
  ctx.beginPath();
  ctx.lineWidth = 1;
  // для каждого часа
  for(var i = 0; i < 12; i++) {
    // поворачиваем на 1/12
    ctx.rotate(Math.PI/6);
    // перемещаем курсор
    ctx.moveTo(80,0);
    // рисуем черточку 20px
    ctx.lineTo(87,0);
  }
  ctx.stroke();
  ctx.restore();

  ctx.save();
  ctx.restore();
  // сохраняем состояние
  //ctx.restore();
  // рисуем внешнюю окружность
  // шириной 14px
  ctx.lineWidth = 1;
  // синим цветом
  ctx.strokeStyle = "#000";
  ctx.beginPath();
  // рисуем окружность, отступающую
 // от центра на 142px
  ctx.arc(0,0,95,0,Math.PI*2,true);
  ctx.stroke();

  ctx.restore(); 
}