// Based on code by John Resig
// zmensene
// bez znacek minut
// bez rucicky sekund

function hodiny() {
  // Získáme aktuální datum a čas.
  var now = new Date();
  var sec = now.getSeconds();
  var min = now.getMinutes();
  var hr  = now.getHours();
  hr = hr >= 12 ? hr - 12 : hr;

  // connect to DOM
  var canvas = document.getElementById("misto_pro_hodiny");

  if (!canvas.getContext) {
    // alert("Nepodporuji canvas");
    return;
  }

  // Získáme vykreslovací kontext elementu <canvas>
  var ctx = canvas.getContext("2d");

  ctx.save();
    // Inicializujeme vykreslovací plátno.
    ctx.clearRect(0,0,50,50);

    //
    ctx.translate(25,25);

    //
    ctx.scale(0.15,0.15);

    // Natočíme kurzor na 12:00 (o 90° doleva).
    ctx.rotate(-Math.PI/2);

    // Inicializujeme vlastnosti kreslení.
    ctx.strokeStyle = "#CACACA";
    ctx.fillStyle = "#CACACA";
    ctx.lineWidth = 15;
    ctx.lineCap = "round";

    { // Čárky hodin:
      ctx.save();
        // Pro každou hodinu...
        for ( var i = 0; i < 12; i++ ) {
          // pootočíme plátnem o dvanáctinu kruhu.
          // (Vzpomeňte si: kruh je 2× pí)
          ctx.rotate(Math.PI/6); // 30°

          ctx.beginPath();  // Opera requires this

          // Posuneme kurzor k okraji plátna,
          ctx.moveTo(100,0);

          // a vykreslíme krátkou (20px) čárku.
          ctx.lineTo(120,0);
          ctx.stroke();
        }
      ctx.restore();
    }

    // Vykreslení hodinové ručičky:
    ctx.save();
      // Pootočíme plátno do správné pozice.
      ctx.rotate( (Math.PI/6) * hr + (Math.PI/360) * min + (Math.PI/21600) * sec )

      // Tato čára bude tlustá.
      ctx.lineWidth = 14;

      ctx.beginPath();
        // Začátek ručičky u středu bude ještě kousek za středem,
        // díky čemuž bude více vypadat jako ručička hodin.
        ctx.moveTo(-20,0);

        // A nakreslíme ji dlouhou až skoro k čárkám hodin.
        ctx.lineTo(80,0);
      ctx.stroke();
    ctx.restore();

    // Vykreslení minutové ručičky:
    ctx.save();
      // Pootočíme plátno do správné pozice podle minut.
      ctx.rotate( (Math.PI/30) * min + (Math.PI/1800) * sec )

      // Tato čára bude o něco tenčí než ručička hodinová.
      ctx.lineWidth = 10;

      ctx.beginPath();
        // Ale je delší, takže její začátek dáme ještě víc za střed,
        ctx.moveTo(-28,0);

        // a nakreslíme ji delší.
        ctx.lineTo(112,0);
      ctx.stroke();
    ctx.restore();

    if (0) { // Vykreslení ručičky sekund:
      ctx.save();
        // Pootočíme plátno do správné pozice podle sekund.
        ctx.rotate(sec * Math.PI/30);

        // Tato čára bude červená,
        ctx.strokeStyle = "#CACACA";
        ctx.fillStyle = "#CACACA";

        // a tenčí než ostatní ručičky.
        ctx.lineWidth = 6;

        ctx.beginPath();
          // Ale také bude za středem přesahovat nejdále,
          ctx.moveTo(-30,0);

          // a dlouhá bude něco mezi hodinovou a minutovou.
          ctx.lineTo(83,0);
        ctx.stroke();
      ctx.restore();
    }

    // Vnější kruh
    ctx.save();
      // Okraj bude široký...
      ctx.lineWidth = 14;

      // a modrý.
      ctx.strokeStyle = '#CACACA';

      ctx.beginPath();
        // Nakreslíme celý kruh, 142 pixelů poloměr.
        ctx.arc(0,0,142,0,Math.PI*2,true);
      ctx.stroke();
    ctx.restore();

  ctx.restore();
}