/*
    rlclock.js  --  Analog clock using canvas, requires modern browser

    Based on Coolclock, see   http://randomibis.com/coolclock/

    Changes by RL.SE in May 2009:

    o   Removed support for ancient browsers (i.e. IE :-)
    o   Proper code indenting and put braces where they belong
    o   Fed with server time on start (instead of using client's local clock)
    o   Uses single setInterval() instead of repeated setTimeout():s
    o   Immediately starts timer in order not to lose precision
    o   Don't wait until timeout before first rendering
    o   Removed unused skins, now uses one single only
    o   Limit to 1 single clock (reduces code size)
    o   Uses size specified in the <canvas> tag
    o   Position of hours hand updated every second

    o   January 2012: Use ECMAscript strict mode, so rewrote "with" passage
*/

"use strict";

var     ctx;
var     hours, minutes, seconds;
var     radius;
var     skin =
{
    smallIndicator: { lineWidth: 2, startAt: 89, endAt: 93, color: "#886677", alpha: 1 },
    largeIndicator: { lineWidth: 4, startAt: 80, endAt: 93, color: "#886677", alpha: 1 },
    hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: "#886677", alpha: 1 },
    minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: "#886677", alpha: 1 },
    secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "#efefef", alpha: 1 },
    secondDecoration: { lineWidth: 1, startAt: 80, radius: 4, fillColor: "rgba(200,0,0,0.5)", color: "#886677", alpha: 1 }
};


function rlClock(hh, mm, ss)                        // Call from HTML/PHP
{
    var iHandle;                                    // If we have to abort

    iHandle = setInterval("rlTick()", 1000);        // Immediately start timer!
    hours = parseInt(hh);
    minutes = parseInt(mm);
    seconds = parseInt(ss);

    var canvas = document.getElementById('theClock');

    if (! canvas.getContext)                        // Lame browser
    {
        clearInterval(iHandle);                     // No use for timer, disable it
        alert("Sorry, du har en gammal webläsare.\nDen klarar inte 'canvas'.");
        return;
    }

    radius = canvas.width/2;
    ctx = canvas.getContext("2d");
    rlRender(hours, minutes, seconds);              // Don't wait for timeout - draw now!
}


function radialLineAtAngle(angleFraction, what)
{
    ctx.save();
    ctx.translate(radius, radius);
    ctx.rotate(Math.PI * (2 * angleFraction - 0.5));
    ctx.globalAlpha = what.alpha;
    ctx.strokeStyle = what.color;
    ctx.lineWidth = what.lineWidth*radius/100;

    if (what.radius)                                // Second hand decoration
    {
        ctx.beginPath();
        ctx.arc(what.startAt*radius/100, 0, what.radius*radius/100, 0, 6.29, false);
        ctx.fillStyle = what.fillColor;
        ctx.fill();
    }
    else                                            // Minute marks
    {
        ctx.beginPath();
        ctx.moveTo(what.startAt*radius/100, 0)
        ctx.lineTo(what.endAt*radius/100, 0);
        ctx.stroke();
    }

    ctx.restore();
}


function rlRender(hour, min, sec)
{
    ctx.clearRect(0, 0, radius*2, radius*2);

    for (var i=0; i<60; i++)
        radialLineAtAngle(i/60, skin[i%5 ? "smallIndicator" : "largeIndicator"]);

    radialLineAtAngle((hour+min/60+sec/3600)/12, skin.hourHand);
    radialLineAtAngle((min+sec/60)/60, skin.minuteHand);
    radialLineAtAngle(sec/60, skin.secondHand);
    radialLineAtAngle(sec/60, skin.secondDecoration);
}


function rlTick()                                   // This is what it's all about
{
    if (++seconds>59)                               // Handle rollovers
    {
        seconds=0;                                  // New minute

        if (++minutes>59)                           // New hour
        {
            minutes=0;

            if (++hours>23)                         // New day
                hours=0;
        }
    }

    rlRender(hours, minutes, seconds);              // Update clock on screen
}