Ext.ns('Ext.uxp', 'Ext.uxp.widgets');

Ext.uxp.widgets.Carousel = Ext.extend(Object, {

    params: ['scroll'],
    
    constructor: function(config) {
        config = config || {};
        
        var list = Ext.get(config.target);
        
        for (var i = 0, l = this.params.length; i < l; i++) {
        
            var attr = list.getAttribute('data-' + this.params[i]);
            if (attr !== undefined) {
                config[this.params[i]] = parseInt(attr,10);
            }
        }
        
        
        
        Ext.apply(this, config);
        
        
        
        
        
        var items = list.select('li');
        items.each(function(el, composite, index) {
            el.addClass('ox-carousel-item');
        });
        
        var items_count = items.getCount();
        var item_1 = list.child('li');
        var margin = parseInt(item_1.getStyle('margin-left'),10) + parseInt(item_1.getStyle('margin-right'),10);
        
        /* 
         old: var scroll_size = item_1.getWidth() + margin;
         this new way allow to have carousel working properly even if originally displayed in hidden elements, though it demands a width to be declared in css
         */
        var scroll_size = parseInt(item_1.getStyle('width'),10) + margin;
        
        var list_width = items_count * (scroll_size);
        list.addClass('ox-carousel-list');
        list.setWidth(list_width);
        
        
        var clip = list.wrap({
            tag: 'div',
            cls: 'ox-carousel-clip'
        });
        var container = clip.wrap({
            tag: 'div',
            cls: 'ox-carousel-container'
        });
        this.clip_width = clip.getWidth();
        //clip.setWidth(clip_width);
        clip.clip(); // utilité restreinte, on peut mettre l'overflow dans la classe
        this.prev_link = container.createChild({
            tag: 'div',
            cls: 'ox-carousel-prev'
        });
        this.next_link = container.createChild({
            tag: 'div',
            cls: 'ox-carousel-next'
        });
        
        this.prev_link.on('click', this.prev, this);
        this.next_link.on('click', this.next, this);
        
        this.list = list;
        this.scroll_size = scroll_size;
        this.items_count = items_count;
        this.list_width = list_width;
        
        // calcul du nombre de déplacement
        this.max_move = Math.ceil((items_count - Math.ceil(this.clip_width / scroll_size)) / this.scroll);
        this.current_move = 0;
        //this.move();
        this.prev_link.addClass('ox-carousel-disabled');
        this.margin = margin;
    },
    
    prev: function() {
    
        this.current_move = this.current_move > 0 ? this.current_move - 1 : 0;
        
        
        this.update_link_status();
        this.move();
    },
    
    next: function() {
        this.current_move = this.current_move < this.max_move ? this.current_move + 1 : this.max_move;
        
        
        this.update_link_status();
        this.move();
    },
    
    update_link_status: function() {
        if (this.current_move == this.max_move) {
            this.next_link.addClass('ox-carousel-disabled');
        }
        else {
            this.next_link.removeClass('ox-carousel-disabled');
        }
        
        if (this.current_move === 0) {
            this.prev_link.addClass('ox-carousel-disabled');
        }
        else {
            this.prev_link.removeClass('ox-carousel-disabled')
        }
        
    },
    
    move: function() {
    
        var pos = this.current_move * this.scroll_size * this.scroll * -1;
        pos = pos > 0 ? 0 : pos;
        pos = Math.ceil(pos + (this.list_width - this.margin) > this.clip_width ? pos : this.clip_width - (this.list_width - this.margin));
        
        
        this.list.fxanim({
            left: {
                to: pos
            }
        });
    }
    
    
    
});


Ext.onReady(function() {
    Ext.getBody().select('.ox-carousel').each(function(el) {
        new Ext.uxp.widgets.Carousel({
            target: el
        });
    });
    
});