/************************************ 滑动组件 *********************************************/
Ext.ns('Ext.gzj');
Ext.gzj.Carousel = Ext.extend(Ext.util.Observable, {
    interval: 4,                 //切换时间
    transitionDuration: 1.5,     //特效持续时间
    transitionEasing: 'easeOut', //特效效果
	transitionOpacity: 1,        //透明度
    itemSelector: 'img',         //项目选择符
	cls: '',                     //容器css样式
	fix: 0,                      //偏移量的补丁
	//组件的构造方法
    constructor: function(elId, config) {
        config = config || {};
        Ext.apply(this, config);
        Ext.gzj.Carousel.superclass.constructor.call(this, config);
        this.el = Ext.get(elId); //获取组件对象
        this.initMarkup();       //初始化组件        
		//滑动元素的个数大于0，并且滑动元素的总宽度大于组件的宽度时，初始化事件
        if(this.carouselSize > 0) {
			if(this.slideWidth>this.el.getWidth()+10){
				this.weizhi = [];
				for(var i=0; i<this.carouselSize; i++){
					this.weizhi[i]=this.els.item(i).getX();
				}
				this.initEvents();  //初始化事
			}
        }
    },
	//方法：初始化组件
    initMarkup: function() {
        var dh = Ext.DomHelper;
		this.index = 0;
		this.offset = 0;             //偏移量
        this.carouselSize = 0;       //滑动元素的个数
		//添加容器（用于装滚动的元素）
        this.el.slides = dh.append(this.el, { cls:this.cls }, true);      
        //将滚动的元素放入容器中,并设置容器大小等于所以滚动元素的宽度总和
		this.slideWidth = 10; 
		this.els=this.el.select(this.itemSelector);
		for(var i=0; i<this.els.getCount(); i++){
			this.els.item(i).appendTo(this.el.slides);
			this.carouselSize++;
			this.slideWidth=this.slideWidth+this.els.item(i).getWidth()+this.fix;
		}
		this.slideHeight = this.el.getHeight(true);
        this.el.slides.setStyle({
            width: this.slideWidth + 'px',
            height: this.slideHeight + 'px'
        });
        this.el.clip();
    },
	//方法：初始化事件
    initEvents: function() {
		//自动播放事件
		this.duration = this.transitionDuration;
		this.playing = false;
		this.playTask = this.playTask || {
			run: function() {
				this.sliding(1);
			},
			interval: this.interval*1000,
			scope: this
		};
		this.playTaskBuffer = this.playTaskBuffer || new Ext.util.DelayedTask(function() {
			Ext.TaskMgr.start(this.playTask);
		}, this);
		this.play();		
		//前一个按钮地事件
		if(this.preid){
			Ext.fly(this.preid).on('click', function(ev) {   //点击事件
				this.pause();
				this.prev();
			}, this);
			Ext.fly(this.preid).on('mouseleave', function(ev) {  //鼠标离开事件				
				this.play();
			}, this);
		}
		//后一个按钮的事件
		if(this.nextid){
			Ext.fly(this.nextid).on('click', function(ev) {   //点击事件
				this.pause();
				this.next();
			}, this);
			Ext.fly(this.nextid).on('mouseleave', function(ev) {   //鼠标离开事件
				this.play();
			}, this);
		}
    },
    //方法：播放
    play: function() {
		if(this.playing) return;
		this.transitionDuration = this.duration;        
		this.playTaskBuffer.delay(this.interval*1000);
		this.playing = true;
	},
	//方法：暂停
    pause: function() {
		if(!this.playing) return;
        Ext.TaskMgr.stop(this.playTask);
		this.playing = false;
    },
	//方法：前一个
    prev: function() {		
		this.prevTaskBuffer = this.prevTaskBuffer || new Ext.util.DelayedTask(function() {
			this.sliding(1);
		}, this);
		this.transitionDuration=0.5;
		this.prevTaskBuffer.delay(this.transitionDuration*1000);
    },
    //方法：后一个
    next: function() {
        this.nextTaskBuffer = this.nextTaskBuffer || new Ext.util.DelayedTask(function() {
			this.sliding(-1);
		}, this);
		this.transitionDuration=0.5;
		this.nextTaskBuffer.delay(this.transitionDuration*1000);
    },   
    //方法：滑动
    sliding: function(direct) {
		if(this.index>this.carouselSize-1){
			this.index=0;
		}
		if(this.index<0){
			this.index=this.carouselSize-1;
		}
		this.offset=this.els.item(this.index).getWidth()*direct;
		var lastX=0;
		for(var i=0, x=this.index; i<this.carouselSize; i++, x++){
			if(x>this.carouselSize-1){
				x=0;
			}			
			var offsets=this.weizhi[x]-this.offset-this.fix;			
			if(i==this.carouselSize-2){
				lastX=this.weizhi[x];
			}
			if(i==this.carouselSize-1){
				var temp=x-1;
				if(temp<0){
					temp=this.carouselSize-1;
				}
				if(direct==-1){
					offsets=this.weizhi[this.index]+this.offset;
				}else{
					offsets=lastX+this.els.item(temp).getWidth()-this.offset;
				}
				this.els.item(x).setX(offsets+this.offset);
			}
			this.weizhi[x]=offsets;
			this.els.item(x).syncFx().shift({
				x: offsets,
				easing: this.transitionEasing,
				duration: this.transitionDuration,
				opacity: this.transitionOpacity
			});				
		}
		this.index=this.index+direct;
    }
});