// Based on code by John Resig
// zmensene
// bez znacek minut
// bez rucicky sekund
// TODO: lze postupovat i jinak, pomoci document.createElement('canvas'), 
// nutno vsak zajistit, aby fungovala emulace v IE

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;
  if (document.getElementById('misto_pro_hodiny')) {
    canvas = document.getElementById('misto_pro_hodiny');
  }
  else {
    // Tato vetev zajisti, ze v kodu nemusi byt element canvas a tedy nevznikne chyba pri validaci proti DTD.
    // Bohuzel zatim nefunguje v IE s jeho 'emulaci'. Bylo by nutno upravit iecanvas.js.
    canvas = document.createElement('canvas');
    canvas.id = 'misto_pro_hodiny';
    canvas.setAttribute('id', 'misto_pro_hodiny');
    canvas.setAttribute('height', 50);
    canvas.setAttribute('width', 50);
    canvas.style.height = '50px';
    canvas.style.width = '50px';
    document.getElementById('hodiny').appendChild(canvas);
  }

  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();
    }

    if (0) { // 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();
}