/**
* CoolClock 2.1.4
* Copyright 2010, Simon Baird
* Released under the BSD License.
*
* Display an analog clock using canvas.
* http://randomibis.com/coolclock/
*
*/

// Constructor for CoolClock objects
window.CoolClock = function(options) {
    return this.init(options);
}

// Config contains some defaults, and clock skins
CoolClock.config = {
    tickDelay: 1000,
    longTickDelay: 15000,
    defaultRadius: 85,
    renderRadius: 100,
    defaultSkin: "chunkySwiss",
    // Should be in skin probably...
    // (TODO: allow skinning of digital display)
    showSecs: true,
    showAmPm: true,

    skins: {
        // There are more skins in moreskins.js
        // Try making your own skin by copy/pasting one of these and tweaking it
        swissRail: {
            outerBorder: { lineWidth: 2, radius: 95, color: "black", alpha: 1 },
            smallIndicator: { lineWidth: 2, startAt: 88, endAt: 92, color: "black", alpha: 1 },
            largeIndicator: { lineWidth: 4, startAt: 79, endAt: 92, color: "black", alpha: 1 },
            hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: "black", alpha: 1 },
            minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: "black", alpha: 1 },
            secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: 1 },
            secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 1 }
        },
        chunkySwiss: {
            outerBorder: { lineWidth: 4, radius: 97, color: "black", alpha: 1 },
            smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "black", alpha: 1 },
            largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "black", alpha: 1 },
            hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "black", alpha: 1 },
            minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "black", alpha: 1 },
            secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 },
            secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 }
        },
        chunkySwissOnBlack: {
            outerBorder: { lineWidth: 4, radius: 97, color: "white", alpha: 1 },
            smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "white", alpha: 1 },
            largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "white", alpha: 1 },
            hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "white", alpha: 1 },
            minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "white", alpha: 1 },
            secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 },
            secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 }
        }

    },

    // Test for IE so we can nurse excanvas in a couple of places
    isIE: !!document.all,

    // Will store (a reference to) each clock here, indexed by the id of the canvas element
    clockTracker: {},

    // For giving a unique id to coolclock canvases with no id
    noIdCount: 0
};

