$(document).ready(function() {
    $('#inner').load('body.html', {}, function() {
        var charsets = {
            'f-zht': {
                 0: '\u96f6',  1: '\u58f9',  2: '\u8cb3',  3: '\u53c4',  4: '\u8086',
                 5: '\u4f0d',  6: '\u9678',  7: '\u67d2',  8: '\u634c',  9: '\u7396',
                10: '\u62fe',                y: '\u5e74',  m: '\u6708',  d: '\u65e5',
                                             h: '\u9ede',  n: '\u5206',  s: '\u79d2'
            },
             
            'f-zhs': {
                 0: '\u96f6',  1: '\u58f9',  2: '\u8d30',  3: '\u53c1',  4: '\u8086',
                 5: '\u4f0d',  6: '\u9646',  7: '\u67d2',  8: '\u634c',  9: '\u7396',
                10: '\u62fe',                y: '\u5e74',  m: '\u6708',  d: '\u65e5',
                                             h: '\u70b9',  n: '\u5206',  s: '\u79d2'
            },
            
            'f-jat': {
                 0: '\u96f6',  1: '\u58f9',  2: '\u8cb3',  3: '\u53c4',  4: '\u8086',
                 5: '\u4f0d',  6: '\u9678',  7: '\u6f06',  8: '\u634c',  9: '\u7396',
                10: '\u62fe',                y: '\u5e74',  m: '\u6708',  d: '\u65e5',
                                             h: '\u6642',  n: '\u5206',  s: '\u79d2'
            },
            
            'f-jas': {
                 0: '\u96f6',  1: '\u58f1',  2: '\u5f10',  3: '\u53c2',  4: '\u8086',
                 5: '\u4f0d',  6: '\u9678',  7: '\u6f06',  8: '\u634c',  9: '\u7396',
                10: '\u62fe',                y: '\u5e74',  m: '\u6708',  d: '\u65e5',
                                             h: '\u6642',  n: '\u5206',  s: '\u79d2'
            },
             
            'n-zht': {
                 0: '\u3007',  1: '\u4e00',  2: '\u4e8c',  3: '\u4e09',  4: '\u56db',
                 5: '\u4e94',  6: '\u516d',  7: '\u4e03',  8: '\u516b',  9: '\u4e5d',
                10: '\u5341',                y: '\u5e74',  m: '\u6708',  d: '\u65e5',
                                             h: '\u9ede',  n: '\u5206',  s: '\u79d2'
            },
             
            'n-zhs': {
                 0: '\u3007',  1: '\u4e00',  2: '\u4e8c',  3: '\u4e09',  4: '\u56db',
                 5: '\u4e94',  6: '\u516d',  7: '\u4e03',  8: '\u516b',  9: '\u4e5d',
                10: '\u5341',                y: '\u5e74',  m: '\u6708',  d: '\u65e5',
                                             h: '\u70b9',  n: '\u5206',  s: '\u79d2'
            },
            
            'n-ja': {
                 0: '\u3007',  1: '\u4e00',  2: '\u4e8c',  3: '\u4e09',  4: '\u56db',
                 5: '\u4e94',  6: '\u516d',  7: '\u4e03',  8: '\u516b',  9: '\u4e5d',
                10: '\u5341',                y: '\u5e74',  m: '\u6708',  d: '\u65e5',
                                             h: '\u6642',  n: '\u5206',  s: '\u79d2'
            }
        };
        
        var numerals = charsets['f-zht'];
        var space = '\u3000'; // fullwidth space
        
        var fullWidthPad = function(str, length) {
            while (str.length < length) {
                str = space + str;
            }
            
            return str;
        };
        
        var numeralize = function(num, places) {
            if (isNaN(num)) {
                return num;
            }
            
            if (num == 0) {
                return numerals[0];
            }
            
            var place = 1;
            var result = '';
            
            while (num > 0) {
                if (num % 10 == 0) {
                    result = (places ? space : numerals[0]) + result;
                } else if (num % 10 == 1) {
                    result = ((places && place > 1) ? space + numerals[place] : numerals[1]) + result;
                } else {
                    result = numerals[num % 10] + ((places && place > 1) ? numerals[place] : '') + result;
                }
                
                num = Math.floor(num / 10);
                place *= 10;
            }
            
            return result;
        };
        
        $('#controls span').bind('click', function(e) {
            numerals = charsets[this.id];
            $('html').attr('lang', $(this).attr('lang'));
            $('#controls span').removeClass('current');
            $(this).addClass('current');
        });
        
        (function() {
            var now = new Date();
            
            jQuery.each({                 // value, places, pad
                year:           [now.getFullYear(),  false,   4],
                month:          [now.getMonth() + 1,  true,   3],
                day:            [now.getDate(),       true,   3],
                hour:           [now.getHours(),      true,   3],
                minute:         [now.getMinutes(),    true,   3],
                second:         [now.getSeconds(),    true,   3],
                'year-label':   [numerals.y,         false,   1],
                'month-label':  [numerals.m,         false,   1],
                'day-label':    [numerals.d,         false,   1],
                'hour-label':   [numerals.h,         false,   1],
                'minute-label': [numerals.n,         false,   1],
                'second-label': [numerals.s,         false,   1],
            }, function(id, params) {
                var curTarget = $('#' + id + ' .current');
                
                var sect = '', oldDiff = '', newDiff = '';
                
                var curText = curTarget.text();
                var newText = fullWidthPad(numeralize(params[0], params[1]), params[2]);
                
                if (curText != newText) {                
                    for (var i = 0; i < curText.length; i++) {
                        if (curText.charAt(i) == newText.charAt(i)) {
                            sect += curText.charAt(i);
                            oldDiff += space;
                            newDiff += space;
                        } else {
                            sect += space;
                            oldDiff += curText.charAt(i);
                            newDiff += newText.charAt(i);
                        }
                    }
                    
                    curTarget.text(sect);
                    
                    var oldTarget = $(document.createElement('span'));
                    oldTarget.addClass('trans');
                    
                    oldTarget.text(oldDiff);
                    oldTarget.prependTo($('#' + id));
                    oldTarget.animate({
                        top: '-1em',
                        opacity: 0
                    }, {duration: 500, complete: function() {
                        oldTarget.remove();
                    }});
                    
                    var newTarget = $(document.createElement('span'));
                    newTarget.addClass('trans');
                    
                    newTarget.css('top', '1em');
                    newTarget.css('opacity', 0);
                    newTarget.prependTo($('#' + id));
                    newTarget.text(newDiff);
                    newTarget.animate({
                        top: 0,
                        opacity: 1
                    }, {duration: 500, complete: function() {
                        curTarget.text(newText);
                        newTarget.remove();
                    }});
                }
            });
            
            window.setTimeout(arguments.callee, 1000);
        })();
    });
});