/************************************ flash组件 *********************************************/
Ext.ns('Ext.gzj');
Ext.gzj.JsFlash = Ext.extend(Ext.util.Observable, {
	interval: 5,                  //切换时间
    transitionDuration: 2,        //特效持续时间
    transitionEasing: 'easeOut',  //运动特效类型
    itemSelector: 'img',          //项目选择符
	texiaotype: false,            //规定特性类型
	//组件的构造方法
    constructor: function(elId, config) {
        config = config || {};
        Ext.apply(this, config);
        Ext.gzj.JsFlash.superclass.constructor.call(this, config);
		this.component = Ext.get(elId);      //获取组件对象
        this.initMarkup();       //初始化组件
		if(this.size > 1) {
			this.before = 0;
			this.index = 1;
			this.flashwarp.set({
				href: this.els.item(0).getAttribute('href')
			});
			this.numbers[0].radioClass('on');
			this.title.dom.innerHTML=this.els.item(0).getAttribute('title');
			for(var i=0; i<this.size; i++){
				this.play(true);
			}
            this.initEvents();   //初始化事件
        }	
    },
	//方法：初始化组件
    initMarkup: function() {
        var dh = Ext.DomHelper;		
        this.size = 0;           //元素（可以是图片，或其他html元素）的个数
		this.els=this.component.select(this.itemSelector);
		this.size=this.els.getCount();
		this.numbers = [ ];
		this.containerWidth = this.component.getWidth();
		this.containerHeight = this.component.getHeight();
		//添加容器（用于装滚动的元素）
        this.container = dh.append(this.component, {}, true);
		this.container.setStyle({
			position: 'relative',
            width: this.containerWidth + 'px',
            height: this.containerHeight + 'px',
			overflow: 'hidden'
        });
		//给flash套上一个外壳
		this.flashwarp = dh.append(this.container, {
			tag: 'a',
			cls: 'flashwarp'
		}, this);
		this.flashwarp.setStyle({
			position: 'absolute',
			display: 'block',
            width: this.containerWidth + 'px',
            height: this.containerHeight + 'px'
        });
		//给flash添加标题栏
		this.titlebar = dh.append(this.container, {
			tag: 'p',
			cls: 'flash_titlewrap'
		}, this);
		this.titlebar.setStyle({
            opacity: 0.5
        });		
		this.title = dh.append(this.container, {
			tag: 'p',
			cls: 'flash_title'
		}, this);
		//给flash添加按钮栏
		this.numberbar = dh.append(this.container, {
			tag: 'p',
			cls: 'numberbar'
		}, this);
        //将滚动的元素放入容器中,并设置容器大小等于所以滚动元素的宽度总和		
		for(var i=0; i<this.size; i++){
			this.els.item(i).appendTo(this.container);
			this.els.item(i).position('absolute', this.size-i, 0, 0);
			this.numbers[i]=dh.append(this.numberbar, {
				tag: 'a',
				html: i+1,
				href: 'javascript:void(0)'
			}, this);
		} 
    },
	//方法：初始化事件
    initEvents: function() {
		//播放事件
        this.playTask = this.playTask || {
			run: function() {
				this.play();
			},
			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);
		//点击按钮事件
		for(var i=0; i<this.size; i++){
			this.numbers[i].on('click', function(ev) {
				ev.preventDefault();
				ev.getTarget().blur();
				var eltarget=Ext.fly(ev.getTarget());
				if(eltarget.hasClass('on')) return;
				this.change(eltarget.dom.innerHTML);
			}, this);
		}
    },
	//方法：切换画面
    change: function(x) {
		Ext.TaskMgr.stop(this.playTask);
		this.index=x-1;
		Ext.TaskMgr.start(this.playTask);
	},
	//方法：控制自动播放
    play: function(initial) {
		if(this.before>this.size-1){   //对要退出元素的下标进行判断
			this.before=0;
		}
		if(this.index>this.size-1){    //对要进入元素的下标进行判断
			this.index=0;
		}
		//将要退出的元素设为最上层，要进入的元素设为第二层，其他元素设为下层		
		for(var i=0; i<this.size; i++){
			if(i==this.before){
				this.els.item(i).position('absolute',3,0,0);
				this.els.item(i).show();
				continue;
			}
			if(i==this.index){				
				this.els.item(i).position('absolute',2,0,0);
				this.els.item(i).show();
				continue;
			}
			this.els.item(i).position('absolute',1,0,0);
			this.els.item(i).hide();
		}
		var num=this.texiaotype;
		if(initial){
			num=0;
		}else if(!num){
			num=Math.round(Math.random()*7);
		}		
		this.exit(this.before, num);  //对要退出的元素进行操作
		this.enter(this.index, num);  //对要进入的元素进行操作
		this.before=this.index;
		this.index++;
    },
	//方法：换出时的特效
	exit: function(x,num) {
		switch (num) {
			case 1:
				this.els.item(x).stopFx().ghost('b',{
					easing: 'bounceOut',
					duration: this.transitionDuration
				});
				break;
			case 2:
				this.els.item(x).stopFx().ghost('tr',{
					easing: 'backBoth',
					duration: this.transitionDuration
				});
				break;					
			case 3:
				this.els.item(x).stopFx().slideOut('l',{
					easing: this.transitionEasing,
					duration: this.transitionDuration
				});
				break;
			case 4:
				this.els.item(x).stopFx().slideOut('r',{
					easing: this.transitionEasing,
					duration: this.transitionDuration
				});
				break;
			case 5:
				this.els.item(x).stopFx().slideOut('t',{
					easing: this.transitionEasing,
					duration: this.transitionDuration
				});
				break;
			case 6:
				this.els.item(x).stopFx().fadeOut({
					easing: this.transitionEasing,
					duration: 1
				});
				break;
			case 7:
				this.els.item(x).stopFx().switchOff({
					easing: this.transitionEasing,
					duration: 1
				});
				break;
			default:
				this.els.item(x).stopFx().fadeOut({
					easing: this.transitionEasing,
					duration: 1
				});
		}
	},
	//方法：换入时的特效
	enter: function(x,num) {
		switch (num) {
			case 1:			   
				this.els.item(x).stopFx().slideIn('t',{
					easing: 'bounceOut',
					duration: this.transitionDuration
				});
				break;
			case 2:
				this.els.item(x).stopFx().slideIn('tr',{
					easing: 'backOut',
					duration: this.transitionDuration
				});
				break;
			case 3:
				this.els.item(x).stopFx().slideIn('r',{
					easing: this.transitionEasing,
					duration: this.transitionDuration
				});
				break;
			case 4:
				this.els.item(x).stopFx().slideIn('l',{
					easing: this.transitionEasing,
					duration: this.transitionDuration
				});
				break;
			case 5:
				this.els.item(x).stopFx().slideIn('b',{
					easing: this.transitionEasing,
					duration: this.transitionDuration
				});
				break;
			default:
				this.els.item(x).stopFx().fadeIn({
					duration: this.transitionDuration
				});
		}
		this.numbers[x].radioClass('on');     //更改当前按钮样式
		this.flashwarp.set({                  //将外壳的链接地址设为进入元素的链接地址
			href: this.els.item(x).getAttribute('href')
		});
		this.title.dom.innerHTML=this.els.item(x).getAttribute('title');  //更改当前标题
	}
});