// Define the CoolClock object's methods
CoolClock.prototype = {

    // Initialise using the parameters parsed from the colon delimited class
    init: function(options) {
        // Parse and store the options
        this.canvasId = options.canvasId;
        this.skinId = options.skinId || CoolClock.config.defaultSkin;
        this.displayRadius = options.displayRadius || CoolClock.config.defaultRadius;
        this.showSecondHand = typeof options.showSecondHand == "boolean" ? options.showSecondHand : true;
        this.gmtOffset = (options.gmtOffset != null && options.gmtOffset != '') ? parseFloat(options.gmtOffset) : null;
        this.showDigital = typeof options.showDigital == "boolean" ? options.showDigital : false;
        this.logClock = typeof options.logClock == "boolean" ? options.logClock : false;
        this.logClockRev = typeof options.logClock == "boolean" ? options.logClockRev : false;

        this.tickDelay = CoolClock.config[this.showSecondHand ? "tickDelay" : "longTickDelay"];

        // Get the canvas element
        this.canvas = document.getElementById(this.canvasId);

        // Make the canvas the requested size. It's always square.
        this.canvas.setAttribute("width", this.displayRadius * 2);
        this.canvas.setAttribute("height", this.displayRadius * 2);
        this.canvas.style.width = this.displayRadius * 2 + "px";
        this.canvas.style.height = this.displayRadius * 2 + "px";

        // Explain me please...?
        this.renderRadius = CoolClock.config.renderRadius;
        this.scale = this.displayRadius / this.renderRadius;

        // Initialise canvas context
        this.ctx = this.canvas.getContext("2d");
        this.ctx.scale(this.scale, this.scale);

        // Keep track of this object
        CoolClock.config.clockTracker[this.canvasId] = this;

        // Start the clock going
        this.tick();

        return this;
    },

    // Draw a circle at point x,y with params as defined in skin
    fullCircleAt: function(x, y, skin) {
        this.ctx.save();
        this.ctx.globalAlpha = skin.alpha;
        this.ctx.lineWidth = skin.lineWidth;

        if (!CoolClock.config.isIE) {
            this.ctx.beginPath();
        }

        if (CoolClock.config.isIE) {
            // excanvas doesn't scale line width so we will do it here
            this.ctx.lineWidth = this.ctx.lineWidth * this.scale;
        }

        this.ctx.arc(x, y, skin.radius, 0, 2 * Math.PI, false);

        if (CoolClock.config.isIE) {
            // excanvas doesn't close the circle so let's fill in the tiny gap
            this.ctx.arc(x, y, skin.radius, -0.1, 0.1, false);
        }

        if (skin.fillColor) {
            this.ctx.fillStyle = skin.fillColor
            this.ctx.fill();
        }
        else {
            // XXX why not stroke and fill
            this.ctx.strokeStyle = skin.color;
            this.ctx.stroke();
        }
        this.ctx.restore();
    },

    // Draw some text centered vertically and horizontally
    drawTextAt: function(theText, x, y) {
        this.ctx.save();
        this.ctx.font = '15px sans-serif';
        var tSize = this.ctx.measureText(theText);
        if (!tSize.height) tSize.height = 15; // no height in firefox.. :(
        this.ctx.fillText(theText, x - tSize.width / 2, y - tSize.height / 2);
        this.ctx.restore();
    },

    lpad2: function(num) {
        return (num < 10 ? '0' : '') + num;
    },

    tickAngle: function(second) {
        // Log algorithm by David Bradshaw
        var tweak = 3; // If it's lower the one second mark looks wrong (?)
        if (this.logClock) {
            return second == 0 ? 0 : (Math.log(second * tweak) / Math.log(60 * tweak));
        }
        else if (this.logClockRev) {
            // Flip the seconds then flip the angle (trickiness)
            second = (60 - second) % 60;
            return 1.0 - (second == 0 ? 0 : (Math.log(second * tweak) / Math.log(60 * tweak)));
        }
        else {
            return second / 60.0;
        }
    },

    timeText: function(hour, min, sec) {
        var c = CoolClock.config;
        return '' +
			(c.showAmPm ? ((hour % 12) == 0 ? 12 : (hour % 12)) : hour) + ':' +
			this.lpad2(min) +
			(c.showSecs ? ':' + this.lpad2(sec) : '') +
			(c.showAmPm ? (hour < 12 ? ' am' : ' pm') : '')
		;
    },

    // Draw a radial line by rotating then drawing a straight line
    // Ha ha, I think I've accidentally used Taus, (see http://tauday.com/)
    radialLineAtAngle: function(angleFraction, skin) {
        this.ctx.save();
        this.ctx.translate(this.renderRadius, this.renderRadius);
        this.ctx.rotate(Math.PI * (2.0 * angleFraction - 0.5));
        this.ctx.globalAlpha = skin.alpha;
        this.ctx.strokeStyle = skin.color;
        this.ctx.lineWidth = skin.lineWidth;

        if (CoolClock.config.isIE)
        // excanvas doesn't scale line width so we will do it here
            this.ctx.lineWidth = this.ctx.lineWidth * this.scale;

        if (skin.radius) {
            this.fullCircleAt(skin.startAt, 0, skin)
        }
        else {
            this.ctx.beginPath();
            this.ctx.moveTo(skin.startAt, 0)
            this.ctx.lineTo(skin.endAt, 0);
            this.ctx.stroke();
        }
        this.ctx.restore();
    },

    render: function(hour, min, sec) {
        // Get the skin
        var skin = CoolClock.config.skins[this.skinId];
        if (!skin) skin = CoolClock.config.skins[CoolClock.config.defaultSkin];

        // Clear
        this.ctx.clearRect(0, 0, this.renderRadius * 2, this.renderRadius * 2);

        // Draw the outer edge of the clock
        if (skin.outerBorder)
            this.fullCircleAt(this.renderRadius, this.renderRadius, skin.outerBorder);

        // Draw the tick marks. Every 5th one is a big one
        for (var i = 0; i < 60; i++) {
            (i % 5) && skin.smallIndicator && this.radialLineAtAngle(this.tickAngle(i), skin.smallIndicator);
            !(i % 5) && skin.largeIndicator && this.radialLineAtAngle(this.tickAngle(i), skin.largeIndicator);
        }

        // Write the time
        if (this.showDigital) {
            this.drawTextAt(
				this.timeText(hour, min, sec),
				this.renderRadius,
				this.renderRadius + this.renderRadius / 2
			);
        }

        // Draw the hands
        if (skin.hourHand)
            this.radialLineAtAngle(this.tickAngle(((hour % 12) * 5 + min / 12.0)), skin.hourHand);

        if (skin.minuteHand)
            this.radialLineAtAngle(this.tickAngle((min + sec / 60.0)), skin.minuteHand);

        if (this.showSecondHand && skin.secondHand)
            this.radialLineAtAngle(this.tickAngle(sec), skin.secondHand);

        // Second hand decoration doesn't render right in IE so lets turn it off
        if (!CoolClock.config.isIE && this.showSecondHand && skin.secondDecoration)
            this.radialLineAtAngle(this.tickAngle(sec), skin.secondDecoration);
    },

    // Check the time and display the clock
    refreshDisplay: function() {
        var now = new Date();
        if (this.gmtOffset != null) {
            // Use GMT + gmtOffset
            var offsetNow = new Date(now.valueOf() + (this.gmtOffset * 1000 * 60 * 60));
            this.render(offsetNow.getUTCHours(), offsetNow.getUTCMinutes(), offsetNow.getUTCSeconds());
        }
        else {
            // Use local time
            this.render(now.getHours(), now.getMinutes(), now.getSeconds());
        }
    },

    // Set timeout to trigger a tick in the future
    nextTick: function() {
        setTimeout("CoolClock.config.clockTracker['" + this.canvasId + "'].tick()", this.tickDelay);
    },

    // Check the canvas element hasn't been removed
    stillHere: function() {
        return document.getElementById(this.canvasId) != null;
    },

    // Main tick handler. Refresh the clock then setup the next tick
    tick: function() {
        if (this.stillHere()) {
            this.refreshDisplay()
            this.nextTick();
        }
    }
};

