Ext.ns('Ext.gzj');
Ext.gzj.Lightbox = (function(){
    var els = {},
        images = [],
        activeImage,
        initialized = false,
        selectors = [];
    return {
        clsMengban: 'greyMengban', //蒙板的样式
		mengbanOpacity: 0.7,       //蒙板的透明度
        animate: true,             //是否有动画效果
        resizeSpeed: 1,            //调整大小时特效的持续时间
		borderSize: 10,            //边框的宽度
		style: 'greyLightbox',     //lightbox的样式
		easing: 'backOut',
        labelImage: "第 ",
        labelOf: " 张，共 ",
		//全局初始
        init: function() {
            this.resizeDuration = this.animate ? this.resizeSpeed : 0;  //调整大小时特效的持续时间
            this.mengbanDuration = this.animate ? 0.5 : 0;              //蒙板的打开或关闭的特效持续时间
            if(!initialized) {
                Ext.apply(this, Ext.util.Observable.prototype);
                Ext.util.Observable.constructor.call(this);
                this.initMarkup();
                this.initEvents();
                initialized = true;
            }
        },
		//方法：初始化组件
        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';
            Ext.each(ids.split(' '), function(id){
                els[id] = Ext.get(id);
            });
            els.lbMengban.hide();
            els.lightbox.hide();
			//设置lightbox容器的大小
            var size = (this.animate ? 250 : 1) + 'px';
            els.lbContainer.setStyle({
                width: size,
                height: size
            });
        },
		//方法：初始化事件
        initEvents: function() {
            els.lbMengban.on('click', function(ev) {      //当模板被点击时，关闭lightbox的事件
                ev.preventDefault();
                this.close();
            }, this);
			els.lightbox.on('click', function(ev) {       //当lightbox周围被点击时，关闭lightbox的事件
                ev.preventDefault();
				if(ev.getTarget().id == 'lightbox') {
                    this.close();
                }
            }, this);
            els.lbClose.on('click', function(ev) {         //当关闭按钮被点击时，关闭lightbox的事件
                ev.preventDefault();
                this.close();
            }, this);
            els.lbPrev.on('click', function(ev) {          //前一个事件
                ev.preventDefault();
                this.setImage(activeImage - 1);
            }, this);
            els.lbNext.on('click', function(ev) {           //下一个事件
                ev.preventDefault();
                this.setImage(activeImage + 1);
            }, this);
        },
		//给要加入lightbox的元素注册响应事件
        register: function(sel, x) {
            if(selectors.indexOf(sel) === -1) {
                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) {
            els.lbMengban.fadeIn({
                duration: this.mengbanDuration,
				endOpacity: this.mengbanOpacity,
                callback: function() {
                    images = [];                    //清空图片数组                    
                    var setItems = Ext.query(sel);  //查询选择符为sel的元素					
					for(var i=0; i<setItems.length; i++){
						if(i==x)continue;
						if(setItems[i].src) {
							images.push([setItems[i].src, setItems[i].title]);
						}else if(setItems[i].href) {
							images.push([setItems[i].href, setItems[i].title]);
						}
					}
					//计算当前图片在图片组中的位
					var index = 0;
					if(image.href){
						while (images[index][0] != image.href || images[index][1] != image.title ) {
							index++;
						}
					}else if(image.src){
						while (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;
                    els.lightbox.setStyle({
                        top: lightboxTop + 'px',
                        left: lightboxLeft + 'px'
                    }).show();
                    this.setImage(index);      //加载图片                                     
                },
                scope: this
            });
        },
		//方法：加载图片
        setImage: function(index){
            activeImage = index;
            if (this.animate) {
                els.lbLoading.show();         //显示加载图标
            }
            els.lbContent.hide();             //隐藏lightbox的内容（图片）
            els.lbPrev.hide();                //隐藏前一个按钮
            els.lbNext.hide();                //隐藏后一个按钮
			els.lbDetails.hide();             //隐藏图片下面的数据栏
            var preload = new Image();
            preload.onload = (function(){
                els.lbImage.dom.src = images[activeImage][0];     //更换图片的地址
                this.resize(preload.width, preload.height);       //自动调整容器大小
            }).createDelegate(this);
			preload.src = images[activeImage][0];
        },
		//方法：调整lightbox容器的大小
        resize: function(w, h){
			//当前的宽度和高度
            var wCur = els.lbContainer.getWidth();
            var hCur = 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) {
                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(){               //这个匿名方法的作用是：延迟一段时间，直到容器的大小调整完毕后，才显示内容（图片）和前后按钮
				els.lbPrev.setHeight(h + 'px');
                els.lbNext.setHeight(h + 'px');
				els.lbDetails.setWidth(w + 'px');
				this.showImage();
            }).createDelegate(this).defer((this.resizeDuration*1000) + timeout);
        },
		//方法：显示图片
        showImage: function(){
            els.lbLoading.hide();        //隐藏加载图标
            els.lbContent.fadeIn({       //显示lightbox的内容（图片）
                duration: this.resizeDuration,
                scope: this,
                callback: function(){
                    this.updateDetails();
                }
            });
        },
		//方法：更新数据
        updateDetails: function(){          
            els.lbDeailsTitle.update(images[activeImage][1]);
            if (images.length > 1) {
                els.lbDeailsNum.update(this.labelImage + (activeImage + 1) + this.labelOf + images.length + ' 张');
            }else {
				els.lbDeailsNum.update('');
			}
			els.lbContainer.setHeight('auto');
            els.lbDetails.syncFx().slideIn('t', {
				duration: this.resizeDuration/2,
				scope: this,
				callback: function() {
					if(activeImage > 0){
						els.lbPrev.show();
					}
					if(activeImage < images.length-1){
						els.lbNext.show();
					}
				}
			})
        },
		//方法：关闭lightbox
        close: function(){
            els.lightbox.setStyle({
				display:'none'
			});
            els.lbMengban.fadeOut({
                duration: this.mengbanDuration,
				callback: function(){
					els.lbMengban.setOpacity(0);
				}
            });
			els.lbMengban.setOpacity(0);
        }
    }
})();

Ext.onReady(Ext.gzj.Lightbox.init, Ext.gzj.Lightbox);