TzTimeline = function(id) {
    var api;

    var sTimeline = id;

    var xList;
    var xActive = false;
    var xPosts;

    var init = function() {
        xList = Ext.get(sTimeline).child('ul');
        xList.select('a').on('click', loadPost).each(function(o) {
            this.dom.onclick = function() { return false; }
        });

        xPosts = Ext.select('div.TBpost');

        api = jQuery('#' + sTimeline).scrollable({
            size:          8
          , activeClass:   'TzScrollActive'
          , clickable:     false
          , disabledClass: 'TzScrollDisabled'
          , item:          'li'
          , prevPage:      '.TzScrollPrev'
          , nextPage:      '.TzScrollNext'
        }).mousewheel({api: true});
    }

    var loadPost = function() {
        var iPage = false;

        var xItem    = Ext.get(this).parent('li');
        var aClasses = xItem.dom.className.trim().split(' ');
        for (var i = 0, iLen = aClasses.length; i < iLen; i++) {
            if (aClasses[i].indexOf('page-item-') != -1) {
                var iPage = aClasses[i].split('-')[2];
            }
        }

        if (!iPage) {
            return;
        }

        if (xActive) {
            xActive.removeClass('TzTLActive');
        }

        xActive = Ext.get(this).addClass('TzTLActive');
        xPosts.setStyle('display', 'none');
        Ext.fly(iPage).setStyle('display', 'block');

        api.click(xList.select('li').indexOf(xItem.id));
    }

    init();
    return {
        selectYear: function(year) {
            
        }
    }
}