// Find all canvas elements that have the CoolClock class and turns them into clocks
CoolClock.findAndCreateClocks = function() {
    // (Let's not use a jQuery selector here so it's easier to use frameworks other than jQuery)
    var canvases = document.getElementsByTagName("canvas");
    for (var i = 0; i < canvases.length; i++) {
        // Pull out the fields from the class. Example "CoolClock:chunkySwissOnBlack:1000"
        var fields = canvases[i].className.split(" ")[0].split(":");
        if (fields[0] == "CoolClock") {
            if (!canvases[i].id) {
                // If there's no id on this canvas element then give it one
                canvases[i].id = '_coolclock_auto_id_' + CoolClock.config.noIdCount++;
            }
            // Create a clock object for this element
            new CoolClock({
                canvasId: canvases[i].id,
                skinId: fields[1],
                displayRadius: fields[2],
                showSecondHand: fields[3] != 'noSeconds',
                gmtOffset: fields[4],
                showDigital: fields[5] == 'showDigital',
                logClock: fields[6] == 'logClock',
                logClockRev: fields[6] == 'logClockRev'
            });
        }
    }
};

// If you don't have jQuery then you need a body onload like this: <body onload="CoolClock.findAndCreateClocks()">
// If you do have jQuery and it's loaded already then we can do it right now
if (window.jQuery) jQuery(document).ready(CoolClock.findAndCreateClocks);