if (window['PB'] == undefined) {
    PB = {};
}
PB.HorizontalList = function() {
    jQuery.extend(this, PB.EventDispatcher);
};
PB.HorizontalList.prototype = {
    scrollIndex: 0,
    selectedIndex: -1,
    columnWidth: 60,
    rowHeight: 54,
    data: [],
    pageSize: 0,
    userHasScrolled: false,
    itemRenderer: null,
    itemRenderers: [],
    list: null,
    listContent: null,
    width: 50,
    height: 50,
    selectable: true,
    initialize: function() {
        this.list = jQuery('.list');
        this.list.get().scrollLeft = 0;
        //this.list.get().scrollTo(0,0);
        this.listContent = this.list.find('.listContent');
    },
    scrollToIndex: function(index) {
        if (index < 0 ) {
            index = 0;
        }
        if (index > (this.data.length - this.pageSize)) {
            index = this.data.length - this.pageSize;
        }
        var offset = index * this.columnWidth;
        this.list.stop();
        this.list.animate({scrollLeft: offset}, 800);
        this.scrollIndex = index;
        this.buildRenderers(this.scrollIndex + (this.pageSize * 2) + 1);
    },
    resetScrollIndex: function() {
        var offset = this.scrollIndex * this.columnWidth;
        this.list.scrollLeft(offset);
    },
    scrollNextPage: function() {
        this.scrollToIndex(this.scrollIndex + this.pageSize);
    },
    scrollPrevPage: function() {
        this.scrollToIndex(this.scrollIndex - this.pageSize);
    },
    scrollNext: function() {
        this.scrollToIndex(this.scrollIndex + 1);
    },
    scrollPrev: function() {
        this.scrollToIndex(this.scrollIndex - 1);
    },
    buildRenderers: function(finishCount) {
        var currentThumbnails = this.itemRenderers.length;
        if (currentThumbnails == 0) {
            this.list.scrollLeft(this.scrollIndex * this.columnWidth);
        }
        if (finishCount < currentThumbnails) {
            return;
        }
        var listContent = this.listContent;
        for (var i = currentThumbnails; ((i < finishCount) &&(i < this.data.length)); i++) {
            var renderer = new this.itemRenderer(this.data[i], i, listContent, this);
            if (i == this.selectedIndex) {
                renderer.select();
            }
            this.itemRenderers.push(renderer);
        }
        var self = this;
        setTimeout(function(){ self.resetScrollIndex()}, 10);
        //Bug Sometimes ScrollLeft property behaves poorly
        //this.list.scrollLeft(this.scrollIndex * this.columnWidth); 
    },
    setWidth: function(value) {
        this.width = value;
        this.list.width(value);
        this.pageSize = Math.floor(this.width / this.columnWidth);
        var numItems = this.pageSize * 2 + 1;
        var self = this;
        setTimeout(function(){self.buildRenderers(numItems)}, 100);

    },
    setData: function(value) {
        this.data = value;
    },
    selectIndex: function(value) {
            if (this.itemRenderers[this.selectedIndex]) {
                this.itemRenderers[this.selectedIndex].unselect();
            }
            this.selectedIndex = value;
            if (this.itemRenderers[this.selectedIndex]) {
                this.itemRenderers[this.selectedIndex].select();
            }
    },
    onItemClick: function(index) {
        if (this.selectable) {
            this.selectIndex(index);
            this.dispatchEvent(new PB.Event(PB.Event.SELECT, index));
        }
    },
    scrollIfNeeded: function(index) {
        if ((this.scrollIndex <= index)&&(index <= (this.scrollIndex + this.pageSize - 1))) {
            return;
        } else {
            this.scrollToIndex(index);
        }
    }

};