var TransLayerClass = new Class({
	initialize: function(popupID, zIndex) {
		if (!zIndex || zIndex == null) {
			var zIndex = 1000;
		}
		
		// disable select box (fix IE)
		this.iframe = new Element('iframe');
		this.iframe.setStyles({
			filter:'alpha(opacity=0)',
			opacity: 0,
			position: 'absolute',
			border: "none",
			"z-index": zIndex,
			top: 0,
			left: 0
		});
		
		// create transparent layer , include color (if needed)
		this.overlayDiv = new Element('div');
		this.overlayDiv.setStyles({
			filter:'alpha(opacity=0)',
			opacity: 0,
			"background-color": '#000000',
			position: 'absolute',
			border: "none",
			"z-index": zIndex,
			top: 0,
			left: 0
		});
		
		// change some style values of popup, make it movable
		this.popup = $(popupID);
		this.popup.setStyles({
			position: 'absolute',
			"z-index": zIndex
			//top: -1000
		});
	},
	
	changeSize: function() {
		var width = window.getWidth();
		var height = window.getScrollHeight();
		
		if (height < document.body.clientHeight) {
			height = document.body.clientHeight;
		}
		
		this.iframe.setStyles({
			width: width,
			height: height
		});
		
		this.overlayDiv.setStyles({
			width: width,
			height: height
		});		
		
		var divWidth, divHeight;
		divWidth = parseFloat(this.popup.getStyle('width'));
		divHeight = parseFloat(this.popup.getStyle('height'));
		
		this.popup.setStyles({
			left: (window.getWidth() - divWidth) / 2 + window.getScrollLeft(),
			top:  window.getScrollTop() + (window.getHeight() - divHeight)/2
		});
	},
	
	hide: function() {
		window.transLayer = null;
		window.removeEvents('resize');
		window.removeEvents('scroll');
		
		try {
			this.iframe.remove();
			this.overlayDiv.remove();
			//this.popup.setStyle('top', -1000);
		} catch (e) {};
	},
	
	show: function() {
		window.transLayer = this;
		window.addEvent('resize', function(){if(window.transLayer) window.transLayer.changeSize()});
		window.addEvent('scroll', function(){if(window.transLayer) window.transLayer.changeSize()});
		
		var body = $$('body')[0];
		this.iframe.injectInside(body);
		this.overlayDiv.injectInside(body);
		this.popup.injectInside(body);
		$$('img', this.popup).each(function(el, index) {
			el.setStyles({
				width: "",
				height: ""
			});
		});
		
		this.changeSize();
	}
});