Ext.ns('Ext.gzj');
Ext.gzj.Lightbox1 = Ext.extend(Ext.util.Observable, {
    images: [],
    activeImage: '',
    selectors: [],
    clsMengban: 'greyMengban', //蒙板的样式
	mengbanOpacity: 0.7,       //蒙板的透明度
    animate: true,             //是否有动画效果
    resizeSpeed: 1,            //调整大小时特效的持续时间
	borderSize: 10,            //边框的宽度
	style: 'greyLightbox',     //lightbox的样式
	easing: 'backOut',
    labelImage: "第 ",
    labelOf: " 张，共 ",
	//组件的构造方法
    constructor: function(config) {
		config = config || {};
        Ext.apply(this, config);
        Ext.gzj.Lightbox1.superclass.constructor.call(this, config);
		this.resizeDuration = this.animate ? this.resizeSpeed : 0;  //调整大小时特效的持续时间
        this.mengbanDuration = this.animate ? 0.5 : 0;              //蒙板的打开或关闭的特效持续时间
        this.initMarkup();
        this.initEvents();
    },
	//方法：初始化组件
    initMarkup: function() {
		//创建蒙板
        var mengban = Ext.DomHelper.append(document.body, {
            id: 'lbMengban',
			cls: this.clsMengban
        }, true);
		//获取页面的大小，并将蒙板设置成与页面一样大小。
        var bodyheight = Ext.getBody().getHeight();			
        mengban.setStyle({
            height: bodyheight + 'px'
        });
		//lightbox的模板
		var lightboxTpl = [
			'<div id="lightbox">',      //通过更改greyLightbox来改变lightbox的风格
			'<div id="lbContainer">',
			 '<div id="lbLoading"></div>',
					'<a id="lbPrev" href="javascript:void(0)"></a>',
					'<a id="lbNext" href="javascript:void(0)"></a>',
					'<div id="lbContent">',
					  '<img id="lbImage"></img>',
					'</div>',
					'<div id="lbDetails">',
					  '<a id="lbClose" href="javascript:void(0)"></a>',
					  '<h1 id="lbDeailsTitle"></h1>',
					  '<span id="lbDeailsNum"></span>',					  
					  '<div class="clear"></div>',
					'</div>',
				  '</div>',
				'</div>'
        ];
        var lightboxEl = new Ext.Template(lightboxTpl);       //创建lightbox
        this.lightbox = lightboxEl.append(document.body, {}, true);
		this.lightbox.addClass(this.style);
		//lightbox的模板中，需要操作的元素的id
        var ids = 'lightbox lbContainer lbLoading lbPrev lbNext lbContent lbImage '+
			      'lbDetails lbDeailsTitle lbDeailsNum lbClose lbMengban';
	    var els1 = {};
        Ext.each(ids.split(' '), function(id){
            els1[id] = Ext.get(id);
        });
		this.els = els1;
        this.els.lbMengban.hide();
        this.els.lightbox.hide();
		//设置lightbox容器的大小
        var size = (this.animate ? 250 : 1) + 'px';
        this.els.lbContainer.setStyle({
            width: size,
            height: size
        });
    },
	//方法：初始化事件
    initEvents: function() {
        this.els.lbMengban.on('click', function(ev) {      //当模板被点击时，关闭lightbox的事件
                ev.preventDefault();
                this.close();
            }, this);
			this.els.lightbox.on('click', function(ev) {       //当lightbox周围被点击时，关闭lightbox的事件
                ev.preventDefault();
				if(ev.getTarget().id == 'lightbox') {
                    this.close();
                }
            }, this);
            this.els.lbClose.on('click', function(ev) {         //当关闭按钮被点击时，关闭lightbox的事件
                ev.preventDefault();
                this.close();
            }, this);
            this.els.lbPrev.on('click', function(ev) {          //前一个事件
                ev.preventDefault();
                this.setImage(this.activeImage - 1);
            }, this);
            this.els.lbNext.on('click', function(ev) {           //下一个事件
                ev.preventDefault();
                this.setImage(this.activeImage + 1);
            }, this);
        },
		//给要加入lightbox的元素注册响应事件
        register: function(sel, x) {
            if(this.selectors.indexOf(sel) === -1) {
                this.selectors.push(sel);
                Ext.fly(document).on('click', function(ev){
                    var target = ev.getTarget(sel);
                    if (target) {
                        ev.preventDefault();
						target.blur();
                        this.open(target, sel, x);
                    }
                }, this);
            }
        },
		//方法：打开lightbox
        open: function(image, sel, x) {
            this.els.lbMengban.fadeIn({
                duration: this.mengbanDuration,
				endOpacity: this.mengbanOpacity,
                callback: function() {
                    this.images = [];                    //清空图片数组                    
                    var setItems = Ext.query(sel);  //查询选择符为sel的元素					
					for(var i=0; i<setItems.length; i++){
						if(i==x)continue;
						if(setItems[i].src) {
							this.images.push([setItems[i].src, setItems[i].title]);
						}else if(setItems[i].href) {
							this.images.push([setItems[i].href, setItems[i].title]);
						}
					}
					//计算当前图片在图片组中的位
					var index = 0;
					if(image.href){
						while (this.images[index][0] != image.href || this.images[index][1] != image.title ) {
							index++;
						}
					}else if(image.src){
						while (this.images[index][0] != image.src || images[index][1] != image.title ) {
							index++;
						}
					}
                    //根据当前窗口滚动的位置，设置lightbox的位置
                    var pageScroll = Ext.fly(document).getScroll();
                    var lightboxTop = pageScroll.top + (Ext.lib.Dom.getViewportHeight() / 10);
                    var lightboxLeft = pageScroll.left;
                    this.els.lightbox.setStyle({
                        top: lightboxTop + 'px',
                        left: lightboxLeft + 'px'
                    }).show();
                    this.setImage(index);      //加载图片                                     
                },
                scope: this
            });
        },
		//方法：加载图片
        setImage: function(index){
            this.activeImage = index;
            if (this.animate) {
                this.els.lbLoading.show();         //显示加载图标
            }
            this.els.lbContent.hide();             //隐藏lightbox的内容（图片）
            this.els.lbPrev.hide();                //隐藏前一个按钮
            this.els.lbNext.hide();                //隐藏后一个按钮
			this.els.lbDetails.hide();             //隐藏图片下面的数据栏
            var preload = new Image();
            preload.onload = (function(){
                this.els.lbImage.dom.src = this.images[this.activeImage][0];     //更换图片的地址
                this.resize(preload.width, preload.height);       //自动调整容器大小
            }).createDelegate(this);
			preload.src = this.images[this.activeImage][0];
        },
		//方法：调整lightbox容器的大小
        resize: function(w, h){
			//当前的宽度和高度
            var wCur = this.els.lbContainer.getWidth();
            var hCur = this.els.lbContainer.getHeight();
			//新的宽度和高度
            var wNew = (w + this.borderSize * 2);
            var hNew = (h + this.borderSize * 2);
			//宽度的差距和高度的差距
            var wDiff = wCur - wNew;
            var hDiff = hCur - hNew;
            if (hDiff != 0 || wDiff != 0) {
                this.els.lbContainer.shift({					
					width: wNew,
					height: hNew,
					easing: this.easing,
					duration: this.resizeDuration
				});
            }
            var timeout = 0;
            if ((hDiff == 0) && (wDiff == 0)) {
                timeout = (Ext.isIE) ? 250 : 100;
            }
            (function(){               //这个匿名方法的作用是：延迟一段时间，直到容器的大小调整完毕后，才显示内容（图片）和前后按钮
				this.els.lbPrev.setHeight(h + 'px');
                this.els.lbNext.setHeight(h + 'px');
				this.els.lbDetails.setWidth(w + 'px');
				this.showImage();
            }).createDelegate(this).defer((this.resizeDuration*1000) + timeout);
        },
		//方法：显示图片
        showImage: function(){
            this.els.lbLoading.hide();        //隐藏加载图标
            this.els.lbContent.fadeIn({       //显示lightbox的内容（图片）
                duration: this.resizeDuration,
                scope: this,
                callback: function(){
                    this.updateDetails();
                }
            });
        },
		//方法：更新数据
        updateDetails: function(){          
            this.els.lbDeailsTitle.update(this.images[this.activeImage][1]);
            if (this.images.length > 1) {
                this.els.lbDeailsNum.update(this.labelImage + (this.activeImage + 1) + this.labelOf + this.images.length + ' 张');
            }else {
				this.els.lbDeailsNum.update('');
			}
			this.els.lbContainer.setHeight('auto');
            this.els.lbDetails.syncFx().slideIn('t', {
				duration: this.resizeDuration/2,
				scope: this,
				callback: function() {
					if(this.activeImage > 0){
						this.els.lbPrev.show();
					}
					if(this.activeImage < this.images.length-1){
						this.els.lbNext.show();
					}
				}
			})
        },
		//方法：关闭lightbox
        close: function(){
            this.els.lightbox.setStyle({
				display:'none'
			});
			var elss = this.els;
            this.els.lbMengban.fadeOut({
                duration: this.mengbanDuration,
				callback: function(){
					elss.lbMengban.setOpacity(0);
				}
            });
			this.els.lbMengban.setOpacity(0);
    }
});