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="{alternative}">',
				'<img src="{src}" >', '</a>']);

		var CarouselImages = [];
		Ext.each(this.data, function(item) {
					CarouselImages.push(item.src)
				}, this);

		this.carousel = new Ext.ux.Carousel(elId, {
					interval : 5,
					itemSelector : 'a.lightbox',
					showPlayButton : true,
					pauseOnNavigate : true,
					transitionType : 'blend',
					autoPlay : true,
					fadeInOnStartUp : false,
					files : CarouselImages
				});

		this.carousel.on('click', this.loadPhotos, this);
		this.updatePhotos();
	},

	updatePhotos : function() {

		this.carousel.clear();
		Ext.each(this.data, function(item) {
					
					if (item.alternative == null) {
						delete(item.alternative);
					}
					this.carousel.add(this.photoTemplate.append(this.el, item));
				}, this);

		this.carousel.refresh();
	}
});