/******************************* 展示组件（激活的图片会放大，其他图片就半透明） *****************************************/
Ext.ns('Ext.gzj');
Ext.gzj.Zhanshi = Ext.extend(Ext.util.Observable, {
    transitionDuration: 0.5,     //特效持续时间
    transitionEasing: 'easeOut', //特效效果
	transitionOpacity: 0.6,     //透明度
    itemSelector: 'img',         //项目选择符
	cls: '',                     //容器css样式
	fix: 0,                      //偏移量的补丁
	marginfix: 10,               //外边距的补丁
	maxwidth: 120,               //元素的最大宽度
	maxheight: 120,              //元素的最大高度
	index: 0,                    //开始时激活的第index+1张图片
	//组件的构造方法
    constructor: function(elId, config) {
        config = config || {};
        Ext.apply(this, config);
        Ext.gzj.Zhanshi.superclass.constructor.call(this, config);
        this.component = Ext.get(elId); //获取组件对象
        this.initMarkup();              //初始化组件        
		this.offset = 0;            //偏移量
		this.weizhi = [];
		for(var i=0; i<this.elSize; i++){
			this.weizhi[i]=this.els.item(i).getX();
		}
		if(this.elSize > 0){
			this.scale(this.index);
			this.initEvents();          //初始化事
		}
    },
	//方法：初始化组件
    initMarkup: function() {
        var dh = Ext.DomHelper;		
        this.elSize = 0;                //组件中包含的元素的个数
		//添加容器（用于装要展示的元素）
        this.container = dh.append(this.component, { cls:this.cls }, true);      
        //将滚动的元素放入容器中,并设置容器大小等于所以滚动元素的宽度总和
		this.containerWidth = 10; 
		this.els=this.component.select(this.itemSelector);
		this.pics=this.component.select('dl dt');
		this.wraps=this.component.select('dl .warp');
		for(var i=0; i<this.wraps.getCount(); i++){
			this.wraps.item(i).setOpacity(0.4);
		}
		for(var i=0; i<this.els.getCount(); i++){
			this.els.item(i).appendTo(this.container);
			this.elSize++;
			this.containerWidth=this.containerWidth+this.els.item(i).getWidth()+this.marginfix;			
			this.pics.item(i).setOpacity(this.transitionOpacity);
		}
		this.containerHeight = this.component.getHeight();
        this.container.setStyle({
            width: this.containerWidth + 'px',
            height: this.containerHeight + 'px'
        });
		
//this.container.clip();

    },
	//方法：初始化事件
    initEvents: function() {
		//鼠标进入事件
		for(var i=0; i<this.elSize; i++) {
			this.els.item(i).on('mouseenter', function(ev) {
				var evDom = Ext.getDom(ev.getTarget(this.itemSelector));
				var x = 0;
				for(x; x<this.elSize; x++){
					if(evDom == this.els.item(x).dom)break;
				}
				this.scale(x);
			}, this);
		}
		//前一个按钮的事件
		if(this.preid){
			Ext.fly(this.preid).on('click', function(ev) {       //点击事件
				this.prev();
			}, this);
		}
		//后一个按钮的事件
		if(this.nextid){
			Ext.fly(this.nextid).on('click', function(ev) {      //点击事件
				this.next();
			}, this);
		}
    },
	//方法：显示并放大图片
	scale: function(x) {
		if(this.els.item(x).hasClass('on'))return;
		for(var i=0; i<this.elSize; i++) {
			this.pics.item(i).setOpacity(this.transitionOpacity);
			this.els.item(i).clearPositioning();
			this.els.item(i).position('relative',0);
		}
		if(x==0){
			this.els.item(x).setLeft(this.fix);
		}
		if(x==this.elSize-1){
			this.els.item(x).setLeft(-this.fix);
		}
		this.pics.item(x).setOpacity(1);
		this.els.item(x).radioClass('on');
		/*this.els.item(x).stopFx().fadeIn({
			easing: this.transitionEasing,
			duration: this.transitionDuration
		});*/
	}
});