Javascript New Year's Eve Clock & Countdown

Question

I've been using the flipclockjs.com JQuery library to try and create a simple script that we can use in the local pub on New Year's Eve to help everyone see in the New Year.

The basic idea is during the evening a 24-hour clock with seconds is ticking away. At 30 seconds to midnight, a countdown appears below the clock and at the stroke of midnight the countdown is replaced by a 'Happy New Year' message and the clock continues just showing the current time.

My current draft is here (Fiddle)

        var clock;
        $(document).ready(function() {              
            $('.countdown').hide();
            $('.nye').hide();

            /*var currentDate = new Date(); - enable this for the live event*/
            var currentDate = new Date(2013,12,31,23,59,20,0);
            var switchToCountdown = getHMS(currentDate)+10;
            var newyears = switchToCountdown+31;

            var clock = $('.clock').FlipClock(getHMS(currentDate), {
                callbacks: {
                        interval: function() {
                            var curTime = clock.time.time;
                            if (curTime == switchToCountdown) {
                                switchCountdown();
                            }
                            if (curTime == newyears) {
                                clock.setTime(0);
                            }
                        }
                }
            }); 
        });

        function switchCountdown() {
            var countdownclock = $('.countdown').FlipClock(30,{
                clockFace: 'Counter',
                callbacks: {
                            stop: function() {
                                    $('.countdown').hide();
                                    $('.nye').show(1000);
                            }
                    }
            });

            setTimeout(function() {
                setInterval(function() {
                    countdownclock.decrement();
                }, 1000);
            });
            $('.countdown').show();
        }


        function getHMS(fulltime) {
            var hours = fulltime.getHours()*60*60;
            var minutes = fulltime.getMinutes()*60;
            var seconds = fulltime.getSeconds();
            return hours + minutes + seconds;
        }   

(That example is set to start at 23:59:20 so you don't have to wait 20-odd days to see how it works!)

It sort-of works, but there's some oddities which may be simply due to the way the FlipClock library works. When the countdown first appears it shows '29', then '30', then counts down correctly. Can't seem to figure out why. Also, the clock itself is just a counter, so when it gets to midnight, it shows 24:00:00 rather than 00:00:00. It also briefly flashes '99' in the hour digits. This again could just be something funky to do with the library.

Any FlipClock experts out there who can help me clean up this code, or alternatively is there just a better library out there for Javascript counters and clocks? I love the design of FlipClock, but not wedded to it if this application just isn't its thang.

Answer 1

Don't know flipclock, but I was able to hack around and get it to work:

http://jsfiddle.net/3LdnC/1/

I changed:

setTimeout(function() {
    setInterval(function() {
        countdownclock.decrement();
    }, 1000);
});
$('.countdown').show();

To:

countdownclock.decrement();
setTimeout(function() {
    $('.countdown').show();    
    setInterval(function() {
        countdownclock.decrement();
    }, 1000);
},1000);