//get the page scroll
var getPageScroll = function(){
	var sx = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
	var sy = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
	return new Array(sx,sy);
	}
//get the current viewport size
var getViewPortSize = function(){
	var pw = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
	var ph = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	return new Array(pw,ph);
	}
//get the page size:
var getPageSize = function(){
	var vp = getViewPortSize();
	var pw = document.body.offsetWidth;
	var ph = document.body.offsetHeight;
	//assign viewport size if body size smaller then viewport
	if( vp[0]>pw )
		pw = vp[0];
	if( vp[1]>ph )
		ph = vp[1];
	return new Array(pw,ph);
	}
var adjustPosition = function(){
	var pageSize = getViewPortSize();
	var pageScroll = getPageScroll();
	var h = $('jProgress').offsetHeight;
	var w = $('jProgress').offsetWidth;
	var cX = Math.round(pageSize[0]/2)-Math.round(w/2) + pageScroll[0];
	var cY = Math.round(pageSize[1]/2)-Math.round(h/2) + pageScroll[1];
	//$('jOverlay').setStyle({left:pageScroll[0]+'px',top:pageScroll[1]+'px'});
	$('jProgress').setStyle({left:cX+'px',top:cY+'px'});
	}
//save previous events and restore after
var docOnKeyDown;
var winOnScroll;
var fadeTimeout;
var fadeFunction = function(){
	clearInterval( fadeTimeout );
	if( $('jOverlay') ){ 
		new Effect.Fade('jOverlay', { duration: 0.5});
		}
	if( $('jProgress') ){
		//$('jProgress').remove();
		new Effect.BlindUp('jProgress', { duration: 0.5 });
		}
	
	//resoter previous settings
	window.onscroll = winOnScroll;
	}
//remove the overlay
var removeOverlay = function(){
	fadeTimeout = setInterval(fadeFunction, 1000 );
	}
var createOverlay = function(title, msg){
	if ($('jOverlay')){ 
		$('jOverlay').remove();
		}
	if( $('jProgress') ){
		$('jProgress').remove();
		}
	var objBody = document.getElementsByTagName("body").item(0);
	var objOverlay = document.createElement("div");
	objOverlay.setAttribute('id','jOverlay');
	objBody.appendChild(objOverlay);
	var ps = getPageSize();
	$('jOverlay').setStyle({position:'absolute',zIndex:84,width:ps[0]+'px',height:ps[1]+'px',backgroundColor:'#000',display:'none',left:0,top:0});
	var jContainer = document.createElement("div");
	jContainer.setAttribute('id','jProgress');
	objBody.appendChild(jContainer);
	//set the msg of the center container
	if( typeof(msg) == 'undefined' )
		msg = '';
	$('jProgress').innerHTML = '<div class="popupBox"><a onclick="fadeFunction(); return false;" title="close"><b>close</b></a><h3>'+title+'</h3><p>'+msg+'</p></div>';
	//new Draggable('jProgress',{ghosting:false});
	$('jProgress').setStyle({position:'absolute',height:'auto',textAlign:'left',color:'#999',zIndex:85});
	adjustPosition();
	//set event handler:
	//$('jOverlay').onclick = removeOverlay;
	//docOnKeyDown = document.onkeydown;
	//document.onkeydown = removeOverlay;
	winOnScroll = window.onscroll;
	window.onscroll = adjustPosition;
	new Effect.Appear('jOverlay', { duration: 0.5, from: 0.0, to: 0.6 });
}