Ext.ns('Ext.ux');

Ext.ux.CarouselSteuerungExt = 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.CarouselSteuerungExt.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.CarouselSteuerung(elId, {
            interval: 5,
            itemSelector: 'a.lightbox',
            showPlayButton: false,
            pauseOnNavigate: true,
            transitionType: 'fade'
        
        });
        
        this.carousel.on('click', this.loadPhotos, this);
        /*
         Ext.ux.Lightbox.register('a.lightbox', true);
         
         Ext.ux.Lightbox.on('open', function() {
         this.carousel.pause();
         }, this);
         
         Ext.ux.Lightbox.on('close', function(image) {
         this.carousel.setSlide(image);
         this.carousel.play();
         }, this);
         */
        this.updatePhotos();
    },
    
    
    updatePhotos: function(){
        //Ext.select('#combo-carousel > p').remove();
        
        this.carousel.clear();
        
        
        //data;
        Ext.each(this.data, function(item){
        
        
        
        
            this.carousel.add(this.photoTemplate.append(this.el, item));
        }, this);
        
        this.carousel.refresh();
    }
});