Ext.ux.Lightbox.register('a[rel^=lightboxSingle]',true);
Ext.ux.Lightbox.register('a[rel^=lightbox]',true);


iframeBox = {
	shim : null,
	overlay : null,
	iframeBox : null,
	iframe : null,
	closeBtn:null,
	outerBox : null,
	width : 500,
	height: 400,
	getViewSize: function() {
		return [Ext.lib.Dom.getViewWidth(), Ext.lib.Dom.getViewHeight()];
	},
	setViewSize: function(){
		var viewSize = this.getViewSize();
		this.overlay.setStyle({
			width: viewSize[0] + 'px',
			height: viewSize[1] + 'px'
		});
		this.shim.setStyle({
			width: viewSize[0] + 'px',
			height: viewSize[1] + 'px'
		}).show();
	},
	create : function() {
		this.shim = Ext.get('ux-lightbox-shim');
		this.overlay = Ext.get('ux-lightbox-overlay');
		if(!this.iframeBox) {
			this.iframeBox = Ext.DomHelper.append(document.body, { id: 'iFrameBox' }, true);
			this.iframe = Ext.DomHelper.append(this.iframeBox,{tag: 'iframe',id: 'popupIframe'},true);
			this.closeBtn = Ext.DomHelper.append(this.iframeBox,{
								tag: 'a',
								id :'frameboxClose',
								href :'javascript:iframeBox.close();',
								onclick:'iframeBox.close();',
								html : 'Close'
							},true);
		this.iframeBox.show();
		this.iframeBox.hide();
		this.iframe.show();
		this.iframe.hide();
		this.closeBtn.hide();
		}
		
	},
	close : function () {
		this.overlay.fadeOut({
			duration: 1
		});
		this.shim.hide();
		this.iframeBox.hide();
		this.iframe.hide();
		this.closeBtn.hide();
		
	},
	show : function(url,width1,height1) {
		this.width = Number(width1);
		this.height = Number(height1);
		this.setViewSize();
		this.overlay.fadeIn({
			duration: 0.45,
			endOpacity: 0.7,
			callback: function(width1,height) {
				document.getElementById('popupIframe').src= url;
				// calculate top and left offset for the lightbox
				var pageScroll = Ext.fly(document).getScroll();
				
				var lightboxTop = (Ext.lib.Dom.getViewportHeight() / 2) - (this.height / 2);
				var lightboxLeft = (Ext.lib.Dom.getViewportWidth() / 2) - (this.width / 2);
				this.iframeBox.setStyle({
					width: this.width + 'px',
					height: (this.height+30) +'px',
					top: lightboxTop + 'px',
					left: lightboxLeft + 'px'
				}).show();
				this.iframe.setStyle({
					'width': this.width + 'px',
					'height': this.height +'px'
				}).show();
				this.closeBtn.show();
				
			},
			scope: this
		});
	}
}

Ext.onReady(iframeBox.create,iframeBox);