Ext.ns('Ext.ux');

Ext.ux.CarouselExt = Ext.extend(Ext.util.Observable, {

    size: 'm',
    autoplay: 'false',
    lightview: true,
    loaded: false, //private
    data: {},
    constructor: function(elId, config){
    
        //container
        this.el = Ext.get(elId);
        config = config ||{};
        Ext.apply(this, config);
        Ext.ux.CarouselExt.superclass.constructor.call(this, config);
        this.photoTemplate = new Ext.Template(['<a href="{href}" class="lightbox" title="{title}">', '<img src="{src}" >', '</a>']);
        this.carousel = new Ext.ux.Carousel(elId, {
            interval: 5,
            itemSelector: 'a.lightbox',
            showPlayButton: false,
            pauseOnNavigate: true,
            transitionType: 'fade'
        });
        
        this.carousel.on('click', this.loadPhotos, this);
        this.updatePhotos();
    },

    updatePhotos: function(){
        this.carousel.clear();
        Ext.each(this.data, function(item){
            this.carousel.add(this.photoTemplate.append(this.el, item));
        }, this);
        
        this.carousel.refresh();
    }
});