Animate Raphaël JS based on countdown value - similar to polar clock

Question

First off, fairly new to JS but getting better :-)

This question is similar to drawing centered arcs in raphael js but a little different due to some specifics.

I am using jQuery Countdown to handle a countdown.

The 'seconds' on the timer need to be animated similar to the Polar Clock Example on the Raphaël demo page.

There is a callback 'onTick' which I think needs to be somehow 'plugged into' Raphaël.

Markup:

<div id="timer"></div>
<div id="pane"></div>

JS:

$(document).ready(function() {
$('#timer').countdown({ 
    until: new Date(2011, 11, 11), 
    timezone: -5,
    layout: '<ul>{d<}<li><em>{dn}</em> {dl}</li>{d>}{h<}<li><em>{hn}</em> {hl}</li>{h>}' + 
        '{m<}<li><em>{mn}</em> {ml}</li>{m>}{s<}<li><em>{sn}</em> {sl}</li>{s>}</ul>',
    onTick: get_seconds
});

var archtype = Raphael("pane", 200, 100)
archtype.customAttributes.arc = function (xloc, yloc, value, total, R) {
    var alpha = 360 / total * value,
        a = (90 - alpha) * Math.PI / 180,
        x = xloc + R * Math.cos(a),
        y = yloc - R * Math.sin(a),
        path;
    if (total == value) {
        path = [["M", xloc, yloc - R], ["A", R, R, 0, 1, 1, xloc - .01, yloc - R]];
    } else {
        path = [["M", xloc, yloc - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
    }
    return {path: path};
};
//make an arc at 50,50 with a radius of 30 that grows from 0 to 40 of 100 with a bounce
var my_arc = archtype.path().attr({"stroke": "#f00", "stroke-width": 6, arc: [50, 50, 0, 100, 30]});
my_arc.animate({arc: [50, 50, timer_radius, 100, 30]}, 1500, "bounce");

function get_seconds () {
    var counter_seconds = $('#timer ul li:last em').text();
    timer_radius = 100 - (counter_seconds * 1.66666667);
}});        

Any help would be appreciated. Thank you!

Answer 1

Here was is final use (splash page will be active until Dec 11, 2011.): http://tomwahlin.com/

And the JavaScript I ended up with:

;(function() {

// ON DOCUMENT.ready fire the primary function
$(function(){ timer.init() })    

var timer = {
  //
  // `create_arc` is used to assign an arc to the Raphael pane created in .init
  //
  create_arc: function(arch) {
    arch.customAttributes.arc = function (xloc, yloc, value, total, R) {
      var alpha = 360 / total * value,
      a = (90 - alpha) * Math.PI / 180,
      x = xloc + R * Math.cos(a),
      y = yloc - R * Math.sin(a),
      path;
      if (total == value) {
        path = [["M", xloc, yloc - R], ["A", R, R, 0, 1, 1, xloc - .01, yloc - R]];
      } else {
        path = [["M", xloc, yloc - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
      }
      return {path: path};
    };
  },
  //
  // `get_arc_radius` returns the correct arc radius based on something
  //
  get_arc_radius: function() {
    return ((($('#timer ul li:last em').text()) * 1.66666667));
  },
  //
  // `update_based_on(type increment)
  //
  update_based_on: function(type, obj) {
    var types = {
      'seconds': 1000,
      'minutes': 60000,
      'hours': 3600000
    }

    var update = setInterval(function() {
      obj.animate({arc: [100, 100, timer.get_arc_radius(), 100, 90]}, types[type]);  
    }, types[type])
  },
  //
  // `create_pieces`
  //
  create_pieces: function() {
    var archtype = Raphael("pane", 200, 200)      
    timer.create_arc(archtype)

    //http://stackoverflow.com/questions/5061318/drawing-centered-arcs-in-raphael-js
    //make an arc at 50,50 with a radius of 30 that grows from 0 to 40 of 100 with a bounce
    var my_arc = archtype.path().attr({"stroke": "#5ab4fc", "stroke-width": 18, arc: [100, 100, timer.get_arc_radius(), 100, 90]});
    timer.update_based_on('seconds', my_arc)
  },
  //
  // `init` kicks of the main behavior
  //
  init: function() {

    $('#timer').countdown({ 
      until: new Date(2011, 11, 11), 
      timezone: -5,
      layout: '<ul>{d<}<li class="days"><em>{dn}</em> {dl}</li>{d>}{h<}<li class="hours"><em>{hn}</em> {hl}</li>{h>}' + 
        '{m<}<li class="minutes"><em>{mn}</em> {ml}</li>{m>}{s<}<li class="seconds"><em>{sn}</em> {sl}</li>{s>}</ul>',
      onTick: function() {}
    });

    timer.create_pieces()
  } // eo .init
}})();