/************************************ 横向滚动组件 *********************************************/
Ext.ns('Ext.gzj');
Ext.gzj.scrollx = Ext.extend(Ext.util.Observable, {
	interval: 3,                  //切换时间
    transitionDuration: 1.5,      //特效持续时间
    transitionEasing: 'easeOut',  //运动特效类型
	transitionOpacity: 1,         //透明度
    itemSelector: '.list_v',      //项目选择符
	fix:22,                       //偏移量的外边距补丁
	index: 1,
	//组件的构造方法
    constructor: function(elId, config) {
        config = config || {};
        Ext.apply(this, config);
        Ext.gzj.scrollx.superclass.constructor.call(this, config);
		this.component = Ext.get(elId);     //获取组件对象
        this.initMarkup();                  //初始化组件
		if(this.containerWidth>this.componentWidth) {
            this.initEvents();              //初始化事件
        }
    },
	//方法：初始化组件
    initMarkup: function() {
        var dh = Ext.DomHelper;
		this.componentWidth = this.component.getWidth();
		this.componentHeight = this.component.getHeight();
		/******************************* 滚动栏目的初始化 ***********************************/
        this.container = dh.append(this.component, {}, true);      //在组件中添加容器（用于装滚动的元素）             
		this.els=this.component.select(this.itemSelector);
		this.size=this.els.getCount();                             //元素（可以是图片，或其他html元素）的个数
		//将滚动的元素放入容器中,并设置容器大小等于所以滚动元素的宽度总和
		this.containerWidth = 0;    
		for(var i=0; i<this.size; i++){
			this.els.item(i).appendTo(this.container);
			this.containerWidth=this.containerWidth+this.els.item(i).getWidth()+this.fix;
		}
		this.containerHeight = this.component.getHeight();
        this.container.setStyle({
            width: this.containerWidth + 'px',
            height: this.containerHeight + 'px'
        });
		/******************************* 当前选中元素的初始化 ***********************************/
		for(var i=0; i<this.size; i++){
			this.els.item(i).setOpacity(this.transitionOpacity);
		}
		this.els.item(this.index).radioClass('on');
		this.els.item(this.index).setOpacity(1);
    },
	//方法：初始化事件
    initEvents: function() {
		//播放事件
		this.playing = true;
        this.playTask = this.playTask || {
			run: function() {
				this.play(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.startBuffer = this.startBuffer || new Ext.util.DelayedTask(function() {
			this.playing = true;
		}, this);
		this.component.parent().on('mouseenter', function(ev) {
			this.startBuffer.cancel();
			this.playing = false;
		}, this);
		this.component.parent().on('mouseleave', function(ev) {
			this.startBuffer.delay(this.interval*500);
		}, this);
		if(this.previd){    //前一个按钮地事件
			Ext.fly(this.previd).on('click', function(ev) {
				this.play(-1, true);
			}, this);
		}
		if(this.nextid){    //后一个按钮的事
			Ext.fly(this.nextid).on('click', function(ev) {
				this.play(1, true);
			}, this);
		}
    },
	//方法：控制自动播放
    play: function(direction, move) {
		if(!this.playing&&!move)return;
		this.index=this.index + direction;
		//对当前元素的下标进行判断
		if(this.index>this.size-1){
			this.index=0;
		}
		else if(this.index<0){
			this.index=this.size-1;
		}
		for(var i=0; i<this.size; i++){
			this.els.item(i).setOpacity(this.transitionOpacity);
		}
		this.els.item(this.index).radioClass('on');
		this.els.item(this.index).setOpacity(1);
		//滑动小图片栏目
		var slild = this.container;
		this.offset = (this.els.item(this.index).getWidth() + this.fix)*(-1);
		if(direction==1){
			slild.animate({
				marginLeft: { to:this.offset, from:0 }
				}, 1, function(){
				slild.first().insertAfter(slild.last());
				slild.setStyle({ marginLeft:0 });
			});
		}else if(direction==-1){
			slild.last().insertBefore(slild.first());
			slild.animate({
				marginLeft: { to:0, from:this.offset }
			}, 1);
		}
    }
});