Ext.ns('Ext.ux');

Ext.ux.RTTSCarousel = function(){
	Ext.ux.RTTSCarousel.superclass.constructor.apply(this, arguments);
	this.prevIndex = 0;
	this.on('change', this.onChange, this);
}

Ext.extend(Ext.ux.RTTSCarousel, Ext.ux.Carousel);


Ext.ux.RTTSCarousel.prototype.initMarkup = function(){
	var dh = Ext.DomHelper;
	
	this.carouselSize = 0;
	var items = this.el.select(this.itemSelector);
	this.els.container = dh.append(this.el, {cls: 'ux-carousel-container'}, true);
	this.els.slidesWrap = dh.append(this.els.container, {cls: 'ux-carousel-slides-wrap'}, true);
	
	this.els.navigation = dh.append(this.els.container, {cls: 'ux-carousel-nav'}, true);


	this.els.navNext = dh.append(this.els.navigation, {tag: 'a', href: '#', cls: 'ux-carousel-nav-next', html: 'Next'}, true);
	
	if(this.showPlayButton) {
		this.els.navPlay = dh.append(this.els.navigation, {tag: 'a', href: '#', cls: 'ux-carousel-nav-play'}, true);
	}
	this.numEls = items.elements.length;
	this.els.navPrev = dh.append(this.els.navigation, {tag: 'a', href: '#', cls: 'ux-carousel-nav-prev', html: 'Previous'}, true);
	
	for(var i = 0; i< this.numEls; i++){
		var navEl = 'nav'+i;
		this.els[navEl] = dh.insertAfter(this.els.navNext, {tag: 'a', href: '#', html: (i+1), cls: 'ux-carousel-nav-index'}, true);
	}
	
	// set the dimensions of the container
	this.slideWidth = this.width || this.el.getWidth(true);
	this.slideHeight = this.height || this.el.getHeight(true);
	this.els.container.setStyle({
		width: this.slideWidth + 'px',
		height: this.slideHeight + 'px'
	});
	
	items.appendTo(this.els.slidesWrap).each(function(item) {
		item = item.wrap({cls: 'ux-carousel-slide'});
		this.slides.push(item);
		item.setWidth(this.slideWidth + 'px').setHeight(this.slideHeight + 'px');
	}, this);
	this.carouselSize = this.slides.length;
	
	if(this.navigationOnHover) {
	    this.els.navigation.setStyle('top', (-1*this.els.navigation.getHeight()) + 'px');
	}
	var pos = this.els.navigation.getPositioning();	
	var navStr = items.el.getHeight()+'px';
	pos.top = navStr;


//	if(!Ext.isIE6){
	   this.els.container.setHeight((this.height || this.el.getHeight()) + 16);
	   this.el.setHeight((this.height || this.el.getHeight()) + 16);
//	}

  pos.top = ((this.height || items.el.getHeight())-1)+'px';
	this.els.navigation.setPositioning(pos);
	this.el.clip();
}

Ext.ux.RTTSCarousel.prototype.initEvents = function(){
	Ext.ux.RTTSCarousel.superclass.initEvents.apply(this, arguments);

	for(var i = 0; i < this.numEls; i++){
		var navEl = 'nav'+i;
		this.els[navEl].on('click', function(ev){
			ev.preventDefault();
			var target = ev.getTarget();
			target.blur();            
			if(Ext.fly(target).hasClass('ux-carousel-nav-disabled')) return;
			var index;
			Ext.isIE ? index = target.outerText : index = target.text;
			this.onIndex(index-1);
		}, this);
	}
}

Ext.ux.RTTSCarousel.prototype.onIndex = function(index){
	//console.log(index);
	var navIndex = 'nav'+index;
	this.els[navIndex].addClass('bg-grey');
	this.pause();
	
	this.setSlide(index);
	
}


Ext.ux.RTTSCarousel.prototype.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 = index * this.slideWidth;
        if (!initial) {
            switch (this.transitionType) {
                case 'fade':
                    this.slides[index].setOpacity(0);
                    this.slides[this.activeSlide].stopFx(false).fadeOut({
                        duration: this.transitionDuration / 2,
                        callback: function(){
                            this.els.slidesWrap.setStyle('left', (-1 * offset) + 'px');
                            this.slides[this.activeSlide].setOpacity(1);
                            this.slides[index].fadeIn({
                                duration: this.transitionDuration / 2
                            });
                        },
                        scope: this
                    })
                    break;

                default:
                    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
                    });
                    break;
            }
        }
        else {
			this.els.nav0.addClass('bg-grey');
            this.els.slidesWrap.setStyle('left', '0');
        }

        this.activeSlide = index;
        
		
		//console.log('setSlide '+index);
        this.fireEvent('change', this.slides[index], index);
        this.updateNav(index);
}

Ext.ux.RTTSCarousel.prototype.onChange = function(el, index){
	if(!this.playing){
		this.playTaskBuffer.delay(this.interval*1000);
	}
	//console.log('onchange '+index + ' ' + this.prevIndex);

	var navEl = 'nav'+index;
	var prevNavEl = 'nav'+this.prevIndex;
	
	this.els[prevNavEl].removeClass('bg-grey');
	this.els[navEl].addClass('bg-grey');
	
	this.prevIndex = index;
}

Ext.ux.RTTSCarousel.prototype.updateNav = function(index){
	//console.log('update nav: '+index);
	Ext.ux.RTTSCarousel.superclass.updateNav.apply(this, arguments);
	this.play();
}