Ext.ns('Ext.ux');

Ext.ux.Slider = function(config){
    Ext.apply(this, config);
};

Ext.ux.Slider.prototype = {
    containerId : 'slider-container',
    nextId : '',
    prevId : '',
    slideId : '',
    slideInfoId: '',
    slideLoadingId: '',
    navNext : null,
    navPrev : null,
    url: '',
    store: null,
    start: 0,
    limit: 4,
    slideBox: null,
    slideLoading: null,
    init: function(){
        this.nextId = this.containerId + '_next';
        this.prevId = this.containerId + '_prev';
        this.slideId = this.containerId + '_slide';
        this.slideInfoId = this.containerId + '_slideinfo';
        this.slideLoadingId = this.containerId + '_loading';
        
        Ext.get(this.containerId).update(this.getTemplate());
        
        this.slideBox = Ext.get(this.slideId);
        this.slideLoading = Ext.get(this.slideLoadingId);

        this.store = new Ext.data.JsonStore({
            root: 'items',
            totalProperty: 'totalcount',
            fields : ['html'],
            proxy: new Ext.data.ScriptTagProxy({
                url: this.url
            })
        });

        this.store.on('load', this.showSlide, this);
        this.store.baseParams.start = this.start;
        this.store.baseParams.limit = this.limit;
        this.store.load();
     
        this.navNext = Ext.get(this.nextId);
        this.navNext.on('click', this.next, this);
        this.navPrev = Ext.get(this.prevId);
        this.navPrev.on('click', this.previous, this);
        
    },
    showSlide: function(s, r, o){
        this.slideLoading.hide();
        if (r.length > 0){
            this.slideBox.update(r[0].get('html'));
            this.slideBox.fadeIn({duration: 1});
            this.updateNav(s.totalLength);
        }
    },
    nextOffset: 0,
    previousOffset: 0,
    firstOffset: 0,
    lastOffset:0,
    updateNav: function(totalcount){
        if (this.limit < 1) this.limit = 4;
        
        // Data for current page of items.
        var lastRow = totalcount - 1;

        if (this.start < 0) this.start = 0;
        if (this.start > lastRow) this.start = lastRow;

        var currentLastRow = this.start + this.limit - 1;
        if (currentLastRow > lastRow) currentLastRow = lastRow;
        
        var currentPage = Math.ceil((this.start-1) / this.limit) - 1;
        var pageCount = Math.ceil( totalcount / this.limit);

        // Data for last page of items.
        var lastPage = pageCount;
        this.lastOffset = lastRow - (lastRow % this.limit);
        
        var previousPage, nextPage;
        
        // Data for previous page of items.
        if (currentPage > 1) {
            previousPage = currentPage - 1;
            this.previousOffset = this.start - this.limit;
        } else {
            previousPage = 0;
            this.previousOffset = 0;
        }

        // Data for next page of items.
        if (currentPage < lastPage) {
            nextPage = currentPage + 1;
            this.nextOffset = this.start + this.limit;
        } else {
            nextPage = 0;
            this.nextOffset = 0;
        }
        
        if (this.start < 1) 
            this.navPrev.hide(true);
        else
            this.navPrev.show(true);
            
        if (this.start >= this.lastOffset){
            this.navNext.hide(true);
        }else{
            this.navNext.show(true);        
        }
        
        Ext.get(this.slideInfoId).update("Menampilkan " + (this.start + 1) + " s.d " + (currentLastRow + 1) + " dari " + totalcount);
    },
    load: function(s){
        this.start = s;
        this.store.baseParams.start = this.start;
        this.store.load();
    },
    next: function(e){
        e.preventDefault();
        this.slideBox.hide();
        this.slideLoading.show();
        this.load(this.nextOffset);
        
    },
    previous: function(e){
        e.preventDefault();
        this.slideBox.hide();
        this.slideLoading.show();
        this.load(this.previousOffset);
    },
    first: function(e){
        e.preventDefault();
        this.load(this.firstOffset);
    },
    last: function(e){
        e.preventDefault();
        this.load(this.lastOffset);
    },
    getTemplate: function(){
        return '<div class="slider-container">' +
                    '<div class="slider-prev"><a href="#" id="' + this.prevId + '"><img src="images/slider/navigate_left.png" alt="Previous" /></a></div>' +
                    '<div class="slider-slide" id="' + this.slideId + '">&nbsp;</div>' +
                    '<div class="slider-next"><a href="#" id="' + this.nextId + '"><img src="images/slider/navigate_right.png" alt="Next" /></a></div>' +
                '</div>' +
                '<div class="slider-loading" id="' + this.slideLoadingId + '">&nbsp;</div' +
                '<div class="slider-info" id="' + this.slideInfoId + '"></div>';
    }
};