Ext.ns('Ext.ux');

Ext.ux.SimpleCarousel = Ext.extend(Ext.util.Observable, {
    transitionDuration: 0.5,
    transitionEasing: 'easeOut',
    activeSlide: 0,
    wrap: true,

    constructor: function(elId, config) {
        config = config || {};
        Ext.apply(this, config);

        Ext.ux.SimpleCarousel.superclass.constructor.call(this, config);

        this.addEvents(
            'beforeprev',
            'prev',
            'beforenext',
            'next',
            'change',
            'play',
            'pause',
            'freeze',
            'unfreeze'
        );

        this.el = Ext.get(elId);
        this.slides = this.els = [];

        this.initMarkup();
        this.initEvents();

        if(this.carouselSize > 0) {
            this.refresh();
        }
    },

    initMarkup: function() {
        var dh = Ext.DomHelper;

        this.carouselSize = 0;

        this.els.container = this.el.select('.container').item(0);
        this.els.slidesWrap = this.el.select('.wrap').item(0);

        this.els.navNext = this.el.select('.next').item(0);
        this.els.navPrev = this.el.select('.prev').item(0);

	this.viewport = this.els.container.getWidth();

        this.el.select('.item').each(function(item) {
            this.slides.push(Ext.get(item.dom));
        }, this);
        this.carouselSize = this.slides.length;
    },

    initEvents: function() {
        this.els.navPrev.on('click', function(ev) {
            ev.preventDefault();
            var target = ev.getTarget();
            target.blur();
            if(Ext.fly(target).hasClass('ux-carousel-nav-disabled')) return;
            this.prev();
        }, this);

        this.els.navNext.on('click', function(ev) {
            ev.preventDefault();
            var target = ev.getTarget();
            target.blur();
            if(Ext.fly(target).hasClass('ux-carousel-nav-disabled')) return;
            this.next();
        }, this);
    },

    prev: function() {
        if (this.fireEvent('beforeprev') === false) {
            return;
        }
        if(this.pauseOnNavigate) {
            this.pause();
        }
        this.setSlide(this.activeSlide - 2);

        this.fireEvent('prev', this.activeSlide);
        return this;
    },

    next: function() {
        if(this.fireEvent('beforenext') === false) {
            return;
        }
        if(this.pauseOnNavigate) {
            this.pause();
        }
        this.setSlide(this.activeSlide + 2);

        this.fireEvent('next', this.activeSlide);
        return this;
    },

    clear: function() {
        this.els.slidesWrap.update('');
        this.slides = [];
        this.carouselSize = 0;
        this.pause();
        return this;
    },

    add: function(el, refresh) {
        var item = Ext.fly(el).appendTo(this.els.slidesWrap);
        this.slides.push(item);
        if(refresh) {
            this.refresh();
        }
        return this;
    },

    refresh: function() {
        this.carouselSize = this.slides.length;
        if(this.carouselSize > 0) {
		var width=0;
		Ext.each(this.slides,function(i){
			width += i.getWidth() + parseInt('0' + i.getStyle('margin-left'),10) + parseInt('0' + i.getStyle('margin-right'),10) +3;
		},this)
		this.els.slidesWrap.setWidth(width);
            this.activeSlide = 0;
            this.setSlide(0, true);
        }
        return this;
    },

    setSlide: function(index, initial) {
        if(!this.wrap && !this.slides[index]) {
            return;
        }
        else if(this.wrap) {
            if(index < 0) {
                index = this.carouselSize-1;
            }
            else if(index > this.carouselSize-1) {
                index = 0;
            }
        }
        if(!this.slides[index]) {
            return;
        }

        var offset = this.slides[index].getLeft() - this.els.slidesWrap.getLeft() - parseInt('0' + this.slides[index].getStyle('margin-left'),10);
        if (!initial) {
			var xNew = (-1 * offset) + this.els.container.getX();
			this.els.slidesWrap.stopFx(false);
			this.els.slidesWrap.shift({
				duration: this.transitionDuration,
				x: xNew,
				easing: this.transitionEasing
			});
        }
        else {
            this.els.slidesWrap.setStyle('left', '0');
        }

        this.activeSlide = index;
        this.updateNav();
        this.fireEvent('change', this.slides[index], index);
    },

    updateNav: function() {
        this.els.navPrev.removeClass('ux-carousel-nav-disabled');
        this.els.navNext.removeClass('ux-carousel-nav-disabled');
        if(!this.wrap) {
            if(this.activeSlide === 0) {
                this.els.navPrev.addClass('ux-carousel-nav-disabled');
            }
            if(this.activeSlide === this.carouselSize-1) {
                this.els.navNext.addClass('ux-carousel-nav-disabled');
            }
        }
    }
});