function getPageSize(){
		
		var xScroll, yScroll;
		
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = document.body.scrollWidth;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
		
		var windowWidth, windowHeight;
		if (self.innerHeight) {	// all except Explorer
			windowWidth = self.innerWidth;
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}	
		
		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}

		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){	
			pageWidth = windowWidth;
		} else {
			pageWidth = xScroll;
		}

		pageWidth = xScroll;
		pageHeight = yScroll;

		arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
		return arrayPageSize;
	}


	function showOverlay() {
	    var overlay = $('e24Overlay');
		var sz = getPageSize(); 
		overlay.setStyles({width: sz[0], height: sz[1] + 'px'});
		
		overlay.setStyles({display:'block', opacity:0.0});
		overlayfx = new Fx.Style(overlay, 'opacity', {duration:800});
		overlayfx.start(0, 0.8);	
	}

	function markLayer(layerid, left, top, width, height, text, color, zindex) {
		var layer = $(layerid);
		var sz = layer.getCoordinates();
		var done = false;
		if (!color) color = '#f6f30c';
		var mark = new Element('div', {'id': 'e24-mark', 'styles': {'position': 'absolute',
	                                                                                  'left':sz.left + left + 'px','top':sz.top + top + 'px',
																					  'width': (width?width:sz.width) + 'px', 'height': (height?height:sz.height) + 'px', 
																					  'z-index': zindex?zindex:5, 
																					  'background-color': color?color:'#f6f30c', 
																					  'text-aling': 'center', 
																					  'display': 'block', 
																					  //'border': 'solid 1px #000',
																					  'visibility': 'hidden'}}).injectInside(document.body);
        if (text) mark.setHTML(text);																					  
		
		var markfx = new Fx.Style(mark, 'opacity', {duration:1300});
		markfx.addEvent('onComplete', function() {
			if (!done) {
			    done = true;
				markfx.start(0.8, 0);
			}
			else {
				mark.remove();
			}
		});
		markfx.start(0, 0.8);
	}
	
	function hideOverlay() {
	    overlay = $('e24Overlay');
		overlay.setStyles({display:'block', opacity:0.0});
		overlayfx = new Fx.Style(overlay, 'opacity', {duration:800});
		overlayfx.start(0.8, 0);	
	}
	
	function markRegion(layerid, left, top, width, height, color) {
		var layer = $(layerid);
		var done = false;
		if (!color) color = '#f6f30c';
		var mark = new Element('div', {'id': 'e24-mark', 'styles': {'position': 'absolute',
	                                                                                  'left':left + 'px','top':top + 'px',
																					  'width': width, 'height': height, 
																					  'z-index': 5, 
																					  'background-color': color, 
																					  'display': 'block', 
																					  //'border': 'solid 1px #000',
																					  'visibility': 'hidden'}}).injectInside(layer);
		
		var markfx = new Fx.Style(mark, 'opacity', {duration:1300});
		markfx.addEvent('onComplete', function() {
			if (!done) {
			    done = true;
				markfx.start(0.8, 0);
			}
			else {
				mark.remove();
			}
		});
		markfx.start(0, 0.8);
	}
	
	function showLayer(layerid, opacity) {
		var layer = $(layerid);
		layer.setStyles({display:'block', opacity:0.0});
		layerfx = new Fx.Style(layer, 'opacity', {duration:800});
		layerfx.start(0, opacity != undefined?opacity:1.0);
	}
	
	function hideLayer(layerid, opacity, wait) {
	    var layer = $(layerid);
		if (layer.getStyle('display') != 'none') {
			layerfx = new Fx.Style(layer, 'opacity', {duration:800});
			if (wait == undefined) {
				layerfx.start(1, opacity != undefined?opacity:0);
			}
			else {
				(function() {layerfx.start(1, opacity != undefined?opacity:0);}).delay(wait);		
			}
		}	
		$(layerid).setStyles({display:'none'});
	}