/*
Slider source


*/


TJ.comp.ContentSlider = Ext.extend(Ext.util.Observable, {
	slideSelector: 'ol.slider-slides',
	thumbSelector: 'ol.slider-thumbs',
	captionSelector: 'ol.slider-captions',
	wrap: true,
	interval: 3,
	freezeOnHover: true,
	autoPlay: true,
	transitionType: 'fade',
	transitionDuration: 1,
	width:	800,
	height: 600,
	thumbWidth: 120,
	thumbHeight: 90,
	disabledThumbnail: 80,
	activeSlide: -1,
	constructor: function (el,config) {
		config = config || {};
		Ext.apply(this,config);

		TJ.comp.ContentSlider.superclass.constructor.call(this,config);

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


		this.el = Ext.get(el);

		this.el.setStyle('position','relative');

		this.els=[];

		this.initMarkup();

		this.initEvents();

		if(this.sliderSize > 0) {
			this.refresh();
		}

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

		this.sliderSize = 0;
		this.slides=new Array();
		this.thumbs=new Array();
		this.captions=new Array();



		
		this.els.slides = this.el.select(this.slideSelector,true).first();

		this.els.wrap=this.els.slides.wrap({cls: 'slider-wrap'});

		this.els.wrap.setStyle('width',this.width + 'px');
		this.els.wrap.setStyle('height',this.height+ 'px');


		var slides  = this.els.slides.select('li',true);

		slides.addClass('slider-slide');


		slides.setStyle({	position: 'absolute',
							top: 0,
							left: 0 });


		
		slides.each(function(item) {
			this.slides.push(item);
		},this);




		this.els.thumbs = this.el.select(this.thumbSelector,true);
		
//		console.log(this.els.thumbs);
	
		
		if(this.els.thumbs.getCount() === 0){			// thumbnails do not exist
			this.els.thumbs = this.el.createChild({tag : 'ol', cls: 'slider-tabs'});
		}
		else
			this.els.thumbs=this.els.thumbs.first();
		
		var thumbs = this.els.thumbs.select('li',true);


		var fullThumbs=true;
		if(thumbs.getCount() < slides.getCount()) {
			fullThumbs=false;
			for(var i = thumbs.getCount(); i < slides.getCount();i++){
					this.els.thumbs.createChild({tag:'li',html: '&#x25CF;'});		// used to be:  (i+1).toString()

			}
		}
		thumbs = this.els.thumbs.select('li',true);


		if(fullThumbs) 
			thumbs.setStyle({width: this.thumbWidth+'px',height: this.thumbHeight+'px'});
		var thumbWidth=0;

		thumbs.each(function(item) {
			thumbWidth+=item.getWidth();
			Ext.fly(item).set({rel:this.thumbs.length});
			this.thumbs.push(item);
		},this);

		if(fullThumbs) 
			this.els.thumbs.setStyle({width:thumbWidth+'px'});
// Captions

		this.els.captions = this.el.select(this.captionSelector,true);
//		this.els.captions= this.els.captions.first();		
		var captions = this.els.captions.select('> li',true);
//		console.log('lis',captions);

		captions = this.el.select (this.captionSelector + ' li',true);

//		console.log('lis2',captions);

		if(this.els.captions.getCount()){
//			var captions = this.els.captions.select('li',true);
//			console.log('captions',captions);
//			captions.setStyle('display','none');
			captions.each(function(item){
				this.captions.push(item);
				item.setStyle('display','none');
//				console.log('add',this.captions,item);
//				Ext.fly(item).set({rel:this.captions.length});

			},this);
			captions.first().setStyle('display','block');
		}

		// Hover Navigation over image.
		/*
		this.els.navigation = dh.append(this.els.wrap, {cls :'slider-nav'},true);

		this.els.navigation.setStyle('width',this.width + 'px');
		this.els.navigation.setStyle('height',this.height + 'px');
		*/

//		console.log(this.els.slides.getLeft());
		this.els.navPrev = dh.append(this.els.wrap, {cls :'slider-navPrev', tag:'a',html:"Prev"},true);
		this.els.navNext = dh.append(this.els.wrap, {cls :'slider-navNext', tag:'a',html:"Next"},true);

//		this.els.navigation.setStyle('width',this.width + 'px');
//		this.els.navigation.setStyle('left',((this.el.getWidth()-this.width)/2) + 'px');

//		this.els.navigation.setStyle('bottom',( (this.els.navPrev.getHeight()+ this.els.thumbs.getHeight() +this.els.thumbs.getMargins('bt'))/2) + 'px');

		// Custom Navigation
		this.els.customNav = dh.append(this.el, {cls :'slider-customNav'},true);
		this.els.customPrev = dh.append(this.els.customNav, {cls :'slider-customPrev', tag:'a',html:"Previous"},true);
		this.els.customNext = dh.append(this.els.customNav, {cls :'slider-customNext', tag:'a',html:"Next"},true);


		this.els.prevButtons = new Ext.CompositeElement();
		this.els.prevButtons.add(this.els.customPrev);
		this.els.prevButtons.add(this.els.navPrev);

		this.els.nextButtons = new Ext.CompositeElement();
		this.els.nextButtons.add(this.els.customNext);
		this.els.nextButtons.add(this.els.navNext);

//		console.log('prev',this.prevButtons);

		
		this.sliderSize=this.slides.length;

	},
	refresh: function(){
		this.sliderSize=this.slides.length;
		this.setSlide(0,true);
		return this;
	},
	initEvents: function() {

		this.els.prevButtons.on('click',function(ev){
			ev.preventDefault();
			var target=ev.getTarget();
			target.blur();
			if(Ext.fly(target).hasClass('disabled')) return;
			this.prev();
		},this);

		this.els.nextButtons.on('click',function(ev){

			ev.preventDefault();
			var target=ev.getTarget();
			target.blur();
			if(Ext.fly(target).hasClass('disabled')) return;
			this.next();
		},this);

		this.els.thumbs.on('click',function(ev,li){
				ev.preventDefault();
				var target=ev.getTarget();
				target.blur();
				if(! target.getAttribute('rel')) {
					target = Ext.fly(target).findParent('li');
				}
				if(target && target.getAttribute('rel'))
					this.setSlide(target.getAttribute('rel'));
		},this);

		if(this.freezeOnHover) {
			this.el.hover(
				function(e){
//					console.log('over in');
					if(this.playing){
						this.fireEvent('freeze',this.slides[this.activeSlide]);
						Ext.TaskMgr.stop(this.playTask);
					}

				},
				function(e){
//					console.log('over out');
					if(this.playing){
						this.fireEvent('unfreeze',this.slides[this.activeSlide]);
//						Ext.TaskMgr.start(this.playTask);
			            this.playTaskBuffer.delay(this.interval*1000/2);

					}
				},
				this);
		}

        if(this.interval && this.autoPlay) {
            this.play();
        }



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


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



	},
	play: function(){
        if(!this.playing) {
            this.playTask = this.playTask || {
                run: function() {
                    this.playing = true;
                    this.setSlide(this.activeSlide + 1);
                },
                interval: this.interval*1000,
                scope: this
            };

            this.playTaskBuffer = this.playTaskBuffer || new Ext.util.DelayedTask(function() {
                Ext.TaskMgr.start(this.playTask);
            }, this);

            this.playTaskBuffer.delay(this.interval*1000);
            this.playing = true;
//            if(this.showPlayButton) {
  //              this.els.navPlay.addClass('ux-carousel-playing');
    //        }
            this.fireEvent('play');
        }        
        return this;
	},
	setSlide: function(index,initial){
		index=index*1;		// ensure that this is a number
		if(! this.wrap && ! this.slides[index]) {
			return;
		}
		if(this.wrap) {
			index = ((index + this.sliderSize) % (this.sliderSize));
		}
		if(!this.slides[index]) {
			return;
		}

		if(index==this.activeSlide)
			return;

		if(!initial) {	// transition here
			switch(this.transitionType){
				case 'fade':
					if(this.slides[index])
						this.slides[index].fadeIn({ duration: this.transitionDuration, useDisplay: true});
					if(this.slides[this.activeSlide])
						this.slides[this.activeSlide].fadeOut({duration: this.transitionDuration, useDisplay: true});


				break;
				case 'slide vertical':
				// position new slide 'index'
//				console.log(index,this.activeSlide);

				if(index > this.activeSlide)  {
					this.slides[this.activeSlide].shift({
						duration: this.transitionDuration,
						top:		-this.height,
						easing: 'easeOut'});

					this.slides[index].setStyle('top',this.height + 'px');
					this.slides[index].setStyle('display','block');
		
					this.slides[index].shift({
						duration: this.transitionDuration,
						top:		0,
						easing: 'easeOut'});
				} else {
					this.slides[this.activeSlide].shift({
						duration: this.transitionDuration,
						top:		this.height,
						easing: 'easeOut'});

					this.slides[index].setStyle('top',-this.height + 'px');
					this.slides[index].setStyle('display','block');

					this.slides[index].shift({
						duration: this.transitionDuration,
						top:		0,
						easing: 'easeOut'});
				}


				break;
				case 'slide horizontal':
				// position new slide 'index'
//				console.log(index,this.activeSlide);

				if(index > this.activeSlide)  {
					this.slides[this.activeSlide].shift({
						duration: this.transitionDuration,
						left:		-this.width,
						easing: 'easeOut'});

					this.slides[index].setStyle('left',this.width + 'px');
					this.slides[index].setStyle('display','block');
		
					this.slides[index].shift({
						duration: this.transitionDuration,
						left:		0,
						easing: 'easeOut'});
				} else {
					this.slides[this.activeSlide].shift({
						duration: this.transitionDuration,
						left:		this.width,
						easing: 'easeOut'});

					this.slides[index].setStyle('left',-this.width + 'px');
					this.slides[index].setStyle('display','block');

					this.slides[index].shift({
						duration: this.transitionDuration,
						left:		0,
						easing: 'easeOut'});
				}


				break;
				default:
					this.slides[this.activeSlide].setStyle('display','none');
					this.slides[index].setStyle('display','block');
				break;


			}
		} else {
			this.slides[index].setStyle('display','block');
		}
		if(this.captions.length){
			if(initial) {	// transition here	
					if (this.captions[index]) {
						this.captions[index].setStyle('display','block');
					}

			}else {
				this.captions[this.activeSlide].setStyle('display','none');
				this.captions[index].setStyle('display','block');

//				this.captions[index].fadeIn({ duration: this.transitionDuration});
//				if(this.activeSlide)
//					this.captions[this.activeSlide].fadeOut({duration: this.transitionDuration, useDisplay: true});

			
			}
		}

		this.activeSlide=index;
		this.updateNav();

	},
	updateNav: function(){
//		console.log('updatenav',this.activeSlide);
		this.els.prevButtons.removeClass('disabled');
		this.els.nextButtons.removeClass('disabled');

		if(!this.wrap) {
			if(this.activeSlide===0)
				this.els.prevButtons.addClass('disabled');
		
			if(this.activeSlide=== this.sliderSize-1)
				this.els.nextButtons.addClass('disabled');
		}

		for(var x=0; x < this.thumbs.length; x++) {
			var img=Ext.get(this.thumbs[x]).first();
			if(x==this.activeSlide) {
				this.thumbs[x].addClass('active');
				if(img) {

					img.setStyle({	width: this.thumbWidth + 'px',
									height: this.thumbHeight + 'px',
									padding: 0});

				}

			}
			else {
				this.thumbs[x].removeClass('active');
				if(img) {
					img.setStyle({	width: (this.thumbWidth*this.disabledThumbnail/100) + 'px',
									height: (this.thumbHeight*this.disabledThumbnail/100) + 'px',
									padding: String.format("{0}px {1}px",(this.thumbHeight * (100-this.disabledThumbnail)/200),(this.thumbWidth * (100-this.disabledThumbnail)/200))});
				}

			}
		}
	}
});