var countdown = {
    root_url: undefined,
    container_id: '',
    root_container: new Element('span'),
    images: {
        '0': 'images/0.png',
        '1': 'images/1.png',
        '2': 'images/2.png',
        '3': 'images/3.png',
        '4': 'images/4.png',
        '5': 'images/5.png',
        '6': 'images/6.png',
        '7': 'images/7.png',
        '8': 'images/8.png',
        '9': 'images/9.png',
        ':': 'images/colon.png'
    },
    digits: {
        'day1': [ ],
        'day2': [ ],
        'day3': [ ],
        'hour1': [ ],
        'hour2': [ ],
        'minute1': [ ],
        'minute2': [ ],
        'second1': [ ],
        'second2': [ ],
    },
    active_digit: {
        'day1': undefined,
        'day2': undefined,
        'day3': undefined,
        'hour1': undefined,
        'hour2': undefined,
        'minute1': undefined,
        'minute2': undefined,
        'second1': undefined,
        'second2': undefined,
    },
    digit_containers: {
        'day1': new Element('span', {'class': 'countdown_digit_container', 'style': 'left: 0px;'}),
        'day2': new Element('span', {'class': 'countdown_digit_container', 'style': 'left: 18px;'}),
        'day3': new Element('span', {'class': 'countdown_digit_container', 'style': 'left: 36px;'}),
        'day_colon': new Element('span', {'class': 'countdown_digit_container', 'style': 'left: 54px;'}),
        'hour1': new Element('span', {'class': 'countdown_digit_container', 'style': 'left: 72px;'}),
        'hour2': new Element('span', {'class': 'countdown_digit_container', 'style': 'left: 90px;'}),
        'hour_colon': new Element('span', {'class': 'countdown_digit_container', 'style': 'left: 108px;'}),
        'minute1': new Element('span', {'class': 'countdown_digit_container', 'style': 'left: 126px;'}),
        'minute2': new Element('span', {'class': 'countdown_digit_container', 'style': 'left: 144px;'}),
        'minute_colon': new Element('span', {'class': 'countdown_digit_container', 'style': 'left: 162px;'}),
        'second1': new Element('span', {'class': 'countdown_digit_container', 'style': 'left: 180px;'}),
        'second2': new Element('span', {'class': 'countdown_digit_container', 'style': 'left: 198px;'}),
    },
    timer_datetime: undefined,

    init: function(container_id, target_datetime, root_url) {
        this.container_id = container_id;
        this.root_url = root_url;
        this.drawClock();
        current_datetime = new Date();
        this.timer_datetime = new Date();
        this.timer_datetime.setTime(target_datetime - current_datetime);
        this.updateClock();
        this.root_container.setOpacity(1);
        this.countdown.delay(1000, this);
    },

    drawClock: function() {
        /* create/put the images inside the digit containers */
        var newimg = new Element('img', {'src': this.root_url + '/' + this.images[':'], style: 'position: absolute;'});
        newimg.injectInside(this.digit_containers['day_colon']);
        newimg = new Element('img', {'src': this.root_url + '/' + this.images[':'], style: 'position: absolute;'});
        newimg.injectInside(this.digit_containers['hour_colon']);
        newimg = new Element('img', {'src': this.root_url + '/' + this.images[':'], style: 'position: absolute;'});
        newimg.injectInside(this.digit_containers['minute_colon']);
        for (id in this.digits) {
            for (var i = 0; i < 10; ++i) {
                var newimg = new Element('img', {'src': this.root_url + '/' + this.images[i], style: 'position: absolute; opacity: 0;'});
                newimg.injectInside(this.digit_containers[id]);
                this.digits[id][i] = newimg;
            }
        }

        /* show the digit containers */
        for (id in this.digit_containers) {
            this.digit_containers[id].injectInside(this.root_container);
        }

        this.root_container.setOpacity(0);
        this.root_container.injectInside($(this.container_id));
    },

    updateClock: function() {
        var hours = this.timer_datetime.getHours();
        var minutes = this.timer_datetime.getMinutes();
        var seconds = this.timer_datetime.getSeconds();
        var days = parseInt((this.timer_datetime.getTime() - (hours * 60 * 60 + minutes + 60 + seconds) * 1000) / (24 * 60 * 60 * 1000));
        if (this.timer_datetime.getTime() < 0) {
            hours = 0;
            minutes = 0;
            seconds = 0;
            days = 0;
        } else if (days > 999) {
            hours = 99;
            minutes = 99;
            seconds = 99;
            days = 99;
        }

        days = padDigits(days, 3);
        hours = padDigits(hours, 2);
        minutes = padDigits(minutes, 2);
        seconds = padDigits(seconds, 2);

        this.setActiveDigit('day1', days.charAt(0));
        this.setActiveDigit('day2', days.charAt(1));
        this.setActiveDigit('day3', days.charAt(2));
        this.setActiveDigit('hour1', hours.charAt(0));
        this.setActiveDigit('hour2', hours.charAt(1));
        this.setActiveDigit('minute1', minutes.charAt(0));
        this.setActiveDigit('minute2', minutes.charAt(1));
        this.setActiveDigit('second1', seconds.charAt(0));
        this.setActiveDigit('second2', seconds.charAt(1));
    },

    setActiveDigit: function(digit_id, digit) {
        /* initial setting of digit */
        if (!this.active_digit[digit_id]) {
            this.active_digit[digit_id] = digit;
            this.digits[digit_id][digit].setOpacity(1);
            return;
        }


        /* Transition to the new digit */
        if (this.active_digit[digit_id] != digit) {
            var old_digit_element = this.digits[digit_id][this.active_digit[digit_id]];
            var new_digit_element = this.digits[digit_id][digit];
            this.active_digit[digit_id] = digit;

            new Fx.Tween(old_digit_element, {
                                     'property': 'opacity',
                                     'duration': 100
                                     }).start(0);
            new Fx.Tween(new_digit_element, {
                         'property': 'opacity',
                         'duration': 100
                         }).start(1);
        }

        return;
    },

    countdown: function() {
        this.timer_datetime.setTime(this.timer_datetime.getTime() - 1000);
        this.updateClock();
        this.countdown.delay(1000, this);
    },
};

function padDigits(n, totalDigits) 
{ 
    n = n.toString(); 
    var pd = ''; 
    if (totalDigits > n.length) 
    { 
        for (i=0; i < (totalDigits-n.length); i++) 
        { 
            pd += '0'; 
        } 
    } 
    return pd + n.toString(); 
}