// JavaScript Document
Ext.ns('Ext.ux');
Ext.ux.BandeauItems = Ext.extend(Ext.util.Observable, {
    interval: 5,
    transitionDuration: 2,
    transitionType: 'fade',
    transitionEasing: 'easeOut',
    itemSelector: 'img',
	activeSlide: 0,
	incSlide:0,
	firstSlide:0,
	lastSlide:0,
    autoPlay: false,
    showPlayButton: false,
    pauseOnNavigate: false,
    wrap: false,
    freezeOnHover: true,
    navigationOnHover: false,
    hideNavigation: false,
	loopAnimation:0,
    
	
	width: null,
    height: null,
	classSlide:'ux-bandeau-slide',

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

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

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

        this.el = Ext.get(elId);
        this.slides = this.els = [];
        
        if(this.autoPlay || this.showPlayButton) {
            this.wrap = true;
        };

        if(this.autoPlay && typeof config.showPlayButton === 'undefined') {
            this.showPlayButton = true;
        }

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

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

    initMarkup: function() {
        var dh = Ext.DomHelper;
        
        this.BandeauItemsSize = 0;
	
        var items = this.el.select(this.itemSelector);
		this.els.navigation = dh.append(this.el, {cls: 'ux-bandeau-nav'}, true).hide(); 
        this.els.container = dh.append(this.el, {cls: 'ux-bandeau-container'}, true);
        
		this.els.slidesWrap = dh.append(this.els.container, {cls: 'ux-bandeau-slides-wrap'}, true);
          
		this.els.navNext = dh.append(this.els.navigation, {tag: 'a', href: '#', cls: 'ux-bandeau-nav-next'}, true);
        if(this.showPlayButton) {
            this.els.navPlay = dh.append(this.els.navigation, {tag: 'a', href: '#', cls: 'ux-bandeau-nav-play'}, true)
        }
        this.els.navPrev = dh.append(this.els.navigation, {tag: 'a', href: '#', cls: 'ux-bandeau-nav-prev'}, true);

        // set the dimensions of the container
        this.slideWidth = this.width || this.el.getWidth(true);
		var navWidth=(this.els.navNext.getWidth(true)*2);
		this.slideWidth=(this.slideWidth-navWidth)+4;
        this.slideHeight = this.height || this.el.getHeight(true);
        this.els.container.setStyle({
            width: this.slideWidth + 'px',
            height: this.slideHeight + 'px'
        });
   
       var MaxWidth=0;
	   this.incSlide=0
	   var plusLarge=0;
        items.appendTo(this.els.slidesWrap).each(function(item) {
            item = item.wrap({cls: this.classSlide});
		    this.slides.push(item);
        	item.setHeight(this.slideHeight + 'px');
			if (item.getWidth()>plusLarge) plusLarge=item.getWidth();
        }, this);
		this.incSlide=Math.round(this.slideWidth/plusLarge);
	
		//Ext.each(this.slides,function(item) {item.setWidth(plusLarge+ 'px')});
		
		
		
        this.BandeauItemsSize = this.slides.length;
        this.els.navigation.setWidth((this.slideWidth+navWidth)-4 + 'px').setHeight(this.slideHeight + 'px').setStyle('position','absolute');
		if(this.navigationOnHover) {
            this.els.navigation.setStyle('top', (-1*this.els.navigation.getHeight()) + 'px');
        }
        this.el.clip();
	
    },

    initEvents: function() {
		
        this.els.navPrev.on('click', function(ev) {
            ev.preventDefault();
            var target = ev.getTarget();
            target.blur();            
            if(Ext.fly(target).hasClass('ux-bandeau-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-bandeau-nav-disabled')) return;
            this.next();
        }, this);

        if(this.showPlayButton) {
            this.els.navPlay.on('click', function(ev){
                ev.preventDefault();
                ev.getTarget().blur();
                if(this.playing) {
                    this.pause();
                }
                else {
                    this.play();
                }
            }, this);
        };
		
        if(this.freezeOnHover) {
            this.els.navigation.on('mouseenter', function(){
                if(this.playing) {
                    this.fireEvent('freeze', this.slides[this.activeSlide]);
                    Ext.TaskMgr.stop(this.playTask);
                }
            }, this);
            this.els.navigation.on('mouseleave', function(){
                if(this.playing) {
                    this.fireEvent('unfreeze', this.slides[this.activeSlide]);
                    Ext.TaskMgr.start(this.playTask);
                }
            }, this, {buffer: (this.interval/2)*1000});
        };

        if(this.navigationOnHover) {
            this.els.container.on('mouseenter', function(){
                if(!this.navigationShown) {
                    this.navigationShown = true;
                    this.els.navigation.stopFx(false).shift({
                        y: this.els.container.getY(),
                        duration: this.transitionDuration
                    })
                }
            }, this);

            this.els.container.on('mouseleave', function(){
                if(this.navigationShown) {
                    this.navigationShown = false;
                    this.els.navigation.stopFx(false).shift({
                        y: this.els.navigation.getHeight() - this.els.container.getY(),
                        duration: this.transitionDuration
                    })
                }
            }, this);
        }

        if(this.interval && this.autoPlay) {
            this.play();
        };
    },
	
    prev: function() {
        if (this.fireEvent('beforeprev') === false) {
            return;
        }
        if(this.pauseOnNavigate) {
            this.pause();
        }
		//var inc=Math.round(this.activeSlide/this.incSlide)-1;
		
        //this.setSlide((inc*this.incSlide)-this.midleSlide, true);
		if(this.activeSlide>this.firstSlide){
		this.activeSlide=this.firstSlide;
		//this.lastSlide=this.firstSlide;
		//this.firstSlide=this.firstSlide-this.incSlide;
		this.firstSlide=this.activeSlide-this.incSlide;
		this.lastSlide=(this.activeSlide+this.incSlide);
		}
		
		this.setSlide(this.activeSlide-1, true);
        this.fireEvent('prev', this.activeSlide);        
        return this; 
    },
    
    next: function() {
        if(this.fireEvent('beforenext') === false) {
            return;
        }
        if(this.pauseOnNavigate) {
            this.pause();
        }
      //  var inc=Math.round(this.activeSlide/this.incSlide)+1;
      //  
		if(this.activeSlide<this.lastSlide){
			this.activeSlide=this.lastSlide;
			this.firstSlide=this.activeSlide-this.incSlide;
			this.lastSlide=(this.activeSlide+this.incSlide);
		}
		this.setSlide(this.activeSlide+1, true);
        this.fireEvent('next', this.activeSlide);        
        return this;         
    },

    play: function() {
        if(!this.playing) {
            this.playTask = this.playTask || {
                run: function() {
					this.fireEvent('play');
                    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-bandeau-playing');
            }
            this.fireEvent('play');
        }        
        return this;
    },

    pause: function() {
        if(this.playing) {
            Ext.TaskMgr.stop(this.playTask);
            this.playTaskBuffer.cancel();
            this.playing = false;
            if(this.showPlayButton) {
                this.els.navPlay.removeClass('ux-bandeau-playing');
            }
            this.fireEvent('pause');
        }        
        return this;
    },
        
    clear: function() {
        this.els.slidesWrap.update('');
        this.slides = [];
        this.BandeauItemsSize = 0;
        this.pause();
        return this;
    },
    
    add: function(el, refresh) {
        var item = Ext.fly(el).appendTo(this.els.slidesWrap).wrap({cls: this.classSlide});
        item.setWidth(this.slideWidth + 'px').setHeight(this.slideHeight + 'px');
        this.slides.push(item);                        
        if(refresh) {
            this.refresh();
        }        
        return this;
    },
    
    refresh: function() {
        this.BandeauItemsSize = this.slides.length;
        this.els.slidesWrap.setWidth((this.slideWidth * this.BandeauItemsSize) + 'px');
        if(this.BandeauItemsSize > 0) {
           if(!this.hideNavigation) this.els.navigation.show();
            this.activeSlide = 0;//this.incSlide;
			this.firstSlide=0;
			this.lastSlide=this.incSlide+1;
			  this.updateNav();
        }
		                
        return this;        
    },

	   
    setSlide: function(index, bloc) {
	
		
		if (!bloc){
		this.firstSlide++;
		this.lastSlide++;
		if(index < 0) {
                index = this.BandeauItemsSize-1;
				
        }else if(index > this.BandeauItemsSize-1) {
                index = 0;
				this.firstSlide=0;
				this.lastSlide=this.incSlide+1;
         }else if(index == this.incSlide) {
                index = this.incSlide+2;
         }else if(index < this.incSlide) {
                index = index+this.incSlide;
         }
		}else{
		if(index < 0) {
                index = 0;
        }else if(index >= this.BandeauItemsSize) {
                index = this.BandeauItemsSize-1;
         }else if(index == this.incSlide) {
             //   index = this.incSlide+2;
         }else if(index < this.incSlide) {
              //  index = index+this.incSlide;
         }
		}
		 
        if(!this.slides[index]) {
           return;
        }
		
       this.slides[index].scrollIntoView(this.els.container,true,true);
	
		
        this.activeSlide = index;
        this.updateNav();
        this.fireEvent('change', this.slides[index], index);
    },

    updateNav: function() {
        this.els.navPrev.removeClass('ux-bandeau-nav-disabled');
        this.els.navNext.removeClass('ux-bandeau-nav-disabled');
		//console.log(this.activeSlide);
       // if(!this.wrap) {
            if(this.activeSlide < 1) {
				this.els.navPrev.addClass('ux-bandeau-nav-disabled');
			}
            if(this.activeSlide === this.BandeauItemsSize-1) {
                this.els.navNext.addClass('ux-bandeau-nav-disabled');
				
            }
        //}
		//if(this.activeSlide<this.lastSlide){
	
		//}
		//if(this.activeSlide<this.lastSlide){
	//		this.firstSlide=this.activeSlide-this.incSlide;
	//		this.lastSlide=(this.activeSlide+this.incSlide);
	//	}
    },
	updateBG: function(index) {
        var bg=this.slides[index].dom.childNodes[0].src;
		if (bg) this.els.container.setStyle('background-image', 'url('+bg+')');
    }
	